From 0e32206bd465f0f19a2da8488fcd4c15b2e0f9ed Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 19 May 2022 15:04:15 +0300
Subject: [PATCH] UI: Refactoring

---
 .../two-factor-auth-settings.component.html   | 141 +++++++++---------
 .../two-factor-auth-settings.component.scss   |   5 -
 .../two-factor-auth-settings.component.ts     |   4 +-
 .../email-auth-dialog.component.html          |  10 +-
 .../sms-auth-dialog.component.html            |   7 +-
 .../totp-auth-dialog.component.html           |   5 +-
 .../two-factor-auth-login.component.html      |   4 +-
 .../assets/locale/locale.constant-en_US.json  |   4 +-
 8 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
index 04cfd2c528..b5a06a6669 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
@@ -31,6 +31,75 @@
       <form [formGroup]="twoFaFormGroup" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
           <ng-container>
+            <fieldset class="fields-group" formArrayName="providers">
+              <legend class="group-title" translate>admin.2fa.available-providers</legend>
+              <ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
+                <mat-expansion-panel class="provider" [formGroupName]="i">
+                  <mat-expansion-panel-header>
+                    <mat-panel-title fxLayoutAlign="start center">
+                      <mat-slide-toggle
+                        (click)="toggleProviders($event, i)"
+                        formControlName="enable">
+                      </mat-slide-toggle>
+                      {{ provider.value.providerType }}
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
+
+                  <ng-template matExpansionPanelContent>
+                    <ng-container [ngSwitch]="provider.get('providerType').value">
+                      <ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
+                        <mat-form-field fxFlex class="mat-block">
+                          <mat-label translate>admin.2fa.issuer-name</mat-label>
+                          <input matInput formControlName="issuerName" required>
+                          <mat-error *ngIf="provider.get('issuerName').hasError('required')">
+                            {{ "admin.2fa.issuer-name-required" | translate }}
+                          </mat-error>
+                        </mat-form-field>
+                      </ng-container>
+                      <div *ngSwitchCase="twoFactorAuthProviderType.SMS"
+                           fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
+                        <mat-form-field fxFlex class="mat-block">
+                          <mat-label translate>admin.2fa.verification-message-template</mat-label>
+                          <input matInput formControlName="smsVerificationMessageTemplate" required>
+                          <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
+                            {{ "admin.2fa.verification-message-template-required" | translate }}
+                          </mat-error>
+                          <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('pattern')">
+                            {{ "admin.2fa.verification-message-template-pattern" | translate }}
+                          </mat-error>
+                        </mat-form-field>
+
+                        <mat-form-field fxFlex class="mat-block">
+                          <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
+                          <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
+                          <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
+                            {{ "admin.2fa.verification-code-lifetime-required" | translate }}
+                          </mat-error>
+                          <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('min') ||
+                                            provider.get('verificationCodeLifetime').hasError('pattern')">
+                            {{ "admin.2fa.verification-code-lifetime-pattern" | translate }}
+                          </mat-error>
+                        </mat-form-field>
+                      </div>
+                      <div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
+                        <mat-form-field fxFlex class="mat-block">
+                          <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
+                          <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
+                          <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
+                            {{ "admin.2fa.verification-code-lifetime-required" | translate }}
+                          </mat-error>
+                          <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('min') ||
+                                            provider.get('verificationCodeLifetime').hasError('pattern')">
+                            {{ "admin.2fa.verification-code-lifetime-pattern" | translate }}
+                          </mat-error>
+                        </mat-form-field>
+                      </div>
+                    </ng-container>
+                  </ng-template>
+                </mat-expansion-panel>
+                <mat-divider *ngIf="!$last"></mat-divider>
+              </ng-container>
+            </fieldset>
             <fieldset class="fields-group">
               <legend class="group-title" translate>admin.2fa.verification-limitations</legend>
               <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
@@ -99,8 +168,7 @@
               <mat-expansion-panel class="provider">
                 <mat-expansion-panel-header>
                   <mat-panel-title fxLayoutAlign="start center">
-                    <mat-slide-toggle class="rate-limit-toggle"
-                                      (click)="toggleExtensionPanel($event, 1, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
+                    <mat-slide-toggle (click)="toggleExtensionPanel($event, 1, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
                                       formControlName="verificationCodeCheckRateLimitEnable">
                     </mat-slide-toggle>
                     {{ 'admin.2fa.verification-code-check-rate-limit' | translate }}
@@ -134,75 +202,6 @@
                 </ng-template>
               </mat-expansion-panel>
             </fieldset>
-            <fieldset class="fields-group" formArrayName="providers">
-              <legend class="group-title" translate>admin.2fa.available-providers</legend>
-              <ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
-                <mat-expansion-panel class="provider" [formGroupName]="i">
-                  <mat-expansion-panel-header>
-                    <mat-panel-title fxLayoutAlign="start center">
-                      <mat-slide-toggle
-                        (click)="toggleProviders($event, i)"
-                        formControlName="enable">
-                      </mat-slide-toggle>
-                      {{ provider.value.providerType }}
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>
-
-                  <ng-template matExpansionPanelContent>
-                    <ng-container [ngSwitch]="provider.get('providerType').value">
-                      <ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
-                        <mat-form-field fxFlex class="mat-block">
-                          <mat-label translate>admin.2fa.issuer-name</mat-label>
-                          <input matInput formControlName="issuerName" required>
-                          <mat-error *ngIf="provider.get('issuerName').hasError('required')">
-                            {{ "admin.2fa.issuer-name-required" | translate }}
-                          </mat-error>
-                        </mat-form-field>
-                      </ng-container>
-                      <div *ngSwitchCase="twoFactorAuthProviderType.SMS"
-                           fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                        <mat-form-field fxFlex class="mat-block">
-                          <mat-label translate>admin.2fa.verification-message-template</mat-label>
-                          <input matInput formControlName="smsVerificationMessageTemplate" required>
-                          <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
-                            {{ "admin.2fa.verification-message-template-required" | translate }}
-                          </mat-error>
-                          <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('pattern')">
-                            {{ "admin.2fa.verification-message-template-pattern" | translate }}
-                          </mat-error>
-                        </mat-form-field>
-
-                        <mat-form-field fxFlex class="mat-block">
-                          <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
-                          <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
-                          <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
-                            {{ "admin.2fa.verification-code-lifetime-required" | translate }}
-                          </mat-error>
-                          <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('min') ||
-                                            provider.get('verificationCodeLifetime').hasError('pattern')">
-                            {{ "admin.2fa.verification-code-lifetime-pattern" | translate }}
-                          </mat-error>
-                        </mat-form-field>
-                      </div>
-                      <div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
-                        <mat-form-field fxFlex class="mat-block">
-                          <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
-                          <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
-                          <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
-                            {{ "admin.2fa.verification-code-lifetime-required" | translate }}
-                          </mat-error>
-                          <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('min') ||
-                                            provider.get('verificationCodeLifetime').hasError('pattern')">
-                            {{ "admin.2fa.verification-code-lifetime-pattern" | translate }}
-                          </mat-error>
-                        </mat-form-field>
-                      </div>
-                    </ng-container>
-                  </ng-template>
-                </mat-expansion-panel>
-                <mat-divider *ngIf="!$last"></mat-divider>
-              </ng-container>
-            </fieldset>
             <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
               <button mat-button mat-raised-button color="primary"
                       [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
index 6a716e6c47..8cef8aaf8d 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.scss
@@ -36,11 +36,6 @@
     &:last-of-type {
       margin-bottom: 24px;
     }
-
-    .rate-limit-toggle {
-      display: block;
-      margin-bottom: 8px;
-    }
   }
 
   .mat-expansion-panel {
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
index c46cb202eb..18ac46c94d 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.ts
@@ -203,9 +203,9 @@ export class TwoFactorAuthSettingsComponent extends PageComponent implements OnI
         formControlConfig.issuerName = [{value: 'ThingsBoard', disabled: true}, Validators.required];
         break;
       case TwoFactorAuthProviderType.SMS:
-        formControlConfig.smsVerificationMessageTemplate = [{value: 'Verification code: ${verificationCode}', disabled: true}, [
+        formControlConfig.smsVerificationMessageTemplate = [{value: 'Verification code: ${сode}', disabled: true}, [
           Validators.required,
-          Validators.pattern(/\${verificationCode}/)
+          Validators.pattern(/\${сode}/)
         ]];
         formControlConfig.verificationCodeLifetime = [{value: 120, disabled: true}, [
           Validators.required,
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
index 75211537d4..39a46340d9 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
@@ -36,10 +36,11 @@
       <ng-template matStepLabel>{{ 'security.2fa.dialog.email-step-label' | translate }}</ng-template>
       <form [formGroup]="emailConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.email-step-description</p>
-        <div fxLayout="row" fxLayoutAlign="space-between center">
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
           <mat-form-field fxFlex class="mat-block input-container" hideRequiredMarker floatLabel="always">
             <mat-label></mat-label>
-            <input matInput formControlName="email" required
+            <input matInput formControlName="email"
+                   type="email" required
                    placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
             <mat-error *ngIf="emailConfigForm.get('email').hasError('required')">
               {{ 'user.email-required' | translate }}
@@ -67,8 +68,9 @@
           <mat-form-field fxFlex class="mat-block code-container" hideRequiredMarker floatLabel="always">
             <mat-label></mat-label>
             <input matInput formControlName="verificationCode"
-                   maxlength="6" type="text"
-                   pattern="\d*" required
+                   maxlength="6" type="text" required
+                   inputmode="numeric" pattern="[0-9]*"
+                   autocomplete="off"
                    placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
             <mat-error *ngIf="emailVerificationForm.get('verificationCode').invalid">
               {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index f27e138a0e..49d8ee661f 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -66,12 +66,13 @@
         <p class="mat-body step-description input">
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: smsConfigForm.get('phone').value} }}
         </p>
-        <div fxLayout="row" fxLayoutAlign="space-between center">
+        <div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="8px">
           <mat-form-field fxFlex class="mat-block code-container" floatLabel="always" hideRequiredMarker>
             <mat-label></mat-label>
             <input matInput formControlName="verificationCode"
-                   maxlength="6" type="text"
-                   pattern="\d*" required
+                   maxlength="6" type="text" required
+                   inputmode="numeric" pattern="[0-9]*"
+                   autocomplete="off"
                    placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
             <mat-error *ngIf="smsVerificationForm.get('verificationCode').invalid">
               {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
index 0a2df8cf95..1a788c8ba5 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
@@ -56,8 +56,9 @@
         <mat-form-field fxFlex class="mat-block code-container" floatLabel="always" hideRequiredMarker>
           <mat-label></mat-label>
           <input matInput formControlName="verificationCode"
-                 maxlength="6" type="text"
-                 pattern="\d*" required
+                 maxlength="6" type="text" required
+                 inputmode="numeric" pattern="[0-9]*"
+                 autocomplete="off"
                  placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}">
           <mat-error *ngIf="totpConfigForm.get('verificationCode').invalid">
             {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
diff --git a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
index 3db2b8b061..8ebbe44b9d 100644
--- a/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/two-factor-auth-login.component.html
@@ -42,7 +42,9 @@
               <mat-form-field class="mat-block" fxFlex floatLabel="always" hideRequiredMarker>
                 <mat-label></mat-label>
                 <input matInput formControlName="verificationCode"
-                       required maxlength="6" type="text" pattern="\d*"
+                       required maxlength="6" type="text"
+                       inputmode="numeric" pattern="[0-9]*"
+                       autocomplete="off"
                        placeholder="{{ 'security.2fa.dialog.verification-code' | translate }}"/>
                 <mat-error *ngIf="verificationForm.get('verificationCode').invalid">
                   {{ 'security.2fa.dialog.verification-code-invalid' | translate }}
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index f16eaf4526..d307fe9779 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -338,7 +338,7 @@
             "verification-code-send-rate-limit": "Verification code send rate limit",
             "verification-message-template": "Verification message template",
             "verification-limitations": "Verification limitations",
-            "verification-message-template-pattern": "Verification message need to contains pattern: ${verificationCode}",
+            "verification-message-template-pattern": "Verification message need to contains pattern: ${code}",
             "verification-message-template-required": "Verification message template is required.",
             "within-time": "Within time (sec)",
             "within-time-pattern": "Time must be a positive integer.",
@@ -2613,7 +2613,7 @@
                 "email-description": "Use a security code sent to your email address to authenticate.",
                 "sms": "SMS",
                 "sms-description": "Use your phone to authenticate. We'll send you a security code via SMS message when you log in.",
-                "totp": "Authentication app",
+                "totp": "Authenticator app",
                 "totp-description": "Use apps like Google Authenticator, Authy, or Duo on your phone to authenticate. It will generate a security code for logging in."
             }
         }