cbsnexora/src/app/login/agreement-accept/agreement-accept.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="aga-card">
  <div class="aga-icon">
    <fa-icon icon="file-signature"></fa-icon>
  </div>

  <h2 class="aga-title">Terms &amp; Agreement</h2>
  <p class="aga-sub">
    @if (loading) {
      Loading the agreement…
    } @else if (loadErrorMessage) {
      We couldn't load the agreement.
    } @else {
      Please read the agreement below before continuing.
    }
  </p>

  @if (loading) {
    <div class="aga-loading">
      <mat-spinner diameter="32"></mat-spinner>
    </div>
  } @else if (loadErrorMessage) {
    <div class="aga-error">
      <fa-icon icon="exclamation-circle"></fa-icon>
      {{ loadErrorMessage }}
    </div>
    <button type="button" class="aga-btn aga-btn--ghost" (click)="loadAgreement()">
      <fa-icon icon="sync-alt"></fa-icon>
      <span>Try Again</span>
    </button>
  } @else {
    <div class="aga-agreement">
      <h3 class="aga-agreement__title">{{ agreementTitle }}</h3>
      <div class="aga-agreement__body">{{ agreementBody }}</div>
    </div>

    <label class="aga-check">
      <input type="checkbox" [checked]="accepted" (change)="toggleAccepted()" />
      <span>I have read and agree to the above</span>
    </label>

    @if (submitErrorMessage) {
      <div class="aga-error">
        <fa-icon icon="exclamation-circle"></fa-icon>
        {{ submitErrorMessage }}
      </div>
    }

    <button
      type="button"
      class="aga-btn aga-btn--primary"
      [disabled]="!accepted || submitting"
      (click)="acceptAndContinue()"
    >
      @if (submitting) {
        <mat-spinner diameter="20"></mat-spinner>
        <span>Submitting…</span>
      } @else {
        <fa-icon icon="check-circle"></fa-icon>
        <span>Accept &amp; Continue</span>
      }
    </button>
  }
</div>