Merge pull request #2144 from ORCID/fix/batch-of-fixes-2-feb

Fix/batch of fixes 2 feb

Author: leomendoza123

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

@@ -127,6 +127,9 @@ export function Register2FormAdapterMixin<T extends Constructor<any>>(base: T) {
       } else {
         return {
           affiliationName: { value: value.value },
+          disambiguatedAffiliationSourceId: {
+            value: value.disambiguatedAffiliationIdentifier,
+          },
           orgDisambiguatedId: {
             value: value.disambiguatedAffiliationIdentifier,
           },
@@ -137,6 +140,10 @@ export function Register2FormAdapterMixin<T extends Constructor<any>>(base: T) {
             month: startDateGroup.startDateMonth,
             year: startDateGroup.startDateYear,
           },
+          sourceId: { value: value.sourceId },
+          city: { value: value.city },
+          region: { value: value.region },
+          country: { value: value.country },
         }
       }
     }

src/app/register2/components/form-current-employment/form-current-employment.component.html

@@ -3,33 +3,42 @@ <h3 i18n="@@register.currentEmployment" class="orc-font-body margin-top-12">
     Current employment
   </h3>
 
-  <!-- <div class="announce" *ngIf="affiliationFound">
+  <div class="announce" *ngIf="rorIdHasBeenMatched">
     <div>
-      <img src="/assets/vectors/personal-email-icon.svg" aria-hidden="true" />
+      <img
+        src="/assets/vectors/registration-affiliation-icon.svg"
+        aria-hidden="true"
+      />
     </div>
     <div class="content">
       <div>
-        <h3 class="orc-font-body" i18n="@@register.thisLooksLikeAPersonalEmail">
+        <h3 class="orc-font-body" i18n="@@register.affiliationFoud">
           Affiliation found
         </h3>
       </div>
       <div>
-        <ng-container>
-          Based on your emails we think you are currently affiliated with
-        </ng-container>
-        <strong>The University of Bath.</strong>
-        <ng-container
-          >We’ve pre-selected this organization for you in the form
-          below.</ng-container
-        >
+        <p class="main-paragraph">
+          <ng-container i18n="@@register.basedOnYourEmailWeThink">
+            Based on your emails we think you are currently affiliated with
+          </ng-container>
+          <strong>TEST.</strong>
 
-        <div>
+          <ng-container
+            i18n="
+              @@register.webePreselectedThisOrganizationForYouInTheFormBelow"
+          >
+            We’ve pre-selected this organization for you in the form
+            below.</ng-container
+          >
+        </p>
+
+        <div i18n="@@register.whenYouCompleteRegistrationAnEmployment">
           When you complete registration an employment affiliation will be
           automatically added to your new ORCID record.
         </div>
       </div>
     </div>
-  </div> -->
+  </div>
 
   <section id="{{ type }}-organization">
     <div
@@ -110,11 +119,14 @@ <h3 class="orc-font-body" i18n="@@register.thisLooksLikeAPersonalEmail">
         class="selected-org orc-font-small-print"
         *ngIf="selectedOrganizationFromDatabase && displayOrganizationHint"
       >
-        {{ selectedOrganizationFromDatabase.value }},
         {{ selectedOrganizationFromDatabase.city
         }}<ng-container *ngIf="selectedOrganizationFromDatabase.city"
           >,</ng-container
         >
+        {{ selectedOrganizationFromDatabase.region
+        }}<ng-container *ngIf="selectedOrganizationFromDatabase.region"
+          >,</ng-container
+        >
         {{ selectedOrganizationFromDatabase.country }}
       </div>
       <div

src/app/register2/components/form-current-employment/form-current-employment.component.ts

