thingsboard/ui-ngx/src/app/modules/home/pages/profile/authentication-dialog/totp-auth-dialog.component.html

<!--

    Copyright © 2016-2022 The Thingsboard Authors

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<mat-toolbar fxLayout="row" color="primary">
  <h2>Enable authenticator app</h2>
  <span fxFlex></span>
  <button mat-icon-button
          (click)="closeDialog()"
          type="button">
    <mat-icon class="material-icons">close</mat-icon>
  </button>
</mat-toolbar>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<div mat-dialog-content style="padding: 0">
  <mat-stepper labelPosition="bottom" linear #stepper>
    <ng-template matStepperIcon="edit">
      <mat-icon>done</mat-icon>
    </ng-template>
    <mat-step>
      <ng-template matStepLabel>Get app</ng-template>
      <div>
        <p class="mat-body-1">You'll need to use a verification app such as Google Authenticator, Authy, or Duo. Install from your app store</p>
        <div fxLayout="row" fxLayoutAlign="end center">
          <button mat-button
                  type="button"
                  [mat-dialog-close]="false">
            {{ 'action.cancel' | translate }}
          </button>
          <button mat-raised-button
                  type="button"
                  color="primary"
                  matStepperNext>
            Next
          </button>
        </div>
      </div>
    </mat-step>
    <mat-step [stepControl]="totpConfigForm">
      <ng-template matStepLabel>Authentication verification</ng-template>
      <form [formGroup]="totpConfigForm" style="display: block">
        <p class="mat-body-strong">1. Scan this QR code with your verification app</p>
        <p class="mat-body" style="margin-bottom: 8px">Once your app reads the QR code, you'll get a 6-digit code.</p>
        <canvas fxFlex #canvas [ngStyle]="{display: totpAuthURL ? 'block' : 'none'}"></canvas>
        <p class="mat-body-strong">2. Enter the 6-digit code here</p>
        <p class="mat-body" style="max-width: 480px;">Enter the code from the app below. Once connected, we'll remember your phone so you can use it each time you log in.</p>
        <mat-form-field class="mat-block" appearance="fill" style="max-width: 200px;">
          <mat-label>6-digit code</mat-label>
          <input matInput formControlName="verificationCode" required maxlength="6" type="text" pattern="\d*">
        </mat-form-field>
        <div fxLayout="row" fxLayoutAlign="end center">
          <button mat-button
                  type="button"
                  [mat-dialog-close]="false">
            {{ 'action.cancel' | translate }}
          </button>
          <button mat-raised-button
                  type="button"
                  color="primary"
                  [disabled]="(isLoading$ | async) || totpConfigForm.invalid"
                  (click)="onSaveConfig()">
            Next
          </button>
        </div>
      </form>
    </mat-step>
    <mat-step>
      <ng-template matStepLabel matStepperIcon="done">Two-factor authentication activated</ng-template>
      <div>
        <h2 class="mat-h2">Success</h2>
        <p class="mat-body" style="max-width: 480px;">The next time you login from an unrecognized browser or device, you will need to provide a two-factor authentication code.</p>
        <div fxLayout="row" fxLayoutAlign="end center">
          <button mat-button
                  type="button"
                  [mat-dialog-close]="true">
            Done
          </button>
        </div>
      </div>
    </mat-step>
  </mat-stepper>
</div>