acl-dialog.component.html

<div class="acl-dialog">
  <div *nzModalTitle>
    {{ content?.title | translate }}
  </div>

  <ng-container>
    <div [class.error-message]="content.isError">
      <nz-alert
        [nzType]="content.isError ? 'error' : 'info'"
        class="content-message"
        [nzDescription]="alertContent"
      >
        <ng-template #alertContent>
          <div>{{ content.message | translate }}</div>

          <ng-container *ngIf="content.customContent?.type === 'link'">
            <br />
            <a [href]="content.customContent.link">{{
              content.customContent.linkText | translate
            }}</a>
          </ng-container>

          <ng-container *ngIf="content.customContent?.type === 'ticket'">
            <br /><br />
            {{ 'Assignees' | translate }}: <b>{{ content.customContent.assignees }}</b> <br /><br />
            {{ 'Do not close this page' | translate }}
            <br /><br />
            <div class="loading-bar">
              <div class="loading-bar-progress"></div>
            </div>
          </ng-container>

          <ng-container *ngIf="content.customContent?.type === 'otp_code'">
            <div class="otp-code-box">
              <input
                #otpCodeInput
                [(ngModel)]="otpCode"
                (ngModelChange)="onOTPCodeInput()"
                [placeholder]="'OTP Code' | translate"
                autocomplete="one-time-code"
                inputmode="numeric"
                maxlength="16"
                nz-input
              />
              <div *ngIf="otpCodeError" class="otp-code-error">{{ otpCodeError }}</div>
            </div>
          </ng-container>
        </ng-template>
      </nz-alert>
    </div>
  </ng-container>

  <!-- Face verify capture iframe -->
  <ng-container *ngIf="code === 'face_verify_capture' && faceVerifyUrl">
    <iframe
      [src]="faceVerifyUrl"
      allow="camera"
      sandbox="allow-scripts allow-same-origin"
      style="width: 100%; height: 540px; border: none"
    >
    </iframe>
  </ng-container>

  <div *nzModalFooter class="nz-modal-footer">
    <ng-container *ngFor="let action of content.actions">
      <button
        nz-button
        [nzLoading]="code === 'otp_code_verify' && action.type === 'primary' && otpCodeSubmitting"
        [nzType]="action.type || 'default'"
        (click)="action.callback()"
      >
        {{ action.text | translate }}
      </button>
    </ng-container>
  </div>
</div>