fix(UserRegistration): Allows spaces and dashes in first and last name (

#908)
WISE-Community · Dec 2, 2022 · 623513d · 623513d
1 parent 26167d0
commit 623513d
Show file tree

Hide file tree

Showing 11 changed files with 190 additions and 32 deletions.
diff --git a/.project b/.project
@@ -47,12 +47,12 @@
 	</natures>
 	<filteredResources>
 		<filter>
-			<id>1598983010649</id>
+			<id>1666988752477</id>
 			<name></name>
 			<type>30</type>
 			<matcher>
 				<id>org.eclipse.core.resources.regexFilterMatcher</id>
-				<arguments>node_modules|.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
+				<arguments>node_modules|\.git|__CREATED_BY_JAVA_LANGUAGE_SERVER__</arguments>
 			</matcher>
 		</filter>
 	</filteredResources>

diff --git a/src/app/register/register-student-form/register-student-form.component.html b/src/app/register/register-student-form/register-student-form.component.html
@@ -15,7 +15,7 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
                  autofocus
                  required />
           <mat-error *ngIf="createStudentAccountFormGroup.controls['firstName'].hasError('required')" i18n>First Name required</mat-error>
-          <mat-error *ngIf="createStudentAccountFormGroup.controls['firstName'].hasError('pattern')" i18n>First Name must only contain characters A-Z</mat-error>
+          <mat-error *ngIf="createStudentAccountFormGroup.controls['firstName'].hasError('pattern')" i18n>First Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash</mat-error>
         </mat-form-field>
       </p>
       <p>
@@ -27,7 +27,7 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
                  formControlName="lastName"
                  required />
           <mat-error *ngIf="createStudentAccountFormGroup.controls['lastName'].hasError('required')" i18n>Last Name required</mat-error>
-          <mat-error *ngIf="createStudentAccountFormGroup.controls['lastName'].hasError('pattern')" i18n>Last Name must only contain characters A-Z</mat-error>
+          <mat-error *ngIf="createStudentAccountFormGroup.controls['lastName'].hasError('pattern')" i18n>Last Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash</mat-error>
         </mat-form-field>
       </p>
       <p>

diff --git a/src/app/register/register-student-form/register-student-form.component.spec.ts b/src/app/register/register-student-form/register-student-form.component.spec.ts
@@ -13,6 +13,10 @@ import { Router } from '@angular/router';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as helpers from '../register-user-form/register-user-form-spec-helpers';
 import { PasswordService } from '../../services/password.service';
+import {
+  nameTests,
+  validateAndExpect
+} from '../register-user-form/register-user-form-spec-helpers';
 
 let router: Router;
 let component: RegisterStudentFormComponent;
@@ -65,10 +69,39 @@ describe('RegisterStudentFormComponent', () => {
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
-
+  validateFirstName();
+  validateLastName();
   createAccount();
 });
 
+function validateFirstName() {
+  describe('validateFirstName()', () => {
+    for (const nameTest of nameTests) {
+      it(nameTest.description, () => {
+        validateAndExpect(
+          component.createStudentAccountFormGroup.get('firstName'),
+          nameTest.name,
+          nameTest.isValid
+        );
+      });
+    }
+  });
+}
+
+function validateLastName() {
+  describe('validateLastName()', () => {
+    for (const nameTest of nameTests) {
+      it(nameTest.description, () => {
+        validateAndExpect(
+          component.createStudentAccountFormGroup.get('lastName'),
+          nameTest.name,
+          nameTest.isValid
+        );
+      });
+    }
+  });
+}
+
 function createAccount() {
   describe('createAccount()', () => {
     it('should create account with valid form fields', () => {
@@ -103,21 +136,21 @@ function createAccount() {
     it('should show error when invalid first name is sent to server', () => {
       expectCreateAccountWithInvalidNameToShowError(
         'invalidFirstName',
-        'Error: First Name must only contain characters A-Z'
+        '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'
       );
     });
 
     it('should show error when invalid last name is sent to server', () => {
       expectCreateAccountWithInvalidNameToShowError(
         'invalidLastName',
-        'Error: Last Name must only contain characters A-Z'
+        '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'
       );
     });
 
     it('should show error when invalid first and last name is sent to server', () => {
       expectCreateAccountWithInvalidNameToShowError(
         'invalidFirstAndLastName',
-        'Error: First Name and Last Name must only contain characters A-Z'
+        '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'
       );
     });
   });

diff --git a/src/app/register/register-student-form/register-student-form.component.ts b/src/app/register/register-student-form/register-student-form.component.ts
@@ -52,8 +52,14 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
     { validator: this.passwordMatchValidator }
   );
   createStudentAccountFormGroup: FormGroup = this.fb.group({
-    firstName: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z]+')]),
-    lastName: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z]+')]),
+    firstName: new FormControl('', [
+      Validators.required,
+      Validators.pattern('^(?![ -])[a-zA-Z -]+(?<![ -])$')
+    ]),
+    lastName: new FormControl('', [
+      Validators.required,
+      Validators.pattern('^(?![ -])[a-zA-Z -]+(?<![ -])$')
+    ]),
     gender: new FormControl('', [Validators.required]),
     birthMonth: new FormControl('', [Validators.required]),
     birthDay: new FormControl({ value: '', disabled: true }, [Validators.required])
@@ -102,6 +108,8 @@ export class RegisterStudentFormComponent extends RegisterUserFormComponent impl
     this.createStudentAccountFormGroup.controls['birthMonth'].valueChanges.subscribe((value) => {
       this.setBirthDayOptions();
     });
+    this.createStudentAccountFormGroup.controls['firstName'].markAsTouched();
+    this.createStudentAccountFormGroup.controls['lastName'].markAsTouched();
   }
 
   isUsingGoogleId() {

diff --git a/src/app/register/register-student/register-student.component.html b/src/app/register/register-student/register-student.component.html
@@ -41,4 +41,4 @@ <h2 class="standalone__title accent" i18n>Create Student Account</h2>
       </p>
     </span>
   </mat-card-content>
-</mat-card>
+</mat-card>
diff --git a/src/app/register/register-teacher-form/register-teacher-form.component.html b/src/app/register/register-teacher-form/register-teacher-form.component.html
@@ -15,7 +15,7 @@ <h2 class="standalone__title accent" i18n>Create Teacher Account</h2>
                  autofocus
                  required />
           <mat-error *ngIf="createTeacherAccountFormGroup.controls['firstName'].hasError('required')" i18n>First Name required</mat-error>
-          <mat-error *ngIf="createTeacherAccountFormGroup.controls['firstName'].hasError('pattern')" i18n>First Name must only contain characters A-Z</mat-error>
+          <mat-error *ngIf="createTeacherAccountFormGroup.controls['firstName'].hasError('pattern')" i18n>First Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash</mat-error>
         </mat-form-field>
       </p>
       <p>
@@ -27,7 +27,7 @@ <h2 class="standalone__title accent" i18n>Create Teacher Account</h2>
                  formControlName="lastName"
                  required />
           <mat-error *ngIf="createTeacherAccountFormGroup.controls['lastName'].hasError('required')" i18n>Last Name required</mat-error>
-          <mat-error *ngIf="createTeacherAccountFormGroup.controls['lastName'].hasError('pattern')" i18n>Last Name must only contain characters A-Z</mat-error>
+          <mat-error *ngIf="createTeacherAccountFormGroup.controls['lastName'].hasError('pattern')" i18n>Last Name must only contain characters A-Z, a-z, spaces, or dashes and can not start or end with a space or dash</mat-error>
         </mat-form-field>
       </p>
       <p>

diff --git a/src/app/register/register-teacher-form/register-teacher-form.component.spec.ts b/src/app/register/register-teacher-form/register-teacher-form.component.spec.ts
@@ -14,6 +14,10 @@ import { of, throwError } from 'rxjs';
 import { Router } from '@angular/router';
 import * as helpers from '../register-user-form/register-user-form-spec-helpers';
 import { PasswordService } from '../../services/password.service';
+import {
+  nameTests,
+  validateAndExpect
+} from '../register-user-form/register-user-form-spec-helpers';
 
 class MockTeacherService {
   registerTeacherAccount() {}
@@ -60,10 +64,38 @@ describe('RegisterTeacherFormComponent', () => {
     snackBar = TestBed.get(MatSnackBar);
     fixture.detectChanges();
   });
-
+  validateFirstName();
+  validateLastName();
   createAccount();
 });
 
+function validateFirstName() {
+  describe('validateFirstName()', () => {
+    for (const nameTest of nameTests) {
+      it(nameTest.description, () => {
+        validateAndExpect(
+          component.createTeacherAccountFormGroup.get('firstName'),
+          nameTest.name,
+          nameTest.isValid
+        );
+      });
+    }
+  });
+}
+
+function validateLastName() {
+  describe('validateLastName()', () => {
+    for (const nameTest of nameTests) {
+      it(nameTest.description, () => {
+        validateAndExpect(
+          component.createTeacherAccountFormGroup.get('lastName'),
+          nameTest.name,
+          nameTest.isValid
+        );
+      });
+    }
+  });
+}
 function createAccount() {
   describe('createAccount()', () => {
     it('should create account with valid form fields', () => {
@@ -101,21 +133,21 @@ function createAccount() {
     it('should show error when invalid first name is sent to server', () => {
       expectCreateAccountWithInvalidNameToShowError(
         'invalidFirstName',
-        'Error: First Name must only contain characters A-Z'
+        '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'
       );
     });
 
     it('should show error when invalid last name is sent to server', () => {
       expectCreateAccountWithInvalidNameToShowError(
         'invalidLastName',
-        'Error: Last Name must only contain characters A-Z'
+        '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'
       );
     });
 
     it('should show error when invalid first and last name is sent to server', () => {
       expectCreateAccountWithInvalidNameToShowError(
         'invalidFirstAndLastName',
-        'Error: First Name and Last Name must only contain characters A-Z'
+        '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'
       );
     });
   });

diff --git a/src/app/register/register-teacher-form/register-teacher-form.component.ts b/src/app/register/register-teacher-form/register-teacher-form.component.ts
@@ -39,8 +39,14 @@ export class RegisterTeacherFormComponent extends RegisterUserFormComponent impl
   );
   createTeacherAccountFormGroup: FormGroup = this.fb.group(
     {
-      firstName: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z]+')]),
-      lastName: new FormControl('', [Validators.required, Validators.pattern('[a-zA-Z]+')]),
+      firstName: new FormControl('', [
+        Validators.required,
+        Validators.pattern('^(?![ -])[a-zA-Z -]+(?<![ -])$')
+      ]),
+      lastName: new FormControl('', [
+        Validators.required,
+        Validators.pattern('^(?![ -])[a-zA-Z -]+(?<![ -])$')
+      ]),
       email: new FormControl('', [Validators.required, Validators.email]),
       city: new FormControl('', [Validators.required]),
       state: new FormControl('', [Validators.required]),

diff --git a/src/app/register/register-user-form/register-user-form-spec-helpers.ts b/src/app/register/register-user-form/register-user-form-spec-helpers.ts
@@ -1,3 +1,5 @@
+import { AbstractControl } from '@angular/forms';
+
 export function createAccountSuccessResponse(username: string) {
   return {
     status: 'success',
@@ -12,3 +14,80 @@ export function createAccountErrorResponse(messageCode: string) {
     }
   };
 }
+
+export const nameTests = [
+  {
+    name: 'smith',
+    isValid: true,
+    description: 'should be valid when it contains letters'
+  },
+  {
+    name: 'smith star',
+    isValid: true,
+    description: 'should be valid when it contains letters and a space'
+  },
+  {
+    name: 'smith star fish',
+    isValid: true,
+    description: 'should be valid when it contains letters and spaces'
+  },
+  {
+    name: 'smith-star',
+    isValid: true,
+    description: 'should be valid when it contains letters and a dash'
+  },
+  {
+    name: 'smith-star-fish',
+    isValid: true,
+    description: 'should be valid when it contains letters and dashes'
+  },
+  {
+    name: 'sam-smith star',
+    isValid: true,
+    description: 'should be valid when it contains letters and a dash and space'
+  },
+  {
+    name: 'smith@',
+    isValid: false,
+    description: 'should not be valid when it contains letters and a symbol'
+  },
+  {
+    name: ' smith',
+    isValid: false,
+    description: 'should not be valid when it contains letters and starts with a space'
+  },
+  {
+    name: '-smith',
+    isValid: false,
+    description: 'should not be valid when it contains letters and starts with a dash'
+  },
+  {
+    name: 'smith ',
+    isValid: false,
+    description: 'should not be valid when it contains letters and ends with a space'
+  },
+  {
+    name: 'smith-',
+    isValid: false,
+    description: 'should not be valid when it contains letters and ends with a dash'
+  },
+  {
+    name: '-smith-',
+    isValid: false,
+    description: 'should not be valid when it contains letters and starts and ends with a dash'
+  },
+  {
+    name: ' smith ',
+    isValid: false,
+    description: 'should not be valid when it contains letters and starts and ends with a space'
+  }
+];
+
+export function validateAndExpect(field: AbstractControl, value: string, isValid: boolean) {
+  field.setValue(value);
+  if (isValid) {
+    expect(field.getError('pattern')).toBeNull();
+  } else {
+    expect(field.getError('pattern')).not.toBeNull();
+  }
+}
diff --git a/src/app/register/register-user-form/register-user-form.component.ts b/src/app/register/register-user-form/register-user-form.component.ts
@@ -2,11 +2,11 @@ export class RegisterUserFormComponent {
   translateCreateAccountErrorMessageCode(messageCode: string) {
     switch (messageCode) {
       case 'invalidFirstAndLastName':
-        return $localize`Error: First Name and Last Name must only contain characters A-Z`;
+        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`;
       case 'invalidFirstName':
-        return $localize`Error: First Name must only contain characters A-Z`;
+        return $localize`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`;
       case 'invalidLastName':
-        return $localize`Error: Last Name must only contain characters A-Z`;
+        return $localize`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`;
     }
     return messageCode;
   }