refactor(RegisterUserFormComponent): Extract duplicate createAccountError()

src/app/register/register-student-form/register-student-form.component.html

@@ -93,7 +93,7 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
           >
         </mat-form-field>
       </p>
-      <div *ngIf="studentUser.googleUserId == null">
+      <div *ngIf="user.googleUserId == null">
         <p>
           <mat-form-field appearance="fill" fxFlex>
             <mat-label i18n>Security Question</mat-label>
@@ -130,7 +130,7 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
           </mat-form-field>
         </p>
       </div>
-      <div *ngIf="studentUser.googleUserId == null" formGroupName="passwords">
+      <div *ngIf="user.googleUserId == null" formGroupName="passwords">
         <new-password-and-confirm
           [formGroup]="passwordsFormGroup"
           [passwordLabel]="passwordLabel"
@@ -147,7 +147,7 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
         <a href="https://policies.google.com/privacy">Privacy Policy</a> and
         <a href="https://policies.google.com/terms">Terms of Service</a> apply.
       </p>
-      <ng-container *ngIf="isRecaptchaEnabled" [ngSwitch]="studentUser.isRecaptchaInvalid">
+      <ng-container *ngIf="isRecaptchaEnabled" [ngSwitch]="user.isRecaptchaInvalid">
         <mat-error *ngSwitchCase="true" class="recaptchaError" i18n
           >Recaptcha failed. Please reload the page and try again!</mat-error
         >

src/app/register/register-student-form/register-student-form.component.spec.ts

@@ -168,7 +168,7 @@ async function createAccount() {
             PASSWORD
           )
         );
-        component.studentUser.isRecaptchaInvalid = true;
+        component.user.isRecaptchaInvalid = true;
         spyOn(recaptchaV3Service, 'execute').and.returnValue(of(''));
         const errorMessage = 'recaptchaResponseInvalid';
         const response: any = helpers.createAccountErrorResponse(errorMessage);

src/app/register/register-student-form/register-student-form.component.ts

@@ -44,31 +44,29 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
     { code: '11', label: $localize`11 (Nov)` },
     { code: '12', label: $localize`12 (Dec)` }
   ];
-  passwordsFormGroup: FormGroup = this.fb.group({});
-  processing: boolean = false;
   securityQuestions: object;
-  studentUser: Student = new Student();
+  user: Student = new Student();
 
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private configService: ConfigService,
-    private fb: FormBuilder,
+    protected fb: FormBuilder,
     private recaptchaV3Service: ReCaptchaV3Service,
     private router: Router,
     private route: ActivatedRoute,
