feat(Password): Allow special characters in password

package.json

@@ -27,6 +27,9 @@
     "@stomp/rx-stomp": "^1.1.4",
     "@stomp/stompjs": "^5.4.4",
     "@tinymce/tinymce-angular": "^4.2.4",
+    "@zxcvbn-ts/core": "^2.2.1",
+    "@zxcvbn-ts/language-en": "^2.1.0",
+    "angular-password-strength-meter": "^6.0.0",
     "canvg": "^2.0.0",
     "compute-covariance": "^1.0.1",
     "core-js": "^3.22.0",

src/app/app.module.ts

@@ -59,9 +59,9 @@ export function initialize(
     MatDialogModule,
     RecaptchaV3Module,
     RouterModule.forRoot([], {
-    scrollPositionRestoration: 'enabled',
-    anchorScrolling: 'enabled'
-})
+      scrollPositionRestoration: 'enabled',
+      anchorScrolling: 'enabled'
+    })
   ],
   providers: [
     ConfigService,

src/app/common/password-helper.ts

@@ -0,0 +1,27 @@
+import { FormGroup } from '@angular/forms';
+import { NewPasswordAndConfirmComponent } from '../password/new-password-and-confirm/new-password-and-confirm.component';
+import { PasswordErrors } from '../domain/password/password-errors';
+
+export function changePasswordError(
+  error: any,
+  incorrectPasswordFormGroup: FormGroup,
+  invalidPasswordFormGroup: FormGroup,
+  previousPasswordFieldName: string
+): void {
+  switch (error.messageCode) {
+    case 'incorrectPassword':
+      incorrectPasswordFormGroup
+        .get(previousPasswordFieldName)
+        .setErrors({ incorrectPassword: true });
+      break;
+    case 'invalidPassword':
+      injectPasswordErrors(invalidPasswordFormGroup, error);
+      break;
+  }
+}
+
+export function injectPasswordErrors(formGroup: FormGroup, passwordErrors: PasswordErrors): void {
+  formGroup
+    .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
+    .setErrors(passwordErrors);
+}

src/app/domain/password/password-errors.ts

@@ -0,0 +1,19 @@
+export class PasswordErrors {
+  messageCode: string = 'invalidPassword';
+  missingLetter: boolean;
+  missingNumber: boolean;
+  missingSymbol: boolean;
+  tooShort: boolean;
+
+  constructor(
+    missingLetter: boolean,
+    missingNumber: boolean,
+    missingSymbol: boolean,
+    tooShort: boolean
+  ) {
+    this.missingLetter = missingLetter;
+    this.missingNumber = missingNumber;
+    this.missingSymbol = missingSymbol;
+    this.tooShort = tooShort;
+  }
+}

src/app/forgot/student/forgot-student-password-change/forgot-student-password-change.component.spec.ts

@@ -26,7 +26,7 @@ export class MockStudentService {
   }
 }
 
-const PASSWORD = 'Abcd1234';
+const PASSWORD = 'abcd1234!';
 
 describe('ForgotStudentPasswordChangeComponent', () => {
   let component: ForgotStudentPasswordChangeComponent;

src/app/forgot/student/forgot-student-password-change/forgot-student-password-change.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { StudentService } from '../../../student/student.service';
 import { finalize } from 'rxjs/operators';
 import { NewPasswordAndConfirmComponent } from '../../../password/new-password-and-confirm/new-password-and-confirm.component';
+import { injectPasswordErrors } from '../../../common/password-helper';
 
 @Component({
   selector: 'forgot-student-password-change',
@@ -63,19 +64,9 @@ export class ForgotStudentPasswordChangeComponent implements OnInit {
   }
 
   private changePasswordError(error: any): void {
-    const formError: any = {};
     switch (error.messageCode) {
-      case 'invalidPasswordLength':
-        formError.minlength = true;
-        this.changePasswordFormGroup
-          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
-        break;
-      case 'invalidPasswordPattern':
-        formError.pattern = true;
-        this.changePasswordFormGroup
-          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
+      case 'invalidPassword':
+        injectPasswordErrors(this.changePasswordFormGroup, error);
         break;
       default:
         this.setErrorOccurredMessage();

src/app/forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.spec.ts

@@ -50,8 +50,8 @@ describe('ForgotTeacherPasswordChangeComponent', () => {
         MatCardModule,
         MatDividerModule,
         PasswordModule,
-        RouterTestingModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        RouterTestingModule
       ],
       providers: [{ provide: TeacherService, useClass: MockTeacherService }],
       schemas: []

src/app/forgot/teacher/forgot-teacher-password-change/forgot-teacher-password-change.component.ts

@@ -4,6 +4,7 @@ import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { TeacherService } from '../../../teacher/teacher.service';
 import { finalize } from 'rxjs/operators';
 import { NewPasswordAndConfirmComponent } from '../../../password/new-password-and-confirm/new-password-and-confirm.component';
+import { injectPasswordErrors } from '../../../common/password-helper';
 
 @Component({
   selector: 'app-forgot-teacher-password-change',
@@ -68,7 +69,6 @@ export class ForgotTeacherPasswordChangeComponent implements OnInit {
   }
 
   private changePasswordError(error: any): void {
-    const formError: any = {};
     switch (error.messageCode) {
       case 'tooManyVerificationCodeAttempts':
         this.setTooManyVerificationCodeAttemptsMessage();
@@ -85,23 +85,13 @@ export class ForgotTeacherPasswordChangeComponent implements OnInit {
       case 'verificationCodeIncorrect':
         this.setVerificationCodeIncorrectMessage();
         break;
-      case 'invalidPasswordLength':
-        formError.minlength = true;
-        this.changePasswordFormGroup
-          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
-        break;
-      case 'invalidPasswordPattern':
-        formError.pattern = true;
-        this.changePasswordFormGroup
-          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
+      case 'invalidPassword':
+        injectPasswordErrors(this.changePasswordFormGroup, error);
         break;
       case 'passwordDoesNotMatch':
-        formError.passwordDoesNotMatch = true;
         this.changePasswordFormGroup
           .get(NewPasswordAndConfirmComponent.CONFIRM_NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
+          .setErrors({ passwordDoesNotMatch: true });
         break;
       default:
         this.setErrorOccurredMessage();