fix(login): display authenticator field for 2FA reset password form S…

…UP-31938 (#1016)
kaltura · May 3, 2022 · d448692 · d448692
1 parent b845eb4
commit d448692
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 15 deletions.
diff --git a/src/kmc-app/components/login/password-expired-form/password-expired-form.component.html b/src/kmc-app/components/login/password-expired-form/password-expired-form.component.html
@@ -1,14 +1,14 @@
 <form class="kLoginForm"
       [formGroup]="_resetPasswordForm"
       (submit)="_resetPassword($event)">
-  <h1>{{ 'app.login.passwordExpired.title' | translate}}</h1>
+  <h1 [class.smallFont]="showAuthenticationCode">{{ 'app.login.passwordExpired.title' | translate}}</h1>
 
   <div>
     <input pInputText appPreventPasswordAutofill
            type="password" autocomplete="off"
            [placeholder]="'app.login.passwordExpired.placeholder.current' | translate"
            [formControl]="_oldPasswordField"
-           [class.has-error]="_showError(_oldPasswordField) || _oldPasswordWrong"
+           [ngClass]="{smallMargin: showAuthenticationCode, 'has-error': _showError(_oldPasswordField) || _oldPasswordWrong}"
            [kTooltip]="_getClientValidationMessage(_oldPasswordField) | translate"
            placement="right">
   </div>
@@ -18,7 +18,7 @@ <h1>{{ 'app.login.passwordExpired.title' | translate}}</h1>
            type="password" autocomplete="off"
            [placeholder]="'app.login.passwordExpired.placeholder.new' | translate"
            [formControl]="_newPasswordField"
-           [class.has-error]="_showError(_newPasswordField) || _passwordsDontMatch || _newPasswordIsOld || _passwordStructureInvalid"
+           [ngClass]="{smallMargin: showAuthenticationCode, 'has-error': _showError(_newPasswordField) || _passwordsDontMatch || _newPasswordIsOld || _passwordStructureInvalid}"
            [kTooltip]="_getClientValidationMessage(_newPasswordField) || _passwordStructureInvalidMessage | translate"
            placement="right">
   </div>
@@ -28,23 +28,30 @@ <h1>{{ 'app.login.passwordExpired.title' | translate}}</h1>
            type="password" autocomplete="off"
            [placeholder]="'app.login.passwordExpired.placeholder.confirm' | translate"
            [formControl]="_repeatPasswordField"
-           [class.has-error]="_showError(_repeatPasswordField) || _passwordsDontMatch"
+           [ngClass]="{smallMargin: showAuthenticationCode, 'has-error': _showError(_repeatPasswordField) || _passwordsDontMatch}"
            [kTooltip]="_getClientValidationMessage(_repeatPasswordField) | translate"
            placement="right">
   </div>
 
+    <div [class.kHidden]="!showAuthenticationCode">
+        <input pInputText class="kAuth" #auth autocomplete="off"
+               [placeholder]="'app.login.login.placeholder.auth' | translate"
+               [formControl]="_authenticationField"
+               [ngClass]="{smallMargin: showAuthenticationCode, 'has-error': _showError(_authenticationField), 'has-success': _showSuccess(_authenticationField)}">
+    </div>
+
   <p *ngIf="(_newPasswordField.touched || _repeatPasswordField.touched || _formSent) && _showError(_passwords)"
      class="kErrorMessage"
      [innerHTML]="_getClientValidationMessage(_passwords) | translate">
   </p>
-  <p *ngIf="errorMessage && !_passwordStructureInvalid && errorCode !== 'LOGIN_BLOCKED' && errorCode !== 'LOGIN_RETRIES_EXCEEDED'"
+  <p *ngIf="errorMessage && !_passwordStructureInvalid && _errorCode !== 'LOGIN_BLOCKED' && _errorCode !== 'LOGIN_RETRIES_EXCEEDED'"
      class="kErrorMessage" [innerHTML]="errorMessage"></p>
-    <p *ngIf="errorCode === 'LOGIN_BLOCKED'" class="kErrorMessage">
+    <p *ngIf="_errorCode === 'LOGIN_BLOCKED'" class="kErrorMessage">
         {{'app.login.error.loginBlocked.loginDenied' | translate}}
         <a *ngIf="_supportAddress" (click)="_contactSupport()">{{_supportAddress}}</a>
         {{'app.login.error.loginBlocked.toUnblockYourAccount' | translate}}
     </p>
-    <p *ngIf="errorCode === 'LOGIN_RETRIES_EXCEEDED'" class="kErrorMessage">
+    <p *ngIf="_errorCode === 'LOGIN_RETRIES_EXCEEDED'" class="kErrorMessage">
         {{'app.login.error.retriesExceeded.yourAccountHasBeenLocked' | translate}}
         <a *ngIf="_supportAddress" (click)="_contactSupport()">{{_supportAddress}}</a>
         {{'app.login.error.retriesExceeded.toUnblockYourAccount' | translate}}

diff --git a/src/kmc-app/components/login/password-expired-form/password-expired-form.component.scss b/src/kmc-app/components/login/password-expired-form/password-expired-form.component.scss
@@ -13,6 +13,10 @@
     font-weight: bold;
     line-height: 29px;
     text-align: center;
+      &.smallFont {
+          font-size: 18px;
+          line-height: 24px;
+      }
   }
 
   .kErrorMessage {
@@ -37,7 +41,9 @@
       color: $kGrayscale3;
       font-size: 16px;
       border-radius: 4px;
-
+      &.smallMargin {
+          margin-bottom: 32px;
+      }
       &:placeholder-shown {
         background-color: $kGrayscale6;
       }

diff --git a/src/kmc-app/components/login/password-expired-form/password-expired-form.component.ts b/src/kmc-app/components/login/password-expired-form/password-expired-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { EqualFieldsValidator } from 'app-shared/kmc-shell/validators/equalFields.validator';
 import { BrowserService } from 'app-shared/kmc-shell/providers';
@@ -11,19 +11,33 @@ import { serverConfig } from 'config/server';
 })
 export class PasswordExpiredFormComponent {
   @Input() errorMessage: string;
-  @Input() errorCode: string;
+  @Input()
+  set errorCode(value: string) {
+        this._errorCode = value;
+        if (value === 'MISSING_OTP') {
+            this.showAuthenticationCode = true;
+            setTimeout(() => {
+                this.authField.nativeElement.focus();
+            },100)
+        }
+  };
   @Input() inProgress = false;
   @Input() passwordRestored = false;
 
-  @Output() onResetPassword = new EventEmitter<{ password: string, newPassword: string }>();
+  @Output() onResetPassword = new EventEmitter<{ password: string, newPassword: string, otp?: string }>();
+  @ViewChild('auth', { static: true }) authField;
 
   public _formSent = false;
   public _resetPasswordForm: FormGroup;
   public _passwords: FormGroup;
   public _oldPasswordField: AbstractControl;
   public _newPasswordField: AbstractControl;
+  public _authenticationField: AbstractControl;
   public _repeatPasswordField: AbstractControl;
   public _supportAddress: string;
+  public showAuthenticationCode = false;
+
+  public _errorCode: string;
 
   public get _sendBtnText(): string {
     return this.inProgress ? 'app.login.wait' : 'app.login.send';
@@ -38,11 +52,11 @@ export class PasswordExpiredFormComponent {
   }
 
   public get _oldPasswordWrong(): boolean {
-    return 'WRONG_OLD_PASSWORD' === this.errorCode;
+    return 'WRONG_OLD_PASSWORD' === this._errorCode;
   }
 
   public get _passwordStructureInvalid(): boolean {
-    return 'PASSWORD_STRUCTURE_INVALID' === this.errorCode;
+    return 'PASSWORD_STRUCTURE_INVALID' === this._errorCode;
   }
 
   public get _passwordStructureInvalidMessage(): string {
@@ -68,19 +82,25 @@ export class PasswordExpiredFormComponent {
           validator: Validators.compose([
               NotEqualFieldsValidator.validate(), EqualFieldsValidator.validate('newPassword', 'repeatPassword')
           ])
-      })
+      }),
+      authentication: [''],
     });
 
     this._oldPasswordField = this._resetPasswordForm.controls['oldPassword'];
     this._passwords = <FormGroup>this._resetPasswordForm.controls['passwords'];
     this._newPasswordField = this._passwords.controls['newPassword'];
     this._repeatPasswordField = this._passwords.controls['repeatPassword'];
+    this._authenticationField = this._resetPasswordForm.controls['authentication'];
   }
 
   public _showError(control: AbstractControl): boolean {
     return control.invalid && (control.dirty || this._formSent);
   }
 
+  public _showSuccess(control: AbstractControl): boolean {
+        return control.valid && control.dirty;
+    }
+
   public _getClientValidationMessage(control: AbstractControl): string {
     const invalid = this._showError(control);
     let message = '';
@@ -105,7 +125,8 @@ export class PasswordExpiredFormComponent {
       this._formSent = false;
       this.onResetPassword.emit({
         password: this._oldPasswordField.value,
-        newPassword: this._newPasswordField.value
+        newPassword: this._newPasswordField.value,
+        otp: this._authenticationField.value || ''
       });
     }
   }