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/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: PasswordErrors,
+  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,12 @@
+export class PasswordErrors {
+  messageCode: string = 'invalidPassword';
+  missingLetter: boolean;
+  missingNumber: boolean;
+  tooShort: boolean;
+
+  constructor(missingLetter: boolean, missingNumber: boolean, tooShort: boolean) {
+    this.missingLetter = missingLetter;
+    this.missingNumber = missingNumber;
+    this.tooShort = tooShort;
+  }
+}

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

@@ -8,6 +8,7 @@ import { StudentService } from '../../../student/student.service';
 import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { PasswordModule } from '../../../password/password.module';
+import { PasswordRequirementComponent } from '../../../password/password-requirement/password-requirement.component';
 
 export class MockStudentService {
   changePassword(
@@ -26,8 +27,6 @@ export class MockStudentService {
   }
 }
 
-const PASSWORD = 'Abcd1234';
-
 describe('ForgotStudentPasswordChangeComponent', () => {
   let component: ForgotStudentPasswordChangeComponent;
   let fixture: ComponentFixture<ForgotStudentPasswordChangeComponent>;
@@ -65,8 +64,9 @@ describe('ForgotStudentPasswordChangeComponent', () => {
   });
 
   it('should enable the submit button when the password fields are filled in', () => {
-    component.changePasswordFormGroup.controls['newPassword'].setValue(PASSWORD);
-    component.changePasswordFormGroup.controls['confirmNewPassword'].setValue(PASSWORD);
+    const password = PasswordRequirementComponent.VALID_PASSWORD;
+    component.changePasswordFormGroup.controls['newPassword'].setValue(password);
+    component.changePasswordFormGroup.controls['confirmNewPassword'].setValue(password);
     fixture.detectChanges();
     const submitButton = getSubmitButton();
     expect(submitButton.disabled).toBe(false);

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

@@ -4,6 +4,8 @@ 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';
+import { PasswordErrors } from '../../../domain/password/password-errors';
 
 @Component({
   selector: 'forgot-student-password-change',
@@ -62,20 +64,10 @@ export class ForgotStudentPasswordChangeComponent implements OnInit {
     this.goToSuccessPage();
   }
 
-  private changePasswordError(error: any): void {
-    const formError: any = {};
+  private changePasswordError(error: PasswordErrors): void {
     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

@@ -9,6 +9,7 @@ import { PasswordModule } from '../../../password/password.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
+import { PasswordRequirementComponent } from '../../../password/password-requirement/password-requirement.component';
 
 export class MockTeacherService {
   changePassword(
@@ -50,8 +51,8 @@ describe('ForgotTeacherPasswordChangeComponent', () => {
         MatCardModule,
         MatDividerModule,
         PasswordModule,
-        RouterTestingModule,
-        ReactiveFormsModule
+        ReactiveFormsModule,
+        RouterTestingModule
       ],
       providers: [{ provide: TeacherService, useClass: MockTeacherService }],
       schemas: []
@@ -100,7 +101,7 @@ describe('ForgotTeacherPasswordChangeComponent', () => {
     const navigateSpy = spyOn(router, 'navigate');
     component.username = 'SpongebobSquarepants';
     component.verificationCode = '123456';
-    const newPassword = 'Abcd1234';
+    const newPassword = PasswordRequirementComponent.VALID_PASSWORD;
     component.changePasswordFormGroup.controls['newPassword'].setValue(newPassword);
     component.changePasswordFormGroup.controls['confirmNewPassword'].setValue(newPassword);
     component.submit();

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

@@ -4,6 +4,8 @@ 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';
+import { PasswordErrors } from '../../../domain/password/password-errors';
 
 @Component({
   selector: 'app-forgot-teacher-password-change',
@@ -67,8 +69,7 @@ export class ForgotTeacherPasswordChangeComponent implements OnInit {
     this.goToSuccessPage();
   }
 
-  private changePasswordError(error: any): void {
-    const formError: any = {};
+  private changePasswordError(error: PasswordErrors): void {
     switch (error.messageCode) {
       case 'tooManyVerificationCodeAttempts':
         this.setTooManyVerificationCodeAttemptsMessage();
@@ -85,23 +86,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();