@@ -30,6 +30,8 @@ import {
 import { EMPTY, Observable, of } from 'rxjs'
 import { RecordAffiliationService } from 'src/app/core/record-affiliations/record-affiliations.service'
 import { dateMonthYearValidator } from 'src/app/shared/validators/date/date.validator'
+import { RegisterStateService } from '../../register-state.service'
+import { OrgDisambiguated } from 'src/app/types'
 export class MyErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(
     control: FormControl | null,
@@ -74,6 +76,7 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit {
   requireOrganizationDisambiguatedDataOnRefresh = false
   private _type: AffiliationType
   affiliationFound = false
+  rorIdHasBeenMatched: boolean
 
   @Input()
   public get type(): AffiliationType {
@@ -104,15 +107,17 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit {
     .fill(0)
     .map((i, idx) => idx + 1)
 
-  organization: string | Organization = ''
+  organization: string | Organization | OrgDisambiguated = ''
   platform: PlatformInfo
   isMobile: boolean
+  rorId: string = 'https://ror.org/036mest28'
   constructor(
     private _register: Register2Service,
     private _platform: PlatformInfoService,
     private _liveAnnouncer: LiveAnnouncer,
     private _recordAffiliationService: RecordAffiliationService,
-    private _formBuilder: FormBuilder
+    private _formBuilder: FormBuilder,
+    private registerStateService: RegisterStateService
   ) {
     super()
     this._platform.get().subscribe((platform) => {
@@ -122,6 +127,19 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit {
   }
 
   ngOnInit() {
+    this.registerStateService.matchOrganization$.subscribe((organization) => {
+      this.organization = organization
+      this.form.patchValue({
+        organization: organization,
+      })
+      this.rorIdHasBeenMatched = !!organization
+
+      if (this.rorIdHasBeenMatched) {
+        this.form.controls.organization.markAsTouched()
+      } else {
+        this.form.controls.organization.markAsUntouched()
+      }
+    })
     this.form = new UntypedFormGroup({
       organization: new UntypedFormControl(this.organization, {
         validators: [
@@ -212,8 +230,12 @@ export class FormCurrentEmploymentComponent extends BaseForm implements OnInit {
     )
   }
 
-  autoCompleteDisplayOrganization(organization: Organization) {
-    return organization.value
+  autoCompleteDisplayOrganization(
+    organization: Organization | string | OrgDisambiguated
+  ) {
+    if (typeof organization === 'object') {
+      return organization.value
+    }
   }
 
   private _filter(value: string): Observable<Organization[]> {

src/app/register2/components/form-personal/form-personal.component.html

@@ -67,6 +67,12 @@ <h3 i18n="@@register.yourNames" class="orc-font-body margin-top-12">
         [placeholder]="labelFamilyNamePlaceholder"
       />
     </mat-form-field>
+    <mat-error
+      *ngIf="form.hasError('maxlength', 'familyNames')"
+      i18n="@@topBar.keywordMaxLength"
+    >
+      Must be less than 100 characters
+    </mat-error>
     <mat-error
       *ngIf="
         familyNamesFormTouched && form.hasError('illegalName', 'familyNames')

src/app/register2/components/form-personal/form-personal.component.ts

@@ -46,6 +46,7 @@ import { SnackbarService } from 'src/app/cdk/snackbar/snackbar.service'
 import { SignInService } from 'src/app/core/sign-in/sign-in.service'
 import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
 import { ERROR_REPORT } from 'src/app/errors'
+import { RegisterStateService } from '../../register-state.service'
 export class MyErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(
     control: FormControl | null,
@@ -111,6 +112,7 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
     private _snackbar: SnackbarService,
     private _signIn: SignInService,
     private _errorHandler: ErrorHandlerService,
+    private _registerStateService: RegisterStateService,
     @Inject(WINDOW) private window: Window
   ) {
     super()
@@ -146,6 +148,19 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
       }
     )
 
+    this.additionalEmails.controls[0].valueChanges
+      .pipe(
+        debounceTime(1000),
+        filter(() => !this.additionalEmails.controls[0].errors),
+        switchMap((value) => {
+          const emailDomain = value.split('@')[1]
+          return this._register.getEmailCategory(emailDomain)
+        })
+      )
+      .subscribe((value) => {
+        this._registerStateService.setRorAffiliationFound(value.rorId, true)
+      })
+
     this.emails.controls['email'].valueChanges
       .pipe(
         debounceTime(1000),
@@ -159,6 +174,7 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
         this.professionalEmail = value.category === 'PROFESSIONAL'
         this.personalEmail = value.category === 'PERSONAL'
         this.undefinedEmail = value.category === 'UNDEFINED'
+        this._registerStateService.setRorAffiliationFound(value.rorId)
       })
 
     if (!this.reactivation?.isReactivation) {
@@ -180,7 +196,10 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
         asyncValidators: this._register.backendValueValidate('givenNames'),
       }),
       familyNames: new UntypedFormControl('', {
-        validators: [OrcidValidators.illegalName],
+        validators: [
+          OrcidValidators.illegalName,
+          Validators.maxLength(this.maxNameLenght),
+        ],
       }),
       emails: this.emails,
     })

src/app/register2/components/form-terms/form-terms.component.html

@@ -5,8 +5,8 @@ <h3 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h3>
     (form.hasError('required', 'termsOfUse') ||
       form.hasError('required', 'dataProcessed'))
   "
-  i18n="@@register.youMustAccept"
-  >You must accept the terms we use and consent to your data being processed in
+  i18n="@@register.youMustAccept2"
+  >You must accept the terms of use and consent to your data being processed in
   the United States</mat-error
 >
 

src/app/register2/components/register2.style.scss

@@ -61,8 +61,18 @@ mat-label.orc-font-small-print {
 .step-actions {
   border-top: 1px solid;
   padding-top: 32px;
-  a {
-    font-style: italic;
+
+  button {
+    height: 40px;
+    font-size: 16px;
+    a {
+      font-style: italic;
+      font-size: 14px;
+    }
+    a.skip-step {
+      font-style: normal;
+      font-size: 14px;
+    }
   }
 }
 .columns-12 {
@@ -150,6 +160,9 @@ mat-label.orc-font-small-print {
 
 .info,
 .announce {
+  .main-paragraph {
+    margin-bottom: 16px;
+  }
   .content div:not(:last-child) {
     margin-bottom: 16px;
   }
@@ -222,7 +235,7 @@ mat-label.orc-font-small-print {
         justify-content: space-between;
         width: 100%;
         margin-top: 29px;
-        gap: 12px;
+        gap: 16px;
       }
     }
   }

src/app/register2/components/step-c2/step-c2.component.html

@@ -72,7 +72,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step3.3">
           id="step-c-back-button"
           (click)="optionalNextStep()"
         >
-          <a i18n="@@shared.skipThisStepWithoutAddingAnAffiliation">
+          <a i18n="@@shared.skipThisStepWithoutAddingAnAffiliation" class="skip-step">
             Skip this step without adding an affiliation</a
           >
         </button>

src/app/register2/register-state.service.spec.ts

@@ -0,0 +1,21 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RegisterStateService } from './register-state.service';
+
+describe('RegisterStateService', () => {
+  let service: RegisterStateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [{
+        provide: RegisterStateService,
+        useValue: {}
+      }]
+    });
+    service = TestBed.inject(RegisterStateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/register2/register-state.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core'
+import { OrganizationsService } from '../core'
+import { Organization } from 'src/app/types/record-affiliation.endpoint'
+import { Subject } from 'rxjs'
+import { OrgDisambiguated } from '../types'
+@Injectable({
+  providedIn: 'root',
+})
+export class RegisterStateService {
+  rorIdHasBeenMatched: boolean = false
+  matchOrganization$ = new Subject<string | Organization>()
+  primaryEmailMatched: Organization
+  secondaryEmail: Organization
+  constructor(private _organizationsService: OrganizationsService) {}
+
+  setRorAffiliationFound(affiliationFound: string, additionalEmail = false) {
+    if (!!affiliationFound) {
+      this._organizationsService
+        .getOrgDisambiguated('ROR', affiliationFound)
+        .subscribe((affiliation) => {
+          this.rorIdHasBeenMatched = true
+          if (!additionalEmail) {
+            this.primaryEmailMatched =
+              this.affiliationToOrganization(affiliation)
+          } else {
+            this.secondaryEmail = this.affiliationToOrganization(affiliation)
+          }
+
+          this.updateTheAffiliationMatch()
+        })
+    } else {
+      if (!additionalEmail) {
+        this.primaryEmailMatched = null
+      } else {
+        this.secondaryEmail = null
+      }
+      this.updateTheAffiliationMatch()
+    }
+  }
+
+  private affiliationToOrganization(
+    affiliation: OrgDisambiguated
+  ): Organization {
+    return {
+      value: affiliation.value,
+      city: affiliation.city,
+      region: affiliation.region,
+      country: affiliation.country,
+      disambiguatedAffiliationIdentifier:
+        affiliation.disambiguatedAffiliationIdentifier,
+      sourceId: affiliation.sourceId,
+    } as Organization
+  }
+
+  private updateTheAffiliationMatch() {
+    if (this.primaryEmailMatched) {
+      this.rorIdHasBeenMatched = true
+      this.matchOrganization$.next(this.primaryEmailMatched)
+    } else if (this.secondaryEmail) {
+      this.rorIdHasBeenMatched = true
+      this.matchOrganization$.next(this.secondaryEmail)
+    } else {
+      this.rorIdHasBeenMatched = false
+      this.matchOrganization$.next('')
+    }
+  }
+}

src/app/types/register.email-category.ts

@@ -2,4 +2,5 @@ export type EmailCategory = 'PROFESSIONAL' | 'PERSONAL' | 'UNDEFINED'
 
 export interface EmailCategoryEndpoint {
   category: EmailCategory
+  rorId: string
 }