8934 registration add an affiliation with typeahead

package.json

@@ -60,13 +60,13 @@
     "gulp-clean": "^0.4.0",
     "gulp-flatten": "^0.4.0",
     "helphero": "^3.6.0",
+    "install": "^0.13.0",
     "jwt-decode": "^3.1.2",
     "karma-jasmine-html-reporter": "^1.7.0",
     "lodash": "^4.17.20",
-    "ngx-cookie-service": "^15",
+    "ngx-cookie-service": "^16",
     "nodemailer": "^6.7.2",
     "properties-to-json": "^0.1.4",
-    "puppeteer": "^19.2.2",
     "rxjs": "~6.5.2",
     "stream": "0.0.2",
     "timers": "^0.1.1",
@@ -103,7 +103,7 @@
     "jasmine-core": "~3.8.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "^6.3.16",
-    "karma-chrome-launcher": "~3.1.0",
+    "karma-chrome-launcher": "~3.2",
     "karma-coverage-istanbul-reporter": "^2.1.0",
     "karma-jasmine": "~4.0.0",
     "lighthouse": "^5.6.0",
@@ -114,6 +114,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.5",
     "protractor": "^7.0.0",
+    "puppeteer": "^21.7.0",
     "puppeteer-tsd": "^0.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -125,4 +126,4 @@
     "tslint-config-prettier": "^1.18.0",
     "typescript": "~5.1.6"
   }
-}
+}

src/app/core/register2/register2.backend-validators.ts

@@ -24,6 +24,7 @@ interface HasFormAdapters {
     StepA: UntypedFormGroup,
     StepB: UntypedFormGroup,
     StepC: UntypedFormGroup,
+    StepC2: UntypedFormGroup,
     StepD: UntypedFormGroup
   ): RegisterForm
 }
@@ -161,6 +162,7 @@ export function Register2BackendValidatorMixin<
       StepA: UntypedFormGroup,
       StepB: UntypedFormGroup,
       StepC: UntypedFormGroup,
+      StepC2: UntypedFormGroup,
       StepD: UntypedFormGroup,
 
       type?: 'shibboleth'
@@ -169,6 +171,7 @@ export function Register2BackendValidatorMixin<
         StepA,
         StepB,
         StepC,
+        StepC2,
         StepD
       )
       return this._http

src/app/core/register2/register2.form-adapter.ts

@@ -116,20 +116,55 @@ export function Register2FormAdapterMixin<T extends Constructor<any>>(base: T) {
       return value
     }
 
+    formGroupToAffiliationRegisterForm(formGroup: UntypedFormGroup) {
+      const value = formGroup.controls['organization'].value
+      const departmentName = formGroup.controls['departmentName'].value
+      const roleTitle = formGroup.controls['roleTitle'].value
+      const startDateGroup = formGroup.controls['startDateGroup'].value
+
+      if (typeof value === 'string') {
+        return { affiliationName: { value } }
+      } else {
+        return {
+          affiliationName: { value: value.value },
+          orgDisambiguatedId: {
+            value: value.disambiguatedAffiliationIdentifier,
+          },
+          departmentName: { value: departmentName },
+          roleTitle: { value: roleTitle },
+          affiliationType: { value: 'employment' },
+          startDate: {
+            month: startDateGroup.startDateMonth,
+            year: startDateGroup.startDateYear,
+          },
+        }
+      }
+    }
+
     formGroupToFullRegistrationForm(
       StepA: UntypedFormGroup,
       StepB: UntypedFormGroup,
       StepC: UntypedFormGroup,
+      StepC2: UntypedFormGroup,
       StepD: UntypedFormGroup
     ): RegisterForm {
-      return {
+      const value = {
         ...StepA.value.personal,
         ...StepB.value.password,
         ...StepC.value.activitiesVisibilityDefault,
         ...StepD.value.sendOrcidNews,
         ...StepD.value.termsOfUse,
         ...StepD.value.captcha,
       }
+
+      if (StepC2.valid) {
+        return {
+          ...value,
+          ...StepC2.value.affiliations,
+        }
+      } else {
+        return value
+      }
     }
   }
 }

src/app/core/register2/register2.service.ts

@@ -1,8 +1,8 @@
 import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { UntypedFormGroup } from '@angular/forms'
-import { Observable } from 'rxjs'
-import { catchError, first, map, retry, switchMap } from 'rxjs/operators'
+import { Observable, throwError } from 'rxjs'
+import { catchError, first, map, retry, switchMap, tap } from 'rxjs/operators'
 import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { RequestInfoForm } from 'src/app/types'
 import {
@@ -85,6 +85,7 @@ export class Register2Service extends _RegisterServiceMixingBase {
     StepA: UntypedFormGroup,
     StepB: UntypedFormGroup,
     StepC: UntypedFormGroup,
+    StepC2: UntypedFormGroup,
     StepD: UntypedFormGroup,
     reactivation: ReactivationLocal,
     requestInfoForm?: RequestInfoForm,
@@ -96,6 +97,7 @@ export class Register2Service extends _RegisterServiceMixingBase {
       StepA,
       StepB,
       StepC,
+      StepC2,
       StepD
     )
     this.addOauthContext(registerForm, requestInfoForm)

src/app/register/components/form-personal/form-personal.component.spec.ts

@@ -19,6 +19,7 @@ import { Overlay } from '@angular/cdk/overlay'
 import { RegisterService } from '../../../core/register/register.service'
 import { ReactivationService } from '../../../core/reactivation/reactivation.service'
 import { MdePopoverModule } from '../../../cdk/popover'
+import { MatLegacyAutocomplete } from '@angular/material/legacy-autocomplete'
 
 describe('FormPersonalComponent', () => {
   let component: FormPersonalComponent