-    private snackBar: MatSnackBar,
+    protected snackBar: MatSnackBar,
     private studentService: StudentService,
     private utilService: UtilService
   ) {
-    super();
+    super(fb, snackBar);
     this.studentService.retrieveSecurityQuestions().subscribe((response) => {
       this.securityQuestions = response;
     });
   }
 
   ngOnInit() {
     this.route.params.subscribe((params) => {
-      this.studentUser.googleUserId = params['gID'];
+      this.user.googleUserId = params['gID'];
       if (!this.isUsingGoogleId()) {
         this.createStudentAccountFormGroup.addControl('passwords', this.passwordsFormGroup);
         this.createStudentAccountFormGroup.addControl(
@@ -102,14 +100,14 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
   }
 
   isUsingGoogleId() {
-    return this.studentUser.googleUserId != null;
+    return this.user.googleUserId != null;
   }
 
   async createAccount() {
     if (this.createStudentAccountFormGroup.valid) {
       this.processing = true;
       await this.populateStudentUser();
-      this.studentService.registerStudentAccount(this.studentUser).subscribe(
+      this.studentService.registerStudentAccount(this.user).subscribe(
         (response: any) => {
           this.createAccountSuccess(response);
         },
@@ -128,46 +126,22 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
     this.processing = false;
   }
 
-  createAccountError(error: any): void {
-    const formError: any = {};
-    switch (error.messageCode) {
-      case 'invalidPasswordLength':
-        formError.minlength = true;
-        this.passwordsFormGroup
-          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
-        break;
-      case 'invalidPasswordPattern':
-        formError.pattern = true;
-        this.passwordsFormGroup
-          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
-        break;
-      case 'recaptchaResponseInvalid':
-        this.studentUser['isRecaptchaInvalid'] = true;
-        break;
-      default:
-        this.snackBar.open(this.translateCreateAccountErrorMessageCode(error.messageCode));
-    }
-    this.processing = false;
-  }
-
   async populateStudentUser() {
     for (let key of Object.keys(this.createStudentAccountFormGroup.controls)) {
       if (key == 'birthMonth' || key == 'birthDay') {
-        this.studentUser[key] = parseInt(this.createStudentAccountFormGroup.get(key).value);
+        this.user[key] = parseInt(this.createStudentAccountFormGroup.get(key).value);
       } else {
-        this.studentUser[key] = this.createStudentAccountFormGroup.get(key).value;
+        this.user[key] = this.createStudentAccountFormGroup.get(key).value;
       }
     }
     if (this.isRecaptchaEnabled) {
       const token = await this.recaptchaV3Service.execute('importantAction').toPromise();
-      this.studentUser['token'] = token;
+      this.user['token'] = token;
     }
     if (!this.isUsingGoogleId()) {
-      this.studentUser['password'] = this.getPassword();
-      delete this.studentUser['passwords'];
-      delete this.studentUser['googleUserId'];
+      this.user['password'] = this.getPassword();
+      delete this.user['passwords'];
+      delete this.user['googleUserId'];
     }
   }
 

src/app/register/register-teacher-form/register-teacher-form.component.html

@@ -115,7 +115,7 @@ <h2 class="standalone__title accent" i18n>Create Teacher Account</h2>
           <mat-label i18n>School Level</mat-label>
           <mat-select
             placeholder="School Level"
-            [(value)]="teacherUser.schoolLevel"
+            [(value)]="user.schoolLevel"
             formControlName="schoolLevel"
             required
           >
@@ -141,7 +141,7 @@ <h2 class="standalone__title accent" i18n>Create Teacher Account</h2>
           />
         </mat-form-field>
       </p>
-      <div *ngIf="teacherUser.googleUserId == null" formGroupName="passwords">
+      <div *ngIf="user.googleUserId == null" formGroupName="passwords">
         <new-password-and-confirm
           [formGroup]="passwordsFormGroup"
           [passwordLabel]="passwordLabel"
@@ -170,7 +170,7 @@ <h2 class="standalone__title accent" i18n>Create Teacher Account</h2>
         <a href="https://policies.google.com/privacy">Privacy Policy</a> and
         <a href="https://policies.google.com/terms">Terms of Service</a> apply.
       </p>
-      <ng-container *ngIf="isRecaptchaEnabled" [ngSwitch]="teacherUser.isRecaptchaInvalid">
+      <ng-container *ngIf="isRecaptchaEnabled" [ngSwitch]="user.isRecaptchaInvalid">
         <mat-error *ngSwitchCase="true" class="center recaptchaError" i18n
           >Recaptcha failed. Please reload the page and try again!</mat-error
         >

src/app/register/register-teacher-form/register-teacher-form.component.spec.ts

@@ -167,7 +167,7 @@ async function createAccount() {
             true
           )
         );
-        component.teacherUser.isRecaptchaInvalid = true;
+        component.user.isRecaptchaInvalid = true;
         spyOn(recaptchaV3Service, 'execute').and.returnValue(of(''));
         const errorMessage = 'recaptchaResponseInvalid';
         const response: any = helpers.createAccountErrorResponse(errorMessage);

src/app/register/register-teacher-form/register-teacher-form.component.ts

@@ -38,25 +38,25 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
   passwordsFormGroup = this.fb.group({});
   processing: boolean = false;
   schoolLevels: SchoolLevel[] = schoolLevels;
-  teacherUser: Teacher = new Teacher();
+  user: Teacher = new Teacher();
 
   constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private configService: ConfigService,
-    private fb: FormBuilder,
+    protected fb: FormBuilder,
     private recaptchaV3Service: ReCaptchaV3Service,
     private router: Router,
     private route: ActivatedRoute,
-    private snackBar: MatSnackBar,
+    protected snackBar: MatSnackBar,
     private teacherService: TeacherService,
     private utilService: UtilService
   ) {
-    super();
+    super(fb, snackBar);
   }
 
   ngOnInit(): void {
     this.route.params.subscribe((params) => {
-      this.teacherUser.googleUserId = params['gID'];
+      this.user.googleUserId = params['gID'];
       if (!this.isUsingGoogleId()) {
         this.createTeacherAccountFormGroup.addControl('passwords', this.passwordsFormGroup);
       }
@@ -74,7 +74,7 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
   }
 
   private isUsingGoogleId(): boolean {
-    return this.teacherUser.googleUserId != null;
+    return this.user.googleUserId != null;
   }
 
   private setControlFieldValue(name: string, value: string): void {
@@ -86,7 +86,7 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
     if (this.createTeacherAccountFormGroup.valid) {
       this.processing = true;
       await this.populateTeacherUser();
-      this.teacherService.registerTeacherAccount(this.teacherUser).subscribe(
+      this.teacherService.registerTeacherAccount(this.user).subscribe(
         (response: any) => {
           this.createAccountSuccess(response);
         },
@@ -105,42 +105,18 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
     this.processing = false;
   }
 
-  private createAccountError(error: any): void {
-    const formError: any = {};
-    switch (error.messageCode) {
-      case 'invalidPasswordLength':
-        formError.minlength = true;
-        this.passwordsFormGroup
-          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
-        break;
-      case 'invalidPasswordPattern':
-        formError.pattern = true;
-        this.passwordsFormGroup
-          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
-          .setErrors(formError);
-        break;
-      case 'recaptchaResponseInvalid':
-        this.teacherUser['isRecaptchaInvalid'] = true;
-        break;
-      default:
-        this.snackBar.open(this.translateCreateAccountErrorMessageCode(error.messageCode));
-    }
-    this.processing = false;
-  }
-
   private async populateTeacherUser() {
     for (let key of Object.keys(this.createTeacherAccountFormGroup.controls)) {
-      this.teacherUser[key] = this.createTeacherAccountFormGroup.get(key).value;
+      this.user[key] = this.createTeacherAccountFormGroup.get(key).value;
     }
     if (this.isRecaptchaEnabled) {
       const token = await this.recaptchaV3Service.execute('importantAction').toPromise();
-      this.teacherUser['token'] = token;
+      this.user['token'] = token;
     }
     if (!this.isUsingGoogleId()) {
-      this.teacherUser['password'] = this.getPassword();
-      delete this.teacherUser['passwords'];
-      delete this.teacherUser['googleUserId'];
+      this.user['password'] = this.getPassword();
+      delete this.user['passwords'];
+      delete this.user['googleUserId'];
     }
   }
 

src/app/register/register-user-form/register-user-form.component.ts

@@ -1,10 +1,44 @@
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { User } from '../../domain/user';
+import { NewPasswordAndConfirmComponent } from '../../password/new-password-and-confirm/new-password-and-confirm.component';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
 export class RegisterUserFormComponent {
-  NAME_REGEX = '^[a-zA-Z]+([ -]?[a-zA-Z]+)*$';
+  protected NAME_REGEX = '^[a-zA-Z]+([ -]?[a-zA-Z]+)*$';
+
+  protected confirmPasswordLabel: string = $localize`Confirm Password`;
+  protected passwordLabel: string = $localize`Password`;
+  protected passwordsFormGroup: FormGroup = this.fb.group({});
+  protected processing: boolean = false;
+  user: User;
+
+  constructor(protected fb: FormBuilder, protected snackBar: MatSnackBar) {}
 
-  confirmPasswordLabel: string = $localize`Confirm Password`;
-  passwordLabel: string = $localize`Password`;
+  protected createAccountError(error: any): void {
+    const formError: any = {};
+    switch (error.messageCode) {
+      case 'invalidPasswordLength':
+        formError.minlength = true;
+        this.passwordsFormGroup
+          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
+          .setErrors(formError);
+        break;
+      case 'invalidPasswordPattern':
+        formError.pattern = true;
+        this.passwordsFormGroup
+          .get(NewPasswordAndConfirmComponent.NEW_PASSWORD_FORM_CONTROL_NAME)
+          .setErrors(formError);
+        break;
+      case 'recaptchaResponseInvalid':
+        this.user['isRecaptchaInvalid'] = true;
+        break;
+      default:
+        this.snackBar.open(this.translateCreateAccountErrorMessageCode(error.messageCode));
+    }
+    this.processing = false;
+  }
 
-  translateCreateAccountErrorMessageCode(messageCode: string) {
+  private translateCreateAccountErrorMessageCode(messageCode: string): string {
     switch (messageCode) {
       case 'invalidFirstAndLastName':
         return $localize`Error: First Name and Last Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash`;

src/messages.xlf

@@ -7244,35 +7244,35 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Confirm Password</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-user-form/register-user-form.component.ts</context>
-          <context context-type="linenumber">4</context>
+          <context context-type="linenumber">9</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1431416938026210429" datatype="html">
         <source>Password</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-user-form/register-user-form.component.ts</context>
-          <context context-type="linenumber">5</context>
+          <context context-type="linenumber">10</context>
         </context-group>
       </trans-unit>
       <trans-unit id="4000970355844798758" datatype="html">
         <source>Error: First Name and Last Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-user-form/register-user-form.component.ts</context>
-          <context context-type="linenumber">10</context>
+          <context context-type="linenumber">44</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1084197907437634069" datatype="html">
         <source>Error: First Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-user-form/register-user-form.component.ts</context>
-          <context context-type="linenumber">12</context>
+          <context context-type="linenumber">46</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5970926747435723642" datatype="html">
         <source>Error: Last Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/register/register-user-form/register-user-form.component.ts</context>
-          <context context-type="linenumber">14</context>
+          <context context-type="linenumber">48</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e931f6b80399785ea1647269f43ffeea54327cb6" datatype="html">