Add FE for password-reset verification (#2795)

Tested locally and on alpha with dummy values (and throwing an
exception).

I was able to reuse a bit of code from the EPP password reset, but not
all of it.

console-webapp/src/app/settings/security/eppPasswordEdit.component.html

@@ -16,67 +16,11 @@
   <p class="secondary-text">
     Passwords must be between 6 and 16 alphanumeric characters
   </p>
-  <form
-    (ngSubmit)="save()"
+  <password-input-form-component
+    [displayOldPasswordField]="true"
     [formGroup]="passwordUpdateForm"
-    class="settings-security__edit-password-form"
-  >
-    <div class="settings-security__edit-password-field">
-      <mat-form-field appearance="outline">
-        <mat-label>Old password: </mat-label>
-        <input
-          matInput
-          type="text"
-          formControlName="oldPassword"
-          required
-          autocomplete="current-password"
-        />
-        <mat-error *ngIf="hasError('oldPassword') as errorText">{{
-          errorText
-        }}</mat-error>
-      </mat-form-field>
-    </div>
-    <div class="settings-security__edit-password-field">
-      <mat-form-field appearance="outline">
-        <mat-label>New password: </mat-label>
-        <input
-          matInput
-          type="text"
-          formControlName="newPassword"
-          required
-          autocomplete="new-password"
-        />
-        <mat-error *ngIf="hasError('newPassword') as errorText">{{
-          errorText
-        }}</mat-error>
-      </mat-form-field>
-    </div>
-    <div class="settings-security__edit-password-field">
-      <mat-form-field appearance="outline">
-        <mat-label>Confirm new password: </mat-label>
-        <input
-          matInput
-          type="text"
-          formControlName="newPasswordRepeat"
-          required
-          autocomplete="new-password"
-        />
-        <mat-error *ngIf="hasError('newPasswordRepeat') as errorText">{{
-          errorText
-        }}</mat-error>
-      </mat-form-field>
-    </div>
-    <button
-      mat-flat-button
-      color="primary"
-      [disabled]="!passwordUpdateForm.valid"
-      aria-label="Save epp password update"
-      type="submit"
-      class="settings-security__edit-password-save"
-    >
-      Save
-    </button>
-  </form>
+    (submitResults)="save($event)"
+  />
   @if(userDataService.userData()?.isAdmin) {
   <div class="settings-security__reset-password-field">
     <h2>Need to reset your EPP password?</h2>

console-webapp/src/app/settings/security/eppPasswordEdit.component.scss

@@ -13,22 +13,6 @@
 // limitations under the License.
 
 .settings-security {
-  &__edit-password {
-    max-width: 616px;
-    &-field {
-      width: 100%;
-      mat-form-field {
-        margin-bottom: 20px;
-        width: 100%;
-      }
-    }
-    &-form {
-      margin-top: 30px;
-    }
-    &-save {
-      margin-top: 30px;
-    }
-  }
   &__reset-password-field {
     margin-top: 60px;
   }

console-webapp/src/app/settings/security/eppPasswordEdit.component.ts

@@ -14,13 +14,7 @@
 
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component } from '@angular/core';
-import {
-  AbstractControl,
-  FormControl,
-  FormGroup,
-  ValidatorFn,
-  Validators,
-} from '@angular/forms';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { SecurityService } from './security.service';
@@ -30,10 +24,10 @@ import { CommonModule } from '@angular/common';
 import { MaterialModule } from 'src/app/material.module';
 import { filter, switchMap, take } from 'rxjs';
 import { BackendService } from 'src/app/shared/services/backend.service';
-
-type errorCode = 'required' | 'maxlength' | 'minlength' | 'passwordsDontMatch';
-
-type errorFriendlyText = { [type in errorCode]: String };
+import {
+  PasswordInputForm,
+  PasswordResults,
+} from 'src/app/shared/components/passwordReset/passwordInputForm.component';
 
 @Component({
   selector: 'app-reset-epp-password-dialog',
@@ -68,16 +62,21 @@ export class ResetEppPasswordComponent {
   standalone: false,
 })
 export default class EppPasswordEditComponent {
-  MIN_MAX_LENGHT = new String(
-    'Passwords must be between 6 and 16 alphanumeric characters'
-  );
+  static EPP_VALIDATORS = [
+    Validators.required,
+    Validators.minLength(6),
+    Validators.maxLength(16),
+    PasswordInputForm.newPasswordsMatch,
+  ];
 
-  errorTextMap: errorFriendlyText = {
-    required: "This field can't be empty",
-    maxlength: this.MIN_MAX_LENGHT,
-    minlength: this.MIN_MAX_LENGHT,
-    passwordsDontMatch: "Passwords don't match",
-  };
+  passwordUpdateForm = new FormGroup({
+    oldPassword: new FormControl('', [Validators.required]),
+    newPassword: new FormControl('', EppPasswordEditComponent.EPP_VALIDATORS),
+    newPasswordRepeat: new FormControl(
+      '',
+      EppPasswordEditComponent.EPP_VALIDATORS
+    ),
+  });
 
   constructor(
     public registrarService: RegistrarService,
@@ -88,59 +87,13 @@ export default class EppPasswordEditComponent {
     private _snackBar: MatSnackBar
   ) {}
 
-  hasError(controlName: string) {
-    const maybeErrors = this.passwordUpdateForm.get(controlName)?.errors;
-    const maybeError =
-      maybeErrors && (Object.keys(maybeErrors)[0] as errorCode);
-    if (maybeError) {
-      return this.errorTextMap[maybeError];
-    }
-    return '';
-  }
-
-  newPasswordsMatch: ValidatorFn = (control: AbstractControl) => {
-    if (
-      this.passwordUpdateForm?.get('newPassword')?.value ===
-      this.passwordUpdateForm?.get('newPasswordRepeat')?.value
-    ) {
-      this.passwordUpdateForm?.get('newPasswordRepeat')?.setErrors(null);
-    } else {
-      // latest angular just won't detect the error without setTimeout
-      setTimeout(() => {
-        this.passwordUpdateForm
-          ?.get('newPasswordRepeat')
-          ?.setErrors({ passwordsDontMatch: control.value });
-      });
-    }
-    return null;
-  };
-
-  passwordUpdateForm = new FormGroup({
-    oldPassword: new FormControl('', [Validators.required]),
-    newPassword: new FormControl('', [
-      Validators.required,
-      Validators.minLength(6),
-      Validators.maxLength(16),
-      this.newPasswordsMatch,
-    ]),
-    newPasswordRepeat: new FormControl('', [
-      Validators.required,
-      Validators.minLength(6),
-      Validators.maxLength(16),
-      this.newPasswordsMatch,
-    ]),
-  });
-
-  save() {
-    const { oldPassword, newPassword, newPasswordRepeat } =
-      this.passwordUpdateForm.value;
-    if (!oldPassword || !newPassword || !newPasswordRepeat) return;
+  save(passwordResults: PasswordResults) {
     this.securityService
       .saveEppPassword({
         registrarId: this.registrarService.registrarId(),
-        oldPassword,
-        newPassword,
-        newPasswordRepeat,
+        oldPassword: passwordResults.oldPassword!,
+        newPassword: passwordResults.newPassword,
+        newPasswordRepeat: passwordResults.newPasswordRepeat,
       })
       .subscribe({
         complete: () => {