Merge pull request #2104 from ORCID/fix/batch-fixes-4-dec

batch-fixes-4-dec

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

@@ -125,7 +125,7 @@ export function Register2FormAdapterMixin<T extends Constructor<any>>(base: T) {
       return {
         ...StepA.value.personal,
         ...StepB.value.password,
-        ...StepB.value.sendOrcidNews,
+        ...StepC.value.sendOrcidNews,
         ...StepD.value.activitiesVisibilityDefault,
         ...StepD.value.termsOfUse,
         ...StepD.value.captcha,

src/app/register2/components/BaseForm.ts

@@ -13,7 +13,6 @@ export abstract class BaseForm implements ControlValueAccessor, AsyncValidator {
   public onTouchedFunction
   constructor() {}
   writeValue(val: any): void {
-    console.log('writeValue', val)
     if (val != null && val !== undefined && val !== '') {
       this.form.setValue(val, { emitEvent: true })
       // Trigger registerOnChange custom function by calling form.updateValueAndValidity

src/app/register2/components/backend-error/backend-error.component.html

@@ -1,4 +1,6 @@
-<ng-container *ngIf="recognizedError[errorCode] === 0">
+<ng-container
+  *ngIf="recognizedError[errorCode] === 0 && !disableInlineAlreadyExistError"
+>
   <ng-container i18n="@@register.emailAlreadyExists"
     >This email already exists in our system. Would you like to</ng-container
   >

src/app/register2/components/backend-error/backend-error.component.ts

@@ -29,6 +29,8 @@ enum RegisterBackendErrors {
 export class BackendErrorComponent implements OnInit {
   recognizedError = RegisterBackendErrors
   _errorCode: string
+  @Input() disableInlineAlreadyExistError = false
+
   @Input()
   set errorCode(errorCode: string) {
     // This will change the string send by the backend into a code, to handle the error trough a code

src/app/register2/components/form-notifications/form-notifications.component.scss

@@ -1,3 +1,8 @@
 :host {
   max-width: 100%;
+  ::ng-deep {
+    label {
+      white-space: initial;
+    }
+  }
 }

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

@@ -92,7 +92,7 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
         class="orc-font-small-print"
         id="email-input-input-label"
         [ngClass]="{
-          error: emailFormTouched && form.hasError('required', 'emails.email')
+          error: emailFormTouched && emails.controls.email.errors
         }"
         id="email-input-label"
         i18n="@@register.primaryEmail"
@@ -124,8 +124,9 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
       </mat-error>
       <mat-error
         *ngIf="
-          this.emails.hasError('email', 'email') ||
-          this.emails.hasError('pattern', 'email')
+          emailFormTouched &&
+          (this.emails.hasError('email', 'email') ||
+            this.emails.hasError('pattern', 'email'))
         "
         i18n="@@register.invalidEmail2"
       >
@@ -141,6 +142,7 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
           *ngFor="let error of this.emails.getError('backendError', 'email')"
         >
           <app-backend-error
+            [disableInlineAlreadyExistError]="true"
             [errorCode]="error"
             [value]="emails.get('email').value"
           ></app-backend-error>
@@ -173,7 +175,7 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
 
           <div>
             <a
-              routerLink="/signin"
+              (click)="navigateToSignin(emails.get('email').value)"
               i18n="@@register.signInToOrcidUsingThisEmail"
             >
               Sign in to ORCID using this email address</a

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

@@ -28,11 +28,15 @@ import {
   first,
   startWith,
   switchMap,
+  take,
 } from 'rxjs/operators'
 import { ReactivationService } from '../../../core/reactivation/reactivation.service'
 import { ReactivationLocal } from '../../../types/reactivation.local'
 import { BaseForm } from '../BaseForm'
 import { ErrorStateMatcher } from '@angular/material/core'
+import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { Router } from '@angular/router'
+import { ApplicationRoutes } from 'src/app/constants'
 export class MyErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(
     control: FormControl | null,
@@ -87,7 +91,9 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
   undefinedEmail: boolean
   constructor(
     private _register: Register2Service,
-    private _reactivationService: ReactivationService
+    private _reactivationService: ReactivationService,
+    private _platform: PlatformInfoService,
+    private _router: Router
   ) {
     super()
   }
@@ -262,4 +268,17 @@ export class FormPersonalComponent extends BaseForm implements OnInit {
   get emailsAreValid() {
     return this.emailConfirmationValid && this.emailValid
   }
+
+  navigateToSignin(email) {
+    this._platform
+      .get()
+      .pipe(take(1))
+      .subscribe((platform) => {
+        return this._router.navigate([ApplicationRoutes.signin], {
+          // keeps all parameters to support Oauth request
+          // and set show login to true
+          queryParams: { ...platform.queryParameters, email, show_login: true },
+        })
+      })
+  }
 }

src/app/register2/components/register2.scss-theme.scss

@@ -70,15 +70,6 @@
     }
   }
 
-  :host {
-    ::ng-deep {
-      .container .mat-horizontal-content-container,
-      .container {
-        background-color: map-get($background, 'ui-background-lightest');
-      }
-    }
-  }
-
   ::ng-deep {
     .valid-password-input {
       mat-icon {

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

@@ -58,6 +58,10 @@ mat-label.orc-font-small-print {
 }
 
 :host ::ng-deep {
+  mat-card {
+    margin-top: 32px !important;
+  }
+
   mat-error {
     margin-top: 8px;
     font-size: 12px;

src/app/register2/pages/register/register2.component.html

@@ -7,6 +7,7 @@
           #stepper
           labelPosition="bottom"
           class="orcid-stepper-wizard"
+          (selectionChange)="selectionChange($event)"
         >
           <mat-step [stepControl]="FormGroupStepA">
             <ng-template matStepLabel i18n="@@register.personalData"
@@ -46,7 +47,7 @@
               >Visibility and terms</ng-template
             >
             <app-step-d
-              #stepComponentC
+              #stepComponentD
               [(formGroup)]="FormGroupStepD"
               (submit)="register()"
               [loading]="loading"

src/app/register2/pages/register/register2.component.scss.theme.scss

@@ -7,9 +7,5 @@
   $warn: map-get($theme, accent);
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
-
-  :host {
-    background-color: map-get($background, 'ui-background-lightest');
-  }
 }
 @include theme($orcid-app-theme);

src/app/register2/pages/register/register2.component.ts

@@ -224,6 +224,11 @@ export class Register2Component implements OnInit, AfterViewInit {
       }
     }
   }
+  selectionChange(event: StepperSelectionEvent) {
+    if (this.platform.columns4 || this.platform.columns8) {
+      this.focusCurrentStep(event)
+    }
+  }
 
   // Fix to material vertical stepper not focusing current header
   // related issue https://github.com/angular/components/issues/8881