Merge pull request #2450 from ORCID/migrate-reactivation-form

migrate reactivation form
ORCID · Jan 22, 2025 · 6f14eee · 6f14eee
2 parents a5df61b + d964f49
commit 6f14eee
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 75 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -151,7 +151,7 @@ const routes: Routes = [
     matcher: routerReactivation,
     canActivateChild: [LanguageGuard, RegisterGuard],
     loadChildren: () =>
-      import('./register/register.module').then((m) => m.RegisterModuleLegacy),
+      import('./register2/register.module').then((m) => m.Register2Module),
   },
   {
     path: ApplicationRoutes.selfService,

diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
@@ -114,11 +114,16 @@ <h3 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
         appearance="outline"
         [hideRequiredMarker]="true"
         [ngClass]="{
-          'valid-password-input': emailsAreValid,
+          'valid-password-input':
+            emailsAreValid || this.reactivation?.isReactivation,
           'disable-error': !emailError
         }"
       >
-        <mat-icon *ngIf="emailsAreValid" matSuffix>done</mat-icon>
+        <mat-icon
+          *ngIf="emailsAreValid || this.reactivation?.isReactivation"
+          matSuffix
+          >done</mat-icon
+        >
 
         <input
           aria-labelledby="email-input-input-label"
@@ -234,10 +239,9 @@ <h3 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
     <!-- <mat-label i18n="@@register.confirmEmail"
     >Confirm primary email</mat-label
   > -->
-    <div class="input-container">
+    <div class="input-container" *ngIf="!reactivation?.isReactivation">
       <mat-form-field
         appearance="outline"
-        *ngIf="!reactivation?.isReactivation"
         [hideRequiredMarker]="true"
         [ngClass]="{ 'valid-password-input': emailsAreValid }"
       >

diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -152,7 +152,9 @@ export class FormPersonalComponent
       {
         email: new UntypedFormControl('', {
           validators: [Validators.required, OrcidValidators.email],
-          asyncValidators: this._register.backendValueValidate('email'),
+          asyncValidators:
+            !this.reactivation?.isReactivation &&
+            this._register.backendValueValidate('email'),
         }),
         additionalEmails: this.additionalEmails,
       },
@@ -320,7 +322,7 @@ export class FormPersonalComponent
 
   get emailConfirmationValid() {
     return ((this.form.controls.emails as any).controls?.confirmEmail as any)
-      .valid
+      ?.valid
   }
 
   get givenNameFormTouched() {

diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
@@ -13,11 +13,13 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
           Create your ORCID iD
         </h1>
       </ng-container>
-      <ng-container
-        *ngIf="reactivation?.isReactivation"
-        i18n="@@register.reactivation"
-      >
-        Thank you for reactivating your ORCID iD.
+      <ng-container *ngIf="reactivation?.isReactivation">
+        <h1
+          class="orc-font-heading-small"
+          i18n="@@register.reactivateYourOrcidAccount"
+        >
+          Reactivate your ORCID account
+        </h1>
       </ng-container>
     </mat-card-title>
     <mat-card-subtitle role="heading" aria-level="2">
@@ -71,7 +73,16 @@ <h2 class="orc-font-body-small" i18n="@@register.step1.3">
           type="button"
           id="step-a-back-button"
         >
-          <a i18n="@@register.cancelRegistration"> Cancel registration</a>
+          <a
+            i18n="@@register.cancelRegistration"
+            *ngIf="!reactivation?.isReactivation"
+            >Cancel registration</a
+          >
+          <a
+            i18n="@@register.cancelReactivation"
+            *ngIf="reactivation?.isReactivation"
+            >Cancel reactivation</a
+          >
         </button>
       </div>
     </form>

diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts
@@ -79,7 +79,7 @@ export class StepAComponent
   ngAfterViewInit(): void {
     // Timeout used to get focus on the first input after the first step loads
     setTimeout(() => {
-      this.firstInput.nativeElement.focus()
+      this.firstInput?.nativeElement.focus()
     }),
       100
   }

diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
@@ -13,11 +13,13 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
           Create your ORCID iD
         </h1>
       </ng-container>
-      <ng-container
-        *ngIf="reactivation?.isReactivation"
-        i18n="@@register.reactivation"
-      >
-        Thank you for reactivating your ORCID iD.
+      <ng-container *ngIf="reactivation?.isReactivation">
+        <h1
+          class="orc-font-heading-small"
+          i18n="@@register.reactivateYourOrcidAccount"
+        >
+          Reactivate your ORCID account
+        </h1>
       </ng-container>
     </mat-card-title>
     <mat-card-subtitle role="heading" aria-level="2">
@@ -41,18 +43,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step2.3">
           matStepperNext
           (click)="nextButton2()"
         >
-          <ng-container
-            *ngIf="!reactivation?.isReactivation"
-            i18n="@@register.nextStep"
-          >
-            Next Step
-          </ng-container>
-          <ng-container
-            *ngIf="reactivation?.isReactivation"
-            i18n="@@register.reactivate"
-          >
-            REACTIVATE
-          </ng-container>
+          <ng-container i18n="@@register.nextStep"> Next Step </ng-container>
         </button>
         <button
           mat-button

diff --git a/src/app/register2/components/step-c/step-c.component.html b/src/app/register2/components/step-c/step-c.component.html
@@ -19,11 +19,13 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
           Create your ORCID iD
         </h1>
       </ng-container>
-      <ng-container
-        *ngIf="reactivation?.isReactivation"
-        i18n="@@register.reactivation"
-      >
-        Thank you for reactivating your ORCID iD.
+      <ng-container *ngIf="reactivation?.isReactivation">
+        <h1
+          class="orc-font-heading-small"
+          i18n="@@register.reactivateYourOrcidAccount"
+        >
+          Reactivate your ORCID account
+        </h1>
       </ng-container>
     </mat-card-title>
     <mat-card-subtitle role="heading" aria-level="2">
@@ -47,18 +49,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step4.3">
           matStepperNext
           (click)="nextButton2()"
         >
-          <ng-container
-            *ngIf="!reactivation?.isReactivation"
-            i18n="@@register.nextStep"
-          >
-            Next Step
-          </ng-container>
-          <ng-container
-            *ngIf="reactivation?.isReactivation"
-            i18n="@@register.reactivate"
-          >
-            REACTIVATE
-          </ng-container>
+          <ng-container i18n="@@register.nextStep"> Next Step </ng-container>
         </button>
         <button
           mat-button

diff --git a/src/app/register2/components/step-c2/step-c2.component.html b/src/app/register2/components/step-c2/step-c2.component.html
@@ -19,11 +19,13 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
           Create your ORCID iD
         </h1>
       </ng-container>
-      <ng-container
-        *ngIf="reactivation?.isReactivation"
-        i18n="@@register.reactivation"
-      >
-        Thank you for reactivating your ORCID iD.
+      <ng-container *ngIf="reactivation?.isReactivation">
+        <h1
+          class="orc-font-heading-small"
+          i18n="@@register.reactivateYourOrcidAccount"
+        >
+          Reactivate your ORCID account
+        </h1>
       </ng-container>
     </mat-card-title>
     <mat-card-subtitle role="heading" aria-level="2">
@@ -51,18 +53,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step3.3">
           [disabled]="loading"
           (click)="nextButton2()"
         >
-          <ng-container
-            *ngIf="!reactivation?.isReactivation"
-            i18n="@@register.nextStep"
-          >
-            Next Step
-          </ng-container>
-          <ng-container
-            *ngIf="reactivation?.isReactivation"
-            i18n="@@register.reactivate"
-          >
-            REACTIVATE
-          </ng-container>
+          <ng-container i18n="@@register.nextStep"> Next Step </ng-container>
         </button>
         <button
           mat-button

diff --git a/src/app/register2/components/step-d/step-d.component.html b/src/app/register2/components/step-d/step-d.component.html
@@ -19,11 +19,13 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
           Create your ORCID iD
         </h1>
       </ng-container>
-      <ng-container
-        *ngIf="reactivation?.isReactivation"
-        i18n="@@register.reactivation"
-      >
-        Thank you for reactivating your ORCID iD.
+      <ng-container *ngIf="reactivation?.isReactivation">
+        <h1
+          class="orc-font-heading-small"
+          i18n="@@register.reactivateYourOrcidAccount"
+        >
+          Reactivate your ORCID account
+        </h1>
       </ng-container>
     </mat-card-title>
     <mat-card-subtitle role="heading" aria-level="2">
@@ -57,9 +59,9 @@ <h2 class="orc-font-body-small" i18n="@@register.step5.3">
           </ng-container>
           <ng-container
             *ngIf="reactivation?.isReactivation"
-            i18n="@@register.reactivate"
+            i18n="@@register.reactivateMyOrcidAccount"
           >
-            REACTIVATE
+            Reactivate my ORCID account
           </ng-container>
         </button>
         <button
@@ -70,7 +72,7 @@ <h2 class="orc-font-body-small" i18n="@@register.step5.3">
           id="step-d-back-button"
           (click)="backButton()"
         >
-          <a i18n="@@shared.previousStep"> Previous Step</a>
+          <a i18n="@@shared.previousStep">Previous Step</a>
         </button>
       </div>
     </form>

diff --git a/src/app/register2/register-observability.service.ts b/src/app/register2/register-observability.service.ts
@@ -52,9 +52,9 @@ export class RegisterObservabilityService {
           emailError: (form.controls.emails as UntypedFormGroup).controls.email
             .errors,
           confirmEmailError: (form.controls.emails as UntypedFormGroup).controls
-            .confirmEmail.errors,
+            .confirmEmail?.errors,
           additionalEmailsError: (form.controls.emails as UntypedFormGroup)
-            .controls.additionalEmails.errors,
+            .controls.additionalEmails?.errors,
         },
       }
     )

diff --git a/src/locale/properties/register/register.en.properties b/src/locale/properties/register/register.en.properties
@@ -103,6 +103,8 @@ register.reactivating=Reactivating your account
 register.resendReactivate=click here to reactivate
 register.deactivated=A deactivated ORCID record is associated with this email address.
 register.reactivation=Thank you for reactivating your ORCID iD.
+register.reactivateYourOrcidAccount=Reactivate your ORCID account
+register.reactivateMyOrcidAccount=Reactivate my ORCID account
 register.reactivate=REACTIVATE
 register.passwordIsToLong=Passwords must be between 8 and 256 characters long
 register.wrongPasswordPatternV2=Password must meet all requirements
@@ -166,6 +168,7 @@ register.step3.3=Step 3 of 5 - Current employment
 register.step5.3=Step 5 of 5 - Terms and conditions
 register.nextStep=Next Step
 register.cancelRegistration=Cancel registration
+register.cancelReactivation=Cancel reactivation
 register.previousStep=Previous Step
 register.completeRegistration=Complete registration
 register.passwordRequired2=Please enter a password