Merge branch 'develop' into issue-1476-upgrade-to-angular-16

Change strength meter to @wise-community/angular-password-strength-meter

angular.json

@@ -15,7 +15,7 @@
               "angular",
               "fabric",
               "dom-autoscroller",
-              "drawing-tool",
+              "@wise-community/drawing-tool",
               "jquery",
               "rxjs/internal/BehaviorSubject",
               "canvg",

package.json

@@ -27,11 +27,14 @@
     "@stomp/rx-stomp": "^1.1.4",
     "@stomp/stompjs": "^5.4.4",
     "@tinymce/tinymce-angular": "^7.0.0",
+    "@wise-community/drawing-tool": "^2.3.0-pre.1",
+    "@zxcvbn-ts/core": "^2.2.1",
+    "@zxcvbn-ts/language-en": "^2.1.0",
+    "@wise-community/angular-password-strength-meter": "^7.0.1",
     "canvg": "^2.0.0",
     "compute-covariance": "^1.0.1",
     "core-js": "^3.22.0",
     "dom-autoscroller": "^2.3.4",
-    "drawing-tool": "^2.1.2",
     "eventemitter2": "^5.0.1",
     "fabric": "3.6.3",
     "file-saver": "^2.0.5",

src/app/app.component.scss

@@ -11,6 +11,10 @@ app-header {
   z-index: 2;
 }
 
+mat-sidenav-container, mat-sidenav-content {
+  overflow: unset;
+}
+
 .to-top {
   position: fixed;
   bottom: 20px;

src/app/app.module.ts

@@ -61,7 +61,8 @@ export function initialize(
     RecaptchaV3Module,
     RouterModule.forRoot([], {
       scrollPositionRestoration: 'enabled',
-      anchorScrolling: 'enabled'
+      anchorScrolling: 'enabled',
+      onSameUrlNavigation: 'reload'
     })
   ],
   providers: [

src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html

@@ -9,7 +9,7 @@ <h5 i18n>Choose the step(s) that you want to import, then select Next.</h5>
     i18n-matTooltip
     matTooltipPosition="above"
   >
-    <mat-icon>visibility</mat-icon>
+    <mat-icon>preview</mat-icon>
   </button>
 </p>
 <div
@@ -37,7 +37,7 @@ <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
       i18n-matTooltip
       matTooltipPosition="above"
     >
-      <mat-icon>visibility</mat-icon>
+      <mat-icon>preview</mat-icon>
     </button>
   </div>
 </div>

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();

src/app/help/faq/faq.component.ts

@@ -0,0 +1,23 @@
+import { Directive, OnInit } from '@angular/core';
+import { ConfigService } from '../../services/config.service';
+import { filter } from 'rxjs';
+
+@Directive()
+export abstract class FaqComponent implements OnInit {
+  protected contextPath: string;
+
+  constructor(private configService: ConfigService) {
+    this.configService
+      .getConfig()
+      .pipe(filter((config) => config != null))
+      .subscribe((config) => {
+        this.contextPath = config.contextPath;
+      });
+  }
+
+  ngOnInit(): void {}
+
+  ngAfterViewInit(): void {
+    document.getElementsByTagName('app-help')[0]?.scrollIntoView();
+  }
+}