You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
6.0 KiB
HTML
91 lines
6.0 KiB
HTML
<div fxLayout="row">
|
|
<div fxFlex="100" class="padding-gap-large">
|
|
<mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
|
|
<div fxFlex="95" fxLayoutAlign="start start" class="padding-gap-x-large"><span class="page-title">Setup Two Factor Authentication</span></div>
|
|
<button tabindex="15" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" [mat-dialog-close]="false" mat-button>X</button>
|
|
</mat-card-header>
|
|
<mat-card-content class="mt-5px">
|
|
<div fxLayout="column">
|
|
<mat-vertical-stepper [linear]="true" #stepper (selectionChange)="stepSelectionChanged($event)">
|
|
<mat-step [stepControl]="passwordFormGroup" [editable]="flgEditable">
|
|
<form [formGroup]="passwordFormGroup" fxLayout="column" fxLayoutAlign="space-between" class="my-1 pr-1">
|
|
<ng-template matStepLabel>{{passwordFormLabel}}</ng-template>
|
|
<div fxLayout="row">
|
|
<mat-form-field fxFlex="100">
|
|
<input autoFocus matInput placeholder="Password" type="password" tabindex="1" formControlName="password" required>
|
|
<mat-error *ngIf="passwordFormGroup.controls.password.errors?.required">Password is required.</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="mt-2" fxLayout="row">
|
|
<button mat-stroked-button color="primary" tabindex="3" type="button" (click)="onAuthenticate()">Confirm</button>
|
|
</div>
|
|
</form>
|
|
</mat-step>
|
|
<mat-step [stepControl]="secretFormGroup" [editable]="flgEditable" *ngIf="!showDisableStepper">
|
|
<form [formGroup]="secretFormGroup" fxLayout="column" class="my-1 pr-1">
|
|
<ng-template matStepLabel disabled="true">{{secretFormLabel}}</ng-template>
|
|
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start">
|
|
<qrcode [qrdata]="otpauth" [margin]="1" [width]="180" [errorCorrectionLevel]="'L'"></qrcode>
|
|
</div>
|
|
<div fxFlex="100" class="w-100 alert alert-info">
|
|
<fa-icon [icon]="faInfoCircle" class="mt-1 mr-1 alert-icon"></fa-icon>
|
|
<span>You can use a compatible authentication app to get an authentication code when you log in to RTL. e.g.: Google Authenticator.</span>
|
|
</div>
|
|
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">
|
|
<mat-form-field fxFlex="100">
|
|
<input autoFocus matInput placeholder="Secret Code" type="text" tabindex="4" formControlName="secret" required>
|
|
<fa-icon [icon]="faCopy" matSuffix rtlClipboard [payload]="secretFormGroup.controls.secret.value" (copied)="onCopySecret($event)"></fa-icon>
|
|
<mat-error *ngIf="secretFormGroup.controls.secret.errors?.required">Secret Code is required.</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
|
<button mat-stroked-button color="primary" tabindex="6" type="button" matStepperNext>Next</button>
|
|
</div>
|
|
</form>
|
|
</mat-step>
|
|
<mat-step [stepControl]="tokenFormGroup" *ngIf="!showDisableStepper">
|
|
<form [formGroup]="tokenFormGroup" fxLayout="column" fxLayoutAlign="start" class="my-1 pr-1">
|
|
<ng-template matStepLabel>{{tokenFormLabel}}</ng-template>
|
|
<div fxLayout="column" *ngIf="!flgValidated || !isTokenValid">
|
|
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch">
|
|
<mat-form-field fxFlex="100">
|
|
<input autoFocus matInput placeholder="Token" type="text" tabindex="7" formControlName="token" required>
|
|
<mat-error *ngIf="tokenFormGroup.controls.token.errors?.required">Token is required.</mat-error>
|
|
<mat-error *ngIf="tokenFormGroup.controls.token.errors?.notValid">Token is invalid.</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
|
<button mat-stroked-button color="primary" tabindex="8" type="button" (click)="onVerifyToken()">{{tokenFormGroup.controls.token.errors.notValid ? 'Retry' : 'Verify'}}</button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="flgValidated && isTokenValid">
|
|
<strong>Success! You are all set.</strong>
|
|
</div>
|
|
</form>
|
|
</mat-step>
|
|
<mat-step [stepControl]="disableFormGroup" *ngIf="showDisableStepper">
|
|
<form [formGroup]="disableFormGroup" fxLayout="column" fxLayoutAlign="start" class="my-1 pr-1">
|
|
<ng-template matStepLabel>{{disableFormLabel}}</ng-template>
|
|
<div fxLayout="column" *ngIf="!flgValidated || !isTokenValid">
|
|
<div fxFlex="100" class="w-100 alert alert-warn">
|
|
<fa-icon [icon]="faExclamationTriangle" class="mt-1 mr-1 alert-icon"></fa-icon>
|
|
<span>You are about to disable two-factor authentication security from RTL. Are you sure you want to turn it off?</span>
|
|
</div>
|
|
<div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
|
|
<button mat-stroked-button color="primary" tabindex="8" type="button" (click)="onVerifyToken()">Disable</button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="flgValidated && isTokenValid">
|
|
<strong>Two factor authentication removed from RTL.</strong>
|
|
</div>
|
|
</form>
|
|
</mat-step>
|
|
</mat-vertical-stepper>
|
|
<div fxLayout="row" fxFlex="100" fxLayoutAlign="end center">
|
|
<button mat-stroked-button color="primary" tabindex="12" type="button" [mat-dialog-close]="false" default>{{flgValidated && isTokenValid ? 'Close' : 'Cancel'}}</button>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</div>
|
|
</div>
|