From c75f45f31e5c441c3fe3955ff11b47bf95d92dca Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza Fernadez <leomendoza123@gmail.com>
Date: Tue, 14 Nov 2023 09:04:25 -0600
Subject: [PATCH 01/21] Registration-names-par-1

---
 src/app/app-routing.module.ts                 |   8 +-
 src/app/app.component.ts                      |  18 +-
 src/app/guards/register-toggl.guard.ts        |  34 ++
 .../institutional.component.scss-theme.scss   |   2 +-
 src/app/layout/header/header.component.ts     |   5 +-
 .../ErrorStateMatcherForFormLevelErrors.ts    |  35 ++
 src/app/register2/components/BaseForm.ts      |  68 ++++
 src/app/register2/components/BaseStep.ts      |  16 +
 .../backend-error.component.html              |  45 +++
 .../backend-error.component.scss              |   0
 .../backend-error.component.spec.ts           |  45 +++
 .../backend-error/backend-error.component.ts  | 100 ++++++
 .../form-anti-robots.component.html           |  14 +
 .../form-anti-robots.component.scss           |   0
 .../form-anti-robots.component.spec.ts        |  47 +++
 .../form-anti-robots.component.ts             |  99 +++++
 .../form-notifications.component.html         |  35 ++
 .../form-notifications.component.scss         |   3 +
 .../form-notifications.component.spec.ts      |  48 +++
 .../form-notifications.component.ts           |  51 +++
 .../form-password.component.html              | 193 ++++++++++
 .../form-password.component.scss              |  20 ++
 .../form-password.component.scss-theme.scss   |  16 +
 .../form-password.component.spec.ts           |  52 +++
 .../form-password/form-password.component.ts  | 112 ++++++
 ...-personal-additional-emails.component.html |  86 +++++
 ...-personal-additional-emails.component.scss |  11 +
 ...rsonal-additional-emails.component.spec.ts |  26 ++
 ...rm-personal-additional-emails.component.ts |  93 +++++
 .../form-personal.component.html              | 125 +++++++
 .../form-personal.component.scss              |   5 +
 .../form-personal.component.spec.ts           |  54 +++
 .../form-personal/form-personal.component.ts  | 197 ++++++++++
 .../form-terms/form-terms.component.html      |  66 ++++
 .../form-terms/form-terms.component.scss      |  12 +
 .../form-terms/form-terms.component.spec.ts   |  45 +++
 .../form-terms/form-terms.component.ts        |  69 ++++
 .../form-visibility.component.html            |  95 +++++
 .../form-visibility.component.scss            |  10 +
 .../form-visibility.component.spec.ts         |  45 +++
 .../form-visibility.component.ts              |  68 ++++
 .../components/register2.scss-theme.scss      |  19 +
 .../register2/components/register2.style.scss | 113 ++++++
 .../components/step-a/step-a.component.html   |  78 ++++
 .../components/step-a/step-a.component.scss   |   6 +
 .../step-a/step-a.component.spec.ts           |  43 +++
 .../components/step-a/step-a.component.ts     |  76 ++++
 .../components/step-b/step-b.component.html   |  60 ++++
 .../components/step-b/step-b.component.scss   |   4 +
 .../step-b/step-b.component.spec.ts           |  24 ++
 .../components/step-b/step-b.component.ts     |  18 +
 .../components/step-c/step-c.component.html   |  73 ++++
 .../components/step-c/step-c.component.scss   |   4 +
 .../step-c/step-c.component.spec.ts           |  24 ++
 .../components/step-c/step-c.component.ts     |  18 +
 .../top-bar-record-issues.component.html      |   1 +
 .../top-bar-record-issues.component.scss      |   0
 .../top-bar-record-issues.component.spec.ts   |  24 ++
 .../top-bar-record-issues.component.ts        |  12 +
 .../pages/register/register.component.html    |  51 +++
 .../pages/register/register.component.scss    |  15 +
 .../pages/register/register.component.spec.ts |  54 +++
 .../pages/register/register.component.ts      | 314 ++++++++++++++++
 .../pages/register/register2.component.html   |  94 +++++
 .../pages/register/register2.component.scss   |   9 +
 .../pages/register/register2.component.ts     | 339 ++++++++++++++++++
 src/app/register2/register-routing.module.ts  |  16 +
 src/app/register2/register.module.ts          |  74 ++++
 68 files changed, 3622 insertions(+), 14 deletions(-)
 create mode 100644 src/app/guards/register-toggl.guard.ts
 create mode 100644 src/app/register2/ErrorStateMatcherForFormLevelErrors.ts
 create mode 100644 src/app/register2/components/BaseForm.ts
 create mode 100644 src/app/register2/components/BaseStep.ts
 create mode 100644 src/app/register2/components/backend-error/backend-error.component.html
 create mode 100644 src/app/register2/components/backend-error/backend-error.component.scss
 create mode 100644 src/app/register2/components/backend-error/backend-error.component.spec.ts
 create mode 100644 src/app/register2/components/backend-error/backend-error.component.ts
 create mode 100644 src/app/register2/components/form-anti-robots/form-anti-robots.component.html
 create mode 100644 src/app/register2/components/form-anti-robots/form-anti-robots.component.scss
 create mode 100644 src/app/register2/components/form-anti-robots/form-anti-robots.component.spec.ts
 create mode 100644 src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
 create mode 100644 src/app/register2/components/form-notifications/form-notifications.component.html
 create mode 100644 src/app/register2/components/form-notifications/form-notifications.component.scss
 create mode 100644 src/app/register2/components/form-notifications/form-notifications.component.spec.ts
 create mode 100644 src/app/register2/components/form-notifications/form-notifications.component.ts
 create mode 100644 src/app/register2/components/form-password/form-password.component.html
 create mode 100644 src/app/register2/components/form-password/form-password.component.scss
 create mode 100644 src/app/register2/components/form-password/form-password.component.scss-theme.scss
 create mode 100644 src/app/register2/components/form-password/form-password.component.spec.ts
 create mode 100644 src/app/register2/components/form-password/form-password.component.ts
 create mode 100644 src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
 create mode 100644 src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.scss
 create mode 100644 src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.spec.ts
 create mode 100644 src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
 create mode 100644 src/app/register2/components/form-personal/form-personal.component.html
 create mode 100644 src/app/register2/components/form-personal/form-personal.component.scss
 create mode 100644 src/app/register2/components/form-personal/form-personal.component.spec.ts
 create mode 100644 src/app/register2/components/form-personal/form-personal.component.ts
 create mode 100644 src/app/register2/components/form-terms/form-terms.component.html
 create mode 100644 src/app/register2/components/form-terms/form-terms.component.scss
 create mode 100644 src/app/register2/components/form-terms/form-terms.component.spec.ts
 create mode 100644 src/app/register2/components/form-terms/form-terms.component.ts
 create mode 100644 src/app/register2/components/form-visibility/form-visibility.component.html
 create mode 100644 src/app/register2/components/form-visibility/form-visibility.component.scss
 create mode 100644 src/app/register2/components/form-visibility/form-visibility.component.spec.ts
 create mode 100644 src/app/register2/components/form-visibility/form-visibility.component.ts
 create mode 100644 src/app/register2/components/register2.scss-theme.scss
 create mode 100644 src/app/register2/components/register2.style.scss
 create mode 100644 src/app/register2/components/step-a/step-a.component.html
 create mode 100644 src/app/register2/components/step-a/step-a.component.scss
 create mode 100644 src/app/register2/components/step-a/step-a.component.spec.ts
 create mode 100644 src/app/register2/components/step-a/step-a.component.ts
 create mode 100644 src/app/register2/components/step-b/step-b.component.html
 create mode 100644 src/app/register2/components/step-b/step-b.component.scss
 create mode 100644 src/app/register2/components/step-b/step-b.component.spec.ts
 create mode 100644 src/app/register2/components/step-b/step-b.component.ts
 create mode 100644 src/app/register2/components/step-c/step-c.component.html
 create mode 100644 src/app/register2/components/step-c/step-c.component.scss
 create mode 100644 src/app/register2/components/step-c/step-c.component.spec.ts
 create mode 100644 src/app/register2/components/step-c/step-c.component.ts
 create mode 100644 src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.html
 create mode 100644 src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.scss
 create mode 100644 src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.spec.ts
 create mode 100644 src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.ts
 create mode 100644 src/app/register2/pages/register/register.component.html
 create mode 100644 src/app/register2/pages/register/register.component.scss
 create mode 100644 src/app/register2/pages/register/register.component.spec.ts
 create mode 100644 src/app/register2/pages/register/register.component.ts
 create mode 100644 src/app/register2/pages/register/register2.component.html
 create mode 100644 src/app/register2/pages/register/register2.component.scss
 create mode 100644 src/app/register2/pages/register/register2.component.ts
 create mode 100644 src/app/register2/register-routing.module.ts
 create mode 100644 src/app/register2/register.module.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index de67975194..3d0573fbd9 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
+import { LoadChildrenCallback, RouterModule, Routes } from '@angular/router'
 
 import {
   ApplicationRoutes,
@@ -91,7 +91,9 @@ const routes: Routes = [
     path: ApplicationRoutes.register,
     canActivateChild: [LanguageGuard, RegisterGuard],
     loadChildren: () =>
-      import('./register/register.module').then((m) => m.RegisterModule),
+      (!localStorage.getItem('register2') &&
+       import('./register/register.module').then((m) => m.RegisterModule)) || 
+       import('./register2/register.module').then((m) => m.Register2Module),
   },
   {
     path: ApplicationRoutes.search,
@@ -179,4 +181,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, {})],
   exports: [RouterModule],
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0e02e598b8..47cfd0477e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -2,21 +2,20 @@ import { Component, HostBinding, HostListener, Inject } from '@angular/core'
 import { NavigationEnd, NavigationStart, Router } from '@angular/router'
 import { catchError, tap } from 'rxjs/operators'
 
+import {
+  finishPerformanceMeasurement,
+  reportNavigationStart,
+} from './analytics-utils'
 import { PlatformInfo } from './cdk/platform-info'
 import { PlatformInfoService } from './cdk/platform-info/platform-info.service'
 import { WINDOW } from './cdk/window'
 import { HeadlessOnOauthRoutes } from './constants'
 import { UserService } from './core'
-import { ZendeskService } from './core/zendesk/zendesk.service'
-import { GoogleTagManagerService } from './core/google-tag-manager/google-tag-manager.service'
-import {
-  finishPerformanceMeasurement,
-  reportNavigationStart,
-} from './analytics-utils'
-import { ERROR_REPORT } from './errors'
 import { ErrorHandlerService } from './core/error-handler/error-handler.service'
-import { environment } from 'src/environments/environment'
+import { GoogleTagManagerService } from './core/google-tag-manager/google-tag-manager.service'
 import { TitleService } from './core/title-service/title.service'
+import { ZendeskService } from './core/zendesk/zendesk.service'
+import { ERROR_REPORT } from './errors'
 
 @Component({
   selector: 'app-root',
@@ -59,6 +58,7 @@ export class AppComponent {
           this.currentRouteIsHeadlessOnOauthPage = this.showHeadlessOnOauthPage(
             platformInfo.currentRoute
           )
+          console.log('currentRouteIsHeadlessOnOauthPage', this.currentRouteIsHeadlessOnOauthPage)
           this.setPlatformClasses(platformInfo)
           this.screenDirection = platformInfo.screenDirection
           if (
@@ -113,6 +113,8 @@ export class AppComponent {
   }
   showHeadlessOnOauthPage(currentRoute: string): boolean {
     if (currentRoute) {
+      console.log(currentRoute)
+
       const value = HeadlessOnOauthRoutes.filter(
         (url) => currentRoute.indexOf('/' + url) === 0
       )
diff --git a/src/app/guards/register-toggl.guard.ts b/src/app/guards/register-toggl.guard.ts
new file mode 100644
index 0000000000..d77b600899
--- /dev/null
+++ b/src/app/guards/register-toggl.guard.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core'
+import {
+  ActivatedRouteSnapshot,
+  Router,
+  RouterStateSnapshot,
+  UrlTree,
+} from '@angular/router'
+import { combineLatest, Observable } from 'rxjs'
+import { map } from 'rxjs/operators'
+
+import { ApplicationRoutes } from '../constants'
+import { UserService } from '../core'
+import { TogglzService } from '../core/togglz/togglz.service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RegisterTogglGuard {
+  constructor(
+    private _userInfo: UserService,
+    private _router: Router,
+    private _togglz: TogglzService
+  ) { }
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ):
+    | Observable<boolean | UrlTree>
+    | Promise<boolean | UrlTree>
+    | boolean
+    | UrlTree {
+    return false
+  }
+}
diff --git a/src/app/institutional/pages/institutional/institutional.component.scss-theme.scss b/src/app/institutional/pages/institutional/institutional.component.scss-theme.scss
index 0639da0481..663cb13ef6 100644
--- a/src/app/institutional/pages/institutional/institutional.component.scss-theme.scss
+++ b/src/app/institutional/pages/institutional/institutional.component.scss-theme.scss
@@ -1,4 +1,4 @@
-@import '../../../../../node_modules/@angular/material/theming';
+@import '~@angular/material/theming';
 @import '../../../../assets/scss/material.orcid-theme';
 
 @mixin institutional-theme($theme) {
diff --git a/src/app/layout/header/header.component.ts b/src/app/layout/header/header.component.ts
index f7afd092af..6284f6d11e 100644
--- a/src/app/layout/header/header.component.ts
+++ b/src/app/layout/header/header.component.ts
@@ -5,7 +5,6 @@ import { filter } from 'rxjs/operators'
 import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { UserService } from 'src/app/core'
-import { SignInService } from 'src/app/core/sign-in/sign-in.service'
 import { TogglzService } from 'src/app/core/togglz/togglz.service'
 import { ApplicationMenuItem, UserInfo } from 'src/app/types'
 import {
@@ -77,7 +76,9 @@ export class HeaderComponent implements OnInit {
         path === `/${ApplicationRoutes.trustedParties}` ||
         path === `/${ApplicationRoutes.selfService}` ||
         path === `/${ApplicationRoutes.inbox}` ||
-        path === `/${ApplicationRoutes.developerTools}`
+        path === `/${ApplicationRoutes.developerTools}` ||
+        path === `/${ApplicationRoutes.register}`
+
     })
   }
 
diff --git a/src/app/register2/ErrorStateMatcherForFormLevelErrors.ts b/src/app/register2/ErrorStateMatcherForFormLevelErrors.ts
new file mode 100644
index 0000000000..3877e5c3db
--- /dev/null
+++ b/src/app/register2/ErrorStateMatcherForFormLevelErrors.ts
@@ -0,0 +1,35 @@
+import { UntypedFormControl, FormGroupDirective, NgForm } from '@angular/forms'
+import { ErrorStateMatcher } from '@angular/material/core'
+
+export class ErrorStateMatcherForFormLevelErrors implements ErrorStateMatcher {
+  getControlErrorAtForm: (
+    control: UntypedFormControl,
+    errorGroup: string
+  ) => string[]
+  errorGroup: string
+  constructor(
+    getControlErrorAtForm: (
+      control: UntypedFormControl,
+      errorGroup: string
+    ) => string[],
+    errorGroup: string
+  ) {
+    this.getControlErrorAtForm = getControlErrorAtForm
+    this.errorGroup = errorGroup
+  }
+  isErrorState(
+    control: UntypedFormControl | null,
+    form: FormGroupDirective | NgForm | null
+  ): boolean {
+    const errorsAtFormLevel = this.getControlErrorAtForm(
+      control,
+      this.errorGroup
+    )
+    const controlInteracted = control.touched || (form && form.submitted)
+    const validControlAtFormLevel = !(
+      errorsAtFormLevel && errorsAtFormLevel.length > 0
+    )
+    const validControl = control && !control.invalid
+    return !(validControlAtFormLevel && validControl) && controlInteracted
+  }
+}
diff --git a/src/app/register2/components/BaseForm.ts b/src/app/register2/components/BaseForm.ts
new file mode 100644
index 0000000000..c599d948b8
--- /dev/null
+++ b/src/app/register2/components/BaseForm.ts
@@ -0,0 +1,68 @@
+import {
+  AbstractControl,
+  AsyncValidator,
+  ControlValueAccessor,
+  UntypedFormGroup,
+  ValidationErrors,
+} from '@angular/forms'
+import { merge, Observable, timer } from 'rxjs'
+import { filter, map, startWith, take } from 'rxjs/operators'
+
+export abstract class BaseForm implements ControlValueAccessor, AsyncValidator {
+  public form: UntypedFormGroup
+  public onTouchedFunction
+  constructor() {}
+  writeValue(val: any): void {
+    console.log('val', val)
+    if (val != null && val !== undefined && val !== '') {
+      console.log('val go', val)
+
+      this.form.setValue(val, { emitEvent: true })
+      // Trigger registerOnChange custom function by calling form.updateValueAndValidity
+      // require since most form controls extending this class
+      // need to call the xxxxRegisterForm functions to adapt the original angular form value for the backend format
+      setTimeout(() => {
+        this.form.updateValueAndValidity()
+      })
+    }
+  }
+  registerOnChange(fn: any): void {
+    this.form.valueChanges.subscribe((value) => {
+      fn(value)
+    })
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouchedFunction = fn
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.form.disable() : this.form.enable()
+  }
+  validate(c: AbstractControl): Observable<ValidationErrors | null> {
+    // temporal fix
+    // see related issue
+    // https://github.com/angular/angular/issues/14542
+    // depending of fix
+    // https://github.com/angular/angular/pull/20806
+    //
+    // using form.statusChanges observable only would be a better solution for this scenario (see the code before this fix)
+    // but if the form status starts as `pending` Angular wont report the status change because of #14542
+    // and the status might now start as `pending` with the introduction of Oauth registration
+
+    return merge(this.form.statusChanges, timer(0, 1000)).pipe(
+      map(() => this.form.status),
+      startWith(this.form.status),
+      filter((value) => value !== 'PENDING'),
+      take(1),
+      map(() => {
+        return this.form.valid
+          ? null
+          : {
+              invalidForm: {
+                valid: false,
+                message: 'internal form is not valid',
+              },
+            }
+      })
+    )
+  }
+}
diff --git a/src/app/register2/components/BaseStep.ts b/src/app/register2/components/BaseStep.ts
new file mode 100644
index 0000000000..fdb03d461a
--- /dev/null
+++ b/src/app/register2/components/BaseStep.ts
@@ -0,0 +1,16 @@
+import { EventEmitter, Input, Output, Directive } from '@angular/core'
+import { UntypedFormGroup } from '@angular/forms'
+
+@Directive()
+export abstract class BaseStepDirective {
+  public _formGroup: UntypedFormGroup
+  @Input()
+  set formGroup(formGroup: UntypedFormGroup) {
+    this._formGroup = formGroup
+    this.formGroupChange.emit(this._formGroup)
+  }
+  get formGroup() {
+    return this._formGroup
+  }
+  @Output() formGroupChange = new EventEmitter<UntypedFormGroup>()
+}
diff --git a/src/app/register2/components/backend-error/backend-error.component.html b/src/app/register2/components/backend-error/backend-error.component.html
new file mode 100644
index 0000000000..d08320c6bb
--- /dev/null
+++ b/src/app/register2/components/backend-error/backend-error.component.html
@@ -0,0 +1,45 @@
+<ng-container *ngIf="recognizedError[errorCode] === 0">
+  <ng-container i18n="@@register.emailAlreadyExists"
+    >This email already exists in our system. Would you like to</ng-container
+  >
+
+  <a (click)="navigateToSignin(value)" i18n="@@register.signinLowerCase"
+    >sign in</a
+  ><ng-container i18n="@@shared.questionMark">?</ng-container>
+</ng-container>
+
+<ng-container
+  *ngIf="recognizedError[errorCode] === 1"
+  i18n="@@register.additionalEmailMatchPrimary"
+>
+  Additional email cannot match primary email
+</ng-container>
+
+<ng-container
+  *ngIf="recognizedError[errorCode] === 2"
+  i18n="@@register.additionalEmailMatch"
+>
+  Additional emails cannot be duplicated
+</ng-container>
+
+<ng-container *ngIf="recognizedError[errorCode] === 3">
+  <ng-container i18n="@@ngOrcid.signin.unclaimedExists1"
+    >The ORCID record exists but has not been claimed. Would you like
+    to</ng-container
+  >
+
+  <a (click)="navigateToClaim(value)" i18n="@@ngOrcid.signin.unclaimedExists2"
+    >resend the claim email?</a
+  >
+</ng-container>
+
+<ng-container *ngIf="recognizedError[errorCode] === 4">
+  <ng-container i18n="@@register.deactivated">
+    A deactivated ORCID record is associated with this email address.
+  </ng-container>
+  <a (click)="reactivateEmail(value)" i18n="@@register.resendReactivate"
+    >click here to reactivate</a
+  >
+</ng-container>
+
+<ng-container *ngIf="unrecognizedError"> {{ errorCode }} </ng-container>
diff --git a/src/app/register2/components/backend-error/backend-error.component.scss b/src/app/register2/components/backend-error/backend-error.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/register2/components/backend-error/backend-error.component.spec.ts b/src/app/register2/components/backend-error/backend-error.component.spec.ts
new file mode 100644
index 0000000000..444341d5e4
--- /dev/null
+++ b/src/app/register2/components/backend-error/backend-error.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { BackendErrorComponent } from './backend-error.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { Overlay } from '@angular/cdk/overlay'
+import { SignInService } from '../../../core/sign-in/sign-in.service'
+
+describe('BackendErrorComponent', () => {
+  let component: BackendErrorComponent
+  let fixture: ComponentFixture<BackendErrorComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [BackendErrorComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        SignInService,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BackendErrorComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/backend-error/backend-error.component.ts b/src/app/register2/components/backend-error/backend-error.component.ts
new file mode 100644
index 0000000000..6e36e49331
--- /dev/null
+++ b/src/app/register2/components/backend-error/backend-error.component.ts
@@ -0,0 +1,100 @@
+import { Component, Input, OnInit, Inject } from '@angular/core'
+import { Router } from '@angular/router'
+import { take } from 'rxjs/operators'
+import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { SnackbarService } from 'src/app/cdk/snackbar/snackbar.service'
+import { ApplicationRoutes } from 'src/app/constants'
+import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
+import { SignInService } from 'src/app/core/sign-in/sign-in.service'
+import { ERROR_REPORT } from 'src/app/errors'
+import { WINDOW } from 'src/app/cdk/window'
+
+// When the error text is not listed on the RegisterBackendErrors enum
+// the error message will be displayed as it comes from the backend
+// This is because the backend might return code or a text ready for the UI
+enum RegisterBackendErrors {
+  'orcid.frontend.verify.duplicate_email',
+  'additionalEmailCantBePrimaryEmail',
+  'duplicatedAdditionalEmail',
+  'orcid.frontend.verify.unclaimed_email',
+  'orcid.frontend.verify.deactivated_email',
+}
+
+@Component({
+  selector: 'app-backend-error',
+  templateUrl: './backend-error.component.html',
+  styleUrls: ['./backend-error.component.scss'],
+  preserveWhitespaces: true,
+})
+export class BackendErrorComponent implements OnInit {
+  recognizedError = RegisterBackendErrors
+  _errorCode: string
+  @Input()
+  set errorCode(errorCode: string) {
+    // This will change the string send by the backend into a code, to handle the error trough a code
+    if (errorCode.indexOf('resend-claim') >= 0) {
+      errorCode = RegisterBackendErrors[3]
+    }
+    this._errorCode = errorCode
+  }
+  get errorCode() {
+    return this._errorCode
+  }
+  @Input() value?: string
+  unrecognizedError = false
+  constructor(
+    private _platformInfo: PlatformInfoService,
+    private _router: Router,
+    private _snackbar: SnackbarService,
+    private _signIn: SignInService,
+    private _errorHandler: ErrorHandlerService,
+    @Inject(WINDOW) private window: Window
+  ) {}
+  ngOnInit() {
+    if (!(this.errorCode in RegisterBackendErrors)) {
+      this.unrecognizedError = true
+    }
+  }
+
+  navigateToClaim(email) {
+    email = encodeURIComponent(email)
+    this.window.location.href = `/resend-claim?email=${email}`
+  }
+
+  navigateToSignin(email) {
+    this._platformInfo
+      .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 },
+        })
+      })
+  }
+
+  reactivateEmail(email) {
+    const $deactivate = this._signIn.reactivation(email)
+    $deactivate.subscribe((data) => {
+      if (data.error) {
+        this._errorHandler
+          .handleError(
+            new Error(data.error),
+            ERROR_REPORT.REGISTER_REACTIVATED_EMAIL
+          )
+          .subscribe()
+      } else {
+        this._snackbar.showSuccessMessage({
+          title: $localize`:@@register.reactivating:Reactivating your account`,
+          // tslint:disable-next-line: max-line-length
+          message: $localize`:@@ngOrcid.signin.verify.reactivationSent:Thank you for reactivating your ORCID record; please complete the process by following the steps in the email we are now sending you. If you don’t receive an email from us, please`,
+          action: $localize`:@@shared.contactSupport:contact support.`,
+          actionURL: `https://support.orcid.org/`,
+          closable: true,
+        })
+        this._router.navigate([ApplicationRoutes.signin])
+      }
+    })
+  }
+}
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.html b/src/app/register2/components/form-anti-robots/form-anti-robots.component.html
new file mode 100644
index 0000000000..20bd4df427
--- /dev/null
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.html
@@ -0,0 +1,14 @@
+<ng-container [formGroup]="form">
+  <div
+    appRecaptcha
+    (captchaFail)="captchaFail($event)"
+    (captchaLoaded)="captchaLoaded($event)"
+    formControlName="captcha"
+  ></div>
+
+  <mat-error
+    *ngIf="captcha.hasError('captcha') && errorState"
+    i18n="@@register.recaptchaRequired"
+    >Please check the recaptcha box</mat-error
+  >
+</ng-container>
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss b/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.spec.ts b/src/app/register2/components/form-anti-robots/form-anti-robots.component.spec.ts
new file mode 100644
index 0000000000..eb5403a67e
--- /dev/null
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.spec.ts
@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormAntiRobotsComponent } from './form-anti-robots.component'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { RegisterService } from '../../../core/register/register.service'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { Overlay } from '@angular/cdk/overlay'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { ErrorStateMatcher } from '@angular/material/core'
+
+describe('FormAntiRobotsComponent', () => {
+  let component: FormAntiRobotsComponent
+  let fixture: ComponentFixture<FormAntiRobotsComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [FormAntiRobotsComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        RegisterService,
+        ErrorStateMatcher,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormAntiRobotsComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts b/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
new file mode 100644
index 0000000000..959ba4876b
--- /dev/null
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
@@ -0,0 +1,99 @@
+import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+  NG_ASYNC_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms'
+import { ErrorStateMatcher } from '@angular/material/core'
+import { merge, Subject } from 'rxjs'
+import { RegisterService } from 'src/app/core/register/register.service'
+
+import { BaseForm } from '../BaseForm'
+
+@Component({
+  selector: 'app-form-anti-robots',
+  templateUrl: './form-anti-robots.component.html',
+  styleUrls: ['./form-anti-robots.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormAntiRobotsComponent),
+      multi: true,
+    },
+    {
+      provide: NG_ASYNC_VALIDATORS,
+      useExisting: forwardRef(() => FormAntiRobotsComponent),
+      multi: true,
+    },
+  ],
+})
+export class FormAntiRobotsComponent
+  extends BaseForm
+  implements OnInit, DoCheck
+{
+  captchaFailState = false
+  captchaLoadedWithWidgetId: number
+  $widgetIdUpdated = new Subject()
+  errorState = false
+  captcha = new UntypedFormControl(null, {
+    validators: [this.captchaValidator()],
+  })
+  ngOnInit(): void {
+    this.form = new UntypedFormGroup({
+      captcha: this.captcha,
+    })
+  }
+
+  constructor(
+    private _register: RegisterService,
+    private _errorStateMatcher: ErrorStateMatcher
+  ) {
+    super()
+  }
+
+  // Captcha must be clicked unless it was not loaded
+  captchaValidator(): ValidatorFn {
+    return (control: UntypedFormControl) => {
+      const hasError = Validators.required(control)
+      if (
+        hasError &&
+        hasError.required &&
+        this.captchaLoadedWithWidgetId !== undefined
+      ) {
+        return { captcha: true }
+      } else {
+        return null
+      }
+    }
+  }
+
+  captchaFail($event) {
+    this.captchaFailState = $event
+  }
+  captchaLoaded(widgetId: number) {
+    this.captchaLoadedWithWidgetId = widgetId
+    this.captcha.updateValueAndValidity()
+    this.$widgetIdUpdated.next()
+  }
+
+  ngDoCheck(): void {
+    this.errorState = this._errorStateMatcher.isErrorState(this.captcha, null)
+  }
+
+  // OVERWRITE
+  registerOnChange(fn: any) {
+    merge(
+      this.$widgetIdUpdated.asObservable(),
+      this.form.valueChanges
+    ).subscribe(() => {
+      const registerForm = this._register.formGroupToRecaptchaForm(
+        this.form,
+        this.captchaLoadedWithWidgetId
+      )
+      fn(registerForm)
+    })
+  }
+}
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.html b/src/app/register2/components/form-notifications/form-notifications.component.html
new file mode 100644
index 0000000000..d518331c03
--- /dev/null
+++ b/src/app/register2/components/form-notifications/form-notifications.component.html
@@ -0,0 +1,35 @@
+<h3 class="mat-subheading-2" i18n="@@register.notificationSettings">
+  Notification settings
+</h3>
+
+<p i18n="@@register.notificationsDescription1">
+  ORCID sends email notifications about items related to your account, security,
+  and privacy, including requests from ORCID member organizations for permission
+  to update your record, and changes made to your record by those organizations.
+</p>
+
+<p i18n="@@register.notificationsDescription2">
+  You can also choose to receive emails from us about new features and tips for
+  making the most of your ORCID record.
+</p>
+
+<ng-container [formGroup]="form">
+  <mat-checkbox
+    color="primary"
+    formControlName="sendOrcidNews"
+    class="orcid-checkbox-baseline"
+    ><ng-container i18n="@@register.quarterlyEmail"
+      >Please send me quarterly emails about new ORCID features and
+      tips.</ng-container
+    >
+    <i i18n="@@register.quarterlyEmailVerified"
+      >To receive these emails, you will also need to verify your primary email
+      address.</i
+    >
+  </mat-checkbox>
+</ng-container>
+
+<p i18n="@@register.reviewAfterRegistered">
+  After you've registered, you can change your notification settings at any time
+  in the account settings section of your ORCID record.
+</p>
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.scss b/src/app/register2/components/form-notifications/form-notifications.component.scss
new file mode 100644
index 0000000000..58207ec0a4
--- /dev/null
+++ b/src/app/register2/components/form-notifications/form-notifications.component.scss
@@ -0,0 +1,3 @@
+:host {
+  max-width: 100%;
+}
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.spec.ts b/src/app/register2/components/form-notifications/form-notifications.component.spec.ts
new file mode 100644
index 0000000000..74d5498538
--- /dev/null
+++ b/src/app/register2/components/form-notifications/form-notifications.component.spec.ts
@@ -0,0 +1,48 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormNotificationsComponent } from './form-notifications.component'
+import { RegisterService } from '../../../core/register/register.service'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import {
+  MatLegacyDialog as MatDialog,
+  MatLegacyDialogModule as MatDialogModule,
+} from '@angular/material/legacy-dialog'
+import { RouterTestingModule } from '@angular/router/testing'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { Overlay } from '@angular/cdk/overlay'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+
+describe('FormNotificationsComponent', () => {
+  let component: FormNotificationsComponent
+  let fixture: ComponentFixture<FormNotificationsComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [FormNotificationsComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        RegisterService,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormNotificationsComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.ts b/src/app/register2/components/form-notifications/form-notifications.component.ts
new file mode 100644
index 0000000000..11982529df
--- /dev/null
+++ b/src/app/register2/components/form-notifications/form-notifications.component.ts
@@ -0,0 +1,51 @@
+import { Component, forwardRef, OnInit } from '@angular/core'
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+  NG_ASYNC_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  Validators,
+} from '@angular/forms'
+import { RegisterService } from 'src/app/core/register/register.service'
+
+import { BaseForm } from '../BaseForm'
+
+@Component({
+  selector: 'app-form-notifications',
+  templateUrl: './form-notifications.component.html',
+  styleUrls: ['./form-notifications.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormNotificationsComponent),
+      multi: true,
+    },
+    {
+      provide: NG_ASYNC_VALIDATORS,
+      useExisting: forwardRef(() => FormNotificationsComponent),
+      multi: true,
+    },
+  ],
+})
+export class FormNotificationsComponent extends BaseForm implements OnInit {
+  constructor(private _register: RegisterService) {
+    super()
+  }
+  ngOnInit() {
+    this.form = new UntypedFormGroup({
+      sendOrcidNews: new UntypedFormControl(false, {
+        validators: Validators.required,
+      }),
+    })
+  }
+
+  // OVERWRITE
+  registerOnChange(fn: any) {
+    this.form.valueChanges.subscribe((value) => {
+      const registerForm = this._register.formGroupToSendOrcidNewsForm(
+        this.form as UntypedFormGroup
+      )
+      fn(registerForm)
+    })
+  }
+}
diff --git a/src/app/register2/components/form-password/form-password.component.html b/src/app/register2/components/form-password/form-password.component.html
new file mode 100644
index 0000000000..7c8077b9be
--- /dev/null
+++ b/src/app/register2/components/form-password/form-password.component.html
@@ -0,0 +1,193 @@
+<div [formGroup]="form">
+  <div class="input-container">
+    <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+      <mat-label i18n="@@register.password">Password</mat-label>
+      <input
+        formControlName="password"
+        type="password"
+        matInput
+        autocomplete="new-password"
+        id="password-input"
+      />
+      <mat-error
+        *ngIf="form.hasError('required', 'password')"
+        i18n="@@register.passwordRequired"
+      >
+        A password is required
+      </mat-error>
+      <mat-error
+        *ngIf="form.hasError('passwordIsEqualToTheEmail', 'password')"
+        i18n="@@register.passwordNotEmail"
+      >
+        Password must not be the same as your email address
+      </mat-error>
+      <mat-error
+        *ngIf="
+          !form.hasError('required', 'password') &&
+          (form.hasError('minlength', 'password') ||
+            form.hasError('pattern', 'password'))
+        "
+        i18n="@@register.wrongPasswordPattern"
+      >
+        Password must match all pattern requirements
+      </mat-error>
+      <mat-error
+        *ngIf="form.hasError('maxlength', 'password')"
+        i18n="@@register.passwordIsToLongV2"
+      >
+        Password must be between 8 and 256 characters
+      </mat-error>
+      <mat-error *ngIf="this.form.hasError('backendError', 'password')">
+        <div
+          *ngFor="let error of this.form.getError('backendError', 'password')"
+        >
+          <app-backend-error [errorCode]="error"></app-backend-error>
+        </div>
+      </mat-error>
+    </mat-form-field>
+
+    <button
+      mat-icon-button
+      [attr.aria-label]="labelInfo"
+      type="button"
+      [mdePopoverTriggerFor]="passwordPopover"
+      mdePopoverTriggerOn="click"
+      #passwordPopoverTrigger="mdePopoverTrigger"
+    >
+      <mat-icon class="material-icons-outlined large-material-icon"
+        >help_outline</mat-icon
+      >
+    </button>
+  </div>
+
+  <ol>
+    <li>
+      <ng-container
+        [ngTemplateOutlet]="
+          form.hasError('required', 'password') ||
+          form.hasError('minlength', 'password')
+            ? invalid
+            : valid
+        "
+      ></ng-container>
+      <div i18n="@@register.passwordLength">8 or more characters</div>
+    </li>
+    <li>
+      <ng-container
+        [ngTemplateOutlet]="
+          form.hasError('required', 'password') ||
+          form.getError('pattern', 'password')?.requiredPattern ==
+            hasLetterOrSymbolPattern
+            ? invalid
+            : valid
+        "
+      ></ng-container>
+      <div i18n="@@register.passwordSymbol">1 letter or symbol</div>
+    </li>
+    <li>
+      <ng-container
+        [ngTemplateOutlet]="
+          form.hasError('required', 'password') ||
+          form.getError('pattern', 'password')?.requiredPattern ==
+            hasNumberPattern
+            ? invalid
+            : valid
+        "
+      ></ng-container>
+      <div i18n="@@register.passwordNumber">1 number</div>
+    </li>
+  </ol>
+
+  <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+    <mat-label i18n="@@register.confirmPassword">Confirm password</mat-label>
+    <input
+      formControlName="passwordConfirm"
+      type="password"
+      matInput
+      autocomplete="new-password"
+      id="password-confirm-input"
+    />
+    <mat-error
+      *ngIf="form.hasError('required', 'passwordConfirm')"
+      i18n="@@register.passwordConfirmationRequired"
+    >
+      Retype your password
+    </mat-error>
+    <mat-error
+      *ngIf="form.hasError('passwordIsEqualToTheEmail', 'passwordConfirm')"
+      i18n="@@register.passwordCantBeEmail"
+    >
+      Password must not be the same as your email address
+    </mat-error>
+
+    <mat-error
+      *ngIf="form.hasError('mismatch', 'passwordConfirm')"
+      i18n="@@register.passwordConfirmationMatch"
+    >
+      The password and confirmed password must match
+    </mat-error>
+  </mat-form-field>
+</div>
+
+<ng-template #valid>
+  <mat-icon class="valid">check_circle</mat-icon>
+</ng-template>
+
+<ng-template #invalid>
+  <mat-icon class="material-icons-outlined">check_circle</mat-icon>
+</ng-template>
+
+<mde-popover #passwordPopover="mdePopover" [mdePopoverOverlapTrigger]="false">
+  <mat-card class="mat-elevation-z3 orcid-popover">
+    <div class="popover-content">
+      <p i18n="@@register.passwordLengthDetail">
+        Must be between 8 and 256 characters long and contain:
+      </p>
+      <ul>
+        <li i18n="@@register.atLeast1">at least 1 numeral: 0 - 9</li>
+        <li>
+          <ng-container i18n="@@register.atLeast1ofTheFollowing"
+            >at least 1 of the following:</ng-container
+          >
+
+          <ul>
+            <li i18n="@@register.alphaCharacter">
+              alpha character, case-sensitive a-Z
+            </li>
+            <li>
+              <ng-container i18n="@@register.theFollowingSymbols">
+                any of the following symbols:</ng-container
+              ><br />
+              ! @ # $ % ^ * ( ) ~ ` {{ '{ }' }} [ ] | \ & _
+            </li>
+          </ul>
+        </li>
+        <li>
+          <ng-container i18n="@@register.optionalTheSpace"
+            >optionally the space character,</ng-container
+          >
+          <br />
+          <ng-container i18n="@@register.optionalTheSpaceIe"
+            >i.e ' ' and other punctuation such as . , ;</ng-container
+          >
+        </li>
+      </ul>
+      <p>
+        <strong i18n="@@register.examplePassword">Example: sun% moon2</strong>
+      </p>
+      <p>
+        <ng-container i18n="@@register.doesNotAllowCommonPassword">
+          ORCID does not allow common passwords. Common passwords are insecure,
+          easily-guessed words or phrases such as 'qwerty123'.
+        </ng-container>
+        <a
+          href="https://github.com/danielmiessler/SecLists/blob/master/Passwords/Common-Credentials/10-million-password-list-top-1000.txt"
+          i18n="@@register.seeFullList"
+          target="_blank"
+          rel="noopener noreferrer"
+          >See the full list of common passwords we don't allow on ORCID</a
+        >
+      </p>
+    </div>
+  </mat-card>
+</mde-popover>
diff --git a/src/app/register2/components/form-password/form-password.component.scss b/src/app/register2/components/form-password/form-password.component.scss
new file mode 100644
index 0000000000..5814f8f6f4
--- /dev/null
+++ b/src/app/register2/components/form-password/form-password.component.scss
@@ -0,0 +1,20 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+ol {
+  margin-block-start: 0px;
+  padding-inline-start: 0px;
+  padding: 0;
+  li {
+    list-style-type: none;
+    display: flex;
+    img {
+      margin-inline-end: 4px;
+    }
+    div {
+      margin: 2px;
+    }
+  }
+}
diff --git a/src/app/register2/components/form-password/form-password.component.scss-theme.scss b/src/app/register2/components/form-password/form-password.component.scss-theme.scss
new file mode 100644
index 0000000000..85ff72cd1f
--- /dev/null
+++ b/src/app/register2/components/form-password/form-password.component.scss-theme.scss
@@ -0,0 +1,16 @@
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin form-password($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  ::ng-deep .valid {
+    color: mat.get-color-from-palette($accent, 900);
+  }
+}
+
+@include form-password($orcid-app-theme);
diff --git a/src/app/register2/components/form-password/form-password.component.spec.ts b/src/app/register2/components/form-password/form-password.component.spec.ts
new file mode 100644
index 0000000000..32f79f6159
--- /dev/null
+++ b/src/app/register2/components/form-password/form-password.component.spec.ts
@@ -0,0 +1,52 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormPasswordComponent } from './form-password.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialog as MatDialog,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { Overlay } from '@angular/cdk/overlay'
+import { RegisterService } from '../../../core/register/register.service'
+import { MdePopoverModule } from '../../../cdk/popover'
+
+describe('FormPasswordComponent', () => {
+  let component: FormPasswordComponent
+  let fixture: ComponentFixture<FormPasswordComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, MdePopoverModule, RouterTestingModule],
+      declarations: [FormPasswordComponent],
+      providers: [
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        WINDOW_PROVIDERS,
+        RegisterService,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormPasswordComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts
new file mode 100644
index 0000000000..b24e5b3e56
--- /dev/null
+++ b/src/app/register2/components/form-password/form-password.component.ts
@@ -0,0 +1,112 @@
+import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core'
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+  NG_ASYNC_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms'
+import { HAS_LETTER_OR_SYMBOL, HAS_NUMBER } from 'src/app/constants'
+import { RegisterService } from 'src/app/core/register/register.service'
+import { RegisterForm } from 'src/app/types/register.endpoint'
+import { OrcidValidators } from 'src/app/validators'
+
+import { BaseForm } from '../BaseForm'
+
+@Component({
+  selector: 'app-form-password',
+  templateUrl: './form-password.component.html',
+  styleUrls: [
+    './form-password.component.scss-theme.scss',
+    './form-password.component.scss',
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormPasswordComponent),
+      multi: true,
+    },
+    {
+      provide: NG_ASYNC_VALIDATORS,
+      useExisting: forwardRef(() => FormPasswordComponent),
+      multi: true,
+    },
+  ],
+  preserveWhitespaces: true,
+})
+export class FormPasswordComponent extends BaseForm implements OnInit {
+  labelInfo = $localize`:@@register.ariaLabelInfoPassword:info about password`
+  labelClose = $localize`:@@register.ariaLabelClose:close`
+  @ViewChild(`#passwordPopover`) passwordPopover
+  @ViewChild(`#passwordPopoverTrigger`) passwordPopoverTrigger
+  hasNumberPattern = HAS_NUMBER
+  hasLetterOrSymbolPattern = HAS_LETTER_OR_SYMBOL
+  @Input() personalData: RegisterForm
+  constructor(private _register: RegisterService) {
+    super()
+  }
+  ngOnInit() {
+    this.form = new UntypedFormGroup(
+      {
+        password: new UntypedFormControl('', {
+          validators: [
+            Validators.required,
+            Validators.minLength(8),
+            Validators.maxLength(256),
+            Validators.pattern(this.hasNumberPattern),
+            Validators.pattern(this.hasLetterOrSymbolPattern),
+            this.passwordDoesNotContainUserEmails(),
+          ],
+          asyncValidators: [this._register.backendValueValidate('password')],
+        }),
+        passwordConfirm: new UntypedFormControl('', Validators.required),
+      },
+      {
+        validators: OrcidValidators.matchValues('password', 'passwordConfirm'),
+        asyncValidators: this._register.backendPasswordValidate(),
+      }
+    )
+  }
+
+  passwordDoesNotContainUserEmails(): ValidatorFn {
+    return (control: UntypedFormControl) => {
+      const password: string = control.value
+      let hasError = false
+
+      if (this.personalData && password) {
+        Object.keys(this.personalData.emailsAdditional).forEach((key) => {
+          const additionalEmail = this.personalData.emailsAdditional[key].value
+          if (password.indexOf(additionalEmail) >= 0) {
+            hasError = true
+          }
+        })
+      }
+
+      if (
+        this.personalData &&
+        this.personalData.email &&
+        password.indexOf(this.personalData.email.value) >= 0
+      ) {
+        hasError = true
+      }
+
+      if (hasError) {
+        return { passwordIsEqualToTheEmail: true }
+      } else {
+        return null
+      }
+    }
+  }
+
+  // OVERWRITE
+  registerOnChange(fn: any) {
+    this.form.valueChanges.subscribe((value) => {
+      const registerForm = this._register.formGroupToPasswordRegisterForm(
+        this.form as UntypedFormGroup
+      )
+
+      fn(registerForm)
+    })
+  }
+}
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
new file mode 100644
index 0000000000..55e5caded6
--- /dev/null
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
@@ -0,0 +1,86 @@
+<ng-container [formGroup]="additionalEmails">
+  <div class="input-container" *ngFor="
+      let additionalEmailControl of additionalEmails?.controls | keyvalue;
+      index as i
+    ">
+
+    <mat-label class="orc-font-small-print">
+      <ng-container i18n="@@register.additionalEmails">Additional email</ng-container>
+      {{ i !== 0 ? i : '' }}
+      <label i18n="@@register.optional">(Optional)</label>
+    </mat-label>
+    <mat-form-field appearance="outline">
+
+      <input [attr.placeholder]="labelAddAnAddionalEmail" #emailInput formControlName="{{ additionalEmailControl.key }}"
+        matInput [errorStateMatcher]="backendErrorsMatcher" appTrim [id]="additionalEmailControl.key" type="email" />
+
+    </mat-form-field>
+    <mat-error *ngIf="
+    additionalEmails.hasError('email', additionalEmailControl.key) ||
+    additionalEmails.hasError('pattern', additionalEmailControl.key)
+  " i18n="@@register.invalidEmail">
+      Invalid email format
+    </mat-error>
+    <mat-error *ngFor="
+    let error of getControlErrorAtFormLevel(
+      additionalEmailControl.value,
+      'backendErrors'
+    )
+  ">
+      <app-backend-error [errorCode]="error" [value]="additionalEmailControl.value.value"></app-backend-error>
+    </mat-error>
+
+    <!-- <button
+      *ngIf="i == 0"
+      mat-icon-button
+      [attr.aria-label]="labelInfoAboutEmails"
+      type="button"
+      [mdePopoverTriggerFor]="namesPopover"
+      mdePopoverTriggerOn="click"
+      #additionalEmailsPopoverTrigger="mdePopoverTrigger"
+    >
+      <mat-icon class="material-icons-outlined large-material-icon"
+        >help_outline</mat-icon
+      >
+    </button> -->
+    <!-- <button
+      *ngIf="i > 0"
+      mat-icon-button
+      [attr.aria-label]="labelDeleteEmail"
+      type="button"
+      (click)="deleteEmailInput(additionalEmailControl.key)"
+    >
+      <mat-icon>remove_circle_outline</mat-icon>
+    </button> -->
+  </div>
+</ng-container>
+
+<!-- <a (click)="addAdditionalEmail()" class="mat-button-font">
+  <mat-icon>add</mat-icon>
+  <span i18n="@@register.additionalEmailAdd">Add another email</span>
+</a> -->
+<!--
+<mde-popover
+  #namesPopover="mdePopover"
+  [mdePopoverOverlapTrigger]="false"
+  [mdePopoverCloseOnClick]="true"
+>
+  <mat-card class="mat-elevation-z3 orcid-popover">
+    <ng-container i18n="@@register.additionalEmailInfo"
+      >Ensure that you never lose access to your ORCID record by registering
+      additional email addresses on your account.</ng-container
+    >
+
+    <button
+      mat-button
+      color="primary"
+      [attr.aria-label]="labelClose"
+      (click)="additionalEmailsPopoverTrigger.closePopover()"
+      cdkFocusInitial
+      i18n="@@shared.ok"
+      type="button"
+    >
+      Ok
+    </button>
+  </mat-card>
+</mde-popover> -->
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.scss b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.scss
new file mode 100644
index 0000000000..c0ebe826ac
--- /dev/null
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.scss
@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  display: flex;
+  span {
+    margin: 2px;
+  }
+}
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.spec.ts b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.spec.ts
new file mode 100644
index 0000000000..f9b8f371b4
--- /dev/null
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.spec.ts
@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormPersonalAdditionalEmailsComponent } from './form-personal-additional-emails.component'
+import { MdePopoverModule } from '../../../cdk/popover'
+
+describe('FormPersonalAdditionalEmailsComponent', () => {
+  let component: FormPersonalAdditionalEmailsComponent
+  let fixture: ComponentFixture<FormPersonalAdditionalEmailsComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [MdePopoverModule],
+      declarations: [FormPersonalAdditionalEmailsComponent],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormPersonalAdditionalEmailsComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
new file mode 100644
index 0000000000..81f615e6dd
--- /dev/null
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
@@ -0,0 +1,93 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  QueryList,
+  ViewChildren,
+} from '@angular/core'
+import {
+  AbstractControl,
+  UntypedFormControl,
+  UntypedFormGroup,
+} from '@angular/forms'
+import { OrcidValidators } from 'src/app/validators'
+
+import { ErrorStateMatcherForFormLevelErrors } from '../../ErrorStateMatcherForFormLevelErrors'
+
+@Component({
+  selector: 'app-form-personal-additional-emails',
+  templateUrl: './form-personal-additional-emails.component.html',
+  styleUrls: ['./form-personal-additional-emails.component.scss', '../register2.style.scss'],
+})
+export class FormPersonalAdditionalEmailsComponent implements AfterViewInit {
+  labelInfoAboutEmails = $localize`:@@register.ariaLabelInfoEmails:info about emails`
+  labelDeleteEmail = $localize`:@@register.ariaLabelDeleteEmail:delete email`
+  labelClose = $localize`:@@register.ariaLabelClose:close`
+  labelAddAnAddionalEmail = $localize`:@@register.addAnAdditionalEmail:Add an additional email`
+  @ViewChildren('emailInput') inputs: QueryList<ElementRef>
+  @Input() additionalEmails: UntypedFormGroup
+  additionalEmailsPopoverTrigger
+  additionalEmailsCount = 1
+
+  constructor(
+    private _ref: ChangeDetectorRef,
+    private _changeDetectorRef: ChangeDetectorRef
+  ) { }
+
+  backendErrorsMatcher = new ErrorStateMatcherForFormLevelErrors(
+    this.getControlErrorAtFormLevel,
+    'backendErrors'
+  )
+
+  getControlErrorAtFormLevel(
+    control: AbstractControl | null,
+    errorGroup: string
+  ): string[] {
+    return (
+      control?.parent?.parent?.errors?.[errorGroup]?.['additionalEmails'][
+      control.value
+      ] || []
+    )
+  }
+
+  // deleteEmailInput(id: string): void {
+  //   this.additionalEmails.removeControl(id)
+  //   this._changeDetectorRef.detectChanges()
+
+  //   const input = this.inputs.filter(
+  //     (x) => this.parseInt(x.nativeElement.id) > this.parseInt(id)
+  //   )?.[0]
+  //   if (input) {
+  //     input.nativeElement.focus()
+  //   } else if (this.inputs.last) {
+  //     this.inputs.last.nativeElement.focus()
+  //   }
+  // }
+
+  // addAdditionalEmail(): void {
+  //   const controlName = ++this.additionalEmailsCount
+  //   this.additionalEmails.addControl(
+  //     this.zeroPad(controlName, 2),
+  //     new UntypedFormControl('', {
+  //       validators: [OrcidValidators.email],
+  //     })
+  //   )
+  //   this._changeDetectorRef.detectChanges()
+  //   const input = this.inputs.last.nativeElement as HTMLInputElement
+  //   input.focus()
+  // }
+
+  parseInt(number: string) {
+    return parseInt(number, 10)
+  }
+
+  zeroPad(num, places) {
+    return String(num).padStart(places, '0')
+  }
+
+  public ngAfterViewInit() {
+    this._ref.detectChanges()
+  }
+}
diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
new file mode 100644
index 0000000000..34153e91b4
--- /dev/null
+++ b/src/app/register2/components/form-personal/form-personal.component.html
@@ -0,0 +1,125 @@
+<ng-container [formGroup]="form">
+  <h2 i18n="@@register.yourNames" class="orc-font-body">Your names</h2>
+
+
+  <div class="input-container">
+    <mat-label i18n="@@register.givenNames" class="orc-font-small-print"
+      [ngClass]="{'error': form.controls.givenNames.touched && form.controls.givenNames.errors}">Given names</mat-label>
+    <mat-form-field appearance="outline" [hideRequiredMarker]="true" async>
+      <input id="given-names-input" formControlName="givenNames" matInput #firstInput
+        [attr.placeholder]="labelNameYouMostCommonly" />
+    </mat-form-field>
+
+    <mat-error *ngIf="form.controls.givenNames.touched && form.hasError('required', 'givenNames')"
+      i18n="@@register.firstNamePassword">
+      Please enter your first/given name
+    </mat-error>
+    <mat-error *ngIf="form.hasError('illegalName', 'givenNames')" i18n="@@register.invalidName">
+      Invalid name characters or format
+    </mat-error>
+    <mat-error *ngIf="form.hasError('backendError', 'givenNames')">
+      <div *ngFor="let error of form.getError('backendError', 'givenNames')">
+        <app-backend-error [errorCode]="error"></app-backend-error>
+      </div>
+    </mat-error>
+  </div>
+  <div class="input-container">
+
+    <mat-label class="orc-font-small-print"><ng-container i18n="@@register.familyName">Family names</ng-container>
+      <label i18n="@@register.optional">(Optional)</label></mat-label>
+    <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+
+      <input id="family-names-input" formControlName="familyNames" matInput />
+      <mat-error *ngIf="form.hasError('illegalName', 'familyNames')" i18n="@@register.invalidName">
+        Invalid name characters or format
+      </mat-error>
+      <mat-error *ngIf="form.hasError('backendError', 'familyNames')">
+        <div *ngFor="let error of form.getError('backendError', 'familyNames')">
+          <app-backend-error [errorCode]="error"></app-backend-error>
+        </div>
+      </mat-error>
+    </mat-form-field>
+  </div>
+
+  <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addresses</h2>
+  <ng-container formGroupName="emails">
+    <div class="input-container">
+
+      <mat-label class="orc-font-small-print" class="orc-font-small-print"
+        [ngClass]="{error: emailFormTouched && form.hasError('required', 'emails.email')}"
+        i18n="@@register.primaryEmail">Email</mat-label>
+
+      <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+        <input id="email-input" formControlName="email" matInput appTrim type="email" />
+      </mat-form-field>
+      <mat-error *ngIf="emailFormTouched && form.hasError('required', 'emails.email')"
+        i18n="@@register.primaryEmailRequired">
+        An email is required
+      </mat-error>
+      <mat-error *ngIf="
+        this.emails.hasError('email', 'email') ||
+        this.emails.hasError('pattern', 'email')
+      " i18n="@@register.invalidEmail">
+        Invalid email format
+      </mat-error>
+
+      <mat-error *ngIf="this.emails.hasError('backendError', 'email')">
+        <div *ngFor="let error of this.emails.getError('backendError', 'email')">
+          <app-backend-error [errorCode]="error" [value]="emails.get('email').value"></app-backend-error>
+        </div>
+      </mat-error>
+    </div>
+
+    <!-- <mat-label i18n="@@register.confirmEmail"
+    >Confirm primary email</mat-label
+  > -->
+    <div class="input-container">
+
+      <mat-form-field appearance="outline" *ngIf="!reactivation?.isReactivation" [hideRequiredMarker]="true">
+
+        <input formControlName="confirmEmail" matInput (paste)="(false)" appTrim autocomplete="off" type="email"
+          id="confirm-email-input" [attr.labelConfirmEmail]="labelConfirmEmail"
+          [attr.placeholder]="labelConfirmEmail" />
+
+      </mat-form-field>
+      <mat-error *ngIf="emailConfirmationFormTouched && form.hasError('required', 'emails.confirmEmail')" i18n="@@register.confirmEmailRequired">
+        Please confirm your email
+      </mat-error>
+      <mat-error *ngIf="
+        this.emails.hasError('email', 'confirmEmail') ||
+        this.emails.hasError('pattern', 'confirmEmail')
+      " i18n="@@register.invalidEmail">
+        Invalid email format
+      </mat-error>
+      <mat-error *ngIf="this.emails.hasError('mismatch', 'confirmEmail')" i18n="@@register.confirmationEmailNotMatch">
+        Email confirmation does not match
+      </mat-error>
+      <mat-error *ngIf="this.emails.hasError('backendError', 'emails.confirmEmail')">
+        <div *ngFor="
+          let error of form.getError('backendError', 'emails.confirmEmail')
+        ">
+          <app-backend-error [errorCode]="error"></app-backend-error>
+        </div>
+      </mat-error>
+    </div>
+
+    <!-- ADDITIONAL EMAILS -->
+    <app-form-personal-additional-emails [additionalEmails]="additionalEmails"></app-form-personal-additional-emails>
+  </ng-container>
+</ng-container>
+
+<mde-popover #namesPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="true">
+  <mat-card class="mat-elevation-z3 orcid-popover">
+    <p i18n="@@register.firstNameDetail">
+      First name is your given name or the name you most commonly go by.
+    </p>
+    <p i18n="@@register.lastNameDetail">Last name is your family name.</p>
+    <p i18n="@@register.youWillHaveAChance">
+      You will have a chance to add additional names after you have created your
+      account.
+    </p>
+    <a href="https://support.orcid.org/hc/articles/360006973853"
+      target="orcid.frontend.register.help.more_info.link.text" i18n="@@register.moreInfoOnNames">More information on
+      names</a>
+  </mat-card>
+</mde-popover>
\ No newline at end of file
diff --git a/src/app/register2/components/form-personal/form-personal.component.scss b/src/app/register2/components/form-personal/form-personal.component.scss
new file mode 100644
index 0000000000..fde0f78e1f
--- /dev/null
+++ b/src/app/register2/components/form-personal/form-personal.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
diff --git a/src/app/register2/components/form-personal/form-personal.component.spec.ts b/src/app/register2/components/form-personal/form-personal.component.spec.ts
new file mode 100644
index 0000000000..b34b3e95fe
--- /dev/null
+++ b/src/app/register2/components/form-personal/form-personal.component.spec.ts
@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormPersonalComponent } from './form-personal.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import {
+  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialog as MatDialog,
+  MatLegacyDialogRef as MatDialogRef,
+} from '@angular/material/legacy-dialog'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { FormBuilder } from '@angular/forms'
+import { RecordWorksService } from '../../../core/record-works/record-works.service'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+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'
+
+describe('FormPersonalComponent', () => {
+  let component: FormPersonalComponent
+  let fixture: ComponentFixture<FormPersonalComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, MdePopoverModule, RouterTestingModule],
+      declarations: [FormPersonalComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        ReactivationService,
+        RegisterService,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormPersonalComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
new file mode 100644
index 0000000000..d1b5a8839c
--- /dev/null
+++ b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -0,0 +1,197 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  forwardRef,
+  Input,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
+import {
+  NG_ASYNC_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  UntypedFormControl,
+  UntypedFormGroup,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms'
+import { RegisterService } from 'src/app/core/register/register.service'
+import { OrcidValidators } from 'src/app/validators'
+
+import { first } from 'rxjs/operators'
+import { ReactivationService } from '../../../core/reactivation/reactivation.service'
+import { ReactivationLocal } from '../../../types/reactivation.local'
+import { BaseForm } from '../BaseForm'
+
+@Component({
+  selector: 'app-form-personal',
+  templateUrl: './form-personal.component.html',
+  styleUrls: ['./form-personal.component.scss', '../register2.style.scss', '../register2.scss-theme.scss'],
+  preserveWhitespaces: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormPersonalComponent),
+      multi: true,
+    },
+    {
+      provide: NG_ASYNC_VALIDATORS,
+      useExisting: forwardRef(() => FormPersonalComponent),
+      multi: true,
+    },
+  ],
+})
+export class FormPersonalComponent
+  extends BaseForm
+  implements OnInit, AfterViewInit {
+  @Input() reactivation: ReactivationLocal
+  @ViewChild('firstInput') firstInput: ElementRef
+  labelInfoAboutName = $localize`:@@register.ariaLabelInfo:info about names`
+  labelClose = $localize`:@@register.ariaLabelClose:close`
+  labelConfirmEmail = $localize`:@@register.confirmEmail:Confirm primary email`
+  labelNameYouMostCommonly = $localize`:@@register.labelNameYouMostMost:The name you most commonly go by`
+  constructor(
+    private _register: RegisterService,
+    private _reactivationService: ReactivationService
+  ) {
+    super()
+  }
+
+  emails: UntypedFormGroup = new UntypedFormGroup({})
+  additionalEmails: UntypedFormGroup = new UntypedFormGroup({
+    '0': new UntypedFormControl('', {
+      validators: [OrcidValidators.email],
+    }),
+  })
+
+  ngOnInit() {
+    this.emails = new UntypedFormGroup(
+      {
+        email: new UntypedFormControl('', {
+          validators: [Validators.required, OrcidValidators.email],
+          asyncValidators: this._register.backendValueValidate('email'),
+        }),
+        additionalEmails: this.additionalEmails,
+      },
+      {
+        validators: [
+          OrcidValidators.matchValues('email', 'confirmEmail', false),
+          this.allEmailsAreUnique(),
+        ],
+        asyncValidators: [
+          this._register.backendAdditionalEmailsValidate(
+            this.reactivation?.isReactivation
+          ),
+        ],
+        updateOn: 'change',
+      }
+    )
+
+    if (!this.reactivation?.isReactivation) {
+      this.emails.addControl(
+        'confirmEmail',
+        new UntypedFormControl('', {
+          validators: [Validators.required, OrcidValidators.email],
+        })
+      )
+    }
+
+    this.form = new UntypedFormGroup({
+      givenNames: new UntypedFormControl('', {
+        validators: [Validators.required, OrcidValidators.illegalName],
+        asyncValidators: this._register.backendValueValidate('givenNames'),
+      }),
+      familyNames: new UntypedFormControl('', {
+        validators: [OrcidValidators.illegalName],
+      }),
+      emails: this.emails,
+    })
+
+    if (this.reactivation?.isReactivation) {
+      this._reactivationService
+        .getReactivationData(this.reactivation.reactivationCode)
+        .pipe(first())
+        .subscribe((reactivation) => {
+          this.emails.patchValue({
+            email: reactivation.email,
+          })
+          this.emails.controls['email'].disable()
+        })
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Timeout used to get focus on the first input after the first step loads
+    setTimeout(() => {
+      this.firstInput.nativeElement.focus()
+    }, 100)
+  }
+
+  allEmailsAreUnique(): ValidatorFn {
+    return (formGroup: UntypedFormGroup) => {
+      let hasError = false
+      const registerForm =
+        this._register.formGroupToEmailRegisterForm(formGroup)
+
+      const error = { backendErrors: { additionalEmails: {} } }
+
+      Object.keys(registerForm.emailsAdditional).forEach((key, i) => {
+        const additionalEmail = registerForm.emailsAdditional[key]
+        if (!error.backendErrors.additionalEmails[additionalEmail.value]) {
+          error.backendErrors.additionalEmails[additionalEmail.value] = []
+        }
+        const additionalEmailsErrors = error.backendErrors.additionalEmails
+        if (
+          registerForm.email &&
+          additionalEmail.value === registerForm.email.value
+        ) {
+          hasError = true
+          additionalEmailsErrors[additionalEmail.value] = [
+            'additionalEmailCantBePrimaryEmail',
+          ]
+        } else {
+          Object.keys(registerForm.emailsAdditional).forEach(
+            (elementKey, i2) => {
+              const element = registerForm.emailsAdditional[elementKey]
+              if (i !== i2 && additionalEmail.value === element.value) {
+                hasError = true
+                additionalEmailsErrors[additionalEmail.value] = [
+                  'duplicatedAdditionalEmail',
+                ]
+              }
+            }
+          )
+        }
+      })
+
+      if (hasError) {
+        return error
+      } else {
+        return null
+      }
+    }
+  }
+
+  // OVERWRITE
+  registerOnChange(fn: any) {
+    this.form.valueChanges.subscribe((value) => {
+      const emailsForm = this._register.formGroupToEmailRegisterForm(
+        this.form.controls['emails'] as UntypedFormGroup
+      )
+      const namesForm =
+        this._register.formGroupToNamesRegisterForm(this.form) || {}
+
+      fn({ ...emailsForm, ...namesForm })
+    })
+  }
+
+  get emailFormTouched() {
+    // console.log((this.form.controls?.emails as any)?.email)
+    return ((this.form.controls.emails as any).controls?.email as any)?.touched
+  }
+
+  get emailConfirmationFormTouched() {
+    // console.log((this.form.controls?.emails as any)?.email)
+    return ((this.form.controls.emails as any).controls?.confirmEmail as any)?.touched
+  }
+}
diff --git a/src/app/register2/components/form-terms/form-terms.component.html b/src/app/register2/components/form-terms/form-terms.component.html
new file mode 100644
index 0000000000..5745d6534b
--- /dev/null
+++ b/src/app/register2/components/form-terms/form-terms.component.html
@@ -0,0 +1,66 @@
+<h3 class="mat-subheading-2" i18n="@@register.termsOfUse">Terms of Use</h3>
+
+<ng-container [formGroup]="form">
+  <mat-checkbox
+    id="privacy-input"
+    class="orcid-checkbox-baseline"
+    color="primary"
+    formControlName="termsOfUse"
+    ><ng-container i18n="@@register.consentTo">I consent to the</ng-container>
+    <a
+      href="{{ environment.INFO_SITE + 'privacy-policy' }}"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="mat-button-font"
+      i18n="@@register.privacyPolicy"
+    >
+      privacy policy
+    </a>
+    <ng-container i18n="@@register.and">and</ng-container>
+    <a
+      href="{{ environment.INFO_SITE + 'content/orcid-terms-use' }}"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="mat-button-font"
+      i18n="@@register.terms"
+    >
+      terms of use
+    </a>
+    <ng-container i18n="@@register.agree"
+      >and agree to my data being publicly accessible where marked as “Visible
+      to Everyone”.</ng-container
+    >
+  </mat-checkbox>
+  <mat-checkbox
+    id="data-processed-input"
+    class="orcid-checkbox-baseline"
+    color="primary"
+    formControlName="dataProcessed"
+  >
+    <ng-container i18n="@@register.dataProcessed">
+      I consent to my data being processed in the United States.
+    </ng-container>
+    <a
+      href="{{
+        environment.INFO_SITE +
+          'privacy-policy/#110_International_Data_Transfer'
+      }}"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="mat-button-font"
+      i18n="@@register.moreInformation"
+    >
+      More information on how ORCID process your data.
+    </a>
+  </mat-checkbox>
+  <mat-error
+    *ngIf="
+      (form.hasError('required', 'termsOfUse') ||
+        form.hasError('required', 'dataProcessed')) &&
+      errorState
+    "
+    i18n="@@register.termsRequired"
+    >To continue creating your ORCID iD you must accept the terms of use and
+    consent to your data being processed in the United States.</mat-error
+  >
+</ng-container>
diff --git a/src/app/register2/components/form-terms/form-terms.component.scss b/src/app/register2/components/form-terms/form-terms.component.scss
new file mode 100644
index 0000000000..66e0ae0b04
--- /dev/null
+++ b/src/app/register2/components/form-terms/form-terms.component.scss
@@ -0,0 +1,12 @@
+:host {
+  margin-bottom: 25px;
+  display: block;
+}
+
+mat-checkbox {
+  margin-bottom: 16px;
+}
+
+mat-error {
+  margin: 8px 0;
+}
diff --git a/src/app/register2/components/form-terms/form-terms.component.spec.ts b/src/app/register2/components/form-terms/form-terms.component.spec.ts
new file mode 100644
index 0000000000..2c933f7bcd
--- /dev/null
+++ b/src/app/register2/components/form-terms/form-terms.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormTermsComponent } from './form-terms.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { Overlay } from '@angular/cdk/overlay'
+import { RegisterService } from '../../../core/register/register.service'
+
+describe('FormTermsComponent', () => {
+  let component: FormTermsComponent
+  let fixture: ComponentFixture<FormTermsComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [FormTermsComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        RegisterService,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormTermsComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/form-terms/form-terms.component.ts b/src/app/register2/components/form-terms/form-terms.component.ts
new file mode 100644
index 0000000000..f0de5ce315
--- /dev/null
+++ b/src/app/register2/components/form-terms/form-terms.component.ts
@@ -0,0 +1,69 @@
+import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+  NG_ASYNC_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  Validators,
+} from '@angular/forms'
+import { ErrorStateMatcher } from '@angular/material/core'
+import { RegisterService } from 'src/app/core/register/register.service'
+import { environment } from 'src/environments/environment'
+
+import { BaseForm } from '../BaseForm'
+
+@Component({
+  selector: 'app-form-terms',
+  templateUrl: './form-terms.component.html',
+  styleUrls: ['./form-terms.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormTermsComponent),
+      multi: true,
+    },
+    {
+      provide: NG_ASYNC_VALIDATORS,
+      useExisting: forwardRef(() => FormTermsComponent),
+      multi: true,
+    },
+  ],
+  preserveWhitespaces: true,
+})
+// tslint:disable-next-line: class-name
+export class FormTermsComponent extends BaseForm implements OnInit, DoCheck {
+  environment = environment
+  constructor(
+    private _register: RegisterService,
+    private _errorStateMatcher: ErrorStateMatcher
+  ) {
+    super()
+  }
+  errorState = false
+
+  termsOfUse = new UntypedFormControl('', Validators.requiredTrue)
+  dataProcessed = new UntypedFormControl('', Validators.requiredTrue)
+  ngOnInit() {
+    this.form = new UntypedFormGroup({
+      termsOfUse: this.termsOfUse,
+      dataProcessed: this.dataProcessed,
+    })
+  }
+
+  // OVERWRITE
+  registerOnChange(fn: any) {
+    this.form.valueChanges.subscribe((value) => {
+      const registerForm =
+        this._register.formGroupTermsOfUseAndDataProcessedRegisterForm(
+          this.form as UntypedFormGroup
+        )
+      fn(registerForm)
+    })
+  }
+
+  ngDoCheck(): void {
+    this.errorState =
+      this._errorStateMatcher.isErrorState(this.termsOfUse, null) ||
+      this._errorStateMatcher.isErrorState(this.dataProcessed, null)
+  }
+}
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.html b/src/app/register2/components/form-visibility/form-visibility.component.html
new file mode 100644
index 0000000000..0acefbf8ed
--- /dev/null
+++ b/src/app/register2/components/form-visibility/form-visibility.component.html
@@ -0,0 +1,95 @@
+<ng-container [formGroup]="form">
+  <h3 class="mat-subheading-2" i18n="@@register.visibility">
+    Visibility settings
+  </h3>
+  <p>
+    <ng-container i18n="@@register.visibilityDescription1">
+      Your ORCID iD connects with your ORCID record that can contain links to
+      your research activities, affiliations, awards, other versions of your
+      name, and more. You control this content and who can see it.
+    </ng-container>
+  </p>
+  <p i18n="@@register.visibilityDescription3">
+    By default, what visibility should be given to new items added to your ORCID
+    Record?
+  </p>
+  <p>
+    <mat-radio-group
+      formControlName="activitiesVisibilityDefault"
+      color="primary"
+    >
+      <mat-radio-button
+        id="visibility-everyone-input"
+        [value]="visibilityOptions[0]"
+        class="orcid-radio-button-with-icons"
+      >
+        <img
+          src="./assets/vectors/visibility-everyone.svg"
+          aria-hidden="true"
+          alt=""
+        />
+        <div class="inlined">
+          <strong i18n="@@register.VisibilityEveryone">Everyone</strong>
+
+          <ng-container i18n="@@register.VisibilityEveryone2"
+            >(87% of users choose this)</ng-container
+          >
+        </div>
+      </mat-radio-button>
+      <mat-radio-button
+        id="visibility-trusted-input"
+        [value]="visibilityOptions[1]"
+        class="orcid-radio-button-with-icons"
+      >
+        <img
+          src="./assets/vectors/visibility-trusted-source.svg"
+          aria-hidden="true"
+          alt=""
+        />
+        <div class="inlined">
+          <strong i18n="@@register.VisibilityTrusted"
+            >Trusted Organizations</strong
+          >
+          <ng-container i18n="@@register.VisibilityTrusted2"
+            >(5% of users choose this)</ng-container
+          >
+        </div>
+      </mat-radio-button>
+      <mat-radio-button
+        id="visibility-private-input"
+        [value]="visibilityOptions[2]"
+        class="orcid-radio-button-with-icons"
+      >
+        <img
+          src="./assets/vectors/visibility-only-me.svg"
+          aria-hidden="true"
+          alt=""
+        />
+        <div class="inlined">
+          <strong i18n="@@register.VisibilityPrivate">Only me</strong>
+
+          <ng-container i18n="@@register.VisibilityPrivate2"
+            >(8% of users choose this)</ng-container
+          >
+        </div>
+      </mat-radio-button>
+    </mat-radio-group>
+    <mat-error
+      *ngIf="
+        form.hasError('required', 'activitiesVisibilityDefault') && errorState
+      "
+      i18n="@@register.visibilityRequired"
+      >Please choose a default visibility setting.</mat-error
+    >
+  </p>
+  <p>
+    <a
+      class="mat-button-font"
+      href="https://support.orcid.org/hc/articles/360006897614"
+      target="_blank"
+      rel="noopener noreferrer"
+      i18n="@@register.visibilityDescription2"
+      >More information on visibility settings</a
+    >
+  </p>
+</ng-container>
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.scss b/src/app/register2/components/form-visibility/form-visibility.component.scss
new file mode 100644
index 0000000000..f24bbf1354
--- /dev/null
+++ b/src/app/register2/components/form-visibility/form-visibility.component.scss
@@ -0,0 +1,10 @@
+:host img {
+  height: 24px;
+  width: 24px;
+  margin-left: -4px;
+  margin-right: 4px;
+  [dir='rtl'] & {
+    margin-right: -4px;
+    margin-left: 4px;
+  }
+}
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.spec.ts b/src/app/register2/components/form-visibility/form-visibility.component.spec.ts
new file mode 100644
index 0000000000..387ddb0103
--- /dev/null
+++ b/src/app/register2/components/form-visibility/form-visibility.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { FormVisibilityComponent } from './form-visibility.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { Overlay } from '@angular/cdk/overlay'
+import { RegisterService } from '../../../core/register/register.service'
+
+describe('FormVisibilityComponent', () => {
+  let component: FormVisibilityComponent
+  let fixture: ComponentFixture<FormVisibilityComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [FormVisibilityComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        RegisterService,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormVisibilityComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.ts b/src/app/register2/components/form-visibility/form-visibility.component.ts
new file mode 100644
index 0000000000..2dbfc8716a
--- /dev/null
+++ b/src/app/register2/components/form-visibility/form-visibility.component.ts
@@ -0,0 +1,68 @@
+import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+  NG_ASYNC_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  Validators,
+} from '@angular/forms'
+import { ErrorStateMatcher } from '@angular/material/core'
+import { VISIBILITY_OPTIONS } from 'src/app/constants'
+import { RegisterService } from 'src/app/core/register/register.service'
+
+import { BaseForm } from '../BaseForm'
+
+@Component({
+  selector: 'app-form-visibility',
+  templateUrl: './form-visibility.component.html',
+  styleUrls: ['./form-visibility.component.scss'],
+  preserveWhitespaces: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FormVisibilityComponent),
+      multi: true,
+    },
+    {
+      provide: NG_ASYNC_VALIDATORS,
+      useExisting: forwardRef(() => FormVisibilityComponent),
+      multi: true,
+    },
+  ],
+})
+export class FormVisibilityComponent
+  extends BaseForm
+  implements OnInit, DoCheck
+{
+  visibilityOptions = VISIBILITY_OPTIONS
+  errorState = false
+  activitiesVisibilityDefault = new UntypedFormControl('', Validators.required)
+  constructor(
+    private _register: RegisterService,
+    private _errorStateMatcher: ErrorStateMatcher
+  ) {
+    super()
+  }
+  ngOnInit() {
+    this.form = new UntypedFormGroup({
+      activitiesVisibilityDefault: this.activitiesVisibilityDefault,
+    })
+  }
+
+  ngDoCheck(): void {
+    this.errorState = this._errorStateMatcher.isErrorState(
+      this.activitiesVisibilityDefault,
+      null
+    )
+  }
+
+  // OVERWRITE
+  registerOnChange(fn: any) {
+    this.form.valueChanges.subscribe((value) => {
+      const registerForm = this._register.formGroupToActivitiesVisibilityForm(
+        this.form as UntypedFormGroup
+      )
+      fn(registerForm)
+    })
+  }
+}
diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
new file mode 100644
index 0000000000..26589908a6
--- /dev/null
+++ b/src/app/register2/components/register2.scss-theme.scss
@@ -0,0 +1,19 @@
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  ::ng-deep .valid {
+    color: mat.get-color-from-palette($accent, 900);
+  }
+  .error {
+    color: map-get($foreground, 'state-warning-dark');
+  }
+}
+
+@include theme($orcid-app-theme);
diff --git a/src/app/register2/components/register2.style.scss b/src/app/register2/components/register2.style.scss
new file mode 100644
index 0000000000..e0223bd64d
--- /dev/null
+++ b/src/app/register2/components/register2.style.scss
@@ -0,0 +1,113 @@
+a {
+  text-decoration: underline;
+  font-weight: normal;
+}
+
+mat-card-title  img {
+  margin-bottom: 32px;
+}
+
+
+.input-container {
+  padding-bottom: 24px;
+}
+
+mat-label.orc-font-small-print {
+  font-weight: bold;
+
+  label {
+    font-weight: normal;
+  }
+}
+
+:host ::ng-deep {
+
+  mat-error {
+    margin-top: 8px;
+    font-size: 12px;
+  }
+
+  mat-form-field {
+    padding-top: 8px;
+
+    .mat-form-field-subscript-wrapper {
+      padding: 0;
+
+    }
+
+    .mat-form-field-wrapper {
+      padding-bottom: 2px;
+    }
+
+
+
+
+  }
+
+  .mat-form-field-appearance-outline {
+    .mat-form-field-wrapper {
+      margin: 0;
+
+      .mat-form-field-outline {
+        top: 0px;
+      }
+
+      .mat-form-field-prefix {
+        top: 0.35em;
+
+        mat-icon {
+          margin-inline-end: 8px;
+        }
+      }
+
+      .mat-form-field-flex {
+        .mat-form-field-infix {
+          border-top: 0px;
+          padding: 10px 0 10px 0;
+        }
+      }
+    }
+  }
+
+  mat-form-field.mat-form-field.mat-primary.mat-form-field-type-mat-input.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-invalid {
+    margin-bottom: 0px;
+
+
+  }
+
+
+
+
+}
+
+
+// MATERIAL OVERWRITES
+
+::ng-deep {
+
+  mat-vertical-stepper.orcid-stepper-wizard mat-card mat-form-field,
+  mat-vertical-stepper.orcid-stepper-wizard mat-card .input-container,
+  mat-horizontal-stepper.orcid-stepper-wizard mat-card mat-form-field,
+  mat-horizontal-stepper.orcid-stepper-wizard mat-card .input-container {
+    margin-bottom: 0px;
+
+  }
+
+
+  mat-vertical-stepper.orcid-stepper-wizard,
+  mat-horizontal-stepper.orcid-stepper-wizard {
+    mat-card {
+
+
+      .step-actions {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 28px;
+        gap: 12px;
+      }
+    }
+  }
+
+}
diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
new file mode 100644
index 0000000000..4c5ee5d412
--- /dev/null
+++ b/src/app/register2/components/step-a/step-a.component.html
@@ -0,0 +1,78 @@
+<mat-card class="orcid-wizard">
+  <mat-card-header>
+    <mat-card-title role="heading" aria-level="1">
+      <div>
+        <img
+          height="64px"
+          src="assets/vectors/orcid.logo.icon.svg"
+          alt="orcid logo"
+        />
+      </div>
+      <ng-container
+        *ngIf="!reactivation?.isReactivation"
+        i18n="@@register.create"
+      >
+        Create your ORCID iD
+      </ng-container>
+      <ng-container
+        *ngIf="reactivation?.isReactivation"
+        i18n="@@register.reactivation"
+      >
+        Thank you for reactivating your ORCID iD.
+      </ng-container>
+    </mat-card-title>
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step1"
+      >This is step 1 of 3</mat-card-subtitle
+    >
+  </mat-card-header>
+
+  <mat-card-content>
+    <p *ngIf="!reactivation?.isReactivation">
+      <ng-container i18n="@@register.orcids">Per ORCID's</ng-container>
+      <a
+        href="{{ infoSiteBaseUrl }}content/orcid-terms-use"
+        class="mat-button-font"
+        rel="noopener noreferrer"
+        target="_blank"
+        i18n="@@register.terms"
+        >terms of use</a
+      ><ng-container i18n="@@register.only"
+        >, you may only register for an ORCID iD for yourself. Already have an
+        ORCID iD?</ng-container
+      >
+      <a class="mat-button-font" i18n="@@register.sign" (click)="signIn()"
+        >Sign In</a
+      >
+    </p>
+    <form [formGroup]="formGroup">
+      <app-form-personal
+        formControlName="personal"
+        [reactivation]="reactivation"
+      >
+      </app-form-personal>
+      <div class="step-actions">
+        <button
+          id="step-a-next-button"
+          mat-raised-button
+          matStepperNext
+          i18n="@@shared.next"
+          color="primary"
+
+        >
+          NEXT STEP
+        </button>
+        <a
+          mat-button
+          color="primary"
+          (click)="goBack()"
+          matStepperPrevious
+          type="button"
+          i18n="@@shared.back"
+          id="step-a-back-button"
+        >
+          Cancel registration
+      </a>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/register2/components/step-a/step-a.component.scss b/src/app/register2/components/step-a/step-a.component.scss
new file mode 100644
index 0000000000..9bd1205fc7
--- /dev/null
+++ b/src/app/register2/components/step-a/step-a.component.scss
@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
+
+
diff --git a/src/app/register2/components/step-a/step-a.component.spec.ts b/src/app/register2/components/step-a/step-a.component.spec.ts
new file mode 100644
index 0000000000..693ea5d367
--- /dev/null
+++ b/src/app/register2/components/step-a/step-a.component.spec.ts
@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { StepAComponent } from './step-a.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { RouterTestingModule } from '@angular/router/testing'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { Overlay } from '@angular/cdk/overlay'
+
+describe('StepAComponent', () => {
+  let component: StepAComponent
+  let fixture: ComponentFixture<StepAComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, RouterTestingModule],
+      declarations: [StepAComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StepAComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts
new file mode 100644
index 0000000000..fada13b9f0
--- /dev/null
+++ b/src/app/register2/components/step-a/step-a.component.ts
@@ -0,0 +1,76 @@
+import { Component, Input } from '@angular/core'
+
+import { Router } from '@angular/router'
+import { first } from 'rxjs/operators'
+import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { ApplicationRoutes } from 'src/app/constants'
+import { environment } from 'src/environments/environment'
+import { ReactivationLocal } from '../../../types/reactivation.local'
+import { BaseStepDirective } from '../BaseStep'
+
+@Component({
+  selector: 'app-step-a',
+  templateUrl: './step-a.component.html',
+  styleUrls: ['./step-a.component.scss', '../register2.style.scss', '../register2.scss-theme.scss'],
+  preserveWhitespaces: true,
+})
+export class StepAComponent extends BaseStepDirective {
+  @Input() reactivation: ReactivationLocal
+
+  constructor(private _platform: PlatformInfoService, private _router: Router) {
+    super()
+  }
+  infoSiteBaseUrl = environment.INFO_SITE
+
+  goBack() {
+    this._platform
+      .get()
+      .pipe(first())
+      .subscribe((platform) => {
+        if (platform.social) {
+          this._router.navigate([ApplicationRoutes.social], {
+            queryParams: {
+              ...platform.queryParameters,
+            },
+          })
+        } else if (platform.institutional) {
+          this._router.navigate([ApplicationRoutes.institutionalLinking], {
+            queryParams: {
+              ...platform.queryParameters,
+            },
+          })
+        } else {
+          this._router.navigate([ApplicationRoutes.signin], {
+            queryParams: {
+              ...platform.queryParameters,
+            },
+          })
+        }
+      })
+  }
+
+  signIn() {
+    this._platform
+      .get()
+      .pipe(first())
+      .subscribe((platform) => {
+        const params = JSON.parse(JSON.stringify(platform.queryParameters))
+        if (params['email']) {
+          delete params['email']
+        }
+        if (params['orcid']) {
+          delete params['orcid']
+        }
+
+        if (params['show_login']) {
+          delete params['show_login']
+        }
+
+        this._router.navigate([ApplicationRoutes.signin], {
+          queryParams: {
+            ...params,
+          },
+        })
+      })
+  }
+}
diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
new file mode 100644
index 0000000000..e12ce35510
--- /dev/null
+++ b/src/app/register2/components/step-b/step-b.component.html
@@ -0,0 +1,60 @@
+<mat-card class="orcid-wizard">
+  <mat-card-header>
+    <mat-card-title role="heading" aria-level="1">
+      <div>
+        <img
+          height="64px"
+          src="assets/vectors/orcid.logo.icon.svg"
+          alt="orcid logo"
+        />
+      </div>
+      <ng-container
+        *ngIf="!reactivation?.isReactivation"
+        i18n="@@register.create"
+      >
+        Create your ORCID iD
+      </ng-container>
+      <ng-container
+        *ngIf="reactivation?.isReactivation"
+        i18n="@@register.reactivation"
+      >
+        Thank you for reactivating your ORCID iD.
+      </ng-container>
+    </mat-card-title>
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2"
+      >This is step 2 of 3</mat-card-subtitle
+    >
+  </mat-card-header>
+
+  <mat-card-content>
+    <form [formGroup]="formGroup">
+      <app-form-password
+        formControlName="password"
+        [personalData]="personalData"
+      ></app-form-password>
+      <app-form-notifications
+        formControlName="sendOrcidNews"
+      ></app-form-notifications>
+      <div class="step-actions">
+        <button
+          mat-button
+          color="primary"
+          matStepperPrevious
+          i18n="@@shared.back"
+          id="step-b-back-button"
+        >
+          GO BACK
+        </button>
+        <button
+          id="step-b-next"
+          mat-raised-button
+          matStepperNext
+          color="primary"
+          i18n="@@shared.next"
+        >
+          NEXT
+        </button>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/register2/components/step-b/step-b.component.scss b/src/app/register2/components/step-b/step-b.component.scss
new file mode 100644
index 0000000000..4cef8a0ce4
--- /dev/null
+++ b/src/app/register2/components/step-b/step-b.component.scss
@@ -0,0 +1,4 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/app/register2/components/step-b/step-b.component.spec.ts b/src/app/register2/components/step-b/step-b.component.spec.ts
new file mode 100644
index 0000000000..d8ed95bef5
--- /dev/null
+++ b/src/app/register2/components/step-b/step-b.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { StepBComponent } from './step-b.component'
+
+describe('StepBComponent', () => {
+  let component: StepBComponent
+  let fixture: ComponentFixture<StepBComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [StepBComponent],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StepBComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/step-b/step-b.component.ts b/src/app/register2/components/step-b/step-b.component.ts
new file mode 100644
index 0000000000..2edad54dc2
--- /dev/null
+++ b/src/app/register2/components/step-b/step-b.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core'
+
+import { ReactivationLocal } from '../../../types/reactivation.local'
+import { BaseStepDirective } from '../BaseStep'
+
+@Component({
+  selector: 'app-step-b',
+  templateUrl: './step-b.component.html',
+  styleUrls: ['./step-b.component.scss', '../register2.style.scss', '../register2.scss-theme.scss'],
+})
+export class StepBComponent extends BaseStepDirective {
+  @Input() personalData
+  @Input() reactivation: ReactivationLocal
+
+  constructor() {
+    super()
+  }
+}
diff --git a/src/app/register2/components/step-c/step-c.component.html b/src/app/register2/components/step-c/step-c.component.html
new file mode 100644
index 0000000000..4f05a50218
--- /dev/null
+++ b/src/app/register2/components/step-c/step-c.component.html
@@ -0,0 +1,73 @@
+<mat-card class="orcid-wizard">
+  <mat-progress-bar
+    *ngIf="loading"
+    mode="indeterminate"
+    id="loading-bar"
+  ></mat-progress-bar>
+
+  <mat-card-header>
+    <mat-card-title role="heading" aria-level="1">
+      <ng-container
+        *ngIf="!reactivation?.isReactivation"
+        i18n="@@register.create"
+      >
+        Create your ORCID iD
+      </ng-container>
+      <ng-container
+        *ngIf="reactivation?.isReactivation"
+        i18n="@@register.reactivation"
+      >
+        Thank you for reactivating your ORCID iD.
+      </ng-container>
+    </mat-card-title>
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3"
+      >This is step 3 of 3</mat-card-subtitle
+    >
+  </mat-card-header>
+
+  <mat-card-content>
+    <form [formGroup]="formGroup" #form>
+      <app-form-visibility
+        formControlName="activitiesVisibilityDefault"
+      ></app-form-visibility>
+      <app-form-terms formControlName="termsOfUse"></app-form-terms>
+      <app-form-anti-robots formControlName="captcha"></app-form-anti-robots>
+      <div class="step-actions">
+        <button
+          mat-button
+          color="primary"
+          matStepperPrevious
+          type="button"
+          i18n="@@shared.back"
+          id="step-c-back-button"
+        >
+          GO BACK
+        </button>
+        <button
+          id="step-c-register-button"
+          mat-raised-button
+          color="primary"
+          [disabled]="loading"
+        >
+          <ng-container
+            *ngIf="!reactivation?.isReactivation"
+            i18n="@@register.register"
+          >
+            REGISTER
+          </ng-container>
+          <ng-container
+            *ngIf="reactivation?.isReactivation"
+            i18n="@@register.reactivate"
+          >
+            REACTIVATE
+          </ng-container>
+        </button>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-progress-bar
+    *ngIf="loading"
+    mode="indeterminate"
+    id="bottom-loading-bar"
+  ></mat-progress-bar>
+</mat-card>
diff --git a/src/app/register2/components/step-c/step-c.component.scss b/src/app/register2/components/step-c/step-c.component.scss
new file mode 100644
index 0000000000..4cef8a0ce4
--- /dev/null
+++ b/src/app/register2/components/step-c/step-c.component.scss
@@ -0,0 +1,4 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/app/register2/components/step-c/step-c.component.spec.ts b/src/app/register2/components/step-c/step-c.component.spec.ts
new file mode 100644
index 0000000000..db7d3c24ff
--- /dev/null
+++ b/src/app/register2/components/step-c/step-c.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { StepCComponent } from './step-c.component'
+
+describe('StepCComponent', () => {
+  let component: StepCComponent
+  let fixture: ComponentFixture<StepCComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [StepCComponent],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StepCComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/step-c/step-c.component.ts b/src/app/register2/components/step-c/step-c.component.ts
new file mode 100644
index 0000000000..4fa84a7c6b
--- /dev/null
+++ b/src/app/register2/components/step-c/step-c.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core'
+
+import { BaseStepDirective } from '../BaseStep'
+import { ReactivationLocal } from '../../../types/reactivation.local'
+
+@Component({
+  selector: 'app-step-c',
+  templateUrl: './step-c.component.html',
+  styleUrls: ['./step-c.component.scss'],
+})
+export class StepCComponent extends BaseStepDirective {
+  @Input() loading
+  @Input() reactivation: ReactivationLocal
+
+  constructor() {
+    super()
+  }
+}
diff --git a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.html b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.html
new file mode 100644
index 0000000000..2661e57176
--- /dev/null
+++ b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.html
@@ -0,0 +1 @@
+<p>top-bar-record-issues works!</p>
diff --git a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.scss b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.spec.ts b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.spec.ts
new file mode 100644
index 0000000000..4255f98cad
--- /dev/null
+++ b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { TopBarRecordIssuesComponent } from './top-bar-record-issues.component'
+
+describe('TopBarRecordIssuesComponent', () => {
+  let component: TopBarRecordIssuesComponent
+  let fixture: ComponentFixture<TopBarRecordIssuesComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TopBarRecordIssuesComponent],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TopBarRecordIssuesComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.ts b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.ts
new file mode 100644
index 0000000000..c6f3ba3de2
--- /dev/null
+++ b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core'
+
+@Component({
+  selector: 'app-top-bar-record-issues',
+  templateUrl: './top-bar-record-issues.component.html',
+  styleUrls: ['./top-bar-record-issues.component.scss'],
+})
+export class TopBarRecordIssuesComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/src/app/register2/pages/register/register.component.html b/src/app/register2/pages/register/register.component.html
new file mode 100644
index 0000000000..017de7c72f
--- /dev/null
+++ b/src/app/register2/pages/register/register.component.html
@@ -0,0 +1,51 @@
+<main id="main">
+  <div class="container">
+    <div class="row space-around">
+      <div class="col l6 m8 s4" [ngClass]="{ 'no-gutters': platform.columns4 }">
+
+        <!-- DESKTOP PRESENTATION -->
+        <mat-horizontal-stepper
+          [linear]="isLinear"
+          #stepper
+          labelPosition="bottom"
+          class="orcid-stepper-wizard"
+          (selectionChange)="selectionChange($event)"
+        >
+          <!-- <mat-step [stepControl]="FormGroupStepA">
+            <ng-template matStepLabel i18n="@@register.personalData"
+              >Personal data</ng-template
+            >
+            <app-step-a
+              [(formGroup)]="FormGroupStepA"
+              [reactivation]="reactivation"
+              #stepComponentA
+            ></app-step-a>
+          </mat-step> -->
+          <mat-step [stepControl]="FormGroupStepB">
+            <ng-template matStepLabel i18n="@@register.securityAndNotifications"
+              >Security and notifications</ng-template
+            >
+            <app-step-b
+              #stepComponentB
+              [(formGroup)]="FormGroupStepB"
+              [personalData]="personalData"
+              [reactivation]="reactivation"
+            ></app-step-b>
+          </mat-step>
+          <mat-step [stepControl]="FormGroupStepC" #lastStep>
+            <ng-template matStepLabel i18n="@@register.visibilityAndTerm"
+              >Visibility and terms</ng-template
+            >
+            <app-step-c
+              #stepComponentC
+              [(formGroup)]="FormGroupStepC"
+              (submit)="register()"
+              [loading]="loading"
+              [reactivation]="reactivation"
+            ></app-step-c>
+          </mat-step>
+        </mat-horizontal-stepper>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/src/app/register2/pages/register/register.component.scss b/src/app/register2/pages/register/register.component.scss
new file mode 100644
index 0000000000..e8c06d1504
--- /dev/null
+++ b/src/app/register2/pages/register/register.component.scss
@@ -0,0 +1,15 @@
+:host {
+  width: 100%;
+
+  ::ng-deep {
+    .mat-horizontal-stepper-header-container {
+      display: none;
+    }
+  }
+}
+
+mat-vertical-stepper,
+mat-horizontal-stepper {
+  max-width: 100%;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/app/register2/pages/register/register.component.spec.ts b/src/app/register2/pages/register/register.component.spec.ts
new file mode 100644
index 0000000000..1967801d07
--- /dev/null
+++ b/src/app/register2/pages/register/register.component.spec.ts
@@ -0,0 +1,54 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { RegisterComponent } from './register.component'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { Overlay } from '@angular/cdk/overlay'
+import { RouterTestingModule } from '@angular/router/testing'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { UntypedFormBuilder } from '@angular/forms'
+import {
+  MatLegacyDialog as MatDialog,
+  MatLegacyDialogModule as MatDialogModule,
+} from '@angular/material/legacy-dialog'
+import { RegisterService } from '../../../core/register/register.service'
+import { UserService } from '../../../core'
+import { SearchService } from '../../../core/search/search.service'
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent
+  let fixture: ComponentFixture<RegisterComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule, MatDialogModule, RouterTestingModule],
+      declarations: [RegisterComponent],
+      providers: [
+        WINDOW_PROVIDERS,
+        UntypedFormBuilder,
+        RegisterService,
+        SearchService,
+        UserService,
+        PlatformInfoService,
+        ErrorHandlerService,
+        SnackbarService,
+        MatSnackBar,
+        MatDialog,
+        Overlay,
+      ],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/pages/register/register.component.ts b/src/app/register2/pages/register/register.component.ts
new file mode 100644
index 0000000000..197b832d6d
--- /dev/null
+++ b/src/app/register2/pages/register/register.component.ts
@@ -0,0 +1,314 @@
+import { StepperSelectionEvent } from '@angular/cdk/stepper'
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { MatStep } from '@angular/material/stepper'
+import { Router } from '@angular/router'
+import { Observable, combineLatest, forkJoin } from 'rxjs'
+import { catchError, first, map, switchMap } from 'rxjs/operators'
+import { IsThisYouComponent } from 'src/app/cdk/is-this-you'
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
+import { WINDOW } from 'src/app/cdk/window'
+import { isRedirectToTheAuthorizationPage } from 'src/app/constants'
+import { UserService } from 'src/app/core'
+import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
+import { RegisterService } from 'src/app/core/register/register.service'
+import { ERROR_REPORT } from 'src/app/errors'
+import { RequestInfoForm, SearchResults } from 'src/app/types'
+import {
+  RegisterConfirmResponse,
+  RegisterForm,
+} from 'src/app/types/register.endpoint'
+import { UserSession } from 'src/app/types/session.local'
+import { ThirdPartyAuthData } from 'src/app/types/sign-in-data.endpoint'
+import { GoogleTagManagerService } from '../../../core/google-tag-manager/google-tag-manager.service'
+import { SearchService } from '../../../core/search/search.service'
+import { ReactivationLocal } from '../../../types/reactivation.local'
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss'],
+})
+export class RegisterComponent implements OnInit, AfterViewInit {
+  @ViewChild('lastStep') lastStep: MatStep
+  @ViewChild('stepComponentA', { read: ElementRef }) stepComponentA: ElementRef
+  @ViewChild('stepComponentB', { read: ElementRef }) stepComponentB: ElementRef
+  @ViewChild('stepComponentC', { read: ElementRef }) stepComponentC: ElementRef
+  platform: PlatformInfo
+  FormGroupStepA: UntypedFormGroup
+  FormGroupStepB: UntypedFormGroup
+  FormGroupStepC: UntypedFormGroup
+  isLinear = true
+  personalData: RegisterForm
+  backendForm: RegisterForm
+  loading = false
+  requestInfoForm: RequestInfoForm | null
+  thirdPartyAuthData: ThirdPartyAuthData
+  reactivation = {
+    isReactivation: false,
+    reactivationCode: '',
+  } as ReactivationLocal
+
+  constructor(
+    private _cdref: ChangeDetectorRef,
+    private _platformInfo: PlatformInfoService,
+    private _formBuilder: UntypedFormBuilder,
+    private _register: RegisterService,
+    private _dialog: MatDialog,
+    @Inject(WINDOW) private window: Window,
+    private _googleTagManagerService: GoogleTagManagerService,
+    private _user: UserService,
+    private _router: Router,
+    private _errorHandler: ErrorHandlerService,
+    private _userInfo: UserService,
+    private _searchService: SearchService
+  ) {
+    _platformInfo.get().subscribe((platform) => {
+      this.platform = platform
+      this.reactivation.isReactivation = this.platform.reactivation
+      this.reactivation.reactivationCode = this.platform.reactivationCode
+    })
+  }
+  ngOnInit() {
+    this._register.getRegisterForm().subscribe()
+
+    this.FormGroupStepA = this._formBuilder.group({
+      personal: [''],
+    })
+    this.FormGroupStepB = this._formBuilder.group({
+      password: [''],
+      sendOrcidNews: [''],
+    })
+    this.FormGroupStepC = this._formBuilder.group({
+      activitiesVisibilityDefault: [''],
+      termsOfUse: [''],
+      captcha: [''],
+    })
+
+    combineLatest([this._userInfo.getUserSession(), this._platformInfo.get()])
+      .pipe(
+        first(),
+        map(([session, platform]) => {
+          session = session as UserSession
+          platform = platform as PlatformInfo
+
+          // TODO @leomendoza123 move the handle of social/institutional sessions to the user service
+
+          this.thirdPartyAuthData = session.thirdPartyAuthData
+          this.requestInfoForm = session.oauthSession
+
+          if (this.thirdPartyAuthData || this.requestInfoForm) {
+            this.FormGroupStepA = this.prefillRegisterForm(
+              this.requestInfoForm,
+              this.thirdPartyAuthData
+            )
+          }
+        })
+      )
+      .subscribe()
+  }
+
+  ngAfterViewInit(): void {
+    this._cdref.detectChanges()
+  }
+
+  register() {
+    this.loading = true
+    this.lastStep.interacted = true
+    if (
+      this.FormGroupStepA.valid &&
+      this.FormGroupStepB.valid &&
+      this.FormGroupStepC.valid
+    ) {
+      this._register
+        .backendRegisterFormValidate(
+          this.FormGroupStepA,
+          this.FormGroupStepB,
+          this.FormGroupStepC
+        )
+        .pipe(
+          switchMap((validator: RegisterForm) => {
+            if (validator.errors.length > 0) {
+              // At this point any backend error is unexpected
+              this._errorHandler.handleError(
+                new Error('registerUnexpectedValidateFail'),
+                ERROR_REPORT.REGISTER
+              )
+            }
+            return this._register.register(
+              this.FormGroupStepA,
+              this.FormGroupStepB,
+              this.FormGroupStepC,
+              this.reactivation,
+              this.requestInfoForm,
+              true
+            )
+          })
+        )
+        .subscribe((response) => {
+          this.loading = false
+          if (response.url) {
+            const analyticsReports: Observable<void>[] = []
+
+            analyticsReports.push(
+              this._googleTagManagerService.reportEvent(
+                'New-Registration',
+                this.requestInfoForm || 'Website'
+              )
+            )
+            forkJoin(analyticsReports)
+              .pipe(
+                catchError((err) =>
+                  this._errorHandler.handleError(
+                    err,
+                    ERROR_REPORT.STANDARD_NO_VERBOSE_NO_GA
+                  )
+                )
+              )
+              .subscribe(
+                () => this.afterRegisterRedirectionHandler(response),
+                () => this.afterRegisterRedirectionHandler(response)
+              )
+          } else {
+            this._errorHandler.handleError(
+              new Error('registerUnexpectedConfirmation'),
+              ERROR_REPORT.REGISTER
+            )
+          }
+        })
+    } else {
+      this.loading = false
+    }
+  }
+
+  afterRegisterRedirectionHandler(response: RegisterConfirmResponse) {
+    if (isRedirectToTheAuthorizationPage(response)) {
+      this.window.location.href = response.url
+    } else {
+      if (
+        response.url.indexOf('orcid.org/my-orcid') > 0 &&
+        response.url.indexOf('justRegistered') > 0
+      ) {
+        this.window.scrollTo(0, 0)
+        this._router
+          .navigate(['/my-orcid'], {
+            queryParams: { justRegistered: true },
+          })
+          .then(() => {
+            this.window.scrollTo(0, 0)
+          })
+      } else {
+        this.window.location.href = response.url
+      }
+    }
+  }
+
+  openDialog(duplicateRecordsSearchResults: SearchResults): void {
+    const duplicateRecords = duplicateRecordsSearchResults['expanded-result']
+    const dialogParams = {
+      width: `1078px`,
+      height: `600px`,
+      maxWidth: `90vw`,
+
+      data: {
+        duplicateRecords,
+        titleLabel: $localize`:@@register.titleLabel:Could this be you?`,
+        // tslint:disable-next-line: max-line-length
+        bodyLabel: $localize`:@@register.bodyLabel:We found some accounts with your name, which means you may have already created an ORCID iD using a different email address. Before creating an account, please confirm that none of these records belong to you. Not sure if any of these are you?`,
+        contactLabel: $localize`:@@register.contactLabel:Contact us.`,
+        firstNameLabel: $localize`:@@register.firstNameLabel:First Name`,
+        lastNameLabel: $localize`:@@register.lastNameLabel:Last Name`,
+        affiliationsLabel: $localize`:@@register.affiliationsLabel:Affiliations`,
+        dateCreatedLabel: $localize`:@@register.dateCreatedLabel:Date Created`,
+        viewRecordLabel: $localize`:@@register.viewRecordLabel:View Record`,
+        signinLabel: $localize`:@@register.signinLabel:I ALREADY HAVE AN ID, GO BACK TO SIGN IN`,
+        continueLabel: $localize`:@@register.continueLabel:NONE OF THESE ARE ME, CONTINUE WITH REGISTRATION`,
+      },
+    }
+
+    if (this.platform.tabletOrHandset) {
+      dialogParams['maxWidth'] = '95vw'
+      dialogParams['maxHeight'] = '95vh'
+    }
+
+    const dialogRef = this._dialog.open(IsThisYouComponent, dialogParams)
+
+    dialogRef.afterClosed().subscribe((confirmRegistration) => {
+      if (!confirmRegistration) {
+        this._router.navigate(['signin'])
+      }
+    })
+  }
+
+  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
+  focusCurrentStep(event: StepperSelectionEvent) {
+    let nextStep: ElementRef
+    if (event.selectedIndex === 0) {
+      nextStep = this.stepComponentA
+    } else if (event.selectedIndex === 1) {
+      nextStep = this.stepComponentB
+    } else if (event.selectedIndex === 2) {
+      nextStep = this.stepComponentC
+    }
+    // On mobile scroll the current step component into view
+    if (this.platform.columns4 || this.platform.columns8) {
+      setTimeout(() => {
+        const nativeElementNextStep = nextStep.nativeElement as HTMLElement
+        nativeElementNextStep.scrollIntoView()
+      }, 200)
+    }
+  }
+
+  /**
+   * Fills the register form.
+   * Use the data from the Oauth session send by the Orcid integrator
+   * or
+   * Use data coming from a third party institution/social entity
+   * or
+   * Use empty values
+   */
+  private prefillRegisterForm(
+    oauthData: RequestInfoForm,
+    thirdPartyOauthData: ThirdPartyAuthData
+  ) {
+    return this._formBuilder.group({
+      personal: [
+        {
+          givenNames:
+            oauthData?.userGivenNames ||
+            thirdPartyOauthData?.signinData?.firstName ||
+            '',
+          familyNames:
+            oauthData?.userFamilyNames ||
+            thirdPartyOauthData?.signinData?.lastName ||
+            '',
+          emails: {
+            email:
+              oauthData?.userEmail ||
+              thirdPartyOauthData?.signinData?.email ||
+              '',
+            confirmEmail: '',
+            additionalEmails: { '0': '' },
+          },
+        },
+      ],
+    })
+  }
+}
diff --git a/src/app/register2/pages/register/register2.component.html b/src/app/register2/pages/register/register2.component.html
new file mode 100644
index 0000000000..670055304a
--- /dev/null
+++ b/src/app/register2/pages/register/register2.component.html
@@ -0,0 +1,94 @@
+<main id="main">
+  <div class="container">
+    <div class="row space-around">
+      <div class="col l6 m8 s4" [ngClass]="{ 'no-gutters': platform.columns4 }">
+        <!-- MOBILE PRESENTATION -->
+        <mat-vertical-stepper
+          [linear]="isLinear"
+          #stepper
+          *ngIf="platform.columns8 || platform.columns4"
+          (selectionChange)="selectionChange($event)"
+          class="orcid-stepper-wizard"
+        >
+          <mat-step [stepControl]="FormGroupStepA">
+            <ng-template matStepLabel i18n="@@register.personalData"
+              >Personal data</ng-template
+            >
+            <app-step-a
+              [(formGroup)]="FormGroupStepA"
+              [reactivation]="reactivation"
+              #stepComponentA
+            ></app-step-a>
+          </mat-step>
+          <mat-step [stepControl]="FormGroupStepB">
+            <ng-template matStepLabel i18n="@@register.securityAndNotifications"
+              >Security and notifications</ng-template
+            >
+            <app-step-b
+              #stepComponentB
+              [(formGroup)]="FormGroupStepB"
+              [personalData]="personalData"
+              [reactivation]="reactivation"
+            ></app-step-b>
+          </mat-step>
+          <mat-step [stepControl]="FormGroupStepC" #lastStep>
+            <ng-template matStepLabel i18n="@@register.visibilityAndTerm"
+              >Visibility and terms</ng-template
+            >
+            <app-step-c
+              #stepComponentC
+              [(formGroup)]="FormGroupStepC"
+              (submit)="register()"
+              [loading]="loading"
+              [reactivation]="reactivation"
+            ></app-step-c>
+          </mat-step>
+        </mat-vertical-stepper>
+
+        <!-- DESKTOP PRESENTATION -->
+        <mat-horizontal-stepper
+          [linear]="isLinear"
+          #stepper
+          *ngIf="platform.columns12"
+          labelPosition="bottom"
+          class="orcid-stepper-wizard"
+          (selectionChange)="selectionChange($event)"
+        >
+          <mat-step [stepControl]="FormGroupStepA">
+            <ng-template matStepLabel i18n="@@register.personalData"
+              >Personal data</ng-template
+            >
+            <app-step-a
+              [(formGroup)]="FormGroupStepA"
+              [reactivation]="reactivation"
+              #stepComponentA
+            ></app-step-a>
+          </mat-step>
+          <mat-step [stepControl]="FormGroupStepB">
+            <ng-template matStepLabel i18n="@@register.securityAndNotifications"
+              >Security and notifications</ng-template
+            >
+            <app-step-b
+              #stepComponentB
+              [(formGroup)]="FormGroupStepB"
+              [personalData]="personalData"
+              [reactivation]="reactivation"
+            ></app-step-b>
+          </mat-step>
+          <mat-step [stepControl]="FormGroupStepC" #lastStep>
+            <ng-template matStepLabel i18n="@@register.visibilityAndTerm"
+              >Visibility and terms</ng-template
+            >
+            <app-step-c
+              #stepComponentC
+              [(formGroup)]="FormGroupStepC"
+              (submit)="register()"
+              [loading]="loading"
+              [reactivation]="reactivation"
+            ></app-step-c>
+          </mat-step>
+        </mat-horizontal-stepper>
+      </div>
+    </div>
+  </div>
+</main>
diff --git a/src/app/register2/pages/register/register2.component.scss b/src/app/register2/pages/register/register2.component.scss
new file mode 100644
index 0000000000..83134365d6
--- /dev/null
+++ b/src/app/register2/pages/register/register2.component.scss
@@ -0,0 +1,9 @@
+:host {
+  width: 100%;
+}
+
+mat-vertical-stepper,
+mat-horizontal-stepper {
+  max-width: 100%;
+  width: 100%;
+}
diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts
new file mode 100644
index 0000000000..46fc6822a3
--- /dev/null
+++ b/src/app/register2/pages/register/register2.component.ts
@@ -0,0 +1,339 @@
+import { StepperSelectionEvent } from '@angular/cdk/stepper'
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Inject,
+  OnInit,
+  ViewChild,
+} from '@angular/core'
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { MatStep } from '@angular/material/stepper'
+import { Router } from '@angular/router'
+import { combineLatest, forkJoin, Observable } from 'rxjs'
+import { catchError, first, map, switchMap } from 'rxjs/operators'
+import { IsThisYouComponent } from 'src/app/cdk/is-this-you'
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
+import { WINDOW } from 'src/app/cdk/window'
+import { isRedirectToTheAuthorizationPage } from 'src/app/constants'
+import { UserService } from 'src/app/core'
+import { RegisterService } from 'src/app/core/register/register.service'
+import { RequestInfoForm } from 'src/app/types'
+import {
+  RegisterConfirmResponse,
+  RegisterForm,
+} from 'src/app/types/register.endpoint'
+import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
+import { ERROR_REPORT } from 'src/app/errors'
+import { UserSession } from 'src/app/types/session.local'
+import { ThirdPartyAuthData } from 'src/app/types/sign-in-data.endpoint'
+import { ReactivationLocal } from '../../../types/reactivation.local'
+import { SearchService } from '../../../core/search/search.service'
+import { SearchParameters, SearchResults } from 'src/app/types'
+import { GoogleTagManagerService } from '../../../core/google-tag-manager/google-tag-manager.service'
+
+@Component({
+  selector: 'app-register-2',
+  templateUrl: './register2.component.html',
+  styleUrls: ['./register2.component.scss'],
+})
+export class Register2Component implements OnInit, AfterViewInit {
+  @ViewChild('lastStep') lastStep: MatStep
+  @ViewChild('stepComponentA', { read: ElementRef }) stepComponentA: ElementRef
+  @ViewChild('stepComponentB', { read: ElementRef }) stepComponentB: ElementRef
+  @ViewChild('stepComponentC', { read: ElementRef }) stepComponentC: ElementRef
+  platform: PlatformInfo
+  FormGroupStepA: UntypedFormGroup
+  FormGroupStepB: UntypedFormGroup
+  FormGroupStepC: UntypedFormGroup
+  isLinear = true
+  personalData: RegisterForm
+  backendForm: RegisterForm
+  loading = false
+  requestInfoForm: RequestInfoForm | null
+  thirdPartyAuthData: ThirdPartyAuthData
+  reactivation = {
+    isReactivation: false,
+    reactivationCode: '',
+  } as ReactivationLocal
+
+  constructor(
+    private _cdref: ChangeDetectorRef,
+    private _platformInfo: PlatformInfoService,
+    private _formBuilder: UntypedFormBuilder,
+    private _register: RegisterService,
+    private _dialog: MatDialog,
+    @Inject(WINDOW) private window: Window,
+    private _googleTagManagerService: GoogleTagManagerService,
+    private _user: UserService,
+    private _router: Router,
+    private _errorHandler: ErrorHandlerService,
+    private _userInfo: UserService,
+    private _searchService: SearchService
+  ) {
+    _platformInfo.get().subscribe((platform) => {
+      this.platform = platform
+      this.reactivation.isReactivation = this.platform.reactivation
+      this.reactivation.reactivationCode = this.platform.reactivationCode
+    })
+  }
+  ngOnInit() {
+    this._register.getRegisterForm().subscribe()
+
+    this.FormGroupStepA = this._formBuilder.group({
+      personal: [''],
+    })
+    this.FormGroupStepB = this._formBuilder.group({
+      password: [''],
+      sendOrcidNews: [''],
+    })
+    this.FormGroupStepC = this._formBuilder.group({
+      activitiesVisibilityDefault: [''],
+      termsOfUse: [''],
+      captcha: [''],
+    })
+
+    combineLatest([this._userInfo.getUserSession(), this._platformInfo.get()])
+      .pipe(
+        first(),
+        map(([session, platform]) => {
+          session = session as UserSession
+          platform = platform as PlatformInfo
+
+          // TODO @leomendoza123 move the handle of social/institutional sessions to the user service
+
+          this.thirdPartyAuthData = session.thirdPartyAuthData
+          this.requestInfoForm = session.oauthSession
+
+          if (this.thirdPartyAuthData || this.requestInfoForm) {
+            this.FormGroupStepA = this.prefillRegisterForm(
+              this.requestInfoForm,
+              this.thirdPartyAuthData
+            )
+          }
+        })
+      )
+      .subscribe()
+  }
+
+  ngAfterViewInit(): void {
+    this._cdref.detectChanges()
+  }
+
+  register() {
+    this.loading = true
+    this.lastStep.interacted = true
+    if (
+      this.FormGroupStepA.valid &&
+      this.FormGroupStepB.valid &&
+      this.FormGroupStepC.valid
+    ) {
+      this._register
+        .backendRegisterFormValidate(
+          this.FormGroupStepA,
+          this.FormGroupStepB,
+          this.FormGroupStepC
+        )
+        .pipe(
+          switchMap((validator: RegisterForm) => {
+            if (validator.errors.length > 0) {
+              // At this point any backend error is unexpected
+              this._errorHandler.handleError(
+                new Error('registerUnexpectedValidateFail'),
+                ERROR_REPORT.REGISTER
+              )
+            }
+            return this._register.register(
+              this.FormGroupStepA,
+              this.FormGroupStepB,
+              this.FormGroupStepC,
+              this.reactivation,
+              this.requestInfoForm,
+              true
+            )
+          })
+        )
+        .subscribe((response) => {
+          this.loading = false
+          if (response.url) {
+            const analyticsReports: Observable<void>[] = []
+
+            analyticsReports.push(
+              this._googleTagManagerService.reportEvent(
+                'New-Registration',
+                this.requestInfoForm || 'Website'
+              )
+            )
+            forkJoin(analyticsReports)
+              .pipe(
+                catchError((err) =>
+                  this._errorHandler.handleError(
+                    err,
+                    ERROR_REPORT.STANDARD_NO_VERBOSE_NO_GA
+                  )
+                )
+              )
+              .subscribe(
+                () => this.afterRegisterRedirectionHandler(response),
+                () => this.afterRegisterRedirectionHandler(response)
+              )
+          } else {
+            this._errorHandler.handleError(
+              new Error('registerUnexpectedConfirmation'),
+              ERROR_REPORT.REGISTER
+            )
+          }
+        })
+    } else {
+      this.loading = false
+    }
+  }
+
+  afterRegisterRedirectionHandler(response: RegisterConfirmResponse) {
+    if (isRedirectToTheAuthorizationPage(response)) {
+      this.window.location.href = response.url
+    } else {
+      if (
+        response.url.indexOf('orcid.org/my-orcid') > 0 &&
+        response.url.indexOf('justRegistered') > 0
+      ) {
+        this.window.scrollTo(0, 0)
+        this._router
+          .navigate(['/my-orcid'], {
+            queryParams: { justRegistered: true },
+          })
+          .then(() => {
+            this.window.scrollTo(0, 0)
+          })
+      } else {
+        this.window.location.href = response.url
+      }
+    }
+  }
+
+  afterStepASubmitted() {
+    // Update the personal data object is required after submit since is an input for StepB
+
+    if (!this.reactivation?.isReactivation) {
+      if (this.FormGroupStepA.valid) {
+        this.personalData = this.FormGroupStepA.value.personal
+        const searchValue =
+          this.personalData.familyNames.value +
+          ' ' +
+          this.personalData.givenNames.value
+        const searchParams: SearchParameters = {}
+        searchParams.searchQuery = searchValue
+
+        this._searchService.search(searchParams).subscribe((value) => {
+          if (value['num-found'] > 0) {
+            this.openDialog(value)
+          }
+        })
+      }
+    }
+  }
+
+  openDialog(duplicateRecordsSearchResults: SearchResults): void {
+    const duplicateRecords = duplicateRecordsSearchResults['expanded-result']
+    const dialogParams = {
+      width: `1078px`,
+      height: `600px`,
+      maxWidth: `90vw`,
+
+      data: {
+        duplicateRecords,
+        titleLabel: $localize`:@@register.titleLabel:Could this be you?`,
+        // tslint:disable-next-line: max-line-length
+        bodyLabel: $localize`:@@register.bodyLabel:We found some accounts with your name, which means you may have already created an ORCID iD using a different email address. Before creating an account, please confirm that none of these records belong to you. Not sure if any of these are you?`,
+        contactLabel: $localize`:@@register.contactLabel:Contact us.`,
+        firstNameLabel: $localize`:@@register.firstNameLabel:First Name`,
+        lastNameLabel: $localize`:@@register.lastNameLabel:Last Name`,
+        affiliationsLabel: $localize`:@@register.affiliationsLabel:Affiliations`,
+        dateCreatedLabel: $localize`:@@register.dateCreatedLabel:Date Created`,
+        viewRecordLabel: $localize`:@@register.viewRecordLabel:View Record`,
+        signinLabel: $localize`:@@register.signinLabel:I ALREADY HAVE AN ID, GO BACK TO SIGN IN`,
+        continueLabel: $localize`:@@register.continueLabel:NONE OF THESE ARE ME, CONTINUE WITH REGISTRATION`,
+      },
+    }
+
+    if (this.platform.tabletOrHandset) {
+      dialogParams['maxWidth'] = '95vw'
+      dialogParams['maxHeight'] = '95vh'
+    }
+
+    const dialogRef = this._dialog.open(IsThisYouComponent, dialogParams)
+
+    dialogRef.afterClosed().subscribe((confirmRegistration) => {
+      if (!confirmRegistration) {
+        this._router.navigate(['signin'])
+      }
+    })
+  }
+
+  selectionChange(event: StepperSelectionEvent) {
+    if (event.previouslySelectedIndex === 0) {
+      this.afterStepASubmitted()
+    }
+    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
+  focusCurrentStep(event: StepperSelectionEvent) {
+    let nextStep: ElementRef
+    if (event.selectedIndex === 0) {
+      nextStep = this.stepComponentA
+    } else if (event.selectedIndex === 1) {
+      nextStep = this.stepComponentB
+    } else if (event.selectedIndex === 2) {
+      nextStep = this.stepComponentC
+    }
+    // On mobile scroll the current step component into view
+    if (this.platform.columns4 || this.platform.columns8) {
+      setTimeout(() => {
+        const nativeElementNextStep = nextStep.nativeElement as HTMLElement
+        nativeElementNextStep.scrollIntoView()
+      }, 200)
+    }
+  }
+
+  /**
+   * Fills the register form.
+   * Use the data from the Oauth session send by the Orcid integrator
+   * or
+   * Use data coming from a third party institution/social entity
+   * or
+   * Use empty values
+   */
+  private prefillRegisterForm(
+    oauthData: RequestInfoForm,
+    thirdPartyOauthData: ThirdPartyAuthData
+  ) {
+    return this._formBuilder.group({
+      personal: [
+        {
+          givenNames:
+            oauthData?.userGivenNames ||
+            thirdPartyOauthData?.signinData?.firstName ||
+            '',
+          familyNames:
+            oauthData?.userFamilyNames ||
+            thirdPartyOauthData?.signinData?.lastName ||
+            '',
+          emails: {
+            email:
+              oauthData?.userEmail ||
+              thirdPartyOauthData?.signinData?.email ||
+              '',
+            confirmEmail: '',
+            additionalEmails: { '0': '' },
+          },
+        },
+      ],
+    })
+  }
+}
diff --git a/src/app/register2/register-routing.module.ts b/src/app/register2/register-routing.module.ts
new file mode 100644
index 0000000000..9f62a335f0
--- /dev/null
+++ b/src/app/register2/register-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { Routes, RouterModule } from '@angular/router'
+import { RegisterComponent } from './pages/register/register.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RegisterComponent,
+  },
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class RegisterRoutingModule {}
diff --git a/src/app/register2/register.module.ts b/src/app/register2/register.module.ts
new file mode 100644
index 0000000000..1f6dad684a
--- /dev/null
+++ b/src/app/register2/register.module.ts
@@ -0,0 +1,74 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { RegisterRoutingModule } from './register-routing.module'
+import { RegisterComponent } from './pages/register/register.component'
+import { StepAComponent } from './components/step-a/step-a.component'
+import { StepBComponent } from './components/step-b/step-b.component'
+import { StepCComponent } from './components/step-c/step-c.component'
+import { FormPersonalComponent } from './components/form-personal/form-personal.component'
+import { FormPasswordComponent } from './components/form-password/form-password.component'
+import { FormNotificationsComponent } from './components/form-notifications/form-notifications.component'
+import { FormVisibilityComponent } from './components/form-visibility/form-visibility.component'
+import { FormTermsComponent } from './components/form-terms/form-terms.component'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+// tslint:disable-next-line: max-line-length
+import { FormPersonalAdditionalEmailsComponent } from './components/form-personal-additional-emails/form-personal-additional-emails.component'
+import { IsThisYouModule } from '../cdk/is-this-you'
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'
+import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'
+import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'
+import { MatIconModule } from '@angular/material/icon'
+import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'
+import { MatStepperModule } from '@angular/material/stepper'
+import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio'
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'
+import { RecaptchaModule } from '../cdk/recaptcha/recaptcha.module'
+import { FormAntiRobotsComponent } from './components/form-anti-robots/form-anti-robots.component'
+import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
+import { BackendErrorComponent } from './components/backend-error/backend-error.component'
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar'
+import { FormDirectivesModule } from '../cdk/form-directives/form-directives.module'
+import { TopBarRecordIssuesComponent } from './components/top-bar-record-issues/top-bar-record-issues.component'
+import { WarningMessageModule } from '../cdk/warning-message/warning-message.module'
+import { MdePopoverModule } from '../cdk/popover'
+@NgModule({
+  declarations: [
+    RegisterComponent,
+    StepAComponent,
+    StepBComponent,
+    StepCComponent,
+    FormPersonalComponent,
+    FormPasswordComponent,
+    FormNotificationsComponent,
+    FormVisibilityComponent,
+    FormTermsComponent,
+    FormPersonalAdditionalEmailsComponent,
+    FormAntiRobotsComponent,
+    BackendErrorComponent,
+    TopBarRecordIssuesComponent,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RegisterRoutingModule,
+    MatStepperModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatRadioModule,
+    MatIconModule,
+    MatDialogModule,
+    IsThisYouModule,
+    MdePopoverModule,
+    MatCardModule,
+    RecaptchaModule,
+    A11yLinkModule,
+    MatProgressBarModule,
+    FormDirectivesModule,
+    WarningMessageModule,
+  ],
+})
+export class Register2Module {}

From b1731338c8302de84fb6d4ba1b7a24bebcfb507f Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza Fernadez <leomendoza123@gmail.com>
Date: Tue, 14 Nov 2023 10:34:52 -0600
Subject: [PATCH 02/21] Passwords part 1

---
 .../form-password.component.html              | 212 +++++++-----------
 .../form-password.component.scss              |   3 +
 .../form-password.component.scss-theme.scss   |  11 +-
 .../form-password/form-password.component.ts  |   7 +-
 .../register2/components/register2.style.scss |   8 +-
 .../step-b-notifications.component.html       |  56 +++++
 .../step-b-notifications.component.scss       |   4 +
 .../step-b-notifications.component.ts         |  22 ++
 .../step-b-notificationscomponent.spec.ts     |  24 ++
 .../pages/register/register.component.html    |   4 +-
 .../pages/register/register.component.ts      |  14 +-
 src/app/register2/register.module.ts          |  46 ++--
 12 files changed, 241 insertions(+), 170 deletions(-)
 create mode 100644 src/app/register2/components/step-b-notifications/step-b-notifications.component.html
 create mode 100644 src/app/register2/components/step-b-notifications/step-b-notifications.component.scss
 create mode 100644 src/app/register2/components/step-b-notifications/step-b-notifications.component.ts
 create mode 100644 src/app/register2/components/step-b-notifications/step-b-notificationscomponent.spec.ts

diff --git a/src/app/register2/components/form-password/form-password.component.html b/src/app/register2/components/form-password/form-password.component.html
index 7c8077b9be..92925a08fc 100644
--- a/src/app/register2/components/form-password/form-password.component.html
+++ b/src/app/register2/components/form-password/form-password.component.html
@@ -1,7 +1,8 @@
 <div [formGroup]="form">
   <div class="input-container">
+    <mat-label i18n="@@register.password">Password</mat-label>
+
     <mat-form-field appearance="outline" [hideRequiredMarker]="true">
-      <mat-label i18n="@@register.password">Password</mat-label>
       <input
         formControlName="password"
         type="password"
@@ -9,57 +10,80 @@
         autocomplete="new-password"
         id="password-input"
       />
-      <mat-error
-        *ngIf="form.hasError('required', 'password')"
-        i18n="@@register.passwordRequired"
-      >
-        A password is required
-      </mat-error>
-      <mat-error
-        *ngIf="form.hasError('passwordIsEqualToTheEmail', 'password')"
-        i18n="@@register.passwordNotEmail"
-      >
-        Password must not be the same as your email address
-      </mat-error>
-      <mat-error
-        *ngIf="
-          !form.hasError('required', 'password') &&
-          (form.hasError('minlength', 'password') ||
-            form.hasError('pattern', 'password'))
-        "
-        i18n="@@register.wrongPasswordPattern"
-      >
-        Password must match all pattern requirements
-      </mat-error>
-      <mat-error
-        *ngIf="form.hasError('maxlength', 'password')"
-        i18n="@@register.passwordIsToLongV2"
-      >
-        Password must be between 8 and 256 characters
-      </mat-error>
-      <mat-error *ngIf="this.form.hasError('backendError', 'password')">
-        <div
-          *ngFor="let error of this.form.getError('backendError', 'password')"
-        >
-          <app-backend-error [errorCode]="error"></app-backend-error>
-        </div>
-      </mat-error>
     </mat-form-field>
-
-    <button
-      mat-icon-button
-      [attr.aria-label]="labelInfo"
-      type="button"
-      [mdePopoverTriggerFor]="passwordPopover"
-      mdePopoverTriggerOn="click"
-      #passwordPopoverTrigger="mdePopoverTrigger"
+    <mat-error
+    *ngIf="form.controls.password.touched && form.hasError('required', 'password')"
+    i18n="@@register.passwordRequired"
+  >
+    A password is required
+  </mat-error>
+  <mat-error
+    *ngIf="form.hasError('passwordIsEqualToTheEmail', 'password')"
+    i18n="@@register.passwordNotEmail"
+  >
+    Password must not be the same as your email address
+  </mat-error>
+  <mat-error
+    *ngIf="
+      !form.hasError('required', 'password') &&
+      (form.hasError('minlength', 'password') ||
+        form.hasError('pattern', 'password'))
+    "
+    i18n="@@register.wrongPasswordPattern"
+  >
+    Password must match all pattern requirements
+  </mat-error>
+  <mat-error
+    *ngIf="form.hasError('maxlength', 'password')"
+    i18n="@@register.passwordIsToLongV2"
+  >
+    Password must be between 8 and 256 characters
+  </mat-error>
+  <mat-error *ngIf="this.form.hasError('backendError', 'password')">
+    <div
+      *ngFor="let error of this.form.getError('backendError', 'password')"
     >
-      <mat-icon class="material-icons-outlined large-material-icon"
-        >help_outline</mat-icon
-      >
-    </button>
+      <app-backend-error [errorCode]="error"></app-backend-error>
+    </div>
+  </mat-error>
+
+
   </div>
 
+<div class="input-container">
+  <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+    <mat-label i18n="@@register.confirmPassword">Confirm password</mat-label>
+    <input
+      formControlName="passwordConfirm"
+      type="password"
+      matInput
+      autocomplete="new-password"
+      id="password-confirm-input"
+    />
+
+  </mat-form-field>
+  <mat-error
+  *ngIf="form.hasError('required', 'passwordConfirm')"
+  i18n="@@register.passwordConfirmationRequired"
+>
+  Retype your password
+</mat-error>
+<mat-error
+  *ngIf="form.hasError('passwordIsEqualToTheEmail', 'passwordConfirm')"
+  i18n="@@register.passwordCantBeEmail"
+>
+  Password must not be the same as your email address
+</mat-error>
+
+<mat-error
+  *ngIf="form.hasError('mismatch', 'passwordConfirm')"
+  i18n="@@register.passwordConfirmationMatch"
+>
+  The password and confirmed password must match
+</mat-error>
+</div>
+
+  <p i18n="@@register.yourPasswordHas">Your password has</p>
   <ol>
     <li>
       <ng-container
@@ -82,7 +106,7 @@
             : valid
         "
       ></ng-container>
-      <div i18n="@@register.passwordSymbol">1 letter or symbol</div>
+      <div i18n="@@register.atLeastALetterOrSymbol">At least 1 letter or symbol</div>
     </li>
     <li>
       <ng-container
@@ -94,100 +118,16 @@
             : valid
         "
       ></ng-container>
-      <div i18n="@@register.passwordNumber">1 number</div>
+      <div i18n="@@register.atLeastANumber">At least 1 number</div>
     </li>
   </ol>
 
-  <mat-form-field appearance="outline" [hideRequiredMarker]="true">
-    <mat-label i18n="@@register.confirmPassword">Confirm password</mat-label>
-    <input
-      formControlName="passwordConfirm"
-      type="password"
-      matInput
-      autocomplete="new-password"
-      id="password-confirm-input"
-    />
-    <mat-error
-      *ngIf="form.hasError('required', 'passwordConfirm')"
-      i18n="@@register.passwordConfirmationRequired"
-    >
-      Retype your password
-    </mat-error>
-    <mat-error
-      *ngIf="form.hasError('passwordIsEqualToTheEmail', 'passwordConfirm')"
-      i18n="@@register.passwordCantBeEmail"
-    >
-      Password must not be the same as your email address
-    </mat-error>
-
-    <mat-error
-      *ngIf="form.hasError('mismatch', 'passwordConfirm')"
-      i18n="@@register.passwordConfirmationMatch"
-    >
-      The password and confirmed password must match
-    </mat-error>
-  </mat-form-field>
 </div>
 
 <ng-template #valid>
-  <mat-icon class="valid">check_circle</mat-icon>
+  <mat-icon class="checked" class="valid">check_circle</mat-icon>
 </ng-template>
 
 <ng-template #invalid>
-  <mat-icon class="material-icons-outlined">check_circle</mat-icon>
+  <mat-icon class="no-checked" class="material-icons-outlined">circle</mat-icon>
 </ng-template>
-
-<mde-popover #passwordPopover="mdePopover" [mdePopoverOverlapTrigger]="false">
-  <mat-card class="mat-elevation-z3 orcid-popover">
-    <div class="popover-content">
-      <p i18n="@@register.passwordLengthDetail">
-        Must be between 8 and 256 characters long and contain:
-      </p>
-      <ul>
-        <li i18n="@@register.atLeast1">at least 1 numeral: 0 - 9</li>
-        <li>
-          <ng-container i18n="@@register.atLeast1ofTheFollowing"
-            >at least 1 of the following:</ng-container
-          >
-
-          <ul>
-            <li i18n="@@register.alphaCharacter">
-              alpha character, case-sensitive a-Z
-            </li>
-            <li>
-              <ng-container i18n="@@register.theFollowingSymbols">
-                any of the following symbols:</ng-container
-              ><br />
-              ! @ # $ % ^ * ( ) ~ ` {{ '{ }' }} [ ] | \ & _
-            </li>
-          </ul>
-        </li>
-        <li>
-          <ng-container i18n="@@register.optionalTheSpace"
-            >optionally the space character,</ng-container
-          >
-          <br />
-          <ng-container i18n="@@register.optionalTheSpaceIe"
-            >i.e ' ' and other punctuation such as . , ;</ng-container
-          >
-        </li>
-      </ul>
-      <p>
-        <strong i18n="@@register.examplePassword">Example: sun% moon2</strong>
-      </p>
-      <p>
-        <ng-container i18n="@@register.doesNotAllowCommonPassword">
-          ORCID does not allow common passwords. Common passwords are insecure,
-          easily-guessed words or phrases such as 'qwerty123'.
-        </ng-container>
-        <a
-          href="https://github.com/danielmiessler/SecLists/blob/master/Passwords/Common-Credentials/10-million-password-list-top-1000.txt"
-          i18n="@@register.seeFullList"
-          target="_blank"
-          rel="noopener noreferrer"
-          >See the full list of common passwords we don't allow on ORCID</a
-        >
-      </p>
-    </div>
-  </mat-card>
-</mde-popover>
diff --git a/src/app/register2/components/form-password/form-password.component.scss b/src/app/register2/components/form-password/form-password.component.scss
index 5814f8f6f4..528c724645 100644
--- a/src/app/register2/components/form-password/form-password.component.scss
+++ b/src/app/register2/components/form-password/form-password.component.scss
@@ -10,6 +10,7 @@ ol {
   li {
     list-style-type: none;
     display: flex;
+    padding-top: 14px;
     img {
       margin-inline-end: 4px;
     }
@@ -18,3 +19,5 @@ ol {
     }
   }
 }
+
+
diff --git a/src/app/register2/components/form-password/form-password.component.scss-theme.scss b/src/app/register2/components/form-password/form-password.component.scss-theme.scss
index 85ff72cd1f..c28f2bcc6d 100644
--- a/src/app/register2/components/form-password/form-password.component.scss-theme.scss
+++ b/src/app/register2/components/form-password/form-password.component.scss-theme.scss
@@ -8,9 +8,16 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
-  ::ng-deep .valid {
-    color: mat.get-color-from-palette($accent, 900);
+  ::ng-deep .mat-icon.valid {
+    color: map-get($foreground, 'brand-primary-dark');
   }
+
+
+  ::ng-deep  .mat-icon{
+    color: map-get($background, 'ui-background-lightest');
+  }
+
+
 }
 
 @include form-password($orcid-app-theme);
diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts
index b24e5b3e56..32d5d53dcc 100644
--- a/src/app/register2/components/form-password/form-password.component.ts
+++ b/src/app/register2/components/form-password/form-password.component.ts
@@ -1,9 +1,9 @@
 import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core'
 import {
-  UntypedFormControl,
-  UntypedFormGroup,
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
+  UntypedFormControl,
+  UntypedFormGroup,
   ValidatorFn,
   Validators,
 } from '@angular/forms'
@@ -20,6 +20,9 @@ import { BaseForm } from '../BaseForm'
   styleUrls: [
     './form-password.component.scss-theme.scss',
     './form-password.component.scss',
+    '../register2.scss-theme.scss',
+    '../register2.style.scss',
+
   ],
   providers: [
     {
diff --git a/src/app/register2/components/register2.style.scss b/src/app/register2/components/register2.style.scss
index e0223bd64d..bfd259e498 100644
--- a/src/app/register2/components/register2.style.scss
+++ b/src/app/register2/components/register2.style.scss
@@ -3,7 +3,7 @@ a {
   font-weight: normal;
 }
 
-mat-card-title  img {
+mat-card-title img {
   margin-bottom: 32px;
 }
 
@@ -85,6 +85,12 @@ mat-label.orc-font-small-print {
 
 ::ng-deep {
 
+  mat-vertical-stepper.orcid-stepper-wizard mat-card p,
+  mat-horizontal-stepper.orcid-stepper-wizard mat-card p {
+    margin-bottom: 16px;
+  }
+
+
   mat-vertical-stepper.orcid-stepper-wizard mat-card mat-form-field,
   mat-vertical-stepper.orcid-stepper-wizard mat-card .input-container,
   mat-horizontal-stepper.orcid-stepper-wizard mat-card mat-form-field,
diff --git a/src/app/register2/components/step-b-notifications/step-b-notifications.component.html b/src/app/register2/components/step-b-notifications/step-b-notifications.component.html
new file mode 100644
index 0000000000..1f8320866f
--- /dev/null
+++ b/src/app/register2/components/step-b-notifications/step-b-notifications.component.html
@@ -0,0 +1,56 @@
+<mat-card class="orcid-wizard">
+  <mat-card-header>
+    <mat-card-title role="heading" aria-level="1">
+      <div>
+        <img
+          height="64px"
+          src="assets/vectors/orcid.logo.icon.svg"
+          alt="orcid logo"
+        />
+      </div>
+      <ng-container
+        *ngIf="!reactivation?.isReactivation"
+        i18n="@@register.create"
+      >
+        Create your ORCID iD
+      </ng-container>
+      <ng-container
+        *ngIf="reactivation?.isReactivation"
+        i18n="@@register.reactivation"
+      >
+        Thank you for reactivating your ORCID iD.
+      </ng-container>
+    </mat-card-title>
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2"
+      >This is step 3 of 4</mat-card-subtitle
+    >
+  </mat-card-header>
+
+  <mat-card-content>
+    <form [formGroup]="formGroup">
+      <app-form-notifications
+        formControlName="sendOrcidNews"
+      ></app-form-notifications>
+      <div class="step-actions">
+        <button
+          mat-button
+          color="primary"
+          matStepperPrevious
+          i18n="@@shared.back"
+          id="step-b-back-button"
+        >
+          GO BACK
+        </button>
+        <button
+          id="step-b-next"
+          mat-raised-button
+          matStepperNext
+          color="primary"
+          i18n="@@shared.next"
+        >
+          NEXT
+        </button>
+      </div>
+    </form>
+  </mat-card-content>
+</mat-card>
diff --git a/src/app/register2/components/step-b-notifications/step-b-notifications.component.scss b/src/app/register2/components/step-b-notifications/step-b-notifications.component.scss
new file mode 100644
index 0000000000..4cef8a0ce4
--- /dev/null
+++ b/src/app/register2/components/step-b-notifications/step-b-notifications.component.scss
@@ -0,0 +1,4 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/app/register2/components/step-b-notifications/step-b-notifications.component.ts b/src/app/register2/components/step-b-notifications/step-b-notifications.component.ts
new file mode 100644
index 0000000000..768b5aab06
--- /dev/null
+++ b/src/app/register2/components/step-b-notifications/step-b-notifications.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core'
+
+import { ReactivationLocal } from '../../../types/reactivation.local'
+import { BaseStepDirective } from '../BaseStep'
+
+@Component({
+  selector: 'app-step-b-notifications',
+  templateUrl: './step-b-notifications.component.html',
+  styleUrls: [
+    './step-b-notifications.component.scss',
+    '../register2.style.scss',
+    '../register2.scss-theme.scss',
+  ],
+})
+export class StepBNotificationsComponent extends BaseStepDirective {
+  @Input() personalData
+  @Input() reactivation: ReactivationLocal
+
+  constructor() {
+    super()
+  }
+}
diff --git a/src/app/register2/components/step-b-notifications/step-b-notificationscomponent.spec.ts b/src/app/register2/components/step-b-notifications/step-b-notificationscomponent.spec.ts
new file mode 100644
index 0000000000..f3363feb47
--- /dev/null
+++ b/src/app/register2/components/step-b-notifications/step-b-notificationscomponent.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { StepBNotificationsComponent } from './step-b-notifications.component'
+
+describe('StepBComponent', () => {
+  let component: StepBNotificationsComponent
+  let fixture: ComponentFixture<StepBNotificationsComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [StepBNotificationsComponent],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StepBNotificationsComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/pages/register/register.component.html b/src/app/register2/pages/register/register.component.html
index 017de7c72f..9480b3f343 100644
--- a/src/app/register2/pages/register/register.component.html
+++ b/src/app/register2/pages/register/register.component.html
@@ -21,13 +21,13 @@
               #stepComponentA
             ></app-step-a>
           </mat-step> -->
-          <mat-step [stepControl]="FormGroupStepB">
+          <mat-step [stepControl]="FormGroupStepBPassword">
             <ng-template matStepLabel i18n="@@register.securityAndNotifications"
               >Security and notifications</ng-template
             >
             <app-step-b
               #stepComponentB
-              [(formGroup)]="FormGroupStepB"
+              [(formGroup)]="FormGroupStepBPassword"
               [personalData]="personalData"
               [reactivation]="reactivation"
             ></app-step-b>
diff --git a/src/app/register2/pages/register/register.component.ts b/src/app/register2/pages/register/register.component.ts
index 197b832d6d..adbbd3ded2 100644
--- a/src/app/register2/pages/register/register.component.ts
+++ b/src/app/register2/pages/register/register.component.ts
@@ -45,7 +45,7 @@ export class RegisterComponent implements OnInit, AfterViewInit {
   @ViewChild('stepComponentC', { read: ElementRef }) stepComponentC: ElementRef
   platform: PlatformInfo
   FormGroupStepA: UntypedFormGroup
-  FormGroupStepB: UntypedFormGroup
+  FormGroupStepBPassword: UntypedFormGroup
   FormGroupStepC: UntypedFormGroup
   isLinear = true
   personalData: RegisterForm
@@ -84,10 +84,14 @@ export class RegisterComponent implements OnInit, AfterViewInit {
     this.FormGroupStepA = this._formBuilder.group({
       personal: [''],
     })
-    this.FormGroupStepB = this._formBuilder.group({
+    this.FormGroupStepBPassword = this._formBuilder.group({
       password: [''],
       sendOrcidNews: [''],
     })
+    // this.FormGroupStepBNotification = this._formBuilder.group({
+    //   password: [''],
+    //   sendOrcidNews: [''],
+    // })
     this.FormGroupStepC = this._formBuilder.group({
       activitiesVisibilityDefault: [''],
       termsOfUse: [''],
@@ -126,13 +130,13 @@ export class RegisterComponent implements OnInit, AfterViewInit {
     this.lastStep.interacted = true
     if (
       this.FormGroupStepA.valid &&
-      this.FormGroupStepB.valid &&
+      this.FormGroupStepBPassword.valid &&
       this.FormGroupStepC.valid
     ) {
       this._register
         .backendRegisterFormValidate(
           this.FormGroupStepA,
-          this.FormGroupStepB,
+          this.FormGroupStepBPassword,
           this.FormGroupStepC
         )
         .pipe(
@@ -146,7 +150,7 @@ export class RegisterComponent implements OnInit, AfterViewInit {
             }
             return this._register.register(
               this.FormGroupStepA,
-              this.FormGroupStepB,
+              this.FormGroupStepBPassword,
               this.FormGroupStepC,
               this.reactivation,
               this.requestInfoForm,
diff --git a/src/app/register2/register.module.ts b/src/app/register2/register.module.ts
index 1f6dad684a..fdc9010a76 100644
--- a/src/app/register2/register.module.ts
+++ b/src/app/register2/register.module.ts
@@ -1,42 +1,44 @@
-import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { RegisterRoutingModule } from './register-routing.module'
-import { RegisterComponent } from './pages/register/register.component'
+import { NgModule } from '@angular/core'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { FormNotificationsComponent } from './components/form-notifications/form-notifications.component'
+import { FormPasswordComponent } from './components/form-password/form-password.component'
+import { FormPersonalComponent } from './components/form-personal/form-personal.component'
+import { FormTermsComponent } from './components/form-terms/form-terms.component'
+import { FormVisibilityComponent } from './components/form-visibility/form-visibility.component'
 import { StepAComponent } from './components/step-a/step-a.component'
 import { StepBComponent } from './components/step-b/step-b.component'
 import { StepCComponent } from './components/step-c/step-c.component'
-import { FormPersonalComponent } from './components/form-personal/form-personal.component'
-import { FormPasswordComponent } from './components/form-password/form-password.component'
-import { FormNotificationsComponent } from './components/form-notifications/form-notifications.component'
-import { FormVisibilityComponent } from './components/form-visibility/form-visibility.component'
-import { FormTermsComponent } from './components/form-terms/form-terms.component'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { RegisterComponent } from './pages/register/register.component'
+import { RegisterRoutingModule } from './register-routing.module'
 // tslint:disable-next-line: max-line-length
-import { FormPersonalAdditionalEmailsComponent } from './components/form-personal-additional-emails/form-personal-additional-emails.component'
-import { IsThisYouModule } from '../cdk/is-this-you'
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'
+import { MatIconModule } from '@angular/material/icon'
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'
+import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'
 import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox'
-import { MatIconModule } from '@angular/material/icon'
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'
-import { MatStepperModule } from '@angular/material/stepper'
+import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field'
+import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input'
+import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar'
 import { MatLegacyRadioModule as MatRadioModule } from '@angular/material/legacy-radio'
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card'
-import { RecaptchaModule } from '../cdk/recaptcha/recaptcha.module'
-import { FormAntiRobotsComponent } from './components/form-anti-robots/form-anti-robots.component'
+import { MatStepperModule } from '@angular/material/stepper'
 import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
-import { BackendErrorComponent } from './components/backend-error/backend-error.component'
-import { MatLegacyProgressBarModule as MatProgressBarModule } from '@angular/material/legacy-progress-bar'
 import { FormDirectivesModule } from '../cdk/form-directives/form-directives.module'
-import { TopBarRecordIssuesComponent } from './components/top-bar-record-issues/top-bar-record-issues.component'
-import { WarningMessageModule } from '../cdk/warning-message/warning-message.module'
+import { IsThisYouModule } from '../cdk/is-this-you'
 import { MdePopoverModule } from '../cdk/popover'
+import { RecaptchaModule } from '../cdk/recaptcha/recaptcha.module'
+import { WarningMessageModule } from '../cdk/warning-message/warning-message.module'
+import { BackendErrorComponent } from './components/backend-error/backend-error.component'
+import { FormAntiRobotsComponent } from './components/form-anti-robots/form-anti-robots.component'
+import { FormPersonalAdditionalEmailsComponent } from './components/form-personal-additional-emails/form-personal-additional-emails.component'
+import { StepBNotificationsComponent } from './components/step-b-notifications/step-b-notifications.component'
+import { TopBarRecordIssuesComponent } from './components/top-bar-record-issues/top-bar-record-issues.component'
 @NgModule({
   declarations: [
     RegisterComponent,
     StepAComponent,
     StepBComponent,
+    StepBNotificationsComponent,
     StepCComponent,
     FormPersonalComponent,
     FormPasswordComponent,

From 06d5550c785f80d3bbd3a7eb0bf6319b5b3d9262 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza Fernadez <leomendoza123@gmail.com>
Date: Tue, 14 Nov 2023 11:19:10 -0600
Subject: [PATCH 03/21] Password 1

---
 .../form-visibility.component.html            |  54 +++++++-----
 .../form-visibility.component.scss            |   8 +-
 .../form-visibility.component.ts              |  10 ++-
 .../components/register2.scss-theme.scss      |   5 ++
 .../step-b-notifications.component.html       |  56 ------------
 .../step-b-notificationscomponent.spec.ts     |  24 ------
 .../components/step-c-t/step-c.component.html |  80 ++++++++++++++++++
 .../step-c.component.scss                     |   0
 .../{step-c => step-c-t}/step-c.component.ts  |  12 ++-
 .../components/step-c-t/step-c.spec.ts        |  24 ++++++
 .../step-d.component.html}                    |   0
 .../step-d.component.scss}                    |   0
 .../step-d.component.spec.ts}                 |   2 +-
 .../step-d.component.ts}                      |  12 +--
 .../pages/register/register.component.html    |  25 ++++--
 .../pages/register/register.component.scss    |   6 +-
 .../pages/register/register.component.ts      |  20 ++---
 src/app/register2/register.module.ts          |   8 +-
 src/assets/vectors/visibility-everyone2.svg   |   6 ++
 src/assets/vectors/visibility-only-me2.jpg    | Bin 0 -> 4385 bytes
 .../vectors/visibility-trusted-source2.jpg    | Bin 0 -> 4186 bytes
 21 files changed, 213 insertions(+), 139 deletions(-)
 delete mode 100644 src/app/register2/components/step-b-notifications/step-b-notifications.component.html
 delete mode 100644 src/app/register2/components/step-b-notifications/step-b-notificationscomponent.spec.ts
 create mode 100644 src/app/register2/components/step-c-t/step-c.component.html
 rename src/app/register2/components/{step-c => step-c-t}/step-c.component.scss (100%)
 rename src/app/register2/components/{step-c => step-c-t}/step-c.component.ts (61%)
 create mode 100644 src/app/register2/components/step-c-t/step-c.spec.ts
 rename src/app/register2/components/{step-c/step-c.component.html => step-d/step-d.component.html} (100%)
 rename src/app/register2/components/{step-b-notifications/step-b-notifications.component.scss => step-d/step-d.component.scss} (100%)
 rename src/app/register2/components/{step-c/step-c.component.spec.ts => step-d/step-d.component.spec.ts} (91%)
 rename src/app/register2/components/{step-b-notifications/step-b-notifications.component.ts => step-d/step-d.component.ts} (53%)
 create mode 100644 src/assets/vectors/visibility-everyone2.svg
 create mode 100644 src/assets/vectors/visibility-only-me2.jpg
 create mode 100644 src/assets/vectors/visibility-trusted-source2.jpg

diff --git a/src/app/register2/components/form-visibility/form-visibility.component.html b/src/app/register2/components/form-visibility/form-visibility.component.html
index 0acefbf8ed..b6dca7fbb8 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.html
+++ b/src/app/register2/components/form-visibility/form-visibility.component.html
@@ -1,7 +1,4 @@
 <ng-container [formGroup]="form">
-  <h3 class="mat-subheading-2" i18n="@@register.visibility">
-    Visibility settings
-  </h3>
   <p>
     <ng-container i18n="@@register.visibilityDescription1">
       Your ORCID iD connects with your ORCID record that can contain links to
@@ -9,6 +6,10 @@ <h3 class="mat-subheading-2" i18n="@@register.visibility">
       name, and more. You control this content and who can see it.
     </ng-container>
   </p>
+  <h2 class="orc-font-body mat-subheading-2" i18n="@@register.visibility">
+    Visibility settings
+  </h2>
+
   <p i18n="@@register.visibilityDescription3">
     By default, what visibility should be given to new items added to your ORCID
     Record?
@@ -24,16 +25,19 @@ <h3 class="mat-subheading-2" i18n="@@register.visibility">
         class="orcid-radio-button-with-icons"
       >
         <img
-          src="./assets/vectors/visibility-everyone.svg"
+          src="./assets/vectors/visibility-everyone2.svg"
           aria-hidden="true"
           alt=""
         />
         <div class="inlined">
-          <strong i18n="@@register.VisibilityEveryone">Everyone</strong>
+          <div>
+            <strong i18n="@@register.VisibilityEveryone">Everyone</strong>
 
-          <ng-container i18n="@@register.VisibilityEveryone2"
-            >(87% of users choose this)</ng-container
-          >
+            <ng-container i18n="@@register.VisibilityEveryone2"
+              >(87% of users choose this)</ng-container
+            >
+            <div class="text-light orc-font-small-print">Everyone can see these items</div>
+          </div>
         </div>
       </mat-radio-button>
       <mat-radio-button
@@ -42,17 +46,22 @@ <h3 class="mat-subheading-2" i18n="@@register.visibility">
         class="orcid-radio-button-with-icons"
       >
         <img
-          src="./assets/vectors/visibility-trusted-source.svg"
+          src="./assets/vectors/visibility-trusted-source2.jpg"
           aria-hidden="true"
           alt=""
         />
         <div class="inlined">
-          <strong i18n="@@register.VisibilityTrusted"
-            >Trusted Organizations</strong
-          >
-          <ng-container i18n="@@register.VisibilityTrusted2"
-            >(5% of users choose this)</ng-container
-          >
+          <div>
+            <strong i18n="@@register.VisibilityTrusted"
+              >Trusted Organizations</strong
+            >
+            <ng-container i18n="@@register.VisibilityTrusted2"
+              >(5% of users choose this)</ng-container
+            >
+            <div class="text-light orc-font-small-print">
+              Only people and organizations you’ve given permission
+            </div>
+          </div>
         </div>
       </mat-radio-button>
       <mat-radio-button
@@ -61,16 +70,21 @@ <h3 class="mat-subheading-2" i18n="@@register.visibility">
         class="orcid-radio-button-with-icons"
       >
         <img
-          src="./assets/vectors/visibility-only-me.svg"
+          src="./assets/vectors/visibility-only-me2.jpg"
           aria-hidden="true"
           alt=""
         />
         <div class="inlined">
-          <strong i18n="@@register.VisibilityPrivate">Only me</strong>
+          <div>
+            <strong i18n="@@register.VisibilityPrivate">Only me</strong>
 
-          <ng-container i18n="@@register.VisibilityPrivate2"
-            >(8% of users choose this)</ng-container
-          >
+            <ng-container i18n="@@register.VisibilityPrivate2"
+              >(8% of users choose this)</ng-container
+            >
+            <div class="text-light orc-font-small-print">
+              Items are private and only visible to you
+            </div>
+          </div>
         </div>
       </mat-radio-button>
     </mat-radio-group>
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.scss b/src/app/register2/components/form-visibility/form-visibility.component.scss
index f24bbf1354..e0899aacb3 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.scss
+++ b/src/app/register2/components/form-visibility/form-visibility.component.scss
@@ -1,8 +1,8 @@
 :host img {
-  height: 24px;
-  width: 24px;
-  margin-left: -4px;
-  margin-right: 4px;
+  height: 32px;
+  width: 32px;
+  margin-left: 7px;
+  margin-right: 16px;
   [dir='rtl'] & {
     margin-right: -4px;
     margin-left: 4px;
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.ts b/src/app/register2/components/form-visibility/form-visibility.component.ts
index 2dbfc8716a..f2ef07dcbb 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.ts
+++ b/src/app/register2/components/form-visibility/form-visibility.component.ts
@@ -1,9 +1,9 @@
 import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
 import {
-  UntypedFormControl,
-  UntypedFormGroup,
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
+  UntypedFormControl,
+  UntypedFormGroup,
   Validators,
 } from '@angular/forms'
 import { ErrorStateMatcher } from '@angular/material/core'
@@ -15,7 +15,11 @@ import { BaseForm } from '../BaseForm'
 @Component({
   selector: 'app-form-visibility',
   templateUrl: './form-visibility.component.html',
-  styleUrls: ['./form-visibility.component.scss'],
+  styleUrls: [
+    './form-visibility.component.scss',
+    '../register2.style.scss',
+    '../register2.scss-theme.scss',
+  ],
   preserveWhitespaces: true,
   providers: [
     {
diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
index 26589908a6..9342ce246f 100644
--- a/src/app/register2/components/register2.scss-theme.scss
+++ b/src/app/register2/components/register2.scss-theme.scss
@@ -14,6 +14,11 @@
   .error {
     color: map-get($foreground, 'state-warning-dark');
   }
+
+  .text-light {
+    color: map-get($foreground, 'text-dark-mid');
+
+  }
 }
 
 @include theme($orcid-app-theme);
diff --git a/src/app/register2/components/step-b-notifications/step-b-notifications.component.html b/src/app/register2/components/step-b-notifications/step-b-notifications.component.html
deleted file mode 100644
index 1f8320866f..0000000000
--- a/src/app/register2/components/step-b-notifications/step-b-notifications.component.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<mat-card class="orcid-wizard">
-  <mat-card-header>
-    <mat-card-title role="heading" aria-level="1">
-      <div>
-        <img
-          height="64px"
-          src="assets/vectors/orcid.logo.icon.svg"
-          alt="orcid logo"
-        />
-      </div>
-      <ng-container
-        *ngIf="!reactivation?.isReactivation"
-        i18n="@@register.create"
-      >
-        Create your ORCID iD
-      </ng-container>
-      <ng-container
-        *ngIf="reactivation?.isReactivation"
-        i18n="@@register.reactivation"
-      >
-        Thank you for reactivating your ORCID iD.
-      </ng-container>
-    </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2"
-      >This is step 3 of 4</mat-card-subtitle
-    >
-  </mat-card-header>
-
-  <mat-card-content>
-    <form [formGroup]="formGroup">
-      <app-form-notifications
-        formControlName="sendOrcidNews"
-      ></app-form-notifications>
-      <div class="step-actions">
-        <button
-          mat-button
-          color="primary"
-          matStepperPrevious
-          i18n="@@shared.back"
-          id="step-b-back-button"
-        >
-          GO BACK
-        </button>
-        <button
-          id="step-b-next"
-          mat-raised-button
-          matStepperNext
-          color="primary"
-          i18n="@@shared.next"
-        >
-          NEXT
-        </button>
-      </div>
-    </form>
-  </mat-card-content>
-</mat-card>
diff --git a/src/app/register2/components/step-b-notifications/step-b-notificationscomponent.spec.ts b/src/app/register2/components/step-b-notifications/step-b-notificationscomponent.spec.ts
deleted file mode 100644
index f3363feb47..0000000000
--- a/src/app/register2/components/step-b-notifications/step-b-notificationscomponent.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-
-import { StepBNotificationsComponent } from './step-b-notifications.component'
-
-describe('StepBComponent', () => {
-  let component: StepBNotificationsComponent
-  let fixture: ComponentFixture<StepBNotificationsComponent>
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [StepBNotificationsComponent],
-    }).compileComponents()
-  })
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(StepBNotificationsComponent)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-  })
-
-  it('should create', () => {
-    expect(component).toBeTruthy()
-  })
-})
diff --git a/src/app/register2/components/step-c-t/step-c.component.html b/src/app/register2/components/step-c-t/step-c.component.html
new file mode 100644
index 0000000000..d6a3f0da49
--- /dev/null
+++ b/src/app/register2/components/step-c-t/step-c.component.html
@@ -0,0 +1,80 @@
+<mat-card class="orcid-wizard">
+  <mat-progress-bar
+    *ngIf="loading"
+    mode="indeterminate"
+    id="loading-bar"
+  ></mat-progress-bar>
+
+  <mat-card-header>
+    <mat-card-title role="heading" aria-level="1">
+      <div>
+        <img
+          height="64px"
+          src="assets/vectors/orcid.logo.icon.svg"
+          alt="orcid logo"
+        />
+      </div>
+      <ng-container
+        *ngIf="!reactivation?.isReactivation"
+        i18n="@@register.create"
+      >
+        Create your ORCID iD
+      </ng-container>
+      <ng-container
+        *ngIf="reactivation?.isReactivation"
+        i18n="@@register.reactivation"
+      >
+        Thank you for reactivating your ORCID iD.
+      </ng-container>
+    </mat-card-title>
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3"
+      >This is step 3 of 3</mat-card-subtitle
+    >
+  </mat-card-header>
+
+  <mat-card-content>
+    <form [formGroup]="formGroup" #form>
+      <app-form-visibility
+        formControlName="activitiesVisibilityDefault"
+      ></app-form-visibility>
+      <!-- <app-form-terms formControlName="termsOfUse"></app-form-terms> -->
+      <!-- <app-form-anti-robots formControlName="captcha"></app-form-anti-robots> -->
+      <div class="step-actions">
+        <button
+          id="step-c-register-button"
+          mat-raised-button
+          color="primary"
+          [disabled]="loading"
+        >
+          <ng-container
+            *ngIf="!reactivation?.isReactivation"
+            i18n="@@register.nextStep"
+          >
+            Next Step
+          </ng-container>
+          <ng-container
+            *ngIf="reactivation?.isReactivation"
+            i18n="@@register.reactivate"
+          >
+            REACTIVATE
+          </ng-container>
+        </button>
+        <a
+          mat-button
+          color="primary"
+          matStepperPrevious
+          type="button"
+          i18n="@@shared.previousStep"
+          id="step-c-back-button"
+        >
+          Previous Step
+        </a>
+      </div>
+    </form>
+  </mat-card-content>
+  <mat-progress-bar
+    *ngIf="loading"
+    mode="indeterminate"
+    id="bottom-loading-bar"
+  ></mat-progress-bar>
+</mat-card>
diff --git a/src/app/register2/components/step-c/step-c.component.scss b/src/app/register2/components/step-c-t/step-c.component.scss
similarity index 100%
rename from src/app/register2/components/step-c/step-c.component.scss
rename to src/app/register2/components/step-c-t/step-c.component.scss
diff --git a/src/app/register2/components/step-c/step-c.component.ts b/src/app/register2/components/step-c-t/step-c.component.ts
similarity index 61%
rename from src/app/register2/components/step-c/step-c.component.ts
rename to src/app/register2/components/step-c-t/step-c.component.ts
index 4fa84a7c6b..d199a4a7c3 100644
--- a/src/app/register2/components/step-c/step-c.component.ts
+++ b/src/app/register2/components/step-c-t/step-c.component.ts
@@ -1,14 +1,18 @@
 import { Component, Input } from '@angular/core'
 
-import { BaseStepDirective } from '../BaseStep'
 import { ReactivationLocal } from '../../../types/reactivation.local'
+import { BaseStepDirective } from '../BaseStep'
 
 @Component({
-  selector: 'app-step-c',
+  selector: 'app-step-ct',
   templateUrl: './step-c.component.html',
-  styleUrls: ['./step-c.component.scss'],
+  styleUrls: [
+    './step-c.component.scss',
+    '../register2.style.scss',
+    '../register2.scss-theme.scss',
+  ],
 })
-export class StepCComponent extends BaseStepDirective {
+export class StepCTComponent extends BaseStepDirective {
   @Input() loading
   @Input() reactivation: ReactivationLocal
 
diff --git a/src/app/register2/components/step-c-t/step-c.spec.ts b/src/app/register2/components/step-c-t/step-c.spec.ts
new file mode 100644
index 0000000000..8ee3edf0c1
--- /dev/null
+++ b/src/app/register2/components/step-c-t/step-c.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { StepCTComponent } from './step-c.component'
+
+describe('StepCComponent', () => {
+  let component: StepCTComponent
+  let fixture: ComponentFixture<StepCTComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [StepCTComponent],
+    }).compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StepCTComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})
diff --git a/src/app/register2/components/step-c/step-c.component.html b/src/app/register2/components/step-d/step-d.component.html
similarity index 100%
rename from src/app/register2/components/step-c/step-c.component.html
rename to src/app/register2/components/step-d/step-d.component.html
diff --git a/src/app/register2/components/step-b-notifications/step-b-notifications.component.scss b/src/app/register2/components/step-d/step-d.component.scss
similarity index 100%
rename from src/app/register2/components/step-b-notifications/step-b-notifications.component.scss
rename to src/app/register2/components/step-d/step-d.component.scss
diff --git a/src/app/register2/components/step-c/step-c.component.spec.ts b/src/app/register2/components/step-d/step-d.component.spec.ts
similarity index 91%
rename from src/app/register2/components/step-c/step-c.component.spec.ts
rename to src/app/register2/components/step-d/step-d.component.spec.ts
index db7d3c24ff..b1ec6c6df5 100644
--- a/src/app/register2/components/step-c/step-c.component.spec.ts
+++ b/src/app/register2/components/step-d/step-d.component.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { StepCComponent } from './step-c.component'
+import { StepCComponent } from './step-d.component'
 
 describe('StepCComponent', () => {
   let component: StepCComponent
diff --git a/src/app/register2/components/step-b-notifications/step-b-notifications.component.ts b/src/app/register2/components/step-d/step-d.component.ts
similarity index 53%
rename from src/app/register2/components/step-b-notifications/step-b-notifications.component.ts
rename to src/app/register2/components/step-d/step-d.component.ts
index 768b5aab06..a24cd37c86 100644
--- a/src/app/register2/components/step-b-notifications/step-b-notifications.component.ts
+++ b/src/app/register2/components/step-d/step-d.component.ts
@@ -4,16 +4,16 @@ import { ReactivationLocal } from '../../../types/reactivation.local'
 import { BaseStepDirective } from '../BaseStep'
 
 @Component({
-  selector: 'app-step-b-notifications',
-  templateUrl: './step-b-notifications.component.html',
+  selector: 'app-step-d',
+  templateUrl: './step-d.component.html',
   styleUrls: [
-    './step-b-notifications.component.scss',
+    './step-d.component.scss',
     '../register2.style.scss',
-    '../register2.scss-theme.scss',
+    '../register2.scss-theme.scss'
   ],
 })
-export class StepBNotificationsComponent extends BaseStepDirective {
-  @Input() personalData
+export class StepDComponent extends BaseStepDirective {
+  @Input() loading
   @Input() reactivation: ReactivationLocal
 
   constructor() {
diff --git a/src/app/register2/pages/register/register.component.html b/src/app/register2/pages/register/register.component.html
index 9480b3f343..90c64f16b4 100644
--- a/src/app/register2/pages/register/register.component.html
+++ b/src/app/register2/pages/register/register.component.html
@@ -1,7 +1,7 @@
 <main id="main">
   <div class="container">
     <div class="row space-around">
-      <div class="col l6 m8 s4" [ngClass]="{ 'no-gutters': platform.columns4 }">
+      <div class="col l7 m8 s4 max-witdth" [ngClass]="{ 'no-gutters': platform.columns4 }">
 
         <!-- DESKTOP PRESENTATION -->
         <mat-horizontal-stepper
@@ -20,29 +20,42 @@
               [reactivation]="reactivation"
               #stepComponentA
             ></app-step-a>
-          </mat-step> -->
-          <mat-step [stepControl]="FormGroupStepBPassword">
+          </mat-step>
+          <mat-step [stepControl]="FormGroupStepB">
             <ng-template matStepLabel i18n="@@register.securityAndNotifications"
               >Security and notifications</ng-template
             >
             <app-step-b
               #stepComponentB
-              [(formGroup)]="FormGroupStepBPassword"
+              [(formGroup)]="FormGroupStepB"
               [personalData]="personalData"
               [reactivation]="reactivation"
             ></app-step-b>
           </mat-step>
+
+          <mat-step [stepControl]="FormGroupStepCT">
+            <ng-template matStepLabel i18n="@@register.securityAndNotifications"
+              >Security and notifications</ng-template
+            >
+            <app-step-ct
+              #stepComponentB
+              [(formGroup)]="FormGroupStepCT"
+              (submit)="register()"
+              [loading]="loading"
+              [reactivation]="reactivation"
+            ></app-step-ct>
+          </mat-step> -->
           <mat-step [stepControl]="FormGroupStepC" #lastStep>
             <ng-template matStepLabel i18n="@@register.visibilityAndTerm"
               >Visibility and terms</ng-template
             >
-            <app-step-c
+            <app-step-d
               #stepComponentC
               [(formGroup)]="FormGroupStepC"
               (submit)="register()"
               [loading]="loading"
               [reactivation]="reactivation"
-            ></app-step-c>
+            ></app-step-d>
           </mat-step>
         </mat-horizontal-stepper>
       </div>
diff --git a/src/app/register2/pages/register/register.component.scss b/src/app/register2/pages/register/register.component.scss
index e8c06d1504..44be1dfeba 100644
--- a/src/app/register2/pages/register/register.component.scss
+++ b/src/app/register2/pages/register/register.component.scss
@@ -12,4 +12,8 @@ mat-vertical-stepper,
 mat-horizontal-stepper {
   max-width: 100%;
   width: 100%;
-}
\ No newline at end of file
+}
+
+.max-witdth {
+  max-width: 580px;
+}
diff --git a/src/app/register2/pages/register/register.component.ts b/src/app/register2/pages/register/register.component.ts
index adbbd3ded2..595c6fc206 100644
--- a/src/app/register2/pages/register/register.component.ts
+++ b/src/app/register2/pages/register/register.component.ts
@@ -45,7 +45,8 @@ export class RegisterComponent implements OnInit, AfterViewInit {
   @ViewChild('stepComponentC', { read: ElementRef }) stepComponentC: ElementRef
   platform: PlatformInfo
   FormGroupStepA: UntypedFormGroup
-  FormGroupStepBPassword: UntypedFormGroup
+  FormGroupStepB: UntypedFormGroup
+  FormGroupStepCT: UntypedFormGroup
   FormGroupStepC: UntypedFormGroup
   isLinear = true
   personalData: RegisterForm
@@ -84,14 +85,14 @@ export class RegisterComponent implements OnInit, AfterViewInit {
     this.FormGroupStepA = this._formBuilder.group({
       personal: [''],
     })
-    this.FormGroupStepBPassword = this._formBuilder.group({
+    this.FormGroupStepB = this._formBuilder.group({
       password: [''],
       sendOrcidNews: [''],
     })
-    // this.FormGroupStepBNotification = this._formBuilder.group({
-    //   password: [''],
-    //   sendOrcidNews: [''],
-    // })
+    this.FormGroupStepCT = this._formBuilder.group({
+      activitiesVisibilityDefault: [''],
+    })
+
     this.FormGroupStepC = this._formBuilder.group({
       activitiesVisibilityDefault: [''],
       termsOfUse: [''],
@@ -130,13 +131,13 @@ export class RegisterComponent implements OnInit, AfterViewInit {
     this.lastStep.interacted = true
     if (
       this.FormGroupStepA.valid &&
-      this.FormGroupStepBPassword.valid &&
+      this.FormGroupStepB.valid &&
       this.FormGroupStepC.valid
     ) {
       this._register
         .backendRegisterFormValidate(
           this.FormGroupStepA,
-          this.FormGroupStepBPassword,
+          this.FormGroupStepB,
           this.FormGroupStepC
         )
         .pipe(
@@ -150,7 +151,7 @@ export class RegisterComponent implements OnInit, AfterViewInit {
             }
             return this._register.register(
               this.FormGroupStepA,
-              this.FormGroupStepBPassword,
+              this.FormGroupStepB,
               this.FormGroupStepC,
               this.reactivation,
               this.requestInfoForm,
@@ -254,7 +255,6 @@ export class RegisterComponent implements OnInit, AfterViewInit {
   }
 
   selectionChange(event: StepperSelectionEvent) {
-
     if (this.platform.columns4 || this.platform.columns8) {
       this.focusCurrentStep(event)
     }
diff --git a/src/app/register2/register.module.ts b/src/app/register2/register.module.ts
index fdc9010a76..22d137884f 100644
--- a/src/app/register2/register.module.ts
+++ b/src/app/register2/register.module.ts
@@ -8,7 +8,7 @@ import { FormTermsComponent } from './components/form-terms/form-terms.component
 import { FormVisibilityComponent } from './components/form-visibility/form-visibility.component'
 import { StepAComponent } from './components/step-a/step-a.component'
 import { StepBComponent } from './components/step-b/step-b.component'
-import { StepCComponent } from './components/step-c/step-c.component'
+import { StepDComponent } from './components/step-d/step-d.component'
 import { RegisterComponent } from './pages/register/register.component'
 import { RegisterRoutingModule } from './register-routing.module'
 // tslint:disable-next-line: max-line-length
@@ -31,15 +31,15 @@ import { WarningMessageModule } from '../cdk/warning-message/warning-message.mod
 import { BackendErrorComponent } from './components/backend-error/backend-error.component'
 import { FormAntiRobotsComponent } from './components/form-anti-robots/form-anti-robots.component'
 import { FormPersonalAdditionalEmailsComponent } from './components/form-personal-additional-emails/form-personal-additional-emails.component'
-import { StepBNotificationsComponent } from './components/step-b-notifications/step-b-notifications.component'
+import { StepCTComponent } from './components/step-c-t/step-c.component'
 import { TopBarRecordIssuesComponent } from './components/top-bar-record-issues/top-bar-record-issues.component'
 @NgModule({
   declarations: [
     RegisterComponent,
     StepAComponent,
     StepBComponent,
-    StepBNotificationsComponent,
-    StepCComponent,
+    StepCTComponent,
+    StepDComponent,
     FormPersonalComponent,
     FormPasswordComponent,
     FormNotificationsComponent,
diff --git a/src/assets/vectors/visibility-everyone2.svg b/src/assets/vectors/visibility-everyone2.svg
new file mode 100644
index 0000000000..028475fbeb
--- /dev/null
+++ b/src/assets/vectors/visibility-everyone2.svg
@@ -0,0 +1,6 @@
+<svg width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="18" cy="18.5" r="17" fill="#00A500" stroke="#00A500" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.7654 20.338C13.4199 20.1706 13.0046 20.0153 12.5237 19.9138V19.344C13.0196 18.865 13.346 18.0493 13.346 17.1236C13.346 15.6488 12.5175 14.75 11.4955 14.75C10.4734 14.75 9.6449 15.6488 9.6449 17.1236C9.6449 18.0495 9.9715 18.8653 10.4675 19.3443V19.8659C8.76602 20.1502 8 21.1778 8 21.1778V22.2463H11.2924C11.3425 22.1755 12.1273 21.0926 13.7654 20.338Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2346 20.338C22.5801 20.1706 22.9954 20.0153 23.4763 19.9138V19.344C22.9804 18.865 22.654 18.0493 22.654 17.1236C22.654 15.6488 23.4825 14.75 24.5045 14.75C25.5266 14.75 26.3551 15.6488 26.3551 17.1236C26.3551 18.0495 26.0285 18.8653 25.5325 19.3443V19.8659C27.234 20.1502 28 21.1778 28 21.1778V22.2463H24.7076C24.6575 22.1755 23.8727 21.0926 22.2346 20.338Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7799 16.1303C20.7799 17.4527 20.4086 18.6283 19.7588 19.3747V20.4059C22.3158 20.9128 23.7152 22.25 23.7152 22.25V24.5H12.2847V22.25C12.2847 22.25 13.5139 20.7665 16.2417 20.3323V19.3859C15.617 18.659 15.2598 17.5049 15.2201 16.1303C15.1517 13.7605 16.3004 12.5 18 12.5C19.6996 12.5 20.7799 13.8747 20.7799 16.1303Z" fill="white"/>
+</svg>
diff --git a/src/assets/vectors/visibility-only-me2.jpg b/src/assets/vectors/visibility-only-me2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..75dff40feed40e825da26b5fd003bdc061d974fc
GIT binary patch
literal 4385
zcmbuBdo<Mh*T=uYafy(I$mN$y7`Mj#mZ_XLjm*Sga>+!AAx&->HRY608acTZGDn)+
zjcZgcF*D6!BzK0w%rrz{l$aPZKj-;9>-Vhn{PnEow?FIi*JrQ2)@$$m-uok(5X}OL
zFxQi=fY>fE;J2Lvh^7D+K<q!Xzk~dTA;iQ)ZvZ7}Kp)T(7gGXuDT#?IiHWFyHUNl8
z{wp@{-zK(8Tte~}DQOwm-8&A=ioh;0aq(Re;*ydQ5<A{EcHRLACCR-9A;*4E_6(NN
ziQZ>%>tTts?(zCAkk=qj&oU(Dwv4Qb>V7qK{X+(ZMqn#z8(TYj2bW(@xVrsz5{C5l
z@kO2S^FMzf^kP^zCL%U2{%Qg)@mlhol+?7l_tLYnb8_?YA3ZL3TKbIiysW&UvZ1l5
z`9(|X%U9hLD(x-(ub$qa;gQj?@d@T6i_Q7Ootyu>u(<l|``VB74gSx~zq!N!@qef6
zUts@>YbOa}yCfvUC8Yl565ExqbH$Y;Bo9J<*?Y`WDmYqM$KsaszT*!|>bqogExmZ4
zkeESP6+J7K{_5Xo|3&tH1H1kIBKtSk|8PwLa^hk;#S>Qopn$M7X||Ne^TH;hd2npX
zRcF)H(I%k<{~^b++)rS_cYlUH5nRRZ*z$0XEnmErM>0{3<|lMJ=mz=8M+W8fuZQL>
zkI~(Sn~k?pTF~j7%XSPqWAju4Rn>cM*)KWy+>yBwq_SN=@w2&+Tn%fp@Gbv-i-eqD
zxN>3rR@$u&$!NC+8ZH5*y#{h*o!;$?po8pF9!9>D(45GZTXIKam7dr>=v$4*MOV&p
zd~*UZ-Zgj0#|auUJjND61aw`1&i)B)R%xjWj6`cWp?Hm5`Pm;tK$yUWuUol@mJ>kA
zFpbNeq!~2-+P5iMu}RCfsf~9WZN)E7PsR+oMM<YmYjZWWsQr-lizD%|cvo~vcK#tL
zaD|h+^f3{@c-c=Vy-PL5{wNr|yzc3nE&>AW#6Ne=($gkRIUR1(&X3-Mfhn&4Tu}-B
z9L7w!#%tW9f$b)dj0WZm%P(lR6yt!AL-t%z$4OqoQpT3Q;K*3;s?_ZyOlM}X+URU+
zz{3O*K4A4@CsC&;x1&XUp?Tz7j*9#J0RH8u%OPQ@Y_*UC*Png1%F!x&Dr-{S$6f;|
z&&`!RVvo*jaF!A;7WZ3v5pst;9JQa#74OGkp9F^`zr#r-NAodV6eb&oH6ZHTz#tZH
z4&C8gV0jT1M($+g=&R|CuiX#<5~Cs@IlV0!%kJERSKscaT_Y>vPyuaqgK_9dbHuPo
zlRUON!LliDfU$~j8~VqKf#y#6ri}A)(?)}F?^JyULLRIj$7fd^0^eOH38&r&t=MBa
zseZI?WdRDlr%CP(DR!P!Y1wVaJ|m=Osc*_pWvW*hjI@vB)lmCv9>EWzCzYrmonC9w
zwB(1V=NdKi!4uVJ@iD6JTb3pG3M@8LAtc(eg3!$w@(Gpe1l^?t*JtHAIm_at;QQ*e
znVRjic5a*M)oe<9WV{?oW!&c5v-J&??@t+WJP&27SQo2H4JS-4_2^i<f_TX%opObp
zgqgxDV4gYt5htsj7Ysgc_6Q#oqT$LU`{4>1WCh$S1r~e%4$IC~?Ra#S7ok*-W7u=3
z0P}267}Ck}&YY||yG`zlnt1?K##%exe=i+AZ8qAWDKM_XXn(ziprCgxs$Nq_^Y3Sp
z9-Hn6oLSozT<xaOpc^@TaAex{o17uB+vx@sgv(BE42-L^53UG_IM={Oe=NJz4fhWJ
z_I4$AoSS#(sRudIpY)_Ue`{q8&s&jU5$_1}|L~%8=Y^#+4l`#I$2^0^m5CSEj5v_q
z>YpKtZjwtz+(#G~BvR@&rNZpy#ch;OrgKY-|9<^`8hf0M1qt7G?z?Fw(BMOOg>R>A
zd1c9MP!ewZ#1J$babI1t|1k*{JG*?J1Kop(L7z<`Eheasr&qTf*y$1(*uo@a=<5uE
zh!hSquG#4(ui6jw#a?pt$n0zABb(7e>i7{>tKJp!_8CUVG8Yq4dZ|Zm&<{71l7>}B
zeUCen*7d#^>c}AyUZN%3Q~54t9Jn^C)_`5C*Betrw|vWvsrEIv-5RTkP`XEtb~ZMq
zhv>QzmwCKy?r1Cw&Ft?m{sQs|58lo|cbbZTkQo&rvsi;)F?&D+@bwIKL>WAzhI5?F
z&vZU0FyuG0j_l^7K0MDhzZ)dk+%y`eof33#K#&-0n<jwI>}79ZQ@=h>jYKOiOlHtt
z)Q8%X7vNuc%ukr9QlpQ^QKX>qs~Se>l+ZJ6m(M<8eV%J#p%2_4M0hg3c+rOABDWJ`
z2b1B}ESt(>BcI~9{0{<e2HuQ*WjWSu!90)OoI6+Km;I^8jgpvWd8gi|&fW~`ReL~<
zdd4IO;cxe${es2%nZ?1Jh;zmRDW|N@us(*fF-i78=DdXa9ojfz01uVvWX{%>#L+3J
zZwohdcxCBpQErrJ-GOF9$o!dzO|u#-rhH-i;V)k6<5vfID|=~&-w<gKyG!sr?SW?I
z3IV(CmDs{xXe+_uB8Lj5K}Oz$Fd4J@93-?grf=A^zi$7jaf80YezmB~QVmxr2&3K`
z(y9?EBe1TUXtP>8O@{eiePYyW`kWm1eo0p-%@hHWq5Npp%tU54Q9cQyt@cip;H<!}
zI?In@MQ$}7;R>sG<L<+FXf@xS9IB)Ut^3FLvOu-WRVH*04|$$Q_^zghT@V3sZ7yA&
ztUzZeCz|y=Ml|S(U1IOIC#U2c;v!f@Pdd51H6|vif=$YB`$wh_wQYFwf&H>0jX-yv
z4XoVDuq!m{4ttrQj&CYwegAp_e_7SayEN%%M)98F$RK}%^gf72g<GyUdxfs0Hr58>
zAXNFb)Q2Bj*yb|0QmU5P_|sQ@dlyY3kB!!@)p$AP<TO=W$sfzEW*Dof9PR2k=aF=n
z{n@9RU2o^VP&skwL<A_O_F3g%1vq|R_NcYp>zRP%qzWb+y1RhucM)?dNB?$TgFpo;
z1-@)nRM*;P?c}O;I=U%PQ~i(VXqcJJi?mI{odqQc+L0o33;f5Qs!)x`e*r4NTfgDY
z9qn_QcJx6R7(|qR2FOba(w(2CuZRHRdb2<Tu&@^BEGQNGTo=1=fUQ4uHBcu%O9Xi0
zLYY@lQJXI|iy!XH?uoI^D9sBu$J5rSjjJgo_1o3XI(`Br#QyNf%MX%R-a3BHe-tZ6
zIgBx_5#p{|`n>gW@{On~^QYaTj&q+DxqW=|16NGmqzfD9%3AP)Z|UI8ci^~AmVL~Y
zdDS;p@N*F6YsB@{{7#0w-&FVNlnm>ls_<Z$z(xIKs80Z;D2uG()CfX@M1b0XcwhZF
za62qhp|E!d_u)u|_w98v(tabCLjG$JaC;3*7J!o1t7R+yY<V+x@ThpK@SO;d`Zy)d
zf6RQG=^Jw9Q&!~9G}`;0c6b*N5J#r#F%Ul-KjWr0?Q!u}r;GfX$4}4$Pi3v0)O)Re
z{u6?^v3`=jy85N7fJkswWq#RE|D}+9eMWxTIro<m)7CMQwHj6LR#c?>-BRV<rsokR
zYVKdddqPM@fA$roS>k7QBb9&8K)Hgr$KeHqL1R`6-U(a`I<MMk>HJ!U)v7@<-_eS~
zEjoshl8eGin%vO8`(*z+Rs<Vz24_`y+>5*3>fd9v6mM!C`-36evwH_Io}WEyyChzF
zbDXH)1dUDP*>aX!wre<!88!p$WfU^O|92!gAW{pa-GD(WVZE@R&zmGlB9foAMJ=%0
z&h8mJKLT}K&Ak1Et40gb>+;NLsAiL!XfUOXD}F^HAVWPbXvyhPHWgXE7S9dJ<~Hj?
z=Q>LgGA6VR&-NLlKAyJO*ZMm73emThb+<hC)b~`wmLCp}f-bf{*VTQ-$`8513mkYe
z^oE_^G)IGFeoE@X@(s0@%C;Q%V1+boNhn79o(NEIlEPfSUOvHhKQT7CcEsU3vh{kq
z>sbrR>6Z4iQ>q(T@2)4x|K5^1x1P9iC}TM+4<(p4=4cuAT&WVzoyQ4O_F5LP(nvlI
zr*mDows2*_sB@yNy<tp+$4jeEQ%OU3pILee9$WDK2)jd)C0MbmfaS_E^US5k%-X?<
z-k;r+{0R%N*QGEB3FcEYFMB%0um^c3q#Y~N`o1%Rc1C~cTYlHhpT*Qz1ms#TBvF6k
z5I2ot%>{e%MF7|tE7UK0leB50VYyQhh_+w|f6rt_0~)EFad()(L1Yj$I}Y=oPL67Y
zy;@ZuIEAv$9zB7HRC~y9G_e_QkyQz|TGE9zp7zLle13~qh_z;$44!2-o|>|tx*D~B
zCyG20Cn2aCPqW4b%HYt8MONEj2+MpA&a>PN%z`Vj2puHXrxmk1J5kK7pys5XpMg<7
z@+y*ikLr^|qxx=$fT8n3nZhj<=FKi*gZb~ylJ2pg6}ah>KeRRRsBx>ghhO8#_kzFy
zF4gVXf7L&3+Lm&!8+6hpolR6(x$%sD`RyiKdU-iaYU}zfT#$w?<&hJq7X*PLX>-=W
zH({+`-OQV#+sU$4EO&Xh@BJqZibYvDkA)!I4>k$C9}nxtbsVm8F(Md-YS`bY&8kZI
zt6|<V*vGq&TSK7w(&ljK`0w7)c8epy_Q*2vrOf>}$8NMD9#X?Mrr%T>z=zI?fV~s$
zBz{`A&|v6N{5$c0;WBz*XeGuWN7cr5tl#GhEn4EP=H8>?PwO^|;0F{4C8*u^OWc%G
z$x`rU*)^7L#+f4=ucDC>yN)45z>&e9u6_j<{mh^;1)unWi>Sx5#%@Zt`z!<=mkwFV
z1gUbX(x?MZ97ZbjCg<+3zfNAW$(%c|-m}vHQJoj77-(fYe7jg^hMSu8NGZ^SudwFo
zOAKh8GH=KZ$1k-(5-V}U?hezzrADim%%zpRxb9ys<m%v9S%x*8(rm1Rh5g$O=%K!7
zzf(Hx&+2>(tLb}chqxu+Tpqu`a}+v*qP7n;VBEGgx>w3jT3!|TpEM#Vekj$kD)Xx0
ze%=I~l9)4@oK=-cN@IN2XaONV<|Iw<>@WC7$9Uz0f{BkrK%;^{F^0|&0aW8mnTVuj
z&`g@uwwWV?!Tfqt-sQ&i8<Ay*i0mo<b~?@Q-0=L%2UnHOGO*?Jh(*n>%lVM;?hDRJ
z6uY<X3P@<~exz5<2Md}J{BSfJ5<@3R>8)iGM$pVW`bt~UT31ciOA|{IXxhl?=$GCn
z;L|m<y(CyJY_Ko|macKcXe`D4gguh*8TRy*52hWlxV5gfBa#4N53vq(XCq14N&h-q
z`<_E?mERZQe&NCQ!DPX&?M=CElUD6!>*Mg@II?VbtPOt2oTBcVzg?;xAb)M%zqP65
zCE_!D->jDAEZ;t~HPM$2cWRDxicGn5iM>$<_e^oXT|?A3>|6L=i;e=<g53pktFa4G
zY$&0*1aYqse8wa_<pfHm`=?&yxo<EZo$WqXom|+DRka6Z;18_?iqhTny|J55oJ_#|
O3Tr_fBZ8wM=05>OxmOqf

literal 0
HcmV?d00001

diff --git a/src/assets/vectors/visibility-trusted-source2.jpg b/src/assets/vectors/visibility-trusted-source2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e4338cf99800002701ceb6ebe3006b6c571c0fe7
GIT binary patch
literal 4186
zcmbu>XH*l|wgBMJ1d$ec6O<wlrMD2;hzb%0q<2CSFhQhiU=Z#goq!625-Ae{28e-B
zf`Et;k|15WAUGrpAOSTLF(Sfs-hJ!7wcf9{-reWyUuUnq*0;}(bB^C0F9XD&w)VCF
zE^aQs)t?J+{0?vl!1W)--%b9*7F=A%uK+*+fI2{phYJYc26FKLxsIs-WdMMS?_a$E
z{~cW1JiL4-_ytZ1p88op76Wi|@$hi-^6>HT^8T#8`|}*Y3*-|&tAFu?giA2LO01;8
z?+>v8sx~csQmzwhHN%j&^pk?pGO}{=>gO~xwLnJ3CZ=FB$fe6yZ0)YvL*3jxJiWYq
zd_%8?g-6_gBjOVhZ{I;CCEv@)%*xKm%_}M{L6?@5S709FYU`fh>l+$d+uF$;&pNxh
zDg9I$ec<)r(B#zg%<SCT`2_}Z<*(JX^$#1Y?Va7dFZ*9P-wytEaRGS#J+gnn{+H|L
z5V*K`d3kvG|8{Y4-}#w5KwiGH`X|IMy6^|bN~jq8E+A?15ZlssQq|CvEfo?sAt<e8
z#8BV<oAzI_{~Ij*|0Vl3?0;Mf03jZ(pO?o21Xu%()>Cy-0@+_Fj^gG&92J~rzKEJw
zO4vMm7}7bdo}v55XiDmVueYC^>h~*CcB(uoc0z_w20z2f0{M;7%Nw(*IBtfwn6nzK
zO7=JF2m4Oo@<z`GPh0k?0&_}0c06dtX<utU`ViVj%L8vGdI{)@IJKuNnqoeBcyVMs
z<JAz@;yM4;dc_(!Xx;9lU?FU*3W9J(q5^K&f0q}GakOzGxK@F?lrgDBKmO<iA!pZa
zcWztm=i;w^UcGUoP#q;dChMpAy2#I7{NP(mYG{4H;%b+3K3V24d0TYDZ6!LVeB|=B
ze?&#hdk@b<%dCqOS<Inz*_-~cP1X!y88J1o3yynvcdc_P!l-FQK4vu|jocYY(cxiW
zjBs|Ulr`jQTdOJkF}T}EtTD*$2u7(^5vMT1(z03Q$<lsZ=7VfZ8ddc4hS#Y?JaU*O
z9Z&eYduEPow77IQ{oQF0-3@^@71k06S}HFMhI-t$O;u@^6iSep^omrFgokC5LT+1m
z{9po6v<Z^P(01RL&4ebZEJny(X+I*!P%O^hfBYd79IZl~EJ;cNt$NGFHGgt=8}C;1
z-T<#Tq^%*1`SsxQ^4E{>2JJ63*}a;Bd@}_j5B=V8Iy6JcT`jlOB{y&Hvr6YoGRo1-
zQP_^^nM<Py&#((u(|QiM4iY28Mo5ZUD<1wPraE*FTm~g}Nyt)BTK7VODJZ54$cQ1~
z@6nbOt7OOZDZ%XWO2tqwU_n+;qf?Xew@qpw?nuzv-!}RciEv5ER)Xl4&2q0w2G`Rk
zBQFp=U7PL1%FMleXU@AeEyCZF%F*=*2ZDt~DuW8=agE&&z3T}<f~_Pq1JW4+_eEZ@
z*gzH<@_-=VQ3rO%y8;`W>ddq#wdYE(U?*+5bBS+BnDlh9qe;bKuI7+<iH3~amChjp
zCj->utrfMcDMzCzuWPochAENTFUIfpsv*mKiXw_A?~m?kT+S(8?Za&p4MxIOvEe}S
z`+;d4N&OS7Paz^pf255^OzKim5qV0wvDsoCRHr7dj8T0v8R3bz)M4QV*JoHkBptM=
zR%6`2Z;*;7ApMeJdT5J?ZZTSSuejez7E4KyD_SMtWkWWDwZi2pC;h*~D@K9msPThp
zYox;oic6Hnmfl{m|6KG?<TlUeYkyb?9Ewd_oeLNxvY5M$Y$epB0|DX5cGO;bvOl=)
zP<P`2O>%N^$v|{3Hz+-=6$h$y3mA@$*7#yNG4NptgQOKwW0g|dglhVAl+eEOYtfng
zUc~YUW4(l<7C$w{h^4%29%tlcL-T$&C&fg4nE|F$DcV9h6i#{V1WNQ=qr^BVRr{1#
zn3(3ZsS5<@c{EOCDe%Zo?#B$QC4$`RoC^3fzGD&*llwdQC3pu>K{9qY1;&Yz=}!at
zEx;FMN?$NO#tkMm3$skVdQJs6)Q)YD@;PU24uHg5bc&4Ir-8rjzdL;^O55uEK(l}*
z@)E7nU&M`Sc1MDZ7Y}>GR1zB{l`kr(Dg>&~+)H9M4f})f$sQZ+8<PVzC3<pC&uoKD
zooZu|ilSYNb$R!dU#pu`<w}`xl`H3|!`fq{#ClJ>O?5C-YZ?h9d*Gey8=x8Z3%25}
z?u6Yd6VwnZ`i~kb2wb{Gcq<`Ih9zPw%zdzK*Mj~!c;Uc8Z($L>W=pr8@MJkc&Mqtr
zDHhFZ{NOqO{ZQXg6wUCtb#b7p9fyhO4MV*)V9ofmW~qP4rdXYlK|@+sj{)VHp@>x@
zX=1R!mbGErTJ*PJ+MlNkh3w>*ZAz#6Xbi)f+Cl?TP8Ouh3v?oMFE%Cb7_f8Xeil`K
zFiV{wql*qdPe1)+^wIVhaP7I!v)eMyJnul4vt^{)26-9%DSa6^efQ!-;z!ep=jnm@
zL-9AKKm+vHfv}1~Q(Zd!aZ!UJ?39F;aBjhsbALS{xM48GajxCB*7v1PN!ZEVqlD^x
z(iP3?cc#9Hh0`XQp;B-#8JC}d3vcgOQ1)gW>2z^qmTR&+d-*1etUrn>aG>L~_bS`r
z4Ry4JCBz*_I&ScfJ|oUmq7nI_O7)D{mD2aWlzue~a7g?yS`+(T_rnBZ{GPY95GOwC
z7(lkLTlRlh$Z0E#e_C1?j~a`usD--|`ehNEM{d~P2ZKGUggganUO<gWXb%e=U0^{o
z>X2WT!LriYwpN&9R*oAT;DusOXk@ph+~c`leIn~bA#g}<v~j8~$(<TnchbEM=4(%B
zS0uRLZK{N8@~tHg!yexV<n9S%40o_IFj<)mtglMIDPl<5g!GO=KC<>@nUjZ0B0loL
zpHBN7bGBj6Izo+~6KAM%x_e4yoO!0GFnewScOUF<T8Eo}Vb8`^Gdm@;`do%Nab}r9
zFzEvS$qqLG8}K4NSMOWtxhJRi3lbTbeS=Ir^w|Phh(6llJz&{MVbt)NB<DA?{w9?y
zQKP=Fz0Pbo7_xGL(da@12cJci)P4vx=<f7&X@;faLF7riuK^ZXC2*Md6mgLCqA_q2
z^7I%0pEfpsp1(QRVJAKqn`pS`G$;gmKqX!%q<|l)I==PbemQ=446qyp*FZ+W_spq1
z;gOZ0ElH);z^x6J0)Ln(&`m0*QqwsTB6$`vgK%`gI#p@L8w*@fp6I$Am@z~G|N4x}
z;cXDxI~nY6sRN&m!P!*8T~UqhB|kTuq95O&<>c8@J3q_udR48lZChh}lrJ^4(Epoy
zWfm{G_#?0{+AuvdOrhs_POHF}z{kAry#nlEROdK|8eVCBO~FD+h|<JO=(lOderfc+
zc}@l1ov5mm7M6!inAut(K215gOY>2(L*X+<)@_Vg!PuO10tf-4Cq}yF`)}V`+(RV6
zjv{(eX97<~Tj(<hHA)*M%^F!fZt?3ZQNb{y8ZjvULea_%^D{HG!gr$$tB6VJt6lRQ
ziw-}`_LkVX%6*klsBLT2SJQ;P!^r%Du_!lD`)(f@$vKD3_HF<CuiiKJ8%x77sg672
z%6`h3spDlQ<&Oa+9AV}OWsBE0Vx9!U^u}62R>S=AMeS`uk89ZKwx8b<%KDyaBV4=+
zm1L8LF<+{z_1I|xx)MmYU!Jkav$+gqxf>=D!-=&UM@AFY9d34*@Q4Q+P0vi41uY79
zWEY2kwZ((_{5OvbUs>Bb87!wtQ`nxS*+@~UlI*a)aZ81?2UA(3_YA(DledG0HfuI0
zhKoE=Dq&3%JSOWmL2(2x)~ECawWF1s9-TqM!-bCDE*UbF6h>PTu$S~`?AeGPk1o*B
zMmWBLd@RgZUDj4_J?~yohUMdWCXtF<A4pZ><Tky`v2eUyCX;&k_HB|MwPO~Nh~isN
zIBhj!@2&k9t`>93qR3vY*zrQ^>ra0^;-Hz)GRPJx8H`88PH%f30|+j!f=HcEVBczm
zlTS9<p0Tso%*U_EASFb260gWW(2cVM&t4TW;){lB;5EwP`Qn&VFGZYM|4^aw!Z;8{
zL=<+Mm&<E>+{kQ6{HvG%i_K6?zzNuh;hn_r0<`#UPjvleazW|CS|5Led^I-qG!cz{
z8t(H+qlBSaz|Zu_708iWLQ9pWRNEJYAKE`!{U&m$jM?VDVoY=G3!A?!SV9PiMPepb
zGeOSx$J{C_;gfi|83NcXqxJ<V)tbLFXxl6+I2U)XFX+QquZ9E+Az43}-h(%@?$-Az
zshtj~(^5MIT(=TFG{4Wt{zrSWP}_h>t#81!fUb<<)AW`U)$bQk4@|E_3VAN1h?0d!
zKD6`ocM!*bKcaD;Gp2iF+5KwE8}7KA(N)N|aq$&RGYGin7+~Pu+wq}GbJw{q_(RZ6
zkFgW<R)+$YZ979AeJ-ssRdpN1S;^b}wt(7LE`cw%c1vBr+v!ktze^c4BhajAVm?6$
zuKDv10xU*_BpV;q1UJt6Z!A<*HDU4ZFTYuuhxJK~5=XSZ;xH%C%!eXe3oP4TEPpXR
zSc9X(D%SpfFDhU1VOEg`2K_6oTLZ#&a_O`;Rb34sdT(>walVh>Rz4KyhCQM<P%eYU
zB*|jHBO>Q|MP;%vglsCKaV#_0Shan_1FtzI?n|KC&y(9C=+<H{uPgI+!y;jlb7W;9
zn(S`v<SlL6=OJA&y#Xb~u(yA{!;dKZ0PQ-TNtet7H5?^z2zvs{g6+E^XO~koMmZ)0
z>R<A@l+K^%d~_i_-g)2buD@+)=^D~E^)T${-ThHDOi?~cU3TiIm?2tg2c&!7d}cjF
zN?Nji86iX|xPuO<yU`WT40aICqj;7Uq^^i&I2tWPnd-{3BerPDd5ICENAza6q*dhW
z31m`O(dEns24|z9JkP}pM7EBIp~@Fy1IMeC?h1X_?nts|12Wb9`GhP$vqXr6mi$bl
z8y12{*y!4p47N#BH68YJZkCTax8V-kIJhRxVOZpIDF#@{6{^(1u2Kxg6wjV?cWtl5
zl|nsKWlo3GIS$^ypC0eBl24Ij>r&og9JwhDFG8;CFLLgA-e@AjRfBi?d2=Q8yx-}6
zf8%qJzY=RT{Z&*Rd<=kEC>=nM@Z~zW8AeKLhq*P?Eup2-quQy^)Pe}Lk7tm+z~A&U
zS{D^-Xj#MTw`tK**EY%e@pXdv-{K2Weq}b9*JB@rV6%rChN}x*%IFCO9LE%61jPg7
dLGua#F%dKSQNwR-Q4yLi{hF8VkN@L%{-5V3zh(dc

literal 0
HcmV?d00001


From 337b4c579e7061f79eb547875ee2a74f0c74ed6b Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza Fernadez <leomendoza123@gmail.com>
Date: Tue, 14 Nov 2023 15:37:38 -0600
Subject: [PATCH 04/21] register2service

---
 .../register2/register2.backend-validators.ts | 254 ++++++++++++++++++
 .../core/register2/register2.form-adapter.ts  | 136 ++++++++++
 src/app/core/register2/register2.service.ts   | 183 +++++++++++++
 .../pages/register/register.component.ts      |  13 +-
 src/app/register2/register-routing.module.ts  |   6 +-
 src/app/register2/register.module.ts          |   4 +-
 6 files changed, 584 insertions(+), 12 deletions(-)
 create mode 100644 src/app/core/register2/register2.backend-validators.ts
 create mode 100644 src/app/core/register2/register2.form-adapter.ts
 create mode 100644 src/app/core/register2/register2.service.ts

diff --git a/src/app/core/register2/register2.backend-validators.ts b/src/app/core/register2/register2.backend-validators.ts
new file mode 100644
index 0000000000..0dc62cdb35
--- /dev/null
+++ b/src/app/core/register2/register2.backend-validators.ts
@@ -0,0 +1,254 @@
+import { HttpClient } from '@angular/common/http'
+import {
+  AbstractControl,
+  AsyncValidatorFn,
+  UntypedFormGroup,
+  ValidationErrors,
+} from '@angular/forms'
+import { Observable, of } from 'rxjs'
+import { catchError, map, retry } from 'rxjs/operators'
+import { Constructor } from 'src/app/types'
+import { RegisterForm } from 'src/app/types/register.endpoint'
+import { environment } from 'src/environments/environment'
+import { ErrorHandlerService } from '../error-handler/error-handler.service'
+
+interface HasHttpClientAndErrorHandler {
+  _http: HttpClient
+  _errorHandler: ErrorHandlerService
+}
+
+interface HasFormAdapters {
+  formGroupToEmailRegisterForm(formGroup: UntypedFormGroup): RegisterForm
+  formGroupToPasswordRegisterForm(formGroup: UntypedFormGroup): RegisterForm
+  formGroupToFullRegistrationForm(
+    StepA: UntypedFormGroup,
+    StepB: UntypedFormGroup,
+    StepC: UntypedFormGroup,
+    StepD: UntypedFormGroup,
+
+  ): RegisterForm
+}
+
+export function Register2BackendValidatorMixin<
+  T extends Constructor<HasHttpClientAndErrorHandler & HasFormAdapters>
+>(base: T) {
+  return class RegisterBackendValidator extends base {
+    constructor(...args: any[]) {
+      super(...args)
+    }
+    formInputs = {
+      givenNames: {
+        validationEndpoint: 'validateGivenNames',
+      },
+      familyNames: {
+        validationEndpoint: 'validateFamilyNames',
+      },
+      email: {
+        validationEndpoint: 'validateEmail',
+      },
+      emailsAdditional: {
+        validationEndpoint: 'validateEmailsAdditional',
+      },
+      passwordConfirm: {
+        validationEndpoint: 'validatePasswordConfirm',
+      },
+      password: {
+        validationEndpoint: 'validatePassword',
+      },
+    }
+
+    validateRegisterValue(
+      controlName: string,
+      value: RegisterForm
+    ): Observable<RegisterForm> {
+      return this._http
+        .post<RegisterForm>(
+          environment.API_WEB +
+            `oauth/custom/register/${this.formInputs[controlName].validationEndpoint}.json`,
+          value
+        )
+        .pipe(
+          retry(3),
+          catchError((error) => this._errorHandler.handleError(error))
+        )
+    }
+
+    validateAdditionalEmailsReactivation(
+      value: RegisterForm
+    ): Observable<RegisterForm> {
+      return this._http
+        .post(
+          `${environment.API_WEB}reactivateAdditionalEmailsValidate.json`,
+          value
+        )
+        .pipe(
+          retry(3),
+          catchError((error) => this._errorHandler.handleError(error))
+        )
+    }
+
+    backendValueValidate(
+      controlName: 'givenNames' | 'familyNames' | 'email' | 'password'
+    ): AsyncValidatorFn {
+      return (
+        control: AbstractControl
+      ): Observable<ValidationErrors | null> => {
+        if (control.value === '') {
+          return of(null)
+        }
+        const value = {}
+        value[controlName] = { value: control.value }
+
+        return this.validateRegisterValue(controlName, value).pipe(
+          map((res) => {
+            if (res[controlName].errors && res[controlName].errors.length > 0) {
+              const error = {
+                backendError: res[controlName].errors,
+              }
+              return error
+            }
+            return null
+          })
+        )
+      }
+    }
+
+    backendAdditionalEmailsValidate(reactivate: boolean): AsyncValidatorFn {
+      return (
+        formGroup: UntypedFormGroup
+      ): Observable<ValidationErrors | null> => {
+        const value: RegisterForm = this.formGroupToEmailRegisterForm(formGroup)
+        if (!value.emailsAdditional || value.emailsAdditional.length === 0) {
+          return of(null)
+        }
+
+        if (reactivate) {
+          return this.validateAdditionalEmailsReactivation(value).pipe(
+            map((response) => {
+              // Add errors to additional emails controls
+              return this.setFormGroupEmailErrors(response, 'backendErrors')
+            })
+          )
+        }
+
+        return this.validateRegisterValue('emailsAdditional', value).pipe(
+          map((response) => {
+            // Add errors to additional emails controls
+            return this.setFormGroupEmailErrors(response, 'backendErrors')
+          })
+        )
+      }
+    }
+
+    backendPasswordValidate(): AsyncValidatorFn {
+      return (
+        formGroup: UntypedFormGroup
+      ): Observable<ValidationErrors | null> => {
+        const value: RegisterForm =
+          this.formGroupToPasswordRegisterForm(formGroup)
+        if (value.password.value === '' || value.passwordConfirm.value === '') {
+          return of(null)
+        }
+        return this.validateRegisterValue('password', value).pipe(
+          map((response) => {
+            // Add errors to additional emails controls
+            return this.setFormGroupPasswordErrors(response, 'backendErrors')
+          })
+        )
+      }
+    }
+
+    backendRegisterFormValidate(
+      StepA: UntypedFormGroup,
+      StepB: UntypedFormGroup,
+      StepC: UntypedFormGroup,
+      StepD: UntypedFormGroup,
+
+      type?: 'shibboleth'
+    ): Observable<RegisterForm> {
+      const registerForm = this.formGroupToFullRegistrationForm(
+        StepA,
+        StepB,
+        StepC,
+        StepD
+      )
+      return this._http
+        .post<RegisterForm>(`${environment.API_WEB}register.json`, registerForm)
+        .pipe(
+          retry(3),
+          catchError((error) => this._errorHandler.handleError(error))
+        )
+    }
+
+    public setFormGroupEmailErrors(
+      registerForm: RegisterForm,
+      errorGroup: string
+    ) {
+      let hasErrors = false
+      const error = {}
+      error[errorGroup] = {
+        additionalEmails: {},
+        email: [],
+      }
+
+      registerForm.emailsAdditional.forEach((responseControl) => {
+        if (responseControl.errors && responseControl.errors.length > 0) {
+          hasErrors = true
+          error[errorGroup]['additionalEmails'][responseControl.value] =
+            responseControl.errors
+        }
+      })
+
+      if (
+        registerForm.email &&
+        registerForm.email.errors &&
+        registerForm.email.errors.length > 0
+      ) {
+        hasErrors = true
+        error[errorGroup]['email'].push({
+          value: registerForm.email.value,
+          errors: registerForm.email.errors,
+        })
+      }
+
+      return hasErrors ? error : null
+    }
+
+    public setFormGroupPasswordErrors(
+      registerForm: RegisterForm,
+      errorGroup: string
+    ) {
+      let hasErrors = false
+      const error = {}
+      error[errorGroup] = {
+        password: [],
+        passwordConfirm: [],
+      }
+
+      if (
+        registerForm.password &&
+        registerForm.password.errors &&
+        registerForm.password.errors.length > 0
+      ) {
+        hasErrors = true
+        error[errorGroup]['password'].push({
+          value: registerForm.email.value,
+          errors: registerForm.email.errors,
+        })
+      }
+      if (
+        registerForm.passwordConfirm &&
+        registerForm.passwordConfirm.errors &&
+        registerForm.passwordConfirm.errors.length > 0
+      ) {
+        hasErrors = true
+        error[errorGroup]['passwordConfirm'].push({
+          value: registerForm.passwordConfirm.value,
+          errors: registerForm.passwordConfirm.errors,
+        })
+      }
+
+      return hasErrors ? error : null
+    }
+  }
+}
diff --git a/src/app/core/register2/register2.form-adapter.ts b/src/app/core/register2/register2.form-adapter.ts
new file mode 100644
index 0000000000..2e8d82b4a1
--- /dev/null
+++ b/src/app/core/register2/register2.form-adapter.ts
@@ -0,0 +1,136 @@
+import { UntypedFormGroup } from '@angular/forms'
+import { Constructor } from 'src/app/types'
+import { Value, Visibility } from 'src/app/types/common.endpoint'
+import { RegisterForm } from 'src/app/types/register.endpoint'
+
+export function Register2FormAdapterMixin<T extends Constructor<any>>(base: T) {
+  return class RegisterFormAdapter extends base {
+    formGroupToEmailRegisterForm(formGroup: UntypedFormGroup): RegisterForm {
+      let additionalEmailsValue: Value[]
+      if (formGroup.controls['additionalEmails']) {
+        const additionalEmailsControls = (
+          formGroup.controls['additionalEmails'] as UntypedFormGroup
+        ).controls
+        additionalEmailsValue = Object.keys(additionalEmailsControls)
+          .filter((name) => additionalEmailsControls[name].value !== '')
+          .map((name) => {
+            if (additionalEmailsControls[name].value) {
+              return { value: additionalEmailsControls[name].value }
+            }
+          })
+      }
+      let emailValue
+      if (formGroup.controls['email']) {
+        emailValue = formGroup.controls['email'].value
+      }
+
+      const value: RegisterForm = {}
+
+      if (emailValue) {
+        value['email'] = { value: emailValue }
+      }
+      if (additionalEmailsValue) {
+        value['emailsAdditional'] = additionalEmailsValue
+      }
+      return value
+    }
+
+    formGroupToNamesRegisterForm(formGroup: UntypedFormGroup): RegisterForm {
+      return {
+        givenNames: { value: formGroup.controls['givenNames'].value },
+        familyNames: { value: formGroup.controls['familyNames'].value },
+      }
+    }
+
+    formGroupToActivitiesVisibilityForm(
+      formGroup: UntypedFormGroup
+    ): RegisterForm {
+      let activitiesVisibilityDefault: Visibility
+      if (
+        formGroup &&
+        formGroup.controls &&
+        formGroup.controls['activitiesVisibilityDefault']
+      ) {
+        activitiesVisibilityDefault = {
+          visibility: formGroup.controls['activitiesVisibilityDefault'].value,
+        }
+      }
+      return { activitiesVisibilityDefault }
+    }
+
+    formGroupToPasswordRegisterForm(formGroup: UntypedFormGroup): RegisterForm {
+      let password: Value
+      if (formGroup && formGroup.controls && formGroup.controls['password']) {
+        password = { value: formGroup.controls['password'].value }
+      }
+      let passwordConfirm: Value
+      if (
+        formGroup &&
+        formGroup.controls &&
+        formGroup.controls['passwordConfirm']
+      ) {
+        passwordConfirm = { value: formGroup.controls['passwordConfirm'].value }
+      }
+      return { password, passwordConfirm }
+    }
+
+    formGroupTermsOfUseAndDataProcessedRegisterForm(
+      formGroup: UntypedFormGroup
+    ): RegisterForm {
+      let termsOfUse: Value
+      let dataProcessed: Value
+      if (formGroup && formGroup.controls) {
+        if (formGroup.controls['termsOfUse']) {
+          termsOfUse = { value: formGroup.controls['termsOfUse'].value }
+        }
+        if (formGroup.controls['dataProcessed']) {
+          dataProcessed = { value: formGroup.controls['dataProcessed'].value }
+        }
+      }
+      return { termsOfUse, dataProcessed }
+    }
+
+    formGroupToSendOrcidNewsForm(formGroup: UntypedFormGroup) {
+      let sendOrcidNews: Value
+      if (
+        formGroup &&
+        formGroup.controls &&
+        formGroup.controls['sendOrcidNews']
+      ) {
+        sendOrcidNews = { value: formGroup.controls['sendOrcidNews'].value }
+      }
+      return { sendOrcidNews }
+    }
+
+    formGroupToRecaptchaForm(
+      formGroup: UntypedFormGroup,
+      widgetId: number
+    ): RegisterForm {
+      const value: RegisterForm = {}
+      value.grecaptchaWidgetId = {
+        value: widgetId != null ? widgetId.toString() : null,
+      }
+      if (formGroup && formGroup.controls && formGroup.controls['captcha']) {
+        value.grecaptcha = { value: formGroup.controls['captcha'].value }
+      }
+      return value
+    }
+
+    formGroupToFullRegistrationForm(
+      StepA: UntypedFormGroup,
+      StepB: UntypedFormGroup,
+      StepC: UntypedFormGroup,
+      StepD: UntypedFormGroup
+
+    ): RegisterForm {
+      return {
+        ...StepA.value.personal,
+        ...StepB.value.password,
+        ...StepB.value.sendOrcidNews,
+        ...StepD.value.activitiesVisibilityDefault,
+        ...StepD.value.termsOfUse,
+        ...StepD.value.captcha,
+      }
+    }
+  }
+}
diff --git a/src/app/core/register2/register2.service.ts b/src/app/core/register2/register2.service.ts
new file mode 100644
index 0000000000..00c7d05e2c
--- /dev/null
+++ b/src/app/core/register2/register2.service.ts
@@ -0,0 +1,183 @@
+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 { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
+import { RequestInfoForm } from 'src/app/types'
+import {
+  DuplicatedName,
+  RegisterConfirmResponse,
+  RegisterForm,
+} from 'src/app/types/register.endpoint'
+import { environment } from 'src/environments/environment'
+
+import { ERROR_REPORT } from 'src/app/errors'
+import { objectToUrlParameters } from '../../constants'
+import { ReactivationLocal } from '../../types/reactivation.local'
+import { ErrorHandlerService } from '../error-handler/error-handler.service'
+import { UserService } from '../user/user.service'
+import { Register2BackendValidatorMixin } from './register2.backend-validators'
+import { Register2FormAdapterMixin } from './register2.form-adapter'
+
+// Mixing boiler plate
+
+class Register2ServiceBase {
+  constructor(
+    public _http: HttpClient,
+    public _errorHandler: ErrorHandlerService
+  ) {}
+}
+const _RegisterServiceMixingBase = Register2BackendValidatorMixin(
+  Register2FormAdapterMixin(Register2ServiceBase)
+)
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Register2Service extends _RegisterServiceMixingBase {
+  backendRegistrationForm: RegisterForm
+
+  constructor(
+    _http: HttpClient,
+    _errorHandler: ErrorHandlerService,
+    private _userService: UserService,
+    private _platform: PlatformInfoService
+  ) {
+    super(_http, _errorHandler)
+  }
+
+  public checkDuplicatedResearcher(names: {
+    familyNames: string
+    givenNames: string
+  }) {
+    return this._http
+      .get<DuplicatedName[]>(environment.API_WEB + `dupicateResearcher.json`, {
+        params: names,
+        withCredentials: true,
+      })
+      .pipe(
+        retry(3),
+        catchError((error) => this._errorHandler.handleError(error))
+      )
+  }
+
+  getRegisterForm(): Observable<RegisterForm> {
+    return this._http
+      .get<RegisterForm>(`${environment.API_WEB}register.json`, {
+        withCredentials: true,
+      })
+      .pipe(
+        retry(3),
+        catchError((error) => this._errorHandler.handleError(error))
+      )
+      .pipe(map((form) => (this.backendRegistrationForm = form)))
+  }
+
+  register(
+    StepA: UntypedFormGroup,
+    StepB: UntypedFormGroup,
+    StepC: UntypedFormGroup,
+    StepD: UntypedFormGroup,
+    reactivation: ReactivationLocal,
+    requestInfoForm?: RequestInfoForm,
+    updateUserService = true
+  ): Observable<RegisterConfirmResponse> {
+    this.backendRegistrationForm.valNumClient =
+      this.backendRegistrationForm.valNumServer / 2
+    const registerForm = this.formGroupToFullRegistrationForm(
+      StepA,
+      StepB,
+      StepC,
+      StepD
+    )
+    this.addOauthContext(registerForm, requestInfoForm)
+    return this._platform.get().pipe(
+      first(),
+      switchMap((platform) => {
+        let url = `${environment.API_WEB}`
+        if (
+          platform.institutional ||
+          platform.queryParameters.linkType === 'shibboleth'
+        ) {
+          url += `shibboleth/`
+        }
+        if (reactivation.isReactivation) {
+          url += `reactivationConfirm.json?${objectToUrlParameters(
+            platform.queryParameters
+          )}`
+          registerForm.resetParams = reactivation.reactivationCode
+        } else {
+          url += `registerConfirm.json?${objectToUrlParameters(
+            platform.queryParameters
+          )}`
+        }
+
+        const registerFormWithTypeContext = this.addCreationTypeContext(
+          platform,
+          registerForm
+        )
+
+        return this._http
+          .post<RegisterConfirmResponse>(
+            url,
+            Object.assign(
+              this.backendRegistrationForm,
+              registerFormWithTypeContext
+            )
+          )
+          .pipe(
+            retry(3),
+            catchError((error) =>
+              this._errorHandler.handleError(error, ERROR_REPORT.REGISTER)
+            ),
+            switchMap((value) => {
+              return this._userService.refreshUserSession(true, true).pipe(
+                first(),
+                map((userStatus) => {
+                  if (!userStatus.loggedIn && !value.errors) {
+                    // sanity check the user should be logged
+                    // sanity check the user should be logged
+                    this._errorHandler.handleError(
+                      new Error('registerSanityIssue'),
+                      ERROR_REPORT.REGISTER
+                    )
+                  }
+                  return value
+                })
+              )
+            })
+          )
+      })
+    )
+  }
+
+  addOauthContext(
+    registerForm: RegisterForm,
+    requestInfoForm?: RequestInfoForm
+  ): void {
+    if (requestInfoForm) {
+      registerForm.referredBy = { value: requestInfoForm.clientId }
+    }
+  }
+  addCreationTypeContext(
+    platform: PlatformInfo,
+    registerForm: RegisterForm
+  ): RegisterForm {
+    /// TODO @leomendoza123 depend only on the user session thirty party login data
+    /// avoid taking data from the the parameters.
+    if (
+      platform.social ||
+      platform.queryParameters.providerId === 'facebook' ||
+      platform.queryParameters.providerId === 'google'
+    ) {
+      registerForm.linkType = 'social'
+      return registerForm
+    } else if (platform.institutional || platform.queryParameters.providerId) {
+      registerForm.linkType = 'shibboleth'
+      return registerForm
+    } else {
+      return registerForm
+    }
+  }
+}
diff --git a/src/app/register/pages/register/register.component.ts b/src/app/register/pages/register/register.component.ts
index b64834de10..62aa6abb2f 100644
--- a/src/app/register/pages/register/register.component.ts
+++ b/src/app/register/pages/register/register.component.ts
@@ -12,27 +12,26 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
 import { MatStep } from '@angular/material/stepper'
 import { Router } from '@angular/router'
-import { combineLatest, forkJoin, Observable } from 'rxjs'
+import { Observable, combineLatest, forkJoin } from 'rxjs'
 import { catchError, first, map, switchMap } from 'rxjs/operators'
 import { IsThisYouComponent } from 'src/app/cdk/is-this-you'
 import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { isRedirectToTheAuthorizationPage } from 'src/app/constants'
 import { UserService } from 'src/app/core'
+import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
 import { RegisterService } from 'src/app/core/register/register.service'
-import { RequestInfoForm } from 'src/app/types'
+import { ERROR_REPORT } from 'src/app/errors'
+import { RequestInfoForm, SearchParameters, SearchResults } from 'src/app/types'
 import {
   RegisterConfirmResponse,
   RegisterForm,
 } from 'src/app/types/register.endpoint'
-import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
-import { ERROR_REPORT } from 'src/app/errors'
 import { UserSession } from 'src/app/types/session.local'
 import { ThirdPartyAuthData } from 'src/app/types/sign-in-data.endpoint'
-import { ReactivationLocal } from '../../../types/reactivation.local'
-import { SearchService } from '../../../core/search/search.service'
-import { SearchParameters, SearchResults } from 'src/app/types'
 import { GoogleTagManagerService } from '../../../core/google-tag-manager/google-tag-manager.service'
+import { SearchService } from '../../../core/search/search.service'
+import { ReactivationLocal } from '../../../types/reactivation.local'
 
 @Component({
   selector: 'app-register',
diff --git a/src/app/register2/register-routing.module.ts b/src/app/register2/register-routing.module.ts
index 9f62a335f0..7dbd8286d7 100644
--- a/src/app/register2/register-routing.module.ts
+++ b/src/app/register2/register-routing.module.ts
@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core'
-import { Routes, RouterModule } from '@angular/router'
-import { RegisterComponent } from './pages/register/register.component'
+import { RouterModule, Routes } from '@angular/router'
+import { Register2Component } from './pages/register/register2.component'
 
 const routes: Routes = [
   {
     path: '',
-    component: RegisterComponent,
+    component: Register2Component,
   },
 ]
 
diff --git a/src/app/register2/register.module.ts b/src/app/register2/register.module.ts
index 22d137884f..465e046e6a 100644
--- a/src/app/register2/register.module.ts
+++ b/src/app/register2/register.module.ts
@@ -9,7 +9,6 @@ import { FormVisibilityComponent } from './components/form-visibility/form-visib
 import { StepAComponent } from './components/step-a/step-a.component'
 import { StepBComponent } from './components/step-b/step-b.component'
 import { StepDComponent } from './components/step-d/step-d.component'
-import { RegisterComponent } from './pages/register/register.component'
 import { RegisterRoutingModule } from './register-routing.module'
 // tslint:disable-next-line: max-line-length
 import { MatIconModule } from '@angular/material/icon'
@@ -33,9 +32,9 @@ import { FormAntiRobotsComponent } from './components/form-anti-robots/form-anti
 import { FormPersonalAdditionalEmailsComponent } from './components/form-personal-additional-emails/form-personal-additional-emails.component'
 import { StepCTComponent } from './components/step-c-t/step-c.component'
 import { TopBarRecordIssuesComponent } from './components/top-bar-record-issues/top-bar-record-issues.component'
+import { Register2Component } from './pages/register/register2.component'
 @NgModule({
   declarations: [
-    RegisterComponent,
     StepAComponent,
     StepBComponent,
     StepCTComponent,
@@ -49,6 +48,7 @@ import { TopBarRecordIssuesComponent } from './components/top-bar-record-issues/
     FormAntiRobotsComponent,
     BackendErrorComponent,
     TopBarRecordIssuesComponent,
+    Register2Component
   ],
   imports: [
     CommonModule,

From a5ea8b3dd090abd4ae613fbabbaa821982e9b53b Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza Fernadez <leomendoza123@gmail.com>
Date: Tue, 14 Nov 2023 15:38:00 -0600
Subject: [PATCH 05/21] register2service

---
 .../pages/register/register.component.html    |  64 ----
 .../pages/register/register.component.scss    |  19 --
 .../pages/register/register.component.spec.ts |  54 ---
 .../pages/register/register.component.ts      | 318 ------------------
 4 files changed, 455 deletions(-)
 delete mode 100644 src/app/register2/pages/register/register.component.html
 delete mode 100644 src/app/register2/pages/register/register.component.scss
 delete mode 100644 src/app/register2/pages/register/register.component.spec.ts
 delete mode 100644 src/app/register2/pages/register/register.component.ts

diff --git a/src/app/register2/pages/register/register.component.html b/src/app/register2/pages/register/register.component.html
deleted file mode 100644
index 90c64f16b4..0000000000
--- a/src/app/register2/pages/register/register.component.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<main id="main">
-  <div class="container">
-    <div class="row space-around">
-      <div class="col l7 m8 s4 max-witdth" [ngClass]="{ 'no-gutters': platform.columns4 }">
-
-        <!-- DESKTOP PRESENTATION -->
-        <mat-horizontal-stepper
-          [linear]="isLinear"
-          #stepper
-          labelPosition="bottom"
-          class="orcid-stepper-wizard"
-          (selectionChange)="selectionChange($event)"
-        >
-          <!-- <mat-step [stepControl]="FormGroupStepA">
-            <ng-template matStepLabel i18n="@@register.personalData"
-              >Personal data</ng-template
-            >
-            <app-step-a
-              [(formGroup)]="FormGroupStepA"
-              [reactivation]="reactivation"
-              #stepComponentA
-            ></app-step-a>
-          </mat-step>
-          <mat-step [stepControl]="FormGroupStepB">
-            <ng-template matStepLabel i18n="@@register.securityAndNotifications"
-              >Security and notifications</ng-template
-            >
-            <app-step-b
-              #stepComponentB
-              [(formGroup)]="FormGroupStepB"
-              [personalData]="personalData"
-              [reactivation]="reactivation"
-            ></app-step-b>
-          </mat-step>
-
-          <mat-step [stepControl]="FormGroupStepCT">
-            <ng-template matStepLabel i18n="@@register.securityAndNotifications"
-              >Security and notifications</ng-template
-            >
-            <app-step-ct
-              #stepComponentB
-              [(formGroup)]="FormGroupStepCT"
-              (submit)="register()"
-              [loading]="loading"
-              [reactivation]="reactivation"
-            ></app-step-ct>
-          </mat-step> -->
-          <mat-step [stepControl]="FormGroupStepC" #lastStep>
-            <ng-template matStepLabel i18n="@@register.visibilityAndTerm"
-              >Visibility and terms</ng-template
-            >
-            <app-step-d
-              #stepComponentC
-              [(formGroup)]="FormGroupStepC"
-              (submit)="register()"
-              [loading]="loading"
-              [reactivation]="reactivation"
-            ></app-step-d>
-          </mat-step>
-        </mat-horizontal-stepper>
-      </div>
-    </div>
-  </div>
-</main>
diff --git a/src/app/register2/pages/register/register.component.scss b/src/app/register2/pages/register/register.component.scss
deleted file mode 100644
index 44be1dfeba..0000000000
--- a/src/app/register2/pages/register/register.component.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-:host {
-  width: 100%;
-
-  ::ng-deep {
-    .mat-horizontal-stepper-header-container {
-      display: none;
-    }
-  }
-}
-
-mat-vertical-stepper,
-mat-horizontal-stepper {
-  max-width: 100%;
-  width: 100%;
-}
-
-.max-witdth {
-  max-width: 580px;
-}
diff --git a/src/app/register2/pages/register/register.component.spec.ts b/src/app/register2/pages/register/register.component.spec.ts
deleted file mode 100644
index 1967801d07..0000000000
--- a/src/app/register2/pages/register/register.component.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-
-import { RegisterComponent } from './register.component'
-import { PlatformInfoService } from '../../../cdk/platform-info'
-import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
-import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
-import { Overlay } from '@angular/cdk/overlay'
-import { RouterTestingModule } from '@angular/router/testing'
-import { HttpClientTestingModule } from '@angular/common/http/testing'
-import { WINDOW_PROVIDERS } from '../../../cdk/window'
-import { UntypedFormBuilder } from '@angular/forms'
-import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogModule as MatDialogModule,
-} from '@angular/material/legacy-dialog'
-import { RegisterService } from '../../../core/register/register.service'
-import { UserService } from '../../../core'
-import { SearchService } from '../../../core/search/search.service'
-
-describe('RegisterComponent', () => {
-  let component: RegisterComponent
-  let fixture: ComponentFixture<RegisterComponent>
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, MatDialogModule, RouterTestingModule],
-      declarations: [RegisterComponent],
-      providers: [
-        WINDOW_PROVIDERS,
-        UntypedFormBuilder,
-        RegisterService,
-        SearchService,
-        UserService,
-        PlatformInfoService,
-        ErrorHandlerService,
-        SnackbarService,
-        MatSnackBar,
-        MatDialog,
-        Overlay,
-      ],
-    }).compileComponents()
-  })
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(RegisterComponent)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-  })
-
-  it('should create', () => {
-    expect(component).toBeTruthy()
-  })
-})
diff --git a/src/app/register2/pages/register/register.component.ts b/src/app/register2/pages/register/register.component.ts
deleted file mode 100644
index 595c6fc206..0000000000
--- a/src/app/register2/pages/register/register.component.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-import { StepperSelectionEvent } from '@angular/cdk/stepper'
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Inject,
-  OnInit,
-  ViewChild,
-} from '@angular/core'
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
-import { MatStep } from '@angular/material/stepper'
-import { Router } from '@angular/router'
-import { Observable, combineLatest, forkJoin } from 'rxjs'
-import { catchError, first, map, switchMap } from 'rxjs/operators'
-import { IsThisYouComponent } from 'src/app/cdk/is-this-you'
-import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
-import { WINDOW } from 'src/app/cdk/window'
-import { isRedirectToTheAuthorizationPage } from 'src/app/constants'
-import { UserService } from 'src/app/core'
-import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
-import { RegisterService } from 'src/app/core/register/register.service'
-import { ERROR_REPORT } from 'src/app/errors'
-import { RequestInfoForm, SearchResults } from 'src/app/types'
-import {
-  RegisterConfirmResponse,
-  RegisterForm,
-} from 'src/app/types/register.endpoint'
-import { UserSession } from 'src/app/types/session.local'
-import { ThirdPartyAuthData } from 'src/app/types/sign-in-data.endpoint'
-import { GoogleTagManagerService } from '../../../core/google-tag-manager/google-tag-manager.service'
-import { SearchService } from '../../../core/search/search.service'
-import { ReactivationLocal } from '../../../types/reactivation.local'
-
-@Component({
-  selector: 'app-register',
-  templateUrl: './register.component.html',
-  styleUrls: ['./register.component.scss'],
-})
-export class RegisterComponent implements OnInit, AfterViewInit {
-  @ViewChild('lastStep') lastStep: MatStep
-  @ViewChild('stepComponentA', { read: ElementRef }) stepComponentA: ElementRef
-  @ViewChild('stepComponentB', { read: ElementRef }) stepComponentB: ElementRef
-  @ViewChild('stepComponentC', { read: ElementRef }) stepComponentC: ElementRef
-  platform: PlatformInfo
-  FormGroupStepA: UntypedFormGroup
-  FormGroupStepB: UntypedFormGroup
-  FormGroupStepCT: UntypedFormGroup
-  FormGroupStepC: UntypedFormGroup
-  isLinear = true
-  personalData: RegisterForm
-  backendForm: RegisterForm
-  loading = false
-  requestInfoForm: RequestInfoForm | null
-  thirdPartyAuthData: ThirdPartyAuthData
-  reactivation = {
-    isReactivation: false,
-    reactivationCode: '',
-  } as ReactivationLocal
-
-  constructor(
-    private _cdref: ChangeDetectorRef,
-    private _platformInfo: PlatformInfoService,
-    private _formBuilder: UntypedFormBuilder,
-    private _register: RegisterService,
-    private _dialog: MatDialog,
-    @Inject(WINDOW) private window: Window,
-    private _googleTagManagerService: GoogleTagManagerService,
-    private _user: UserService,
-    private _router: Router,
-    private _errorHandler: ErrorHandlerService,
-    private _userInfo: UserService,
-    private _searchService: SearchService
-  ) {
-    _platformInfo.get().subscribe((platform) => {
-      this.platform = platform
-      this.reactivation.isReactivation = this.platform.reactivation
-      this.reactivation.reactivationCode = this.platform.reactivationCode
-    })
-  }
-  ngOnInit() {
-    this._register.getRegisterForm().subscribe()
-
-    this.FormGroupStepA = this._formBuilder.group({
-      personal: [''],
-    })
-    this.FormGroupStepB = this._formBuilder.group({
-      password: [''],
-      sendOrcidNews: [''],
-    })
-    this.FormGroupStepCT = this._formBuilder.group({
-      activitiesVisibilityDefault: [''],
-    })
-
-    this.FormGroupStepC = this._formBuilder.group({
-      activitiesVisibilityDefault: [''],
-      termsOfUse: [''],
-      captcha: [''],
-    })
-
-    combineLatest([this._userInfo.getUserSession(), this._platformInfo.get()])
-      .pipe(
-        first(),
-        map(([session, platform]) => {
-          session = session as UserSession
-          platform = platform as PlatformInfo
-
-          // TODO @leomendoza123 move the handle of social/institutional sessions to the user service
-
-          this.thirdPartyAuthData = session.thirdPartyAuthData
-          this.requestInfoForm = session.oauthSession
-
-          if (this.thirdPartyAuthData || this.requestInfoForm) {
-            this.FormGroupStepA = this.prefillRegisterForm(
-              this.requestInfoForm,
-              this.thirdPartyAuthData
-            )
-          }
-        })
-      )
-      .subscribe()
-  }
-
-  ngAfterViewInit(): void {
-    this._cdref.detectChanges()
-  }
-
-  register() {
-    this.loading = true
-    this.lastStep.interacted = true
-    if (
-      this.FormGroupStepA.valid &&
-      this.FormGroupStepB.valid &&
-      this.FormGroupStepC.valid
-    ) {
-      this._register
-        .backendRegisterFormValidate(
-          this.FormGroupStepA,
-          this.FormGroupStepB,
-          this.FormGroupStepC
-        )
-        .pipe(
-          switchMap((validator: RegisterForm) => {
-            if (validator.errors.length > 0) {
-              // At this point any backend error is unexpected
-              this._errorHandler.handleError(
-                new Error('registerUnexpectedValidateFail'),
-                ERROR_REPORT.REGISTER
-              )
-            }
-            return this._register.register(
-              this.FormGroupStepA,
-              this.FormGroupStepB,
-              this.FormGroupStepC,
-              this.reactivation,
-              this.requestInfoForm,
-              true
-            )
-          })
-        )
-        .subscribe((response) => {
-          this.loading = false
-          if (response.url) {
-            const analyticsReports: Observable<void>[] = []
-
-            analyticsReports.push(
-              this._googleTagManagerService.reportEvent(
-                'New-Registration',
-                this.requestInfoForm || 'Website'
-              )
-            )
-            forkJoin(analyticsReports)
-              .pipe(
-                catchError((err) =>
-                  this._errorHandler.handleError(
-                    err,
-                    ERROR_REPORT.STANDARD_NO_VERBOSE_NO_GA
-                  )
-                )
-              )
-              .subscribe(
-                () => this.afterRegisterRedirectionHandler(response),
-                () => this.afterRegisterRedirectionHandler(response)
-              )
-          } else {
-            this._errorHandler.handleError(
-              new Error('registerUnexpectedConfirmation'),
-              ERROR_REPORT.REGISTER
-            )
-          }
-        })
-    } else {
-      this.loading = false
-    }
-  }
-
-  afterRegisterRedirectionHandler(response: RegisterConfirmResponse) {
-    if (isRedirectToTheAuthorizationPage(response)) {
-      this.window.location.href = response.url
-    } else {
-      if (
-        response.url.indexOf('orcid.org/my-orcid') > 0 &&
-        response.url.indexOf('justRegistered') > 0
-      ) {
-        this.window.scrollTo(0, 0)
-        this._router
-          .navigate(['/my-orcid'], {
-            queryParams: { justRegistered: true },
-          })
-          .then(() => {
-            this.window.scrollTo(0, 0)
-          })
-      } else {
-        this.window.location.href = response.url
-      }
-    }
-  }
-
-  openDialog(duplicateRecordsSearchResults: SearchResults): void {
-    const duplicateRecords = duplicateRecordsSearchResults['expanded-result']
-    const dialogParams = {
-      width: `1078px`,
-      height: `600px`,
-      maxWidth: `90vw`,
-
-      data: {
-        duplicateRecords,
-        titleLabel: $localize`:@@register.titleLabel:Could this be you?`,
-        // tslint:disable-next-line: max-line-length
-        bodyLabel: $localize`:@@register.bodyLabel:We found some accounts with your name, which means you may have already created an ORCID iD using a different email address. Before creating an account, please confirm that none of these records belong to you. Not sure if any of these are you?`,
-        contactLabel: $localize`:@@register.contactLabel:Contact us.`,
-        firstNameLabel: $localize`:@@register.firstNameLabel:First Name`,
-        lastNameLabel: $localize`:@@register.lastNameLabel:Last Name`,
-        affiliationsLabel: $localize`:@@register.affiliationsLabel:Affiliations`,
-        dateCreatedLabel: $localize`:@@register.dateCreatedLabel:Date Created`,
-        viewRecordLabel: $localize`:@@register.viewRecordLabel:View Record`,
-        signinLabel: $localize`:@@register.signinLabel:I ALREADY HAVE AN ID, GO BACK TO SIGN IN`,
-        continueLabel: $localize`:@@register.continueLabel:NONE OF THESE ARE ME, CONTINUE WITH REGISTRATION`,
-      },
-    }
-
-    if (this.platform.tabletOrHandset) {
-      dialogParams['maxWidth'] = '95vw'
-      dialogParams['maxHeight'] = '95vh'
-    }
-
-    const dialogRef = this._dialog.open(IsThisYouComponent, dialogParams)
-
-    dialogRef.afterClosed().subscribe((confirmRegistration) => {
-      if (!confirmRegistration) {
-        this._router.navigate(['signin'])
-      }
-    })
-  }
-
-  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
-  focusCurrentStep(event: StepperSelectionEvent) {
-    let nextStep: ElementRef
-    if (event.selectedIndex === 0) {
-      nextStep = this.stepComponentA
-    } else if (event.selectedIndex === 1) {
-      nextStep = this.stepComponentB
-    } else if (event.selectedIndex === 2) {
-      nextStep = this.stepComponentC
-    }
-    // On mobile scroll the current step component into view
-    if (this.platform.columns4 || this.platform.columns8) {
-      setTimeout(() => {
-        const nativeElementNextStep = nextStep.nativeElement as HTMLElement
-        nativeElementNextStep.scrollIntoView()
-      }, 200)
-    }
-  }
-
-  /**
-   * Fills the register form.
-   * Use the data from the Oauth session send by the Orcid integrator
-   * or
-   * Use data coming from a third party institution/social entity
-   * or
-   * Use empty values
-   */
-  private prefillRegisterForm(
-    oauthData: RequestInfoForm,
-    thirdPartyOauthData: ThirdPartyAuthData
-  ) {
-    return this._formBuilder.group({
-      personal: [
-        {
-          givenNames:
-            oauthData?.userGivenNames ||
-            thirdPartyOauthData?.signinData?.firstName ||
-            '',
-          familyNames:
-            oauthData?.userFamilyNames ||
-            thirdPartyOauthData?.signinData?.lastName ||
-            '',
-          emails: {
-            email:
-              oauthData?.userEmail ||
-              thirdPartyOauthData?.signinData?.email ||
-              '',
-            confirmEmail: '',
-            additionalEmails: { '0': '' },
-          },
-        },
-      ],
-    })
-  }
-}

From 5ce0da812af194e95ebbeb0d478d990d10569850 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza Fernadez <leomendoza123@gmail.com>
Date: Tue, 14 Nov 2023 15:41:05 -0600
Subject: [PATCH 06/21] terms of use and captcha step part1

---
 .../form-anti-robots.component.spec.ts        | 20 +++---
 .../form-anti-robots.component.ts             |  8 +--
 .../form-notifications.component.html         | 48 +++++----------
 .../form-notifications.component.spec.ts      | 15 +++--
 .../form-notifications.component.ts           | 14 +++--
 .../form-password.component.spec.ts           | 18 +++---
 .../form-password/form-password.component.ts  |  4 +-
 .../form-personal.component.spec.ts           | 24 +++-----
 .../form-personal/form-personal.component.ts  |  4 +-
 .../form-terms/form-terms.component.html      |  2 +-
 .../form-terms/form-terms.component.spec.ts   | 16 ++---
 .../form-terms/form-terms.component.ts        | 12 ++--
 .../form-visibility.component.spec.ts         | 16 ++---
 .../form-visibility.component.ts              |  4 +-
 .../components/step-b/step-b.component.html   | 38 +++++++-----
 .../components/step-c-t/step-c.component.html |  3 +-
 .../components/step-d/step-d.component.html   | 35 ++++++-----
 .../pages/register/register2.component.html   | 56 ++++-------------
 .../pages/register/register2.component.ts     | 61 +++++++------------
 19 files changed, 176 insertions(+), 222 deletions(-)

diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.spec.ts b/src/app/register2/components/form-anti-robots/form-anti-robots.component.spec.ts
index eb5403a67e..ee7286cf9d 100644
--- a/src/app/register2/components/form-anti-robots/form-anti-robots.component.spec.ts
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { FormAntiRobotsComponent } from './form-anti-robots.component'
-import { WINDOW_PROVIDERS } from '../../../cdk/window'
-import { RegisterService } from '../../../core/register/register.service'
-import { PlatformInfoService } from '../../../cdk/platform-info'
-import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
-import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
 import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import { RouterTestingModule } from '@angular/router/testing'
 import { ErrorStateMatcher } from '@angular/material/core'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { RouterTestingModule } from '@angular/router/testing'
+import { PlatformInfoService } from '../../../cdk/platform-info'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { Register2Service } from '../../../core/register2/register2.service'
+import { FormAntiRobotsComponent } from './form-anti-robots.component'
 
 describe('FormAntiRobotsComponent', () => {
   let component: FormAntiRobotsComponent
@@ -23,7 +23,7 @@ describe('FormAntiRobotsComponent', () => {
       declarations: [FormAntiRobotsComponent],
       providers: [
         WINDOW_PROVIDERS,
-        RegisterService,
+        Register2Service,
         ErrorStateMatcher,
         PlatformInfoService,
         ErrorHandlerService,
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts b/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
index 959ba4876b..8e2db1ea13 100644
--- a/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
@@ -1,15 +1,15 @@
 import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
 import {
-  UntypedFormControl,
-  UntypedFormGroup,
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
+  UntypedFormControl,
+  UntypedFormGroup,
   ValidatorFn,
   Validators,
 } from '@angular/forms'
 import { ErrorStateMatcher } from '@angular/material/core'
 import { merge, Subject } from 'rxjs'
-import { RegisterService } from 'src/app/core/register/register.service'
+import { Register2Service } from 'src/app/core/register2/register2.service'
 
 import { BaseForm } from '../BaseForm'
 
@@ -48,7 +48,7 @@ export class FormAntiRobotsComponent
   }
 
   constructor(
-    private _register: RegisterService,
+    private _register: Register2Service,
     private _errorStateMatcher: ErrorStateMatcher
   ) {
     super()
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.html b/src/app/register2/components/form-notifications/form-notifications.component.html
index d518331c03..a1ee26a6f7 100644
--- a/src/app/register2/components/form-notifications/form-notifications.component.html
+++ b/src/app/register2/components/form-notifications/form-notifications.component.html
@@ -1,35 +1,19 @@
-<h3 class="mat-subheading-2" i18n="@@register.notificationSettings">
-  Notification settings
-</h3>
-
-<p i18n="@@register.notificationsDescription1">
-  ORCID sends email notifications about items related to your account, security,
-  and privacy, including requests from ORCID member organizations for permission
-  to update your record, and changes made to your record by those organizations.
-</p>
-
-<p i18n="@@register.notificationsDescription2">
-  You can also choose to receive emails from us about new features and tips for
-  making the most of your ORCID record.
-</p>
-
-<ng-container [formGroup]="form">
+<div [formGroup]="form">
+  <h3 class="orc-font-body" i18n="@@account.tipsFeaturesEmail">
+    Tips & features email
+  </h3>
+  <p i18n="@@account.weOccasionallySend">
+    We occasionally send out an email with information on new features and tips
+    for getting the best out of your ORCID record.
+  </p>
   <mat-checkbox
-    color="primary"
     formControlName="sendOrcidNews"
-    class="orcid-checkbox-baseline"
-    ><ng-container i18n="@@register.quarterlyEmail"
-      >Please send me quarterly emails about new ORCID features and
-      tips.</ng-container
-    >
-    <i i18n="@@register.quarterlyEmailVerified"
-      >To receive these emails, you will also need to verify your primary email
-      address.</i
-    >
+    class="margin-bottom-16"
+    color="primary"
+  >
+    <!-- prettier-ignore -->
+    <div class="mat-checkbox-content" i18n="@@account.idLikeToReceiveTipsFeatures"
+  >I’d like to receive the ORCID tips & features email
+</div>
   </mat-checkbox>
-</ng-container>
-
-<p i18n="@@register.reviewAfterRegistered">
-  After you've registered, you can change your notification settings at any time
-  in the account settings section of your ORCID record.
-</p>
+</div>
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.spec.ts b/src/app/register2/components/form-notifications/form-notifications.component.spec.ts
index 74d5498538..ddf0a6fa7e 100644
--- a/src/app/register2/components/form-notifications/form-notifications.component.spec.ts
+++ b/src/app/register2/components/form-notifications/form-notifications.component.spec.ts
@@ -1,19 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { FormNotificationsComponent } from './form-notifications.component'
-import { RegisterService } from '../../../core/register/register.service'
+import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogModule as MatDialogModule,
+  MatLegacyDialog as MatDialog
 } from '@angular/material/legacy-dialog'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
 import { RouterTestingModule } from '@angular/router/testing'
 import { PlatformInfoService } from '../../../cdk/platform-info'
-import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
 import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
-import { Overlay } from '@angular/cdk/overlay'
 import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { Register2Service } from '../../../core/register2/register2.service'
+import { FormNotificationsComponent } from './form-notifications.component'
 
 describe('FormNotificationsComponent', () => {
   let component: FormNotificationsComponent
@@ -25,7 +24,7 @@ describe('FormNotificationsComponent', () => {
       declarations: [FormNotificationsComponent],
       providers: [
         WINDOW_PROVIDERS,
-        RegisterService,
+        Register2Service,
         PlatformInfoService,
         ErrorHandlerService,
         SnackbarService,
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.ts b/src/app/register2/components/form-notifications/form-notifications.component.ts
index 11982529df..edbfad6e43 100644
--- a/src/app/register2/components/form-notifications/form-notifications.component.ts
+++ b/src/app/register2/components/form-notifications/form-notifications.component.ts
@@ -1,19 +1,23 @@
 import { Component, forwardRef, OnInit } from '@angular/core'
 import {
-  UntypedFormControl,
-  UntypedFormGroup,
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
+  UntypedFormControl,
+  UntypedFormGroup,
   Validators,
 } from '@angular/forms'
-import { RegisterService } from 'src/app/core/register/register.service'
 
+import { Register2Service } from 'src/app/core/register2/register2.service'
 import { BaseForm } from '../BaseForm'
 
 @Component({
   selector: 'app-form-notifications',
   templateUrl: './form-notifications.component.html',
-  styleUrls: ['./form-notifications.component.scss'],
+  styleUrls: [
+    './form-notifications.component.scss',
+    '../register2.style.scss',
+    '../register2.scss-theme.scss',
+  ],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -28,7 +32,7 @@ import { BaseForm } from '../BaseForm'
   ],
 })
 export class FormNotificationsComponent extends BaseForm implements OnInit {
-  constructor(private _register: RegisterService) {
+  constructor(private _register: Register2Service) {
     super()
   }
   ngOnInit() {
diff --git a/src/app/register2/components/form-password/form-password.component.spec.ts b/src/app/register2/components/form-password/form-password.component.spec.ts
index 32f79f6159..8fb75fe8d3 100644
--- a/src/app/register2/components/form-password/form-password.component.spec.ts
+++ b/src/app/register2/components/form-password/form-password.component.spec.ts
@@ -1,21 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { FormPasswordComponent } from './form-password.component'
+import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import { RouterTestingModule } from '@angular/router/testing'
 import {
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
   MatLegacyDialog as MatDialog,
   MatLegacyDialogRef as MatDialogRef,
 } from '@angular/material/legacy-dialog'
-import { WINDOW_PROVIDERS } from '../../../cdk/window'
-import { PlatformInfoService } from '../../../cdk/platform-info'
-import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
-import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
-import { Overlay } from '@angular/cdk/overlay'
-import { RegisterService } from '../../../core/register/register.service'
+import { RouterTestingModule } from '@angular/router/testing'
+import { PlatformInfoService } from '../../../cdk/platform-info'
 import { MdePopoverModule } from '../../../cdk/popover'
+import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { Register2Service } from '../../../core/register2/register2.service'
+import { FormPasswordComponent } from './form-password.component'
 
 describe('FormPasswordComponent', () => {
   let component: FormPasswordComponent
@@ -29,7 +29,7 @@ describe('FormPasswordComponent', () => {
         { provide: MatDialogRef, useValue: {} },
         { provide: MAT_DIALOG_DATA, useValue: {} },
         WINDOW_PROVIDERS,
-        RegisterService,
+        Register2Service,
         PlatformInfoService,
         ErrorHandlerService,
         SnackbarService,
diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts
index 32d5d53dcc..34e173d34f 100644
--- a/src/app/register2/components/form-password/form-password.component.ts
+++ b/src/app/register2/components/form-password/form-password.component.ts
@@ -8,7 +8,7 @@ import {
   Validators,
 } from '@angular/forms'
 import { HAS_LETTER_OR_SYMBOL, HAS_NUMBER } from 'src/app/constants'
-import { RegisterService } from 'src/app/core/register/register.service'
+import { Register2Service } from 'src/app/core/register2/register2.service'
 import { RegisterForm } from 'src/app/types/register.endpoint'
 import { OrcidValidators } from 'src/app/validators'
 
@@ -46,7 +46,7 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
   hasNumberPattern = HAS_NUMBER
   hasLetterOrSymbolPattern = HAS_LETTER_OR_SYMBOL
   @Input() personalData: RegisterForm
-  constructor(private _register: RegisterService) {
+  constructor(private _register: Register2Service) {
     super()
   }
   ngOnInit() {
diff --git a/src/app/register2/components/form-personal/form-personal.component.spec.ts b/src/app/register2/components/form-personal/form-personal.component.spec.ts
index b34b3e95fe..570b9eca44 100644
--- a/src/app/register2/components/form-personal/form-personal.component.spec.ts
+++ b/src/app/register2/components/form-personal/form-personal.component.spec.ts
@@ -1,24 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { FormPersonalComponent } from './form-personal.component'
+import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import { RouterTestingModule } from '@angular/router/testing'
 import {
-  MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogRef as MatDialogRef,
+  MatLegacyDialog as MatDialog
 } from '@angular/material/legacy-dialog'
-import { WINDOW_PROVIDERS } from '../../../cdk/window'
-import { FormBuilder } from '@angular/forms'
-import { RecordWorksService } from '../../../core/record-works/record-works.service'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { RouterTestingModule } from '@angular/router/testing'
 import { PlatformInfoService } from '../../../cdk/platform-info'
-import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { MdePopoverModule } from '../../../cdk/popover'
 import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
-import { Overlay } from '@angular/cdk/overlay'
-import { RegisterService } from '../../../core/register/register.service'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
 import { ReactivationService } from '../../../core/reactivation/reactivation.service'
-import { MdePopoverModule } from '../../../cdk/popover'
+import { Register2Service } from '../../../core/register2/register2.service'
+import { FormPersonalComponent } from './form-personal.component'
 
 describe('FormPersonalComponent', () => {
   let component: FormPersonalComponent
@@ -31,7 +27,7 @@ describe('FormPersonalComponent', () => {
       providers: [
         WINDOW_PROVIDERS,
         ReactivationService,
-        RegisterService,
+        Register2Service,
         PlatformInfoService,
         ErrorHandlerService,
         SnackbarService,
diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
index d1b5a8839c..e79f03eaf1 100644
--- a/src/app/register2/components/form-personal/form-personal.component.ts
+++ b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -15,7 +15,7 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms'
-import { RegisterService } from 'src/app/core/register/register.service'
+import { Register2Service } from 'src/app/core/register2/register2.service'
 import { OrcidValidators } from 'src/app/validators'
 
 import { first } from 'rxjs/operators'
@@ -51,7 +51,7 @@ export class FormPersonalComponent
   labelConfirmEmail = $localize`:@@register.confirmEmail:Confirm primary email`
   labelNameYouMostCommonly = $localize`:@@register.labelNameYouMostMost:The name you most commonly go by`
   constructor(
-    private _register: RegisterService,
+    private _register: Register2Service,
     private _reactivationService: ReactivationService
   ) {
     super()
diff --git a/src/app/register2/components/form-terms/form-terms.component.html b/src/app/register2/components/form-terms/form-terms.component.html
index 5745d6534b..78e3d503a0 100644
--- a/src/app/register2/components/form-terms/form-terms.component.html
+++ b/src/app/register2/components/form-terms/form-terms.component.html
@@ -1,4 +1,4 @@
-<h3 class="mat-subheading-2" i18n="@@register.termsOfUse">Terms of Use</h3>
+<h3 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h3>
 
 <ng-container [formGroup]="form">
   <mat-checkbox
diff --git a/src/app/register2/components/form-terms/form-terms.component.spec.ts b/src/app/register2/components/form-terms/form-terms.component.spec.ts
index 2c933f7bcd..f80a36cf46 100644
--- a/src/app/register2/components/form-terms/form-terms.component.spec.ts
+++ b/src/app/register2/components/form-terms/form-terms.component.spec.ts
@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { FormTermsComponent } from './form-terms.component'
+import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import { RouterTestingModule } from '@angular/router/testing'
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
-import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { RouterTestingModule } from '@angular/router/testing'
 import { PlatformInfoService } from '../../../cdk/platform-info'
-import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
 import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
-import { Overlay } from '@angular/cdk/overlay'
-import { RegisterService } from '../../../core/register/register.service'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { Register2Service } from '../../../core/register2/register2.service'
+import { FormTermsComponent } from './form-terms.component'
 
 describe('FormTermsComponent', () => {
   let component: FormTermsComponent
@@ -22,7 +22,7 @@ describe('FormTermsComponent', () => {
       declarations: [FormTermsComponent],
       providers: [
         WINDOW_PROVIDERS,
-        RegisterService,
+        Register2Service,
         PlatformInfoService,
         ErrorHandlerService,
         SnackbarService,
diff --git a/src/app/register2/components/form-terms/form-terms.component.ts b/src/app/register2/components/form-terms/form-terms.component.ts
index f0de5ce315..f05c57c6fc 100644
--- a/src/app/register2/components/form-terms/form-terms.component.ts
+++ b/src/app/register2/components/form-terms/form-terms.component.ts
@@ -1,13 +1,13 @@
 import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
 import {
-  UntypedFormControl,
-  UntypedFormGroup,
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
+  UntypedFormControl,
+  UntypedFormGroup,
   Validators,
 } from '@angular/forms'
 import { ErrorStateMatcher } from '@angular/material/core'
-import { RegisterService } from 'src/app/core/register/register.service'
+import { Register2Service } from 'src/app/core/register2/register2.service'
 import { environment } from 'src/environments/environment'
 
 import { BaseForm } from '../BaseForm'
@@ -15,7 +15,9 @@ import { BaseForm } from '../BaseForm'
 @Component({
   selector: 'app-form-terms',
   templateUrl: './form-terms.component.html',
-  styleUrls: ['./form-terms.component.scss'],
+  styleUrls: ['./form-terms.component.scss',
+  '../register2.style.scss',
+  '../register2.scss-theme.scss',],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -34,7 +36,7 @@ import { BaseForm } from '../BaseForm'
 export class FormTermsComponent extends BaseForm implements OnInit, DoCheck {
   environment = environment
   constructor(
-    private _register: RegisterService,
+    private _register: Register2Service,
     private _errorStateMatcher: ErrorStateMatcher
   ) {
     super()
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.spec.ts b/src/app/register2/components/form-visibility/form-visibility.component.spec.ts
index 387ddb0103..4e0ac5bf54 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.spec.ts
+++ b/src/app/register2/components/form-visibility/form-visibility.component.spec.ts
@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { FormVisibilityComponent } from './form-visibility.component'
+import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import { RouterTestingModule } from '@angular/router/testing'
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
-import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
+import { RouterTestingModule } from '@angular/router/testing'
 import { PlatformInfoService } from '../../../cdk/platform-info'
-import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
 import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
-import { Overlay } from '@angular/cdk/overlay'
-import { RegisterService } from '../../../core/register/register.service'
+import { WINDOW_PROVIDERS } from '../../../cdk/window'
+import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
+import { Register2Service } from '../../../core/register2/register2.service'
+import { FormVisibilityComponent } from './form-visibility.component'
 
 describe('FormVisibilityComponent', () => {
   let component: FormVisibilityComponent
@@ -22,7 +22,7 @@ describe('FormVisibilityComponent', () => {
       declarations: [FormVisibilityComponent],
       providers: [
         WINDOW_PROVIDERS,
-        RegisterService,
+        Register2Service,
         PlatformInfoService,
         ErrorHandlerService,
         SnackbarService,
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.ts b/src/app/register2/components/form-visibility/form-visibility.component.ts
index f2ef07dcbb..e29daa388b 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.ts
+++ b/src/app/register2/components/form-visibility/form-visibility.component.ts
@@ -8,7 +8,7 @@ import {
 } from '@angular/forms'
 import { ErrorStateMatcher } from '@angular/material/core'
 import { VISIBILITY_OPTIONS } from 'src/app/constants'
-import { RegisterService } from 'src/app/core/register/register.service'
+import { Register2Service } from 'src/app/core/register2/register2.service'
 
 import { BaseForm } from '../BaseForm'
 
@@ -42,7 +42,7 @@ export class FormVisibilityComponent
   errorState = false
   activitiesVisibilityDefault = new UntypedFormControl('', Validators.required)
   constructor(
-    private _register: RegisterService,
+    private _register: Register2Service,
     private _errorStateMatcher: ErrorStateMatcher
   ) {
     super()
diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
index e12ce35510..526d75477e 100644
--- a/src/app/register2/components/step-b/step-b.component.html
+++ b/src/app/register2/components/step-b/step-b.component.html
@@ -32,28 +32,36 @@
         formControlName="password"
         [personalData]="personalData"
       ></app-form-password>
-      <app-form-notifications
-        formControlName="sendOrcidNews"
-      ></app-form-notifications>
       <div class="step-actions">
         <button
-          mat-button
+          id="step-c-register-button"
+          mat-raised-button
           color="primary"
-          matStepperPrevious
-          i18n="@@shared.back"
-          id="step-b-back-button"
+          matStepperNext
         >
-          GO BACK
+          <ng-container
+            *ngIf="!reactivation?.isReactivation"
+            i18n="@@register.nextStep"
+          >
+            Next Step
+          </ng-container>
+          <ng-container
+            *ngIf="reactivation?.isReactivation"
+            i18n="@@register.reactivate"
+          >
+            REACTIVATE
+          </ng-container>
         </button>
-        <button
-          id="step-b-next"
-          mat-raised-button
-          matStepperNext
+        <a
+          mat-button
           color="primary"
-          i18n="@@shared.next"
+          matStepperPrevious
+          type="button"
+          i18n="@@shared.previousStep"
+          id="step-c-back-button"
         >
-          NEXT
-        </button>
+          Previous Step
+        </a>
       </div>
     </form>
   </mat-card-content>
diff --git a/src/app/register2/components/step-c-t/step-c.component.html b/src/app/register2/components/step-c-t/step-c.component.html
index d6a3f0da49..0c848e2b00 100644
--- a/src/app/register2/components/step-c-t/step-c.component.html
+++ b/src/app/register2/components/step-c-t/step-c.component.html
@@ -28,7 +28,7 @@
       </ng-container>
     </mat-card-title>
     <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3"
-      >This is step 3 of 3</mat-card-subtitle
+      >This is step 3 of 4</mat-card-subtitle
     >
   </mat-card-header>
 
@@ -45,6 +45,7 @@
           mat-raised-button
           color="primary"
           [disabled]="loading"
+          matStepperNext
         >
           <ng-container
             *ngIf="!reactivation?.isReactivation"
diff --git a/src/app/register2/components/step-d/step-d.component.html b/src/app/register2/components/step-d/step-d.component.html
index 4f05a50218..deaf74c211 100644
--- a/src/app/register2/components/step-d/step-d.component.html
+++ b/src/app/register2/components/step-d/step-d.component.html
@@ -7,6 +7,13 @@
 
   <mat-card-header>
     <mat-card-title role="heading" aria-level="1">
+      <div>
+        <img
+          height="64px"
+          src="assets/vectors/orcid.logo.icon.svg"
+          alt="orcid logo"
+        />
+      </div>
       <ng-container
         *ngIf="!reactivation?.isReactivation"
         i18n="@@register.create"
@@ -21,28 +28,18 @@
       </ng-container>
     </mat-card-title>
     <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3"
-      >This is step 3 of 3</mat-card-subtitle
+      >This is step 4 of 4</mat-card-subtitle
     >
   </mat-card-header>
 
   <mat-card-content>
     <form [formGroup]="formGroup" #form>
-      <app-form-visibility
-        formControlName="activitiesVisibilityDefault"
-      ></app-form-visibility>
+      <app-form-notifications
+        formControlName="sendOrcidNews"
+      ></app-form-notifications>
       <app-form-terms formControlName="termsOfUse"></app-form-terms>
       <app-form-anti-robots formControlName="captcha"></app-form-anti-robots>
       <div class="step-actions">
-        <button
-          mat-button
-          color="primary"
-          matStepperPrevious
-          type="button"
-          i18n="@@shared.back"
-          id="step-c-back-button"
-        >
-          GO BACK
-        </button>
         <button
           id="step-c-register-button"
           mat-raised-button
@@ -62,6 +59,16 @@
             REACTIVATE
           </ng-container>
         </button>
+        <a
+          mat-button
+          color="primary"
+          matStepperPrevious
+          type="button"
+          i18n="@@shared.previousStep"
+          id="step-c-back-button"
+        >
+          Previous Step
+        </a>
       </div>
     </form>
   </mat-card-content>
diff --git a/src/app/register2/pages/register/register2.component.html b/src/app/register2/pages/register/register2.component.html
index 670055304a..9961699a70 100644
--- a/src/app/register2/pages/register/register2.component.html
+++ b/src/app/register2/pages/register/register2.component.html
@@ -2,12 +2,12 @@
   <div class="container">
     <div class="row space-around">
       <div class="col l6 m8 s4" [ngClass]="{ 'no-gutters': platform.columns4 }">
-        <!-- MOBILE PRESENTATION -->
-        <mat-vertical-stepper
+        <!-- DESKTOP PRESENTATION -->
+        <mat-horizontal-stepper
           [linear]="isLinear"
           #stepper
-          *ngIf="platform.columns8 || platform.columns4"
-          (selectionChange)="selectionChange($event)"
+          *ngIf="platform.columns12"
+          labelPosition="bottom"
           class="orcid-stepper-wizard"
         >
           <mat-step [stepControl]="FormGroupStepA">
@@ -30,62 +30,30 @@
               [personalData]="personalData"
               [reactivation]="reactivation"
             ></app-step-b>
-          </mat-step>
-          <mat-step [stepControl]="FormGroupStepC" #lastStep>
+          </mat-step>FormGroupStepD
+          <mat-step [stepControl]="FormGroupStepC">
             <ng-template matStepLabel i18n="@@register.visibilityAndTerm"
               >Visibility and terms</ng-template
             >
-            <app-step-c
+            <app-step-ct
               #stepComponentC
               [(formGroup)]="FormGroupStepC"
               (submit)="register()"
               [loading]="loading"
               [reactivation]="reactivation"
-            ></app-step-c>
+            ></app-step-ct>
           </mat-step>
-        </mat-vertical-stepper>
-
-        <!-- DESKTOP PRESENTATION -->
-        <mat-horizontal-stepper
-          [linear]="isLinear"
-          #stepper
-          *ngIf="platform.columns12"
-          labelPosition="bottom"
-          class="orcid-stepper-wizard"
-          (selectionChange)="selectionChange($event)"
-        >
-          <mat-step [stepControl]="FormGroupStepA">
-            <ng-template matStepLabel i18n="@@register.personalData"
-              >Personal data</ng-template
-            >
-            <app-step-a
-              [(formGroup)]="FormGroupStepA"
-              [reactivation]="reactivation"
-              #stepComponentA
-            ></app-step-a>
-          </mat-step>
-          <mat-step [stepControl]="FormGroupStepB">
-            <ng-template matStepLabel i18n="@@register.securityAndNotifications"
-              >Security and notifications</ng-template
-            >
-            <app-step-b
-              #stepComponentB
-              [(formGroup)]="FormGroupStepB"
-              [personalData]="personalData"
-              [reactivation]="reactivation"
-            ></app-step-b>
-          </mat-step>
-          <mat-step [stepControl]="FormGroupStepC" #lastStep>
+          <mat-step [stepControl]="FormGroupStepD" #lastStep>
             <ng-template matStepLabel i18n="@@register.visibilityAndTerm"
               >Visibility and terms</ng-template
             >
-            <app-step-c
+            <app-step-d
               #stepComponentC
-              [(formGroup)]="FormGroupStepC"
+              [(formGroup)]="FormGroupStepD"
               (submit)="register()"
               [loading]="loading"
               [reactivation]="reactivation"
-            ></app-step-c>
+            ></app-step-d>
           </mat-step>
         </mat-horizontal-stepper>
       </div>
diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts
index 46fc6822a3..3612777a57 100644
--- a/src/app/register2/pages/register/register2.component.ts
+++ b/src/app/register2/pages/register/register2.component.ts
@@ -12,27 +12,26 @@ import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
 import { MatStep } from '@angular/material/stepper'
 import { Router } from '@angular/router'
-import { combineLatest, forkJoin, Observable } from 'rxjs'
+import { Observable, combineLatest, forkJoin } from 'rxjs'
 import { catchError, first, map, switchMap } from 'rxjs/operators'
 import { IsThisYouComponent } from 'src/app/cdk/is-this-you'
 import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 import { WINDOW } from 'src/app/cdk/window'
 import { isRedirectToTheAuthorizationPage } from 'src/app/constants'
 import { UserService } from 'src/app/core'
-import { RegisterService } from 'src/app/core/register/register.service'
-import { RequestInfoForm } from 'src/app/types'
+import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
+import { Register2Service } from 'src/app/core/register2/register2.service'
+import { ERROR_REPORT } from 'src/app/errors'
+import { RequestInfoForm, SearchResults } from 'src/app/types'
 import {
   RegisterConfirmResponse,
   RegisterForm,
 } from 'src/app/types/register.endpoint'
-import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
-import { ERROR_REPORT } from 'src/app/errors'
 import { UserSession } from 'src/app/types/session.local'
 import { ThirdPartyAuthData } from 'src/app/types/sign-in-data.endpoint'
-import { ReactivationLocal } from '../../../types/reactivation.local'
-import { SearchService } from '../../../core/search/search.service'
-import { SearchParameters, SearchResults } from 'src/app/types'
 import { GoogleTagManagerService } from '../../../core/google-tag-manager/google-tag-manager.service'
+import { SearchService } from '../../../core/search/search.service'
+import { ReactivationLocal } from '../../../types/reactivation.local'
 
 @Component({
   selector: 'app-register-2',
@@ -44,10 +43,14 @@ export class Register2Component implements OnInit, AfterViewInit {
   @ViewChild('stepComponentA', { read: ElementRef }) stepComponentA: ElementRef
   @ViewChild('stepComponentB', { read: ElementRef }) stepComponentB: ElementRef
   @ViewChild('stepComponentC', { read: ElementRef }) stepComponentC: ElementRef
+  @ViewChild('stepComponentD', { read: ElementRef }) stepComponentD: ElementRef
+
   platform: PlatformInfo
   FormGroupStepA: UntypedFormGroup
   FormGroupStepB: UntypedFormGroup
   FormGroupStepC: UntypedFormGroup
+  FormGroupStepD: UntypedFormGroup
+
   isLinear = true
   personalData: RegisterForm
   backendForm: RegisterForm
@@ -63,7 +66,7 @@ export class Register2Component implements OnInit, AfterViewInit {
     private _cdref: ChangeDetectorRef,
     private _platformInfo: PlatformInfoService,
     private _formBuilder: UntypedFormBuilder,
-    private _register: RegisterService,
+    private _register: Register2Service,
     private _dialog: MatDialog,
     @Inject(WINDOW) private window: Window,
     private _googleTagManagerService: GoogleTagManagerService,
@@ -87,10 +90,12 @@ export class Register2Component implements OnInit, AfterViewInit {
     })
     this.FormGroupStepB = this._formBuilder.group({
       password: [''],
-      sendOrcidNews: [''],
     })
     this.FormGroupStepC = this._formBuilder.group({
       activitiesVisibilityDefault: [''],
+    })
+    this.FormGroupStepD = this._formBuilder.group({
+      sendOrcidNews: [''],
       termsOfUse: [''],
       captcha: [''],
     })
@@ -128,13 +133,15 @@ export class Register2Component implements OnInit, AfterViewInit {
     if (
       this.FormGroupStepA.valid &&
       this.FormGroupStepB.valid &&
-      this.FormGroupStepC.valid
+      this.FormGroupStepC.valid &&
+      this.FormGroupStepD.valid
     ) {
       this._register
         .backendRegisterFormValidate(
           this.FormGroupStepA,
           this.FormGroupStepB,
-          this.FormGroupStepC
+          this.FormGroupStepC,
+          this.FormGroupStepD
         )
         .pipe(
           switchMap((validator: RegisterForm) => {
@@ -149,9 +156,9 @@ export class Register2Component implements OnInit, AfterViewInit {
               this.FormGroupStepA,
               this.FormGroupStepB,
               this.FormGroupStepC,
+              this.FormGroupStepD,
               this.reactivation,
               this.requestInfoForm,
-              true
             )
           })
         )
@@ -213,28 +220,6 @@ export class Register2Component implements OnInit, AfterViewInit {
     }
   }
 
-  afterStepASubmitted() {
-    // Update the personal data object is required after submit since is an input for StepB
-
-    if (!this.reactivation?.isReactivation) {
-      if (this.FormGroupStepA.valid) {
-        this.personalData = this.FormGroupStepA.value.personal
-        const searchValue =
-          this.personalData.familyNames.value +
-          ' ' +
-          this.personalData.givenNames.value
-        const searchParams: SearchParameters = {}
-        searchParams.searchQuery = searchValue
-
-        this._searchService.search(searchParams).subscribe((value) => {
-          if (value['num-found'] > 0) {
-            this.openDialog(value)
-          }
-        })
-      }
-    }
-  }
-
   openDialog(duplicateRecordsSearchResults: SearchResults): void {
     const duplicateRecords = duplicateRecordsSearchResults['expanded-result']
     const dialogParams = {
@@ -273,9 +258,6 @@ export class Register2Component implements OnInit, AfterViewInit {
   }
 
   selectionChange(event: StepperSelectionEvent) {
-    if (event.previouslySelectedIndex === 0) {
-      this.afterStepASubmitted()
-    }
     if (this.platform.columns4 || this.platform.columns8) {
       this.focusCurrentStep(event)
     }
@@ -284,6 +266,7 @@ export class Register2Component implements OnInit, AfterViewInit {
   // Fix to material vertical stepper not focusing current header
   // related issue https://github.com/angular/components/issues/8881
   focusCurrentStep(event: StepperSelectionEvent) {
+    console.log('event', event)
     let nextStep: ElementRef
     if (event.selectedIndex === 0) {
       nextStep = this.stepComponentA
@@ -291,6 +274,8 @@ export class Register2Component implements OnInit, AfterViewInit {
       nextStep = this.stepComponentB
     } else if (event.selectedIndex === 2) {
       nextStep = this.stepComponentC
+    } else if (event.selectedIndex === 3) {
+      nextStep = this.stepComponentD
     }
     // On mobile scroll the current step component into view
     if (this.platform.columns4 || this.platform.columns8) {

From 20ac6f584898f77e345350c21c6f310dac8a6657 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Wed, 15 Nov 2023 13:38:46 -0600
Subject: [PATCH 07/21] Add emial already exists

---
 src/app/core/oauth/oauth.service.ts           |  2 +-
 src/app/core/register2/register2.service.ts   |  5 ++
 .../form-personal.component.html              | 68 +++++++++++++++++--
 .../form-personal/form-personal.component.ts  | 48 ++++++++++++-
 .../components/register2.scss-theme.scss      | 22 +++++-
 .../register2/components/register2.style.scss | 50 +++++++++++++-
 .../components/step-a/step-a.component.html   |  8 ++-
 .../components/step-a/step-a.component.ts     |  5 ++
 .../components/step-b/step-b.component.html   |  8 +--
 .../components/step-c-t/step-c.component.html |  8 +--
 .../components/step-d/step-d.component.html   |  8 +--
 .../pages/register/register2.component.html   |  4 +-
 src/app/types/register.email-category.ts      |  5 ++
 src/app/types/register.endpoint.ts            |  1 +
 src/assets/scss/material.light-theme.scss     |  1 +
 src/assets/scss/material.palettes.scss        |  2 +
 src/assets/vectors/personal-email-icon.svg    |  5 ++
 .../vectors/professional-email-icon.svg       |  4 ++
 src/index.html                                |  5 +-
 19 files changed, 224 insertions(+), 35 deletions(-)
 create mode 100644 src/app/types/register.email-category.ts
 create mode 100644 src/assets/vectors/personal-email-icon.svg
 create mode 100644 src/assets/vectors/professional-email-icon.svg

diff --git a/src/app/core/oauth/oauth.service.ts b/src/app/core/oauth/oauth.service.ts
index 0d01ef65ad..d374d904e5 100644
--- a/src/app/core/oauth/oauth.service.ts
+++ b/src/app/core/oauth/oauth.service.ts
@@ -96,7 +96,7 @@ export class OauthService {
       .post<RequestInfoForm>(
         environment.BASE_URL + 'oauth/custom/authorize.json',
         value,
-        { headers: this.headers }
+        { headers: this.headers, withCredentials: true }
       )
       .pipe(
         retry(3),
diff --git a/src/app/core/register2/register2.service.ts b/src/app/core/register2/register2.service.ts
index 00c7d05e2c..95a5c55a8f 100644
--- a/src/app/core/register2/register2.service.ts
+++ b/src/app/core/register2/register2.service.ts
@@ -19,6 +19,7 @@ import { ErrorHandlerService } from '../error-handler/error-handler.service'
 import { UserService } from '../user/user.service'
 import { Register2BackendValidatorMixin } from './register2.backend-validators'
 import { Register2FormAdapterMixin } from './register2.form-adapter'
+import { EmailCategoryEndpoint } from 'src/app/types/register.email-category'
 
 // Mixing boiler plate
 
@@ -74,6 +75,10 @@ export class Register2Service extends _RegisterServiceMixingBase {
       .pipe(map((form) => (this.backendRegistrationForm = form)))
   }
 
+  getEmailCategory(email: string): Observable<EmailCategoryEndpoint> {
+    return this._http.get<any>(`${environment.API_WEB}email-domain/find-category?domain=${email}`)
+  }
+
   register(
     StepA: UntypedFormGroup,
     StepB: UntypedFormGroup,
diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
index 34153e91b4..f2a156373c 100644
--- a/src/app/register2/components/form-personal/form-personal.component.html
+++ b/src/app/register2/components/form-personal/form-personal.component.html
@@ -29,7 +29,7 @@ <h2 i18n="@@register.yourNames" class="orc-font-body">Your names</h2>
       <label i18n="@@register.optional">(Optional)</label></mat-label>
     <mat-form-field appearance="outline" [hideRequiredMarker]="true">
 
-      <input id="family-names-input" formControlName="familyNames" matInput />
+      <input id="family-names-input" formControlName="familyNames" matInput [placeholder]="labelFamilyNamePlaceholder" />
       <mat-error *ngIf="form.hasError('illegalName', 'familyNames')" i18n="@@register.invalidName">
         Invalid name characters or format
       </mat-error>
@@ -46,11 +46,11 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addres
     <div class="input-container">
 
       <mat-label class="orc-font-small-print" class="orc-font-small-print"
-        [ngClass]="{error: emailFormTouched && form.hasError('required', 'emails.email')}"
+        [ngClass]="{error: emailFormTouched && form.hasError('required', 'emails.email') }"
         i18n="@@register.primaryEmail">Email</mat-label>
 
       <mat-form-field appearance="outline" [hideRequiredMarker]="true">
-        <input id="email-input" formControlName="email" matInput appTrim type="email" />
+        <input [errorStateMatcher]="matcher" id="email-input" formControlName="email" matInput appTrim type="email" />
       </mat-form-field>
       <mat-error *ngIf="emailFormTouched && form.hasError('required', 'emails.email')"
         i18n="@@register.primaryEmailRequired">
@@ -63,13 +63,69 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addres
         Invalid email format
       </mat-error>
 
-      <mat-error *ngIf="this.emails.hasError('backendError', 'email')">
+      <mat-error *ngIf="this.emails.hasError('backendError', 'email') && nextButtonWasClicked">
         <div *ngFor="let error of this.emails.getError('backendError', 'email')">
           <app-backend-error [errorCode]="error" [value]="emails.get('email').value"></app-backend-error>
         </div>
       </mat-error>
     </div>
 
+<ng-container>
+    <div
+    class="announce"
+  >
+    <div>
+      <img src="/assets/vectors/personal-email-icon.svg">
+    </div>
+    <div class="content">
+      <div i18n="@@account.warningDuplicated">
+        <h3> This looks like a personal email</h3>     </div>
+      <div>
+      <ng-container> Add a </ng-container><strong>professional email</strong> <ng-container> as backup so we can better recommend affiliations and other related data to you.  </ng-container>    </div>
+    </div>
+  </div>
+</ng-container>
+
+<ng-container>
+  <div
+  class="announce"
+  >
+  <div>
+   <img src="/assets/vectors/professional-email-icon.svg">
+  </div>
+  <div class="content">
+    <div i18n="@@account.warningDuplicated">
+      <h3>This looks like a professional email</h3>>
+    </div>
+    <div>
+      <ng-container>We recommend adding a </ng-container><strong>personal email</strong> <ng-container> as backup so you always have access to your ORCID account if you change jobs or roles.</ng-container>
+    </div>
+  </div>
+</div>
+</ng-container>
+
+
+<ng-container *ngIf="this.emails.hasError('backendError', 'email')">
+  <div
+  *ngFor="let error of this.emails.getError('backendError', 'email')"
+  class="info"
+
+>
+  <div>
+    <mat-icon class="large-material-icon material-symbols-outlined">error</mat-icon>
+  </div>
+  <div class="content">
+    <div i18n="@@account.warningDuplicated">
+      <p>
+      The email address <strong>{{emails.get('email').value}}</strong> is associated with an existing ORCID record.
+    </div>
+    <div>
+      <a routerLink="/signin"> Sign in to ORCID using this email address</a>
+    </div>
+  </div>
+</div>
+</ng-container>
+
     <!-- <mat-label i18n="@@register.confirmEmail"
     >Confirm primary email</mat-label
   > -->
@@ -79,7 +135,7 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addres
 
         <input formControlName="confirmEmail" matInput (paste)="(false)" appTrim autocomplete="off" type="email"
           id="confirm-email-input" [attr.labelConfirmEmail]="labelConfirmEmail"
-          [attr.placeholder]="labelConfirmEmail" />
+          [attr.placeholder]="labelConfirmEmail" [disabled]="this.emails.hasError('backendError', 'email') || !emailFormTouched || form.hasError('required', 'emails.email')" />
 
       </mat-form-field>
       <mat-error *ngIf="emailConfirmationFormTouched && form.hasError('required', 'emails.confirmEmail')" i18n="@@register.confirmEmailRequired">
@@ -122,4 +178,4 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addres
       target="orcid.frontend.register.help.more_info.link.text" i18n="@@register.moreInfoOnNames">More information on
       names</a>
   </mat-card>
-</mde-popover>
\ No newline at end of file
+</mde-popover>
diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
index e79f03eaf1..5098ee4f24 100644
--- a/src/app/register2/components/form-personal/form-personal.component.ts
+++ b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -8,8 +8,11 @@ import {
   ViewChild,
 } from '@angular/core'
 import {
+  FormControl,
+  FormGroupDirective,
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
+  NgForm,
   UntypedFormControl,
   UntypedFormGroup,
   ValidatorFn,
@@ -18,10 +21,20 @@ import {
 import { Register2Service } from 'src/app/core/register2/register2.service'
 import { OrcidValidators } from 'src/app/validators'
 
-import { first } from 'rxjs/operators'
+import { debounce, debounceTime, filter, first, startWith, switchMap } 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'
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+
+    // !((this.emails.hasError('backendError', 'email') && !nextButtonWasClicked))
+    console.log(control)
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
 
 @Component({
   selector: 'app-form-personal',
@@ -41,15 +54,24 @@ import { BaseForm } from '../BaseForm'
     },
   ],
 })
+
+
+
 export class FormPersonalComponent
   extends BaseForm
   implements OnInit, AfterViewInit {
+  matcher = new MyErrorStateMatcher;
+  @Input() nextButtonWasClicked: boolean
   @Input() reactivation: ReactivationLocal
   @ViewChild('firstInput') firstInput: ElementRef
   labelInfoAboutName = $localize`:@@register.ariaLabelInfo:info about names`
   labelClose = $localize`:@@register.ariaLabelClose:close`
   labelConfirmEmail = $localize`:@@register.confirmEmail:Confirm primary email`
   labelNameYouMostCommonly = $localize`:@@register.labelNameYouMostMost:The name you most commonly go by`
+  labelFamilyNamePlaceholder = $localize`:@@register.familyNamePlaceholder:Your family name or surname
+  `
+  professionalEmail: boolean
+  personalEmail: boolean
   constructor(
     private _register: Register2Service,
     private _reactivationService: ReactivationService
@@ -87,6 +109,22 @@ export class FormPersonalComponent
       }
     )
 
+    this.emails.controls['email'].valueChanges.pipe(debounceTime(1000),filter( () =>
+      !this.emails.controls['email'].errors
+    ), switchMap(
+      (value) => {
+        const emailDomain = value.split('@')[1]
+        return this._register.getEmailCategory(emailDomain)
+      }
+    )).subscribe(value => {
+      console.log(value)
+      this.professionalEmail = value.category === 'PROFESSIONAL'
+      this.personalEmail = value.category === 'PERSONAL'
+
+    })
+
+
+
     if (!this.reactivation?.isReactivation) {
       this.emails.addControl(
         'confirmEmail',
@@ -96,6 +134,8 @@ export class FormPersonalComponent
       )
     }
 
+
+
     this.form = new UntypedFormGroup({
       givenNames: new UntypedFormControl('', {
         validators: [Validators.required, OrcidValidators.illegalName],
@@ -124,8 +164,10 @@ export class FormPersonalComponent
     // Timeout used to get focus on the first input after the first step loads
     setTimeout(() => {
       this.firstInput.nativeElement.focus()
-    }, 100)
-  }
+    }), 100
+    }
+
+
 
   allEmailsAreUnique(): ValidatorFn {
     return (formGroup: UntypedFormGroup) => {
diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
index 9342ce246f..3b46d02f8b 100644
--- a/src/app/register2/components/register2.scss-theme.scss
+++ b/src/app/register2/components/register2.scss-theme.scss
@@ -8,9 +8,15 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
+  .step-actions {
+    border-color: mat.get-color-from-palette($background,
+        ui-background-light);
+  }
+
   ::ng-deep .valid {
     color: mat.get-color-from-palette($accent, 900);
   }
+
   .error {
     color: map-get($foreground, 'state-warning-dark');
   }
@@ -19,6 +25,20 @@
     color: map-get($foreground, 'text-dark-mid');
 
   }
+
+  .info {
+    background-color: mat.get-color-from-palette($background, state-notice-lightest);
+    border-color: mat.get-color-from-palette($foreground,
+        'state-notice-dark'
+      ) !important;
+
+    mat-icon {
+      color: mat.get-color-from-palette($foreground,
+          'state-notice-dark'
+        ) !important;
+    }
+  }
+
 }
 
-@include theme($orcid-app-theme);
+@include theme($orcid-app-theme);
\ No newline at end of file
diff --git a/src/app/register2/components/register2.style.scss b/src/app/register2/components/register2.style.scss
index bfd259e498..cb82894202 100644
--- a/src/app/register2/components/register2.style.scss
+++ b/src/app/register2/components/register2.style.scss
@@ -3,13 +3,18 @@ a {
   font-weight: normal;
 }
 
+h2 {
+  margin-top: 14px;
+  margin-bottom: 14px;
+}
+
 mat-card-title img {
   margin-bottom: 32px;
 }
 
 
 .input-container {
-  padding-bottom: 24px;
+  padding-bottom: 20px;
 }
 
 mat-label.orc-font-small-print {
@@ -20,6 +25,11 @@ mat-label.orc-font-small-print {
   }
 }
 
+.step-actions {
+  border-top: 1px solid;
+  padding-top: 24px;
+}
+
 :host ::ng-deep {
 
   mat-error {
@@ -80,10 +90,46 @@ mat-label.orc-font-small-print {
 
 }
 
+.orc-font-heading-small {
+  font-style: normal;
+  font-weight: 500;
+}
+
+
+.info {
+  .content div:not(:last-child) {
+    margin-bottom: 16px;
+  }
+
+  padding: 16px;
+  margin-bottom: 16px;
+  border: solid 2px;
+  border-radius: 4px;
+  display: flex;
+
+  p {
+    margin: 0;
+  }
+
+  mat-icon {
+    margin-right: 16px;
+  }
+
+
+}
+
+
 
 // MATERIAL OVERWRITES
 
 ::ng-deep {
+  .mat-horizontal-stepper-wrapper {
+    .mat-horizontal-stepper-header-container {
+      display: none;
+    }
+  }
+
+
 
   mat-vertical-stepper.orcid-stepper-wizard mat-card p,
   mat-horizontal-stepper.orcid-stepper-wizard mat-card p {
@@ -110,7 +156,7 @@ mat-label.orc-font-small-print {
         flex-direction: column;
         justify-content: space-between;
         width: 100%;
-        margin-top: 28px;
+        margin-top: 0px;
         gap: 12px;
       }
     }
diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
index 4c5ee5d412..e8fb42d7de 100644
--- a/src/app/register2/components/step-a/step-a.component.html
+++ b/src/app/register2/components/step-a/step-a.component.html
@@ -12,7 +12,7 @@
         *ngIf="!reactivation?.isReactivation"
         i18n="@@register.create"
       >
-        Create your ORCID iD
+        <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
       </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
@@ -21,8 +21,8 @@
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step1"
-      >This is step 1 of 3</mat-card-subtitle
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step1.2"
+      >Step 1 of 4 - Names and emails</mat-card-subtitle
     >
   </mat-card-header>
 
@@ -48,6 +48,7 @@
       <app-form-personal
         formControlName="personal"
         [reactivation]="reactivation"
+        [nextButtonWasClicked]="nextButtonWasClicked"
       >
       </app-form-personal>
       <div class="step-actions">
@@ -57,6 +58,7 @@
           matStepperNext
           i18n="@@shared.next"
           color="primary"
+          (click)="nextButton()"
 
         >
           NEXT STEP
diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts
index fada13b9f0..3258d209d0 100644
--- a/src/app/register2/components/step-a/step-a.component.ts
+++ b/src/app/register2/components/step-a/step-a.component.ts
@@ -16,6 +16,7 @@ import { BaseStepDirective } from '../BaseStep'
 })
 export class StepAComponent extends BaseStepDirective {
   @Input() reactivation: ReactivationLocal
+  nextButtonWasClicked = false
 
   constructor(private _platform: PlatformInfoService, private _router: Router) {
     super()
@@ -49,6 +50,10 @@ export class StepAComponent extends BaseStepDirective {
       })
   }
 
+  nextButton () {
+    this.nextButtonWasClicked = true
+  }
+
   signIn() {
     this._platform
       .get()
diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
index 526d75477e..117a2a269c 100644
--- a/src/app/register2/components/step-b/step-b.component.html
+++ b/src/app/register2/components/step-b/step-b.component.html
@@ -12,8 +12,8 @@
         *ngIf="!reactivation?.isReactivation"
         i18n="@@register.create"
       >
-        Create your ORCID iD
-      </ng-container>
+      <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+    </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
         i18n="@@register.reactivation"
@@ -21,8 +21,8 @@
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2"
-      >This is step 2 of 3</mat-card-subtitle
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2.2"
+      >Step 2 of 4 - Password</mat-card-subtitle
     >
   </mat-card-header>
 
diff --git a/src/app/register2/components/step-c-t/step-c.component.html b/src/app/register2/components/step-c-t/step-c.component.html
index 0c848e2b00..1119db1c70 100644
--- a/src/app/register2/components/step-c-t/step-c.component.html
+++ b/src/app/register2/components/step-c-t/step-c.component.html
@@ -18,8 +18,8 @@
         *ngIf="!reactivation?.isReactivation"
         i18n="@@register.create"
       >
-        Create your ORCID iD
-      </ng-container>
+      <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+    </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
         i18n="@@register.reactivation"
@@ -27,8 +27,8 @@
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3"
-      >This is step 3 of 4</mat-card-subtitle
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3.2"
+      >Step 3 of 4 - Visibility</mat-card-subtitle
     >
   </mat-card-header>
 
diff --git a/src/app/register2/components/step-d/step-d.component.html b/src/app/register2/components/step-d/step-d.component.html
index deaf74c211..eb8527f5f0 100644
--- a/src/app/register2/components/step-d/step-d.component.html
+++ b/src/app/register2/components/step-d/step-d.component.html
@@ -18,8 +18,8 @@
         *ngIf="!reactivation?.isReactivation"
         i18n="@@register.create"
       >
-        Create your ORCID iD
-      </ng-container>
+      <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+    </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
         i18n="@@register.reactivation"
@@ -27,8 +27,8 @@
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3"
-      >This is step 4 of 4</mat-card-subtitle
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3.2"
+      >Step 4 of 4 - Terms and conditions</mat-card-subtitle
     >
   </mat-card-header>
 
diff --git a/src/app/register2/pages/register/register2.component.html b/src/app/register2/pages/register/register2.component.html
index 9961699a70..6bde1f73c1 100644
--- a/src/app/register2/pages/register/register2.component.html
+++ b/src/app/register2/pages/register/register2.component.html
@@ -1,12 +1,10 @@
 <main id="main">
   <div class="container">
     <div class="row space-around">
-      <div class="col l6 m8 s4" [ngClass]="{ 'no-gutters': platform.columns4 }">
-        <!-- DESKTOP PRESENTATION -->
+      <div class="col l7 m8 s4" [ngClass]="{ 'no-gutters': platform.columns4 }">
         <mat-horizontal-stepper
           [linear]="isLinear"
           #stepper
-          *ngIf="platform.columns12"
           labelPosition="bottom"
           class="orcid-stepper-wizard"
         >
diff --git a/src/app/types/register.email-category.ts b/src/app/types/register.email-category.ts
new file mode 100644
index 0000000000..fd2180fc9a
--- /dev/null
+++ b/src/app/types/register.email-category.ts
@@ -0,0 +1,5 @@
+export type EmailCategory = 'PROFESSIONAL' | 'PERSONAL' | 'UNKNOWN'
+
+export interface EmailCategoryEndpoint {
+  category: EmailCategory
+}
diff --git a/src/app/types/register.endpoint.ts b/src/app/types/register.endpoint.ts
index edfd755d85..c1f863e0fe 100644
--- a/src/app/types/register.endpoint.ts
+++ b/src/app/types/register.endpoint.ts
@@ -43,3 +43,4 @@ export interface RegisterConfirmResponse {
   errors?: any[]
   url: string
 }
+
diff --git a/src/assets/scss/material.light-theme.scss b/src/assets/scss/material.light-theme.scss
index 2516222ff2..aa1a7631dd 100644
--- a/src/assets/scss/material.light-theme.scss
+++ b/src/assets/scss/material.light-theme.scss
@@ -27,6 +27,7 @@
       brand-primary-lightest: $brand-primary-lightest,
       ui-background-light: $ui-background-light,
       ui-background-lightest: $ui-background-lightest,
+      state-notice-lightest: $state-notice-lightest,
       ui-background-darkest: $ui-background-darkest,
       ui-background: $ui-background,
       // COLORS OVERWRITES
diff --git a/src/assets/scss/material.palettes.scss b/src/assets/scss/material.palettes.scss
index c9b9317312..992098c47f 100644
--- a/src/assets/scss/material.palettes.scss
+++ b/src/assets/scss/material.palettes.scss
@@ -139,6 +139,8 @@ $state-notice-light: #ffdf72;
 
 $state-notice-dark: #ff9c00;
 
+$state-notice-lightest: #FFFBEE;
+
 $state-notice-darkest: #ff6400;
 
 $state-warning-dark: #d32f2f;
diff --git a/src/assets/vectors/personal-email-icon.svg b/src/assets/vectors/personal-email-icon.svg
new file mode 100644
index 0000000000..4143b6a0bc
--- /dev/null
+++ b/src/assets/vectors/personal-email-icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="fingerprint_FILL0_wght400_GRAD0_opsz24 1">
+<path id="Vector" d="M3.25003 9.6499C3.13336 9.56657 3.06253 9.4624 3.03753 9.3374C3.01253 9.2124 3.05003 9.08324 3.15003 8.9499C4.18336 7.53324 5.4792 6.43324 7.03753 5.6499C8.59586 4.86657 10.2584 4.4749 12.025 4.4749C13.7917 4.4749 15.4584 4.85407 17.025 5.6124C18.5917 6.37074 19.9 7.46657 20.95 8.8999C21.0667 9.0499 21.1042 9.18324 21.0625 9.2999C21.0209 9.41657 20.95 9.51657 20.85 9.5999C20.75 9.68324 20.6334 9.72074 20.5 9.7124C20.3667 9.70407 20.25 9.63324 20.15 9.4999C19.2334 8.1999 18.0542 7.20407 16.6125 6.5124C15.1709 5.82074 13.6417 5.4749 12.025 5.4749C10.4084 5.4749 8.8917 5.82074 7.47503 6.5124C6.05836 7.20407 4.88336 8.1999 3.95003 9.4999C3.85003 9.6499 3.73336 9.73324 3.60003 9.7499C3.4667 9.76657 3.35003 9.73324 3.25003 9.6499ZM14.85 21.9749C13.1167 21.5416 11.7 20.6791 10.6 19.3874C9.50003 18.0957 8.95003 16.5166 8.95003 14.6499C8.95003 13.8166 9.25003 13.1166 9.85003 12.5499C10.45 11.9832 11.175 11.6999 12.025 11.6999C12.875 11.6999 13.6 11.9832 14.2 12.5499C14.8 13.1166 15.1 13.8166 15.1 14.6499C15.1 15.1999 15.3084 15.6624 15.725 16.0374C16.1417 16.4124 16.6334 16.5999 17.2 16.5999C17.7667 16.5999 18.25 16.4124 18.65 16.0374C19.05 15.6624 19.25 15.1999 19.25 14.6499C19.25 12.7166 18.5417 11.0916 17.125 9.7749C15.7084 8.45824 14.0167 7.7999 12.05 7.7999C10.0834 7.7999 8.3917 8.45824 6.97503 9.7749C5.55836 11.0916 4.85003 12.7082 4.85003 14.6249C4.85003 15.0249 4.88753 15.5249 4.96253 16.1249C5.03753 16.7249 5.2167 17.4249 5.50003 18.2249C5.55003 18.3749 5.54586 18.5082 5.48753 18.6249C5.4292 18.7416 5.33336 18.8249 5.20003 18.8749C5.0667 18.9249 4.93753 18.9207 4.81253 18.8624C4.68753 18.8041 4.60003 18.7082 4.55003 18.5749C4.30003 17.9249 4.12086 17.2791 4.01253 16.6374C3.9042 15.9957 3.85003 15.3332 3.85003 14.6499C3.85003 12.4332 4.6542 10.5749 6.26253 9.0749C7.87086 7.5749 9.7917 6.8249 12.025 6.8249C14.275 6.8249 16.2084 7.5749 17.825 9.0749C19.4417 10.5749 20.25 12.4332 20.25 14.6499C20.25 15.4832 19.9542 16.1791 19.3625 16.7374C18.7709 17.2957 18.05 17.5749 17.2 17.5749C16.35 17.5749 15.6209 17.2957 15.0125 16.7374C14.4042 16.1791 14.1 15.4832 14.1 14.6499C14.1 14.0999 13.8959 13.6374 13.4875 13.2624C13.0792 12.8874 12.5917 12.6999 12.025 12.6999C11.4584 12.6999 10.9709 12.8874 10.5625 13.2624C10.1542 13.6374 9.95003 14.0999 9.95003 14.6499C9.95003 16.2666 10.4292 17.6166 11.3875 18.6999C12.3459 19.7832 13.5834 20.5416 15.1 20.9749C15.25 21.0249 15.35 21.1082 15.4 21.2249C15.45 21.3416 15.4584 21.4666 15.425 21.5999C15.3917 21.7166 15.325 21.8166 15.225 21.8999C15.125 21.9832 15 22.0082 14.85 21.9749ZM6.50003 4.4249C6.3667 4.50824 6.23336 4.52907 6.10003 4.4874C5.9667 4.44574 5.8667 4.35824 5.80003 4.2249C5.73336 4.09157 5.7167 3.97074 5.75003 3.8624C5.78336 3.75407 5.8667 3.65824 6.00003 3.5749C6.93336 3.0749 7.90836 2.69157 8.92503 2.4249C9.9417 2.15824 10.975 2.0249 12.025 2.0249C13.0917 2.0249 14.1334 2.15407 15.15 2.4124C16.1667 2.67074 17.15 3.04157 18.1 3.5249C18.25 3.60824 18.3375 3.70824 18.3625 3.8249C18.3875 3.94157 18.375 4.05824 18.325 4.1749C18.275 4.29157 18.1917 4.38324 18.075 4.4499C17.9584 4.51657 17.8167 4.50824 17.65 4.4249C16.7667 3.9749 15.8542 3.62907 14.9125 3.3874C13.9709 3.14574 13.0084 3.0249 12.025 3.0249C11.0584 3.0249 10.1084 3.1374 9.17503 3.3624C8.2417 3.5874 7.35003 3.94157 6.50003 4.4249ZM9.45003 21.6249C8.4667 20.5916 7.71253 19.5374 7.18753 18.4624C6.66253 17.3874 6.40003 16.1166 6.40003 14.6499C6.40003 13.1332 6.95003 11.8541 8.05003 10.8124C9.15003 9.77074 10.475 9.2499 12.025 9.2499C13.575 9.2499 14.9084 9.77074 16.025 10.8124C17.1417 11.8541 17.7 13.1332 17.7 14.6499C17.7 14.7999 17.6542 14.9207 17.5625 15.0124C17.4709 15.1041 17.35 15.1499 17.2 15.1499C17.0667 15.1499 16.95 15.1041 16.85 15.0124C16.75 14.9207 16.7 14.7999 16.7 14.6499C16.7 13.3999 16.2375 12.3541 15.3125 11.5124C14.3875 10.6707 13.2917 10.2499 12.025 10.2499C10.7584 10.2499 9.67086 10.6707 8.76253 11.5124C7.8542 12.3541 7.40003 13.3999 7.40003 14.6499C7.40003 15.9999 7.63336 17.1457 8.10003 18.0874C8.5667 19.0291 9.25003 19.9749 10.15 20.9249C10.25 21.0249 10.3 21.1416 10.3 21.2749C10.3 21.4082 10.25 21.5249 10.15 21.6249C10.05 21.7249 9.93336 21.7749 9.80003 21.7749C9.6667 21.7749 9.55003 21.7249 9.45003 21.6249ZM17 19.9249C15.5167 19.9249 14.2292 19.4249 13.1375 18.4249C12.0459 17.4249 11.5 16.1666 11.5 14.6499C11.5 14.5166 11.5459 14.3999 11.6375 14.2999C11.7292 14.1999 11.85 14.1499 12 14.1499C12.15 14.1499 12.2709 14.1999 12.3625 14.2999C12.4542 14.3999 12.5 14.5166 12.5 14.6499C12.5 15.8999 12.95 16.9249 13.85 17.7249C14.75 18.5249 15.8 18.9249 17 18.9249C17.1 18.9249 17.2417 18.9166 17.425 18.8999C17.6084 18.8832 17.8 18.8582 18 18.8249C18.15 18.7916 18.2792 18.8124 18.3875 18.8874C18.4959 18.9624 18.5667 19.0749 18.6 19.2249C18.6334 19.3582 18.6084 19.4749 18.525 19.5749C18.4417 19.6749 18.3334 19.7416 18.2 19.7749C17.9 19.8582 17.6375 19.9041 17.4125 19.9124C17.1875 19.9207 17.05 19.9249 17 19.9249Z" fill="white"/>
+</g>
+</svg>
diff --git a/src/assets/vectors/professional-email-icon.svg b/src/assets/vectors/professional-email-icon.svg
new file mode 100644
index 0000000000..9d87208847
--- /dev/null
+++ b/src/assets/vectors/professional-email-icon.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="#0D47A1"/>
+<path d="M8 24C7.45 24 6.97917 23.8042 6.5875 23.4125C6.19583 23.0208 6 22.55 6 22V11C6 10.45 6.19583 9.97917 6.5875 9.5875C6.97917 9.19583 7.45 9 8 9H12V7C12 6.45 12.1958 5.97917 12.5875 5.5875C12.9792 5.19583 13.45 5 14 5H18C18.55 5 19.0208 5.19583 19.4125 5.5875C19.8042 5.97917 20 6.45 20 7V9H24C24.55 9 25.0208 9.19583 25.4125 9.5875C25.8042 9.97917 26 10.45 26 11V22C26 22.55 25.8042 23.0208 25.4125 23.4125C25.0208 23.8042 24.55 24 24 24H8ZM8 22H24V11H8V22ZM14 9H18V7H14V9Z" fill="white"/>
+</svg>
diff --git a/src/index.html b/src/index.html
index abffff8d94..77dcd82ef9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,10 +19,7 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
-      rel="stylesheet"
-    />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0" />
     <meta name="theme-color" content="#1976d2" />
     <script
       type="text/javascript"

From abca2cce4764d2577a8f75bc870e150079109fc6 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Wed, 15 Nov 2023 14:25:05 -0600
Subject: [PATCH 08/21] All email validations and recomendations

---
 .../form-personal.component.html              | 122 +++++++++++-------
 .../form-personal/form-personal.component.ts  |  20 ++-
 .../components/register2.scss-theme.scss      |  36 +++++-
 .../register2/components/register2.style.scss |   8 +-
 src/app/types/register.email-category.ts      |   2 +-
 src/assets/scss/material.light-theme.scss     |   1 +
 src/assets/scss/material.palettes.scss        |   4 +
 src/assets/vectors/personal-email-icon.svg    |   7 +-
 src/assets/vectors/undefined-email-icon.svg   |   5 +
 9 files changed, 149 insertions(+), 56 deletions(-)
 create mode 100644 src/assets/vectors/undefined-email-icon.svg

diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
index f2a156373c..27f47ead27 100644
--- a/src/app/register2/components/form-personal/form-personal.component.html
+++ b/src/app/register2/components/form-personal/form-personal.component.html
@@ -4,20 +4,20 @@ <h2 i18n="@@register.yourNames" class="orc-font-body">Your names</h2>
 
   <div class="input-container">
     <mat-label i18n="@@register.givenNames" class="orc-font-small-print"
-      [ngClass]="{'error': form.controls.givenNames.touched && form.controls.givenNames.errors}">Given names</mat-label>
+      [ngClass]="{'error': givenNameFormTouched && form.controls.givenNames.errors}">Given names</mat-label>
     <mat-form-field appearance="outline" [hideRequiredMarker]="true" async>
       <input id="given-names-input" formControlName="givenNames" matInput #firstInput
         [attr.placeholder]="labelNameYouMostCommonly" />
     </mat-form-field>
 
-    <mat-error *ngIf="form.controls.givenNames.touched && form.hasError('required', 'givenNames')"
+    <mat-error *ngIf="givenNameFormTouched && form.hasError('required', 'givenNames')"
       i18n="@@register.firstNamePassword">
       Please enter your first/given name
     </mat-error>
-    <mat-error *ngIf="form.hasError('illegalName', 'givenNames')" i18n="@@register.invalidName">
+    <mat-error *ngIf=" givenNameFormTouched && form.hasError('illegalName', 'givenNames')" i18n="@@register.invalidName">
       Invalid name characters or format
     </mat-error>
-    <mat-error *ngIf="form.hasError('backendError', 'givenNames')">
+    <mat-error *ngIf="givenNameFormTouched && form.hasError('backendError', 'givenNames')">
       <div *ngFor="let error of form.getError('backendError', 'givenNames')">
         <app-backend-error [errorCode]="error"></app-backend-error>
       </div>
@@ -41,6 +41,12 @@ <h2 i18n="@@register.yourNames" class="orc-font-body">Your names</h2>
     </mat-form-field>
   </div>
 
+
+  <!-- EMAIL -->
+
+
+
+
   <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addresses</h2>
   <ng-container formGroupName="emails">
     <div class="input-container">
@@ -49,16 +55,18 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addres
         [ngClass]="{error: emailFormTouched && form.hasError('required', 'emails.email') }"
         i18n="@@register.primaryEmail">Email</mat-label>
 
-      <mat-form-field appearance="outline" [hideRequiredMarker]="true">
-        <input [errorStateMatcher]="matcher" id="email-input" formControlName="email" matInput appTrim type="email" />
+      <mat-form-field appearance="outline" [hideRequiredMarker]="true" [ngClass]="{'valid-password-input' : emailsAreValid}">
+        <mat-icon *ngIf="emailsAreValid" matSuffix>done</mat-icon>
+
+        <input id="email-input" formControlName="email" matInput appTrim type="email" />
       </mat-form-field>
       <mat-error *ngIf="emailFormTouched && form.hasError('required', 'emails.email')"
         i18n="@@register.primaryEmailRequired">
         An email is required
       </mat-error>
       <mat-error *ngIf="
-        this.emails.hasError('email', 'email') ||
-        this.emails.hasError('pattern', 'email')
+        (this.emails.hasError('email', 'email') ||
+        this.emails.hasError('pattern', 'email')) && emailFormTouched
       " i18n="@@register.invalidEmail">
         Invalid email format
       </mat-error>
@@ -70,40 +78,6 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addres
       </mat-error>
     </div>
 
-<ng-container>
-    <div
-    class="announce"
-  >
-    <div>
-      <img src="/assets/vectors/personal-email-icon.svg">
-    </div>
-    <div class="content">
-      <div i18n="@@account.warningDuplicated">
-        <h3> This looks like a personal email</h3>     </div>
-      <div>
-      <ng-container> Add a </ng-container><strong>professional email</strong> <ng-container> as backup so we can better recommend affiliations and other related data to you.  </ng-container>    </div>
-    </div>
-  </div>
-</ng-container>
-
-<ng-container>
-  <div
-  class="announce"
-  >
-  <div>
-   <img src="/assets/vectors/professional-email-icon.svg">
-  </div>
-  <div class="content">
-    <div i18n="@@account.warningDuplicated">
-      <h3>This looks like a professional email</h3>>
-    </div>
-    <div>
-      <ng-container>We recommend adding a </ng-container><strong>personal email</strong> <ng-container> as backup so you always have access to your ORCID account if you change jobs or roles.</ng-container>
-    </div>
-  </div>
-</div>
-</ng-container>
-
 
 <ng-container *ngIf="this.emails.hasError('backendError', 'email')">
   <div
@@ -126,12 +100,16 @@ <h3>This looks like a professional email</h3>>
 </div>
 </ng-container>
 
+
+  <!-- EMAIL CONFIRMATION  -->
+
     <!-- <mat-label i18n="@@register.confirmEmail"
     >Confirm primary email</mat-label
   > -->
     <div class="input-container">
 
-      <mat-form-field appearance="outline" *ngIf="!reactivation?.isReactivation" [hideRequiredMarker]="true">
+      <mat-form-field appearance="outline" *ngIf="!reactivation?.isReactivation" [hideRequiredMarker]="true" [ngClass]="{'valid-password-input' : emailsAreValid}">
+        <mat-icon *ngIf="emailsAreValid"  matSuffix>done</mat-icon>
 
         <input formControlName="confirmEmail" matInput (paste)="(false)" appTrim autocomplete="off" type="email"
           id="confirm-email-input" [attr.labelConfirmEmail]="labelConfirmEmail"
@@ -142,12 +120,13 @@ <h3>This looks like a professional email</h3>>
         Please confirm your email
       </mat-error>
       <mat-error *ngIf="
-        this.emails.hasError('email', 'confirmEmail') ||
-        this.emails.hasError('pattern', 'confirmEmail')
+      emailConfirmationFormTouched &&
+        (this.emails.hasError('email', 'confirmEmail') ||
+        this.emails.hasError('pattern', 'confirmEmail'))
       " i18n="@@register.invalidEmail">
         Invalid email format
       </mat-error>
-      <mat-error *ngIf="this.emails.hasError('mismatch', 'confirmEmail')" i18n="@@register.confirmationEmailNotMatch">
+      <mat-error *ngIf="this.emails.hasError('mismatch', 'confirmEmail') && emailConfirmationFormTouched" i18n="@@register.confirmationEmailNotMatch">
         Email confirmation does not match
       </mat-error>
       <mat-error *ngIf="this.emails.hasError('backendError', 'emails.confirmEmail')">
@@ -159,6 +138,57 @@ <h3>This looks like a professional email</h3>>
       </mat-error>
     </div>
 
+
+    <ng-container *ngIf="personalEmail && emailConfirmationValid">
+      <div
+      class="announce"
+    >
+      <div>
+        <img src="/assets/vectors/personal-email-icon.svg"  aria-hidden="true">
+      </div>
+      <div class="content">
+        <div i18n="@@account.warningDuplicated">
+          <h3 class="orc-font-body"> This looks like a personal email</h3>     </div>
+        <div>
+        <ng-container> Add a </ng-container><strong>professional email</strong> <ng-container> as backup so we can better recommend affiliations and other related data to you.  </ng-container>    </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-container *ngIf="undefinedEmail  && emailConfirmationValid">
+    <div
+    class="announce"
+  >
+    <div>
+      <img src="/assets/vectors/undefined-email-icon.svg"  aria-hidden="true">
+    </div>
+    <div class="content">
+      <div i18n="@@account.warningDuplicated">
+        <h3 class="orc-font-body"> Add another email to secure your account</h3>     </div>
+      <div>
+      Adding an additional email as backup helps secure your account and make sure you can always sign in.  </div>
+    </div>
+  </div>
+  </ng-container>
+
+  <ng-container *ngIf="professionalEmail && emailConfirmationValid">
+    <div
+    class="announce"
+    >
+    <div>
+     <img src="/assets/vectors/professional-email-icon.svg" aria-hidden="true">
+    </div>
+    <div class="content">
+      <div i18n="@@account.warningDuplicated">
+        <h3 class="orc-font-body">This looks like a professional email</h3>
+      </div>
+      <div>
+        <ng-container>We recommend adding a </ng-container><strong>personal email</strong> <ng-container> as backup so you always have access to your ORCID account if you change jobs or roles.</ng-container>
+      </div>
+    </div>
+  </div>
+  </ng-container>
+
     <!-- ADDITIONAL EMAILS -->
     <app-form-personal-additional-emails [additionalEmails]="additionalEmails"></app-form-personal-additional-emails>
   </ng-container>
diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
index 5098ee4f24..f9f60a6f47 100644
--- a/src/app/register2/components/form-personal/form-personal.component.ts
+++ b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -72,6 +72,7 @@ export class FormPersonalComponent
   `
   professionalEmail: boolean
   personalEmail: boolean
+  undefinedEmail: boolean
   constructor(
     private _register: Register2Service,
     private _reactivationService: ReactivationService
@@ -120,6 +121,7 @@ export class FormPersonalComponent
       console.log(value)
       this.professionalEmail = value.category === 'PROFESSIONAL'
       this.personalEmail = value.category === 'PERSONAL'
+      this.undefinedEmail = value.category === 'UNDEFINED'
 
     })
 
@@ -228,12 +230,26 @@ export class FormPersonalComponent
   }
 
   get emailFormTouched() {
-    // console.log((this.form.controls?.emails as any)?.email)
     return ((this.form.controls.emails as any).controls?.email as any)?.touched
   }
 
   get emailConfirmationFormTouched() {
-    // console.log((this.form.controls?.emails as any)?.email)
     return ((this.form.controls.emails as any).controls?.confirmEmail as any)?.touched
   }
+
+  get emailValid() {
+    return ((this.form.controls.emails as any).controls?.email as any).valid
+  }
+
+  get emailConfirmationValid() {
+    return ((this.form.controls.emails as any).controls?.confirmEmail as any).valid
+  }
+
+  get givenNameFormTouched() {
+    return this.form.controls.givenNames?.touched
+}
+
+get emailsAreValid() {
+  return this.emailConfirmationValid && this.emailValid
 }
+  }
diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
index 3b46d02f8b..b5bdbb1da0 100644
--- a/src/app/register2/components/register2.scss-theme.scss
+++ b/src/app/register2/components/register2.scss-theme.scss
@@ -8,6 +8,7 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
+
   .step-actions {
     border-color: mat.get-color-from-palette($background,
         ui-background-light);
@@ -39,6 +40,39 @@
     }
   }
 
+  .announce {
+    background-color: mat.get-color-from-palette($background, state-info-lightest);
+    border-color: mat.get-color-from-palette($foreground,
+        'state-info-dark'
+      ) !important;
+
+    mat-icon {
+      color: mat.get-color-from-palette($foreground,
+          'state-info-dark'
+        ) !important;
+    }
+  }
+
+  ::ng-deep {
+    .valid-password-input {
+      mat-icon {
+        color: map-get($foreground, 'brand-primary-dark');
+      }
+      .mat-form-field-outline {
+        color: map-get($foreground, 'brand-primary-dark');
+        background-color:     mat.get-color-from-palette(
+          $background,
+          brand-primary-lightest
+        );
+
+      }
+
+
+    }
+  }
+
+
+
 }
 
-@include theme($orcid-app-theme);
\ No newline at end of file
+@include theme($orcid-app-theme);
diff --git a/src/app/register2/components/register2.style.scss b/src/app/register2/components/register2.style.scss
index cb82894202..7f14626844 100644
--- a/src/app/register2/components/register2.style.scss
+++ b/src/app/register2/components/register2.style.scss
@@ -96,7 +96,7 @@ mat-label.orc-font-small-print {
 }
 
 
-.info {
+.info, .announce{
   .content div:not(:last-child) {
     margin-bottom: 16px;
   }
@@ -111,10 +111,14 @@ mat-label.orc-font-small-print {
     margin: 0;
   }
 
-  mat-icon {
+  mat-icon, img{
     margin-right: 16px;
   }
 
+  h3 {
+    margin: 0;
+  }
+
 
 }
 
diff --git a/src/app/types/register.email-category.ts b/src/app/types/register.email-category.ts
index fd2180fc9a..807af30464 100644
--- a/src/app/types/register.email-category.ts
+++ b/src/app/types/register.email-category.ts
@@ -1,4 +1,4 @@
-export type EmailCategory = 'PROFESSIONAL' | 'PERSONAL' | 'UNKNOWN'
+export type EmailCategory = 'PROFESSIONAL' | 'PERSONAL' | 'UNDEFINED'
 
 export interface EmailCategoryEndpoint {
   category: EmailCategory
diff --git a/src/assets/scss/material.light-theme.scss b/src/assets/scss/material.light-theme.scss
index aa1a7631dd..3bf87b9f90 100644
--- a/src/assets/scss/material.light-theme.scss
+++ b/src/assets/scss/material.light-theme.scss
@@ -55,6 +55,7 @@
       state-notice-dark: $state-notice-dark,
       state-notice-darkest: $state-notice-darkest,
       state-warning-dark: $state-warning-dark,
+      state-info-dark: $state-info-dark,
       text-dark-mid: $text-dark-mid,
       text-dark-high: $text-dark-high,
       text-light-high: $text-light-high,
diff --git a/src/assets/scss/material.palettes.scss b/src/assets/scss/material.palettes.scss
index 992098c47f..b91867de92 100644
--- a/src/assets/scss/material.palettes.scss
+++ b/src/assets/scss/material.palettes.scss
@@ -155,3 +155,7 @@ $dark-primary-background: #f6f6f6;
 
 $state-info-dark: #1565c0;
 $state-info-lightest: #bbdefb;
+
+
+$state-info-darkest: #0D47A1;
+$state-info-lightest: #F1F8FE;
diff --git a/src/assets/vectors/personal-email-icon.svg b/src/assets/vectors/personal-email-icon.svg
index 4143b6a0bc..e66b4f6aff 100644
--- a/src/assets/vectors/personal-email-icon.svg
+++ b/src/assets/vectors/personal-email-icon.svg
@@ -1,5 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="fingerprint_FILL0_wght400_GRAD0_opsz24 1">
-<path id="Vector" d="M3.25003 9.6499C3.13336 9.56657 3.06253 9.4624 3.03753 9.3374C3.01253 9.2124 3.05003 9.08324 3.15003 8.9499C4.18336 7.53324 5.4792 6.43324 7.03753 5.6499C8.59586 4.86657 10.2584 4.4749 12.025 4.4749C13.7917 4.4749 15.4584 4.85407 17.025 5.6124C18.5917 6.37074 19.9 7.46657 20.95 8.8999C21.0667 9.0499 21.1042 9.18324 21.0625 9.2999C21.0209 9.41657 20.95 9.51657 20.85 9.5999C20.75 9.68324 20.6334 9.72074 20.5 9.7124C20.3667 9.70407 20.25 9.63324 20.15 9.4999C19.2334 8.1999 18.0542 7.20407 16.6125 6.5124C15.1709 5.82074 13.6417 5.4749 12.025 5.4749C10.4084 5.4749 8.8917 5.82074 7.47503 6.5124C6.05836 7.20407 4.88336 8.1999 3.95003 9.4999C3.85003 9.6499 3.73336 9.73324 3.60003 9.7499C3.4667 9.76657 3.35003 9.73324 3.25003 9.6499ZM14.85 21.9749C13.1167 21.5416 11.7 20.6791 10.6 19.3874C9.50003 18.0957 8.95003 16.5166 8.95003 14.6499C8.95003 13.8166 9.25003 13.1166 9.85003 12.5499C10.45 11.9832 11.175 11.6999 12.025 11.6999C12.875 11.6999 13.6 11.9832 14.2 12.5499C14.8 13.1166 15.1 13.8166 15.1 14.6499C15.1 15.1999 15.3084 15.6624 15.725 16.0374C16.1417 16.4124 16.6334 16.5999 17.2 16.5999C17.7667 16.5999 18.25 16.4124 18.65 16.0374C19.05 15.6624 19.25 15.1999 19.25 14.6499C19.25 12.7166 18.5417 11.0916 17.125 9.7749C15.7084 8.45824 14.0167 7.7999 12.05 7.7999C10.0834 7.7999 8.3917 8.45824 6.97503 9.7749C5.55836 11.0916 4.85003 12.7082 4.85003 14.6249C4.85003 15.0249 4.88753 15.5249 4.96253 16.1249C5.03753 16.7249 5.2167 17.4249 5.50003 18.2249C5.55003 18.3749 5.54586 18.5082 5.48753 18.6249C5.4292 18.7416 5.33336 18.8249 5.20003 18.8749C5.0667 18.9249 4.93753 18.9207 4.81253 18.8624C4.68753 18.8041 4.60003 18.7082 4.55003 18.5749C4.30003 17.9249 4.12086 17.2791 4.01253 16.6374C3.9042 15.9957 3.85003 15.3332 3.85003 14.6499C3.85003 12.4332 4.6542 10.5749 6.26253 9.0749C7.87086 7.5749 9.7917 6.8249 12.025 6.8249C14.275 6.8249 16.2084 7.5749 17.825 9.0749C19.4417 10.5749 20.25 12.4332 20.25 14.6499C20.25 15.4832 19.9542 16.1791 19.3625 16.7374C18.7709 17.2957 18.05 17.5749 17.2 17.5749C16.35 17.5749 15.6209 17.2957 15.0125 16.7374C14.4042 16.1791 14.1 15.4832 14.1 14.6499C14.1 14.0999 13.8959 13.6374 13.4875 13.2624C13.0792 12.8874 12.5917 12.6999 12.025 12.6999C11.4584 12.6999 10.9709 12.8874 10.5625 13.2624C10.1542 13.6374 9.95003 14.0999 9.95003 14.6499C9.95003 16.2666 10.4292 17.6166 11.3875 18.6999C12.3459 19.7832 13.5834 20.5416 15.1 20.9749C15.25 21.0249 15.35 21.1082 15.4 21.2249C15.45 21.3416 15.4584 21.4666 15.425 21.5999C15.3917 21.7166 15.325 21.8166 15.225 21.8999C15.125 21.9832 15 22.0082 14.85 21.9749ZM6.50003 4.4249C6.3667 4.50824 6.23336 4.52907 6.10003 4.4874C5.9667 4.44574 5.8667 4.35824 5.80003 4.2249C5.73336 4.09157 5.7167 3.97074 5.75003 3.8624C5.78336 3.75407 5.8667 3.65824 6.00003 3.5749C6.93336 3.0749 7.90836 2.69157 8.92503 2.4249C9.9417 2.15824 10.975 2.0249 12.025 2.0249C13.0917 2.0249 14.1334 2.15407 15.15 2.4124C16.1667 2.67074 17.15 3.04157 18.1 3.5249C18.25 3.60824 18.3375 3.70824 18.3625 3.8249C18.3875 3.94157 18.375 4.05824 18.325 4.1749C18.275 4.29157 18.1917 4.38324 18.075 4.4499C17.9584 4.51657 17.8167 4.50824 17.65 4.4249C16.7667 3.9749 15.8542 3.62907 14.9125 3.3874C13.9709 3.14574 13.0084 3.0249 12.025 3.0249C11.0584 3.0249 10.1084 3.1374 9.17503 3.3624C8.2417 3.5874 7.35003 3.94157 6.50003 4.4249ZM9.45003 21.6249C8.4667 20.5916 7.71253 19.5374 7.18753 18.4624C6.66253 17.3874 6.40003 16.1166 6.40003 14.6499C6.40003 13.1332 6.95003 11.8541 8.05003 10.8124C9.15003 9.77074 10.475 9.2499 12.025 9.2499C13.575 9.2499 14.9084 9.77074 16.025 10.8124C17.1417 11.8541 17.7 13.1332 17.7 14.6499C17.7 14.7999 17.6542 14.9207 17.5625 15.0124C17.4709 15.1041 17.35 15.1499 17.2 15.1499C17.0667 15.1499 16.95 15.1041 16.85 15.0124C16.75 14.9207 16.7 14.7999 16.7 14.6499C16.7 13.3999 16.2375 12.3541 15.3125 11.5124C14.3875 10.6707 13.2917 10.2499 12.025 10.2499C10.7584 10.2499 9.67086 10.6707 8.76253 11.5124C7.8542 12.3541 7.40003 13.3999 7.40003 14.6499C7.40003 15.9999 7.63336 17.1457 8.10003 18.0874C8.5667 19.0291 9.25003 19.9749 10.15 20.9249C10.25 21.0249 10.3 21.1416 10.3 21.2749C10.3 21.4082 10.25 21.5249 10.15 21.6249C10.05 21.7249 9.93336 21.7749 9.80003 21.7749C9.6667 21.7749 9.55003 21.7249 9.45003 21.6249ZM17 19.9249C15.5167 19.9249 14.2292 19.4249 13.1375 18.4249C12.0459 17.4249 11.5 16.1666 11.5 14.6499C11.5 14.5166 11.5459 14.3999 11.6375 14.2999C11.7292 14.1999 11.85 14.1499 12 14.1499C12.15 14.1499 12.2709 14.1999 12.3625 14.2999C12.4542 14.3999 12.5 14.5166 12.5 14.6499C12.5 15.8999 12.95 16.9249 13.85 17.7249C14.75 18.5249 15.8 18.9249 17 18.9249C17.1 18.9249 17.2417 18.9166 17.425 18.8999C17.6084 18.8832 17.8 18.8582 18 18.8249C18.15 18.7916 18.2792 18.8124 18.3875 18.8874C18.4959 18.9624 18.5667 19.0749 18.6 19.2249C18.6334 19.3582 18.6084 19.4749 18.525 19.5749C18.4417 19.6749 18.3334 19.7416 18.2 19.7749C17.9 19.8582 17.6375 19.9041 17.4125 19.9124C17.1875 19.9207 17.05 19.9249 17 19.9249Z" fill="white"/>
-</g>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="#0D47A1"/>
+<path d="M7.25003 13.6499C7.13336 13.5666 7.06253 13.4624 7.03753 13.3374C7.01253 13.2124 7.05003 13.0832 7.15003 12.9499C8.18336 11.5332 9.4792 10.4332 11.0375 9.6499C12.5959 8.86657 14.2584 8.4749 16.025 8.4749C17.7917 8.4749 19.4584 8.85407 21.025 9.6124C22.5917 10.3707 23.9 11.4666 24.95 12.8999C25.0667 13.0499 25.1042 13.1832 25.0625 13.2999C25.0209 13.4166 24.95 13.5166 24.85 13.5999C24.75 13.6832 24.6334 13.7207 24.5 13.7124C24.3667 13.7041 24.25 13.6332 24.15 13.4999C23.2334 12.1999 22.0542 11.2041 20.6125 10.5124C19.1709 9.82074 17.6417 9.4749 16.025 9.4749C14.4084 9.4749 12.8917 9.82074 11.475 10.5124C10.0584 11.2041 8.88336 12.1999 7.95003 13.4999C7.85003 13.6499 7.73336 13.7332 7.60003 13.7499C7.4667 13.7666 7.35003 13.7332 7.25003 13.6499ZM18.85 25.9749C17.1167 25.5416 15.7 24.6791 14.6 23.3874C13.5 22.0957 12.95 20.5166 12.95 18.6499C12.95 17.8166 13.25 17.1166 13.85 16.5499C14.45 15.9832 15.175 15.6999 16.025 15.6999C16.875 15.6999 17.6 15.9832 18.2 16.5499C18.8 17.1166 19.1 17.8166 19.1 18.6499C19.1 19.1999 19.3084 19.6624 19.725 20.0374C20.1417 20.4124 20.6334 20.5999 21.2 20.5999C21.7667 20.5999 22.25 20.4124 22.65 20.0374C23.05 19.6624 23.25 19.1999 23.25 18.6499C23.25 16.7166 22.5417 15.0916 21.125 13.7749C19.7084 12.4582 18.0167 11.7999 16.05 11.7999C14.0834 11.7999 12.3917 12.4582 10.975 13.7749C9.55836 15.0916 8.85003 16.7082 8.85003 18.6249C8.85003 19.0249 8.88753 19.5249 8.96253 20.1249C9.03753 20.7249 9.2167 21.4249 9.50003 22.2249C9.55003 22.3749 9.54586 22.5082 9.48753 22.6249C9.4292 22.7416 9.33336 22.8249 9.20003 22.8749C9.0667 22.9249 8.93753 22.9207 8.81253 22.8624C8.68753 22.8041 8.60003 22.7082 8.55003 22.5749C8.30003 21.9249 8.12086 21.2791 8.01253 20.6374C7.9042 19.9957 7.85003 19.3332 7.85003 18.6499C7.85003 16.4332 8.6542 14.5749 10.2625 13.0749C11.8709 11.5749 13.7917 10.8249 16.025 10.8249C18.275 10.8249 20.2084 11.5749 21.825 13.0749C23.4417 14.5749 24.25 16.4332 24.25 18.6499C24.25 19.4832 23.9542 20.1791 23.3625 20.7374C22.7709 21.2957 22.05 21.5749 21.2 21.5749C20.35 21.5749 19.6209 21.2957 19.0125 20.7374C18.4042 20.1791 18.1 19.4832 18.1 18.6499C18.1 18.0999 17.8959 17.6374 17.4875 17.2624C17.0792 16.8874 16.5917 16.6999 16.025 16.6999C15.4584 16.6999 14.9709 16.8874 14.5625 17.2624C14.1542 17.6374 13.95 18.0999 13.95 18.6499C13.95 20.2666 14.4292 21.6166 15.3875 22.6999C16.3459 23.7832 17.5834 24.5416 19.1 24.9749C19.25 25.0249 19.35 25.1082 19.4 25.2249C19.45 25.3416 19.4584 25.4666 19.425 25.5999C19.3917 25.7166 19.325 25.8166 19.225 25.8999C19.125 25.9832 19 26.0082 18.85 25.9749ZM10.5 8.4249C10.3667 8.50824 10.2334 8.52907 10.1 8.4874C9.9667 8.44574 9.8667 8.35824 9.80003 8.2249C9.73336 8.09157 9.7167 7.97074 9.75003 7.8624C9.78336 7.75407 9.8667 7.65824 10 7.5749C10.9334 7.0749 11.9084 6.69157 12.925 6.4249C13.9417 6.15824 14.975 6.0249 16.025 6.0249C17.0917 6.0249 18.1334 6.15407 19.15 6.4124C20.1667 6.67074 21.15 7.04157 22.1 7.5249C22.25 7.60824 22.3375 7.70824 22.3625 7.8249C22.3875 7.94157 22.375 8.05824 22.325 8.1749C22.275 8.29157 22.1917 8.38324 22.075 8.4499C21.9584 8.51657 21.8167 8.50824 21.65 8.4249C20.7667 7.9749 19.8542 7.62907 18.9125 7.3874C17.9709 7.14574 17.0084 7.0249 16.025 7.0249C15.0584 7.0249 14.1084 7.1374 13.175 7.3624C12.2417 7.5874 11.35 7.94157 10.5 8.4249ZM13.45 25.6249C12.4667 24.5916 11.7125 23.5374 11.1875 22.4624C10.6625 21.3874 10.4 20.1166 10.4 18.6499C10.4 17.1332 10.95 15.8541 12.05 14.8124C13.15 13.7707 14.475 13.2499 16.025 13.2499C17.575 13.2499 18.9084 13.7707 20.025 14.8124C21.1417 15.8541 21.7 17.1332 21.7 18.6499C21.7 18.7999 21.6542 18.9207 21.5625 19.0124C21.4709 19.1041 21.35 19.1499 21.2 19.1499C21.0667 19.1499 20.95 19.1041 20.85 19.0124C20.75 18.9207 20.7 18.7999 20.7 18.6499C20.7 17.3999 20.2375 16.3541 19.3125 15.5124C18.3875 14.6707 17.2917 14.2499 16.025 14.2499C14.7584 14.2499 13.6709 14.6707 12.7625 15.5124C11.8542 16.3541 11.4 17.3999 11.4 18.6499C11.4 19.9999 11.6334 21.1457 12.1 22.0874C12.5667 23.0291 13.25 23.9749 14.15 24.9249C14.25 25.0249 14.3 25.1416 14.3 25.2749C14.3 25.4082 14.25 25.5249 14.15 25.6249C14.05 25.7249 13.9334 25.7749 13.8 25.7749C13.6667 25.7749 13.55 25.7249 13.45 25.6249ZM21 23.9249C19.5167 23.9249 18.2292 23.4249 17.1375 22.4249C16.0459 21.4249 15.5 20.1666 15.5 18.6499C15.5 18.5166 15.5459 18.3999 15.6375 18.2999C15.7292 18.1999 15.85 18.1499 16 18.1499C16.15 18.1499 16.2709 18.1999 16.3625 18.2999C16.4542 18.3999 16.5 18.5166 16.5 18.6499C16.5 19.8999 16.95 20.9249 17.85 21.7249C18.75 22.5249 19.8 22.9249 21 22.9249C21.1 22.9249 21.2417 22.9166 21.425 22.8999C21.6084 22.8832 21.8 22.8582 22 22.8249C22.15 22.7916 22.2792 22.8124 22.3875 22.8874C22.4959 22.9624 22.5667 23.0749 22.6 23.2249C22.6334 23.3582 22.6084 23.4749 22.525 23.5749C22.4417 23.6749 22.3334 23.7416 22.2 23.7749C21.9 23.8582 21.6375 23.9041 21.4125 23.9124C21.1875 23.9207 21.05 23.9249 21 23.9249Z" fill="white"/>
 </svg>
diff --git a/src/assets/vectors/undefined-email-icon.svg b/src/assets/vectors/undefined-email-icon.svg
new file mode 100644
index 0000000000..ad15b23993
--- /dev/null
+++ b/src/assets/vectors/undefined-email-icon.svg
@@ -0,0 +1,5 @@
+
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="16" r="16" fill="#0D47A1"/>
+<path d="M8 24C7.45 24 6.97917 23.8042 6.5875 23.4125C6.19583 23.0208 6 22.55 6 22V10C6 9.45 6.19583 8.97917 6.5875 8.5875C6.97917 8.19583 7.45 8 8 8H24C24.55 8 25.0208 8.19583 25.4125 8.5875C25.8042 8.97917 26 9.45 26 10V22C26 22.55 25.8042 23.0208 25.4125 23.4125C25.0208 23.8042 24.55 24 24 24H8ZM16 17L8 12V22H24V12L16 17ZM16 15L24 10H8L16 15ZM8 12V10V22V12Z" fill="white"/>
+</svg>

From 765faa893dfef6dc31c14db55d96425f341417de Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Wed, 15 Nov 2023 14:39:41 -0600
Subject: [PATCH 09/21] fix password inputs

---
 .../form-password/form-password.component.html           | 8 ++++----
 .../form-password/form-password.component.scss           | 4 ++++
 .../form-password.component.scss-theme.scss              | 2 +-
 .../components/form-password/form-password.component.ts  | 9 +++++++++
 .../register2/pages/register/register2.component.html    | 4 ++--
 5 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/app/register2/components/form-password/form-password.component.html b/src/app/register2/components/form-password/form-password.component.html
index 92925a08fc..1b6fbb774c 100644
--- a/src/app/register2/components/form-password/form-password.component.html
+++ b/src/app/register2/components/form-password/form-password.component.html
@@ -1,6 +1,6 @@
 <div [formGroup]="form">
   <div class="input-container">
-    <mat-label i18n="@@register.password">Password</mat-label>
+    <mat-label i18n="@@register.password" [ngClass]="{'error': passwordTouched && form.controls.password.errors}">Password</mat-label>
 
     <mat-form-field appearance="outline" [hideRequiredMarker]="true">
       <input
@@ -52,18 +52,18 @@
 
 <div class="input-container">
   <mat-form-field appearance="outline" [hideRequiredMarker]="true">
-    <mat-label i18n="@@register.confirmPassword">Confirm password</mat-label>
     <input
       formControlName="passwordConfirm"
       type="password"
       matInput
       autocomplete="new-password"
       id="password-confirm-input"
+      [placeholder]="labelConfirmPassword"
     />
 
   </mat-form-field>
   <mat-error
-  *ngIf="form.hasError('required', 'passwordConfirm')"
+  *ngIf="form.hasError('required', 'passwordConfirm') && confirmPasswordTouched"
   i18n="@@register.passwordConfirmationRequired"
 >
   Retype your password
@@ -129,5 +129,5 @@
 </ng-template>
 
 <ng-template #invalid>
-  <mat-icon class="no-checked" class="material-icons-outlined">circle</mat-icon>
+  <mat-icon class="no-checked" class="material-icons-outlined">radio_button_unchecked </mat-icon>
 </ng-template>
diff --git a/src/app/register2/components/form-password/form-password.component.scss b/src/app/register2/components/form-password/form-password.component.scss
index 528c724645..97c36c4f1f 100644
--- a/src/app/register2/components/form-password/form-password.component.scss
+++ b/src/app/register2/components/form-password/form-password.component.scss
@@ -21,3 +21,7 @@ ol {
 }
 
 
+mat-icon {
+  margin-inline-end: 8px;
+}
+
diff --git a/src/app/register2/components/form-password/form-password.component.scss-theme.scss b/src/app/register2/components/form-password/form-password.component.scss-theme.scss
index c28f2bcc6d..46a484dcc7 100644
--- a/src/app/register2/components/form-password/form-password.component.scss-theme.scss
+++ b/src/app/register2/components/form-password/form-password.component.scss-theme.scss
@@ -14,7 +14,7 @@
 
 
   ::ng-deep  .mat-icon{
-    color: map-get($background, 'ui-background-lightest');
+    color: map-get($background, 'ui-background-light');
   }
 
 
diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts
index 34e173d34f..6e5b9364b1 100644
--- a/src/app/register2/components/form-password/form-password.component.ts
+++ b/src/app/register2/components/form-password/form-password.component.ts
@@ -41,6 +41,7 @@ import { BaseForm } from '../BaseForm'
 export class FormPasswordComponent extends BaseForm implements OnInit {
   labelInfo = $localize`:@@register.ariaLabelInfoPassword:info about password`
   labelClose = $localize`:@@register.ariaLabelClose:close`
+  labelConfirmPassword = $localize`:@@register.confirmPassword:Confirm password`
   @ViewChild(`#passwordPopover`) passwordPopover
   @ViewChild(`#passwordPopoverTrigger`) passwordPopoverTrigger
   hasNumberPattern = HAS_NUMBER
@@ -112,4 +113,12 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
       fn(registerForm)
     })
   }
+
+  get confirmPasswordTouched() {
+    return this.form.controls['passwordConfirm'].touched
+  }
+  get passwordTouched() {
+    return this.form.controls['password'].touched
+  }
+
 }
diff --git a/src/app/register2/pages/register/register2.component.html b/src/app/register2/pages/register/register2.component.html
index 6bde1f73c1..838825d820 100644
--- a/src/app/register2/pages/register/register2.component.html
+++ b/src/app/register2/pages/register/register2.component.html
@@ -8,7 +8,7 @@
           labelPosition="bottom"
           class="orcid-stepper-wizard"
         >
-          <mat-step [stepControl]="FormGroupStepA">
+          <!-- <mat-step [stepControl]="FormGroupStepA">
             <ng-template matStepLabel i18n="@@register.personalData"
               >Personal data</ng-template
             >
@@ -17,7 +17,7 @@
               [reactivation]="reactivation"
               #stepComponentA
             ></app-step-a>
-          </mat-step>
+          </mat-step> -->
           <mat-step [stepControl]="FormGroupStepB">
             <ng-template matStepLabel i18n="@@register.securityAndNotifications"
               >Security and notifications</ng-template

From 7ee4a9ec078694581304b76240455bc2d45ffe25 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 09:43:43 -0600
Subject: [PATCH 10/21] General round of details

---
 .../components/step-a/step-a.component.html   |  1 +
 .../components/step-a/step-a.component.ts     |  5 ++
 src/app/register2/components/BaseForm.ts      |  2 -
 .../form-anti-robots.component.scss           |  7 ++
 .../form-notifications.component.html         |  4 +-
 .../form-password.component.html              | 22 +++---
 .../form-password/form-password.component.ts  |  8 +++
 ...-personal-additional-emails.component.html |  4 +-
 .../form-personal.component.html              | 12 ++--
 .../form-personal/form-personal.component.ts  |  5 --
 .../form-terms/form-terms.component.html      |  5 +-
 .../form-terms/form-terms.component.ts        |  5 ++
 .../form-visibility.component.html            | 22 ++++--
 .../components/register2.scss-theme.scss      | 15 ++++
 .../register2/components/register2.style.scss | 70 +++++++++++++++++--
 .../components/step-a/step-a.component.html   |  5 +-
 .../components/step-a/step-a.component.ts     |  6 +-
 .../pages/register/register2.component.html   |  6 +-
 18 files changed, 157 insertions(+), 47 deletions(-)

diff --git a/src/app/register/components/step-a/step-a.component.html b/src/app/register/components/step-a/step-a.component.html
index 08acd7fa0c..96363ad153 100644
--- a/src/app/register/components/step-a/step-a.component.html
+++ b/src/app/register/components/step-a/step-a.component.html
@@ -61,6 +61,7 @@
           matStepperNext
           color="primary"
           i18n="@@shared.next"
+          (click)="goForward()"
         >
           NEXT
         </button>
diff --git a/src/app/register/components/step-a/step-a.component.ts b/src/app/register/components/step-a/step-a.component.ts
index 303369d6ae..5b1aad2af3 100644
--- a/src/app/register/components/step-a/step-a.component.ts
+++ b/src/app/register/components/step-a/step-a.component.ts
@@ -22,6 +22,11 @@ export class StepAComponent extends BaseStepDirective {
   }
   infoSiteBaseUrl = environment.INFO_SITE
 
+  goForward() {
+    console.log('goForward' , this.formGroup.controls.personal)
+    this.formGroup.markAllAsTouched()
+  }
+
   goBack() {
     this._platform
       .get()
diff --git a/src/app/register2/components/BaseForm.ts b/src/app/register2/components/BaseForm.ts
index c599d948b8..e39bdf24b4 100644
--- a/src/app/register2/components/BaseForm.ts
+++ b/src/app/register2/components/BaseForm.ts
@@ -13,9 +13,7 @@ export abstract class BaseForm implements ControlValueAccessor, AsyncValidator {
   public onTouchedFunction
   constructor() {}
   writeValue(val: any): void {
-    console.log('val', val)
     if (val != null && val !== undefined && val !== '') {
-      console.log('val go', val)
 
       this.form.setValue(val, { emitEvent: true })
       // Trigger registerOnChange custom function by calling form.updateValueAndValidity
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss b/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss
index e69de29bb2..b919dd4393 100644
--- a/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss
@@ -0,0 +1,7 @@
+:host {
+  ::ng-deep {
+    div > div {
+      width: 100% !important;
+    }
+  }
+}
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.html b/src/app/register2/components/form-notifications/form-notifications.component.html
index a1ee26a6f7..21bd4b38ae 100644
--- a/src/app/register2/components/form-notifications/form-notifications.component.html
+++ b/src/app/register2/components/form-notifications/form-notifications.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="form">
-  <h3 class="orc-font-body" i18n="@@account.tipsFeaturesEmail">
+  <h2 class="orc-font-body" i18n="@@account.tipsFeaturesEmail">
     Tips & features email
-  </h3>
+  </h2>
   <p i18n="@@account.weOccasionallySend">
     We occasionally send out an email with information on new features and tips
     for getting the best out of your ORCID record.
diff --git a/src/app/register2/components/form-password/form-password.component.html b/src/app/register2/components/form-password/form-password.component.html
index 1b6fbb774c..9292aed9d0 100644
--- a/src/app/register2/components/form-password/form-password.component.html
+++ b/src/app/register2/components/form-password/form-password.component.html
@@ -1,8 +1,10 @@
 <div [formGroup]="form">
+  <h2 i18n="@@register.yourPasswords" class="orc-font-body no-top-margin">Your password</h2>
   <div class="input-container">
-    <mat-label i18n="@@register.password" [ngClass]="{'error': passwordTouched && form.controls.password.errors}">Password</mat-label>
+    <mat-label i18n="@@register.password" class="orc-font-small-print" [ngClass]="{'error': passwordTouched && form.controls.password.errors}">Password</mat-label>
 
-    <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+    <mat-form-field appearance="outline" [hideRequiredMarker]="true" [ngClass]="{'valid-password-input' : confirmPasswordValid && passwordValid}">
+      <mat-icon *ngIf="confirmPasswordValid && passwordValid" matSuffix>done</mat-icon>
       <input
         formControlName="password"
         type="password"
@@ -12,19 +14,20 @@
       />
     </mat-form-field>
     <mat-error
-    *ngIf="form.controls.password.touched && form.hasError('required', 'password')"
+    *ngIf="passwordTouched && form.hasError('required', 'password')"
     i18n="@@register.passwordRequired"
   >
     A password is required
   </mat-error>
   <mat-error
-    *ngIf="form.hasError('passwordIsEqualToTheEmail', 'password')"
+    *ngIf="passwordTouched && form.hasError('passwordIsEqualToTheEmail', 'password')"
     i18n="@@register.passwordNotEmail"
   >
     Password must not be the same as your email address
   </mat-error>
   <mat-error
     *ngIf="
+       passwordTouched &&
       !form.hasError('required', 'password') &&
       (form.hasError('minlength', 'password') ||
         form.hasError('pattern', 'password'))
@@ -34,12 +37,14 @@
     Password must match all pattern requirements
   </mat-error>
   <mat-error
-    *ngIf="form.hasError('maxlength', 'password')"
+    *ngIf="       passwordTouched &&
+     form.hasError('maxlength', 'password')"
     i18n="@@register.passwordIsToLongV2"
   >
     Password must be between 8 and 256 characters
   </mat-error>
-  <mat-error *ngIf="this.form.hasError('backendError', 'password')">
+  <mat-error *ngIf="       passwordTouched &&
+   this.form.hasError('backendError', 'password')">
     <div
       *ngFor="let error of this.form.getError('backendError', 'password')"
     >
@@ -51,7 +56,8 @@
   </div>
 
 <div class="input-container">
-  <mat-form-field appearance="outline" [hideRequiredMarker]="true">
+  <mat-form-field appearance="outline" [hideRequiredMarker]="true" [ngClass]="{'valid-password-input' : confirmPasswordValid && passwordValid}">
+    <mat-icon *ngIf="confirmPasswordValid && passwordValid" matSuffix>done</mat-icon>
     <input
       formControlName="passwordConfirm"
       type="password"
@@ -83,7 +89,7 @@
 </mat-error>
 </div>
 
-  <p i18n="@@register.yourPasswordHas">Your password has</p>
+  <p i18n="@@register.yourPasswordHas">Your password has:</p>
   <ol>
     <li>
       <ng-container
diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts
index 6e5b9364b1..f9ff752be5 100644
--- a/src/app/register2/components/form-password/form-password.component.ts
+++ b/src/app/register2/components/form-password/form-password.component.ts
@@ -121,4 +121,12 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
     return this.form.controls['password'].touched
   }
 
+  get confirmPasswordValid() {
+    return this.form.controls['passwordConfirm'].valid
+  }
+  get passwordValid() {
+    return this.form.controls['password'].valid
+  }
+
+
 }
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
index 55e5caded6..083bae495a 100644
--- a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
@@ -1,10 +1,10 @@
 <ng-container [formGroup]="additionalEmails">
-  <div class="input-container" *ngFor="
+  <div class="input-container margin-top-12" *ngFor="
       let additionalEmailControl of additionalEmails?.controls | keyvalue;
       index as i
     ">
 
-    <mat-label class="orc-font-small-print">
+    <mat-label class="orc-font-small-print ">
       <ng-container i18n="@@register.additionalEmails">Additional email</ng-container>
       {{ i !== 0 ? i : '' }}
       <label i18n="@@register.optional">(Optional)</label>
diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
index 27f47ead27..6eca9e4f55 100644
--- a/src/app/register2/components/form-personal/form-personal.component.html
+++ b/src/app/register2/components/form-personal/form-personal.component.html
@@ -1,5 +1,5 @@
 <ng-container [formGroup]="form">
-  <h2 i18n="@@register.yourNames" class="orc-font-body">Your names</h2>
+  <h2 i18n="@@register.yourNames" class="orc-font-body margin-top-12">Your names</h2>
 
 
   <div class="input-container">
@@ -47,7 +47,7 @@ <h2 i18n="@@register.yourNames" class="orc-font-body">Your names</h2>
 
 
 
-  <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addresses</h2>
+  <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">Your email addresses</h2>
   <ng-container formGroupName="emails">
     <div class="input-container">
 
@@ -66,12 +66,12 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addres
       </mat-error>
       <mat-error *ngIf="
         (this.emails.hasError('email', 'email') ||
-        this.emails.hasError('pattern', 'email')) && emailFormTouched
+        this.emails.hasError('pattern', 'email'))
       " i18n="@@register.invalidEmail">
         Invalid email format
       </mat-error>
 
-      <mat-error *ngIf="this.emails.hasError('backendError', 'email') && nextButtonWasClicked">
+      <mat-error *ngIf="this.emails.hasError('backendError', 'email') && emailFormTouched">
         <div *ngFor="let error of this.emails.getError('backendError', 'email')">
           <app-backend-error [errorCode]="error" [value]="emails.get('email').value"></app-backend-error>
         </div>
@@ -113,10 +113,10 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body">Your email addres
 
         <input formControlName="confirmEmail" matInput (paste)="(false)" appTrim autocomplete="off" type="email"
           id="confirm-email-input" [attr.labelConfirmEmail]="labelConfirmEmail"
-          [attr.placeholder]="labelConfirmEmail" [disabled]="this.emails.hasError('backendError', 'email') || !emailFormTouched || form.hasError('required', 'emails.email')" />
+          [attr.placeholder]="labelConfirmEmail" />
 
       </mat-form-field>
-      <mat-error *ngIf="emailConfirmationFormTouched && form.hasError('required', 'emails.confirmEmail')" i18n="@@register.confirmEmailRequired">
+      <mat-error *ngIf="emailFormTouched && form.hasError('required', 'emails.confirmEmail')" i18n="@@register.confirmEmailRequired">
         Please confirm your email
       </mat-error>
       <mat-error *ngIf="
diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
index f9f60a6f47..7bf24f9be7 100644
--- a/src/app/register2/components/form-personal/form-personal.component.ts
+++ b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -28,9 +28,6 @@ import { BaseForm } from '../BaseForm'
 import { ErrorStateMatcher } from '@angular/material/core'
 export class MyErrorStateMatcher implements ErrorStateMatcher {
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
-
-    // !((this.emails.hasError('backendError', 'email') && !nextButtonWasClicked))
-    console.log(control)
     const isSubmitted = form && form.submitted;
     return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
   }
@@ -61,7 +58,6 @@ export class FormPersonalComponent
   extends BaseForm
   implements OnInit, AfterViewInit {
   matcher = new MyErrorStateMatcher;
-  @Input() nextButtonWasClicked: boolean
   @Input() reactivation: ReactivationLocal
   @ViewChild('firstInput') firstInput: ElementRef
   labelInfoAboutName = $localize`:@@register.ariaLabelInfo:info about names`
@@ -118,7 +114,6 @@ export class FormPersonalComponent
         return this._register.getEmailCategory(emailDomain)
       }
     )).subscribe(value => {
-      console.log(value)
       this.professionalEmail = value.category === 'PROFESSIONAL'
       this.personalEmail = value.category === 'PERSONAL'
       this.undefinedEmail = value.category === 'UNDEFINED'
diff --git a/src/app/register2/components/form-terms/form-terms.component.html b/src/app/register2/components/form-terms/form-terms.component.html
index 78e3d503a0..b92f3b9b87 100644
--- a/src/app/register2/components/form-terms/form-terms.component.html
+++ b/src/app/register2/components/form-terms/form-terms.component.html
@@ -1,4 +1,4 @@
-<h3 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h3>
+<h2 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h2>
 
 <ng-container [formGroup]="form">
   <mat-checkbox
@@ -47,7 +47,7 @@ <h3 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h3>
       }}"
       target="_blank"
       rel="noopener noreferrer"
-      class="mat-button-font"
+      class="mat-button-font no-margin-top"
       i18n="@@register.moreInformation"
     >
       More information on how ORCID process your data.
@@ -55,6 +55,7 @@ <h3 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h3>
   </mat-checkbox>
   <mat-error
     *ngIf="
+    termsOfUseWasTouched &&
       (form.hasError('required', 'termsOfUse') ||
         form.hasError('required', 'dataProcessed')) &&
       errorState
diff --git a/src/app/register2/components/form-terms/form-terms.component.ts b/src/app/register2/components/form-terms/form-terms.component.ts
index f05c57c6fc..4b19af78bf 100644
--- a/src/app/register2/components/form-terms/form-terms.component.ts
+++ b/src/app/register2/components/form-terms/form-terms.component.ts
@@ -34,6 +34,7 @@ import { BaseForm } from '../BaseForm'
 })
 // tslint:disable-next-line: class-name
 export class FormTermsComponent extends BaseForm implements OnInit, DoCheck {
+  nextButtonWasClicked
   environment = environment
   constructor(
     private _register: Register2Service,
@@ -68,4 +69,8 @@ export class FormTermsComponent extends BaseForm implements OnInit, DoCheck {
       this._errorStateMatcher.isErrorState(this.termsOfUse, null) ||
       this._errorStateMatcher.isErrorState(this.dataProcessed, null)
   }
+
+  termsOfUseWasTouched() {
+    return this.form.controls.termsOfUse.touched
+  }
 }
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.html b/src/app/register2/components/form-visibility/form-visibility.component.html
index b6dca7fbb8..d09e58cb2b 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.html
+++ b/src/app/register2/components/form-visibility/form-visibility.component.html
@@ -6,15 +6,16 @@
       name, and more. You control this content and who can see it.
     </ng-container>
   </p>
-  <h2 class="orc-font-body mat-subheading-2" i18n="@@register.visibility">
+  <fieldset>
+  <legend class="orc-font-body mat-subheading-2" i18n="@@register.visibility">
     Visibility settings
-  </h2>
+  </legend>
 
   <p i18n="@@register.visibilityDescription3">
     By default, what visibility should be given to new items added to your ORCID
     Record?
   </p>
-  <p>
+  <div class="margin-tb-32">
     <mat-radio-group
       formControlName="activitiesVisibilityDefault"
       color="primary"
@@ -88,22 +89,29 @@ <h2 class="orc-font-body mat-subheading-2" i18n="@@register.visibility">
         </div>
       </mat-radio-button>
     </mat-radio-group>
-    <mat-error
+
+    <p>
+      <mat-error
       *ngIf="
         form.hasError('required', 'activitiesVisibilityDefault') && errorState
       "
       i18n="@@register.visibilityRequired"
       >Please choose a default visibility setting.</mat-error
     >
-  </p>
-  <p>
+    </p>
+  </div>
+</fieldset>
+  <p class="no-top-margin">
     <a
       class="mat-button-font"
       href="https://support.orcid.org/hc/articles/360006897614"
       target="_blank"
       rel="noopener noreferrer"
       i18n="@@register.visibilityDescription2"
-      >More information on visibility settings</a
+      >More information on visibility settings
+
+      <mat-icon>open_in_new</mat-icon>
+      </a
     >
   </p>
 </ng-container>
diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
index b5bdbb1da0..8974df6e9a 100644
--- a/src/app/register2/components/register2.scss-theme.scss
+++ b/src/app/register2/components/register2.scss-theme.scss
@@ -12,6 +12,17 @@
   .step-actions {
     border-color: mat.get-color-from-palette($background,
         ui-background-light);
+    .mat-raised-button.mat-primary {
+      background-color: mat.get-color-from-palette($primary, 700);
+      }
+      a {
+        color: mat.get-color-from-palette($primary, 700);
+      }
+  }
+
+  a > mat-icon {
+    color: mat.get-color-from-palette($primary, 200) !important;
+
   }
 
   ::ng-deep .valid {
@@ -69,6 +80,10 @@
 
 
     }
+
+
+
+
   }
 
 
diff --git a/src/app/register2/components/register2.style.scss b/src/app/register2/components/register2.style.scss
index 7f14626844..1b28a9e176 100644
--- a/src/app/register2/components/register2.style.scss
+++ b/src/app/register2/components/register2.style.scss
@@ -3,9 +3,35 @@ a {
   font-weight: normal;
 }
 
-h2 {
-  margin-top: 14px;
+.no-top-margin{
+  margin-top: 0;
+}
+
+h2.margin-top-12, .step-actions.margin-top-12,.margin-top-12 {
+  margin-top: 12px;
+}
+
+h2,legend {
+  margin-top: 32px;
   margin-bottom: 14px;
+  font-weight: bold;
+}
+
+fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+
+}
+
+.margin-tb-32 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+app-form-terms {
+  margin-bottom: 32px;
+
 }
 
 mat-card-title img {
@@ -19,6 +45,8 @@ mat-card-title img {
 
 mat-label.orc-font-small-print {
   font-weight: bold;
+  display: block;
+  margin-bottom: 4px;
 
   label {
     font-weight: normal;
@@ -27,7 +55,11 @@ mat-label.orc-font-small-print {
 
 .step-actions {
   border-top: 1px solid;
-  padding-top: 24px;
+  padding-top: 32px;
+  a {
+    font-style: italic;
+
+  }
 }
 
 :host ::ng-deep {
@@ -127,6 +159,15 @@ mat-label.orc-font-small-print {
 // MATERIAL OVERWRITES
 
 ::ng-deep {
+
+
+
+
+
+  .mat-horizontal-stepper-content {
+    max-width: 580px;
+  }
+
   .mat-horizontal-stepper-wrapper {
     .mat-horizontal-stepper-header-container {
       display: none;
@@ -138,6 +179,9 @@ mat-label.orc-font-small-print {
   mat-vertical-stepper.orcid-stepper-wizard mat-card p,
   mat-horizontal-stepper.orcid-stepper-wizard mat-card p {
     margin-bottom: 16px;
+
+
+
   }
 
 
@@ -152,7 +196,23 @@ mat-label.orc-font-small-print {
 
   mat-vertical-stepper.orcid-stepper-wizard,
   mat-horizontal-stepper.orcid-stepper-wizard {
+
+
+
     mat-card {
+      a > mat-icon {
+        margin-bottom: -11px;
+        margin-left: 4px;
+        font-size: 17px;
+      }
+
+      mat-card-content.mat-card-content {
+        margin-top: 32px !important;
+      }
+
+      mat-radio-button:not(:last-child) {
+        margin-bottom: 32px;
+      }
 
 
       .step-actions {
@@ -160,10 +220,12 @@ mat-label.orc-font-small-print {
         flex-direction: column;
         justify-content: space-between;
         width: 100%;
-        margin-top: 0px;
+        margin-top: 29px;
         gap: 12px;
       }
     }
   }
 
 }
+
+
diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
index e8fb42d7de..84c8289e3e 100644
--- a/src/app/register2/components/step-a/step-a.component.html
+++ b/src/app/register2/components/step-a/step-a.component.html
@@ -48,17 +48,16 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
       <app-form-personal
         formControlName="personal"
         [reactivation]="reactivation"
-        [nextButtonWasClicked]="nextButtonWasClicked"
       >
       </app-form-personal>
-      <div class="step-actions">
+      <div class="step-actions margin-top-12">
         <button
           id="step-a-next-button"
           mat-raised-button
           matStepperNext
           i18n="@@shared.next"
           color="primary"
-          (click)="nextButton()"
+          (click)="nextButton2()"
 
         >
           NEXT STEP
diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts
index 3258d209d0..798b733515 100644
--- a/src/app/register2/components/step-a/step-a.component.ts
+++ b/src/app/register2/components/step-a/step-a.component.ts
@@ -16,7 +16,6 @@ import { BaseStepDirective } from '../BaseStep'
 })
 export class StepAComponent extends BaseStepDirective {
   @Input() reactivation: ReactivationLocal
-  nextButtonWasClicked = false
 
   constructor(private _platform: PlatformInfoService, private _router: Router) {
     super()
@@ -50,8 +49,9 @@ export class StepAComponent extends BaseStepDirective {
       })
   }
 
-  nextButton () {
-    this.nextButtonWasClicked = true
+  nextButton2 () {
+    console.log(( this.formGroup.controls.personal as any).controls)
+    this.formGroup.controls.personal.markAllAsTouched()
   }
 
   signIn() {
diff --git a/src/app/register2/pages/register/register2.component.html b/src/app/register2/pages/register/register2.component.html
index 838825d820..db7dcf6ef1 100644
--- a/src/app/register2/pages/register/register2.component.html
+++ b/src/app/register2/pages/register/register2.component.html
@@ -8,7 +8,7 @@
           labelPosition="bottom"
           class="orcid-stepper-wizard"
         >
-          <!-- <mat-step [stepControl]="FormGroupStepA">
+          <mat-step [stepControl]="FormGroupStepA">
             <ng-template matStepLabel i18n="@@register.personalData"
               >Personal data</ng-template
             >
@@ -17,7 +17,7 @@
               [reactivation]="reactivation"
               #stepComponentA
             ></app-step-a>
-          </mat-step> -->
+          </mat-step>
           <mat-step [stepControl]="FormGroupStepB">
             <ng-template matStepLabel i18n="@@register.securityAndNotifications"
               >Security and notifications</ng-template
@@ -28,7 +28,7 @@
               [personalData]="personalData"
               [reactivation]="reactivation"
             ></app-step-b>
-          </mat-step>FormGroupStepD
+          </mat-step>
           <mat-step [stepControl]="FormGroupStepC">
             <ng-template matStepLabel i18n="@@register.visibilityAndTerm"
               >Visibility and terms</ng-template

From 758383f353873896e24f1c5a9777e304f8df61c2 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 13:25:03 -0600
Subject: [PATCH 11/21] Fix error managment issues

---
 src/app/app-routing.module.ts                 | 11 ++-
 src/app/guards/register-toggl.guard.ts        | 42 +++++++----
 src/app/register2/components/BaseForm.ts      |  2 +
 .../form-password/form-password.component.ts  |  5 +-
 ...-personal-additional-emails.component.html |  1 +
 ...rm-personal-additional-emails.component.ts |  3 +
 .../form-personal.component.html              | 17 +++--
 .../form-personal/form-personal.component.ts  | 11 ++-
 .../form-terms/form-terms.component.html      |  3 +-
 .../form-terms/form-terms.component.ts        |  8 +-
 .../components/step-a/step-a.component.html   |  8 +-
 .../components/step-a/step-a.component.ts     |  5 +-
 .../components/step-b/step-b.component.html   |  9 ++-
 .../components/step-b/step-b.component.ts     |  1 +
 .../components/step-c-t/step-c.component.html |  7 +-
 .../components/step-d/step-d.component.html   | 10 ++-
 .../components/step-d/step-d.component.ts     |  1 +
 .../pages/register/register2.component.ts     | 74 +++++++++----------
 18 files changed, 129 insertions(+), 89 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 3d0573fbd9..900250dd4e 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -17,6 +17,7 @@ import { LanguageGuard } from './guards/language.guard'
 import { ThirdPartySigninCompletedGuard } from './guards/third-party-signin-completed.guard'
 import { TwoFactorSigninGuard } from './guards/two-factor-signin.guard'
 import { AuthenticatedNoDelegatorGuard } from './guards/authenticated-no-delagator.guard'
+import { RegisterTogglGuard } from './guards/register-toggl.guard'
 
 const routes: Routes = [
   {
@@ -89,11 +90,13 @@ const routes: Routes = [
   },
   {
     path: ApplicationRoutes.register,
+    canMatch: [RegisterTogglGuard],
     canActivateChild: [LanguageGuard, RegisterGuard],
-    loadChildren: () =>
-      (!localStorage.getItem('register2') &&
-       import('./register/register.module').then((m) => m.RegisterModule)) || 
-       import('./register2/register.module').then((m) => m.Register2Module),
+    loadChildren: () => {
+      return localStorage.getItem('REGISTRATION_2_0') === 'enable'?
+       import('./register/register.module').then((m) => m.RegisterModule):
+       import('./register2/register.module').then((m) => m.Register2Module)
+    }
   },
   {
     path: ApplicationRoutes.search,
diff --git a/src/app/guards/register-toggl.guard.ts b/src/app/guards/register-toggl.guard.ts
index d77b600899..6369c3224e 100644
--- a/src/app/guards/register-toggl.guard.ts
+++ b/src/app/guards/register-toggl.guard.ts
@@ -5,10 +5,9 @@ import {
   RouterStateSnapshot,
   UrlTree,
 } from '@angular/router'
-import { combineLatest, Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+import { delay, map } from 'rxjs/operators'
 
-import { ApplicationRoutes } from '../constants'
 import { UserService } from '../core'
 import { TogglzService } from '../core/togglz/togglz.service'
 
@@ -16,19 +15,32 @@ import { TogglzService } from '../core/togglz/togglz.service'
   providedIn: 'root',
 })
 export class RegisterTogglGuard {
-  constructor(
-    private _userInfo: UserService,
-    private _router: Router,
-    private _togglz: TogglzService
-  ) { }
-  canActivate(
+  constructor(private _user: UserService, private _router: Router, private _togglz: TogglzService) {}
+
+  canMatch(
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
-  ):
-    | Observable<boolean | UrlTree>
-    | Promise<boolean | UrlTree>
-    | boolean
-    | UrlTree {
-    return false
+  ): Observable<boolean | UrlTree> | UrlTree | boolean {
+    return this._togglz.getStateOf('REGISTRATION_2_0').pipe(
+      map((session) => {
+        if (session) {
+        localStorage.setItem('REGISTRATION_2_0', 'enabled')
+        }else {
+          localStorage.removeItem('REGISTRATION_2_0')
+        }
+
+        console.log('writed!')
+        // PLEASE NOTE THE PURPOSE OF THIS GUARD IS TO SET THE 'REGISTRATION_2_0' togglz
+        // before the registration module is loaded.
+        // This is done by setting the localStorage item 'REGISTRATION_2_0'.
+
+        // DESPITE OF THIS BEEN A GUARD, IT DOES NOT PREVENT THE USER FROM ACCESSING THE REGISTRATION MODULE.
+        // IT JUST HELPS SETTING THE LOGIC TWO WHICH VERSION OF THE REGISTRATION MODULE SHOULD BE LOADED.
+
+        return true
+      }),
+      /// wait 1 second
+      delay(1000),
+    )
   }
 }
diff --git a/src/app/register2/components/BaseForm.ts b/src/app/register2/components/BaseForm.ts
index e39bdf24b4..475a050d1d 100644
--- a/src/app/register2/components/BaseForm.ts
+++ b/src/app/register2/components/BaseForm.ts
@@ -13,6 +13,7 @@ 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 })
@@ -26,6 +27,7 @@ export abstract class BaseForm implements ControlValueAccessor, AsyncValidator {
   }
   registerOnChange(fn: any): void {
     this.form.valueChanges.subscribe((value) => {
+      console.log('valueChanges', value)
       fn(value)
     })
   }
diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts
index f9ff752be5..3a0c486dc7 100644
--- a/src/app/register2/components/form-password/form-password.component.ts
+++ b/src/app/register2/components/form-password/form-password.component.ts
@@ -47,6 +47,7 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
   hasNumberPattern = HAS_NUMBER
   hasLetterOrSymbolPattern = HAS_LETTER_OR_SYMBOL
   @Input() personalData: RegisterForm
+  @Input() nextButtonWasClicked: boolean
   constructor(private _register: Register2Service) {
     super()
   }
@@ -115,10 +116,10 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
   }
 
   get confirmPasswordTouched() {
-    return this.form.controls['passwordConfirm'].touched
+    return this.form.controls['passwordConfirm'].touched || this.nextButtonWasClicked
   }
   get passwordTouched() {
-    return this.form.controls['password'].touched
+    return this.form.controls['password'].touched ||  this.nextButtonWasClicked
   }
 
   get confirmPasswordValid() {
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
index 083bae495a..42c23342d1 100644
--- a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
@@ -16,6 +16,7 @@
 
     </mat-form-field>
     <mat-error *ngIf="
+    additionalEmailsTouched &&
     additionalEmails.hasError('email', additionalEmailControl.key) ||
     additionalEmails.hasError('pattern', additionalEmailControl.key)
   " i18n="@@register.invalidEmail">
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
index 81f615e6dd..fafa287f8e 100644
--- a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
@@ -90,4 +90,7 @@ export class FormPersonalAdditionalEmailsComponent implements AfterViewInit {
   public ngAfterViewInit() {
     this._ref.detectChanges()
   }
+  get additionalEmailsTouched () {
+    return this.additionalEmails.touched
+  }
 }
diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
index 6eca9e4f55..485486da38 100644
--- a/src/app/register2/components/form-personal/form-personal.component.html
+++ b/src/app/register2/components/form-personal/form-personal.component.html
@@ -30,15 +30,16 @@ <h2 i18n="@@register.yourNames" class="orc-font-body margin-top-12">Your names</
     <mat-form-field appearance="outline" [hideRequiredMarker]="true">
 
       <input id="family-names-input" formControlName="familyNames" matInput [placeholder]="labelFamilyNamePlaceholder" />
-      <mat-error *ngIf="form.hasError('illegalName', 'familyNames')" i18n="@@register.invalidName">
-        Invalid name characters or format
-      </mat-error>
-      <mat-error *ngIf="form.hasError('backendError', 'familyNames')">
-        <div *ngFor="let error of form.getError('backendError', 'familyNames')">
-          <app-backend-error [errorCode]="error"></app-backend-error>
-        </div>
-      </mat-error>
+
     </mat-form-field>
+    <mat-error *ngIf="familyNamesFormTouched && form.hasError('illegalName', 'familyNames')" i18n="@@register.invalidName">
+      Invalid name characters or format
+    </mat-error>
+    <mat-error *ngIf="familyNamesFormTouched && form.hasError('backendError', 'familyNames')">
+      <div *ngFor="let error of form.getError('backendError', 'familyNames')">
+        <app-backend-error [errorCode]="error"></app-backend-error>
+      </div>
+    </mat-error>
   </div>
 
 
diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
index 7bf24f9be7..bf577fe182 100644
--- a/src/app/register2/components/form-personal/form-personal.component.ts
+++ b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -58,8 +58,11 @@ export class FormPersonalComponent
   extends BaseForm
   implements OnInit, AfterViewInit {
   matcher = new MyErrorStateMatcher;
+  @Input() nextButtonWasClicked: boolean
   @Input() reactivation: ReactivationLocal
   @ViewChild('firstInput') firstInput: ElementRef
+  @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective;
+
   labelInfoAboutName = $localize`:@@register.ariaLabelInfo:info about names`
   labelClose = $localize`:@@register.ariaLabelClose:close`
   labelConfirmEmail = $localize`:@@register.confirmEmail:Confirm primary email`
@@ -225,11 +228,15 @@ export class FormPersonalComponent
   }
 
   get emailFormTouched() {
-    return ((this.form.controls.emails as any).controls?.email as any)?.touched
+    return ((this.form.controls.emails as any).controls?.email as any)?.touched || this.nextButtonWasClicked
   }
 
   get emailConfirmationFormTouched() {
-    return ((this.form.controls.emails as any).controls?.confirmEmail as any)?.touched
+    return ((this.form.controls.emails as any).controls?.confirmEmail as any)?.touched || this.nextButtonWasClicked
+  }
+
+  get familyNamesFormTouched() {
+    return this.form.controls.familyNames?.touched || this.nextButtonWasClicked
   }
 
   get emailValid() {
diff --git a/src/app/register2/components/form-terms/form-terms.component.html b/src/app/register2/components/form-terms/form-terms.component.html
index b92f3b9b87..9e8736f61c 100644
--- a/src/app/register2/components/form-terms/form-terms.component.html
+++ b/src/app/register2/components/form-terms/form-terms.component.html
@@ -57,8 +57,7 @@ <h2 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h2>
     *ngIf="
     termsOfUseWasTouched &&
       (form.hasError('required', 'termsOfUse') ||
-        form.hasError('required', 'dataProcessed')) &&
-      errorState
+        form.hasError('required', 'dataProcessed'))
     "
     i18n="@@register.termsRequired"
     >To continue creating your ORCID iD you must accept the terms of use and
diff --git a/src/app/register2/components/form-terms/form-terms.component.ts b/src/app/register2/components/form-terms/form-terms.component.ts
index 4b19af78bf..d85d7762cc 100644
--- a/src/app/register2/components/form-terms/form-terms.component.ts
+++ b/src/app/register2/components/form-terms/form-terms.component.ts
@@ -1,4 +1,4 @@
-import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
+import { Component, DoCheck, forwardRef, Input, OnInit } from '@angular/core'
 import {
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
@@ -34,7 +34,7 @@ import { BaseForm } from '../BaseForm'
 })
 // tslint:disable-next-line: class-name
 export class FormTermsComponent extends BaseForm implements OnInit, DoCheck {
-  nextButtonWasClicked
+  @Input() nextButtonWasClicked: boolean
   environment = environment
   constructor(
     private _register: Register2Service,
@@ -70,7 +70,7 @@ export class FormTermsComponent extends BaseForm implements OnInit, DoCheck {
       this._errorStateMatcher.isErrorState(this.dataProcessed, null)
   }
 
-  termsOfUseWasTouched() {
-    return this.form.controls.termsOfUse.touched
+  get termsOfUseWasTouched() {
+    return this.form.controls.termsOfUse.touched || this.nextButtonWasClicked
   }
 }
diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
index 84c8289e3e..5dcef4caa1 100644
--- a/src/app/register2/components/step-a/step-a.component.html
+++ b/src/app/register2/components/step-a/step-a.component.html
@@ -48,6 +48,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
       <app-form-personal
         formControlName="personal"
         [reactivation]="reactivation"
+        [nextButtonWasClicked]="nextButtonWasClicked"
       >
       </app-form-personal>
       <div class="step-actions margin-top-12">
@@ -62,7 +63,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
         >
           NEXT STEP
         </button>
-        <a
+        <button
           mat-button
           color="primary"
           (click)="goBack()"
@@ -71,8 +72,9 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.back"
           id="step-a-back-button"
         >
-          Cancel registration
-      </a>
+        <a>
+          Cancel registration</a>
+      </button>
       </div>
     </form>
   </mat-card-content>
diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts
index 798b733515..cfaa0bcc43 100644
--- a/src/app/register2/components/step-a/step-a.component.ts
+++ b/src/app/register2/components/step-a/step-a.component.ts
@@ -16,6 +16,7 @@ import { BaseStepDirective } from '../BaseStep'
 })
 export class StepAComponent extends BaseStepDirective {
   @Input() reactivation: ReactivationLocal
+  nextButtonWasClicked: boolean
 
   constructor(private _platform: PlatformInfoService, private _router: Router) {
     super()
@@ -50,8 +51,8 @@ export class StepAComponent extends BaseStepDirective {
   }
 
   nextButton2 () {
-    console.log(( this.formGroup.controls.personal as any).controls)
-    this.formGroup.controls.personal.markAllAsTouched()
+    this.nextButtonWasClicked = true
+    // this.formGroup.controls.personal.markAsTouched()
   }
 
   signIn() {
diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
index 117a2a269c..c9949166be 100644
--- a/src/app/register2/components/step-b/step-b.component.html
+++ b/src/app/register2/components/step-b/step-b.component.html
@@ -31,6 +31,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
       <app-form-password
         formControlName="password"
         [personalData]="personalData"
+        [nextButtonWasClicked]="nextButtonWasClicked"
       ></app-form-password>
       <div class="step-actions">
         <button
@@ -38,6 +39,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           mat-raised-button
           color="primary"
           matStepperNext
+          (click)="nextButtonWasClicked = true"
         >
           <ng-container
             *ngIf="!reactivation?.isReactivation"
@@ -52,7 +54,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
             REACTIVATE
           </ng-container>
         </button>
-        <a
+        <button
           mat-button
           color="primary"
           matStepperPrevious
@@ -60,8 +62,9 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.previousStep"
           id="step-c-back-button"
         >
-          Previous Step
-        </a>
+        <a>
+          Previous Step</a>
+        </button>
       </div>
     </form>
   </mat-card-content>
diff --git a/src/app/register2/components/step-b/step-b.component.ts b/src/app/register2/components/step-b/step-b.component.ts
index 2edad54dc2..4d95c7d7bd 100644
--- a/src/app/register2/components/step-b/step-b.component.ts
+++ b/src/app/register2/components/step-b/step-b.component.ts
@@ -11,6 +11,7 @@ import { BaseStepDirective } from '../BaseStep'
 export class StepBComponent extends BaseStepDirective {
   @Input() personalData
   @Input() reactivation: ReactivationLocal
+  nextButtonWasClicked = false;
 
   constructor() {
     super()
diff --git a/src/app/register2/components/step-c-t/step-c.component.html b/src/app/register2/components/step-c-t/step-c.component.html
index 1119db1c70..67aae4b25d 100644
--- a/src/app/register2/components/step-c-t/step-c.component.html
+++ b/src/app/register2/components/step-c-t/step-c.component.html
@@ -60,7 +60,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
             REACTIVATE
           </ng-container>
         </button>
-        <a
+        <button
           mat-button
           color="primary"
           matStepperPrevious
@@ -68,8 +68,9 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.previousStep"
           id="step-c-back-button"
         >
-          Previous Step
-        </a>
+        <a>
+          Previous Step</a>
+        </button>
       </div>
     </form>
   </mat-card-content>
diff --git a/src/app/register2/components/step-d/step-d.component.html b/src/app/register2/components/step-d/step-d.component.html
index eb8527f5f0..30bad9cc99 100644
--- a/src/app/register2/components/step-d/step-d.component.html
+++ b/src/app/register2/components/step-d/step-d.component.html
@@ -37,7 +37,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
       <app-form-notifications
         formControlName="sendOrcidNews"
       ></app-form-notifications>
-      <app-form-terms formControlName="termsOfUse"></app-form-terms>
+      <app-form-terms formControlName="termsOfUse" [nextButtonWasClicked]="nextButtonWasClicked"></app-form-terms>
       <app-form-anti-robots formControlName="captcha"></app-form-anti-robots>
       <div class="step-actions">
         <button
@@ -45,6 +45,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           mat-raised-button
           color="primary"
           [disabled]="loading"
+          (click)="nextButtonWasClicked = true"
         >
           <ng-container
             *ngIf="!reactivation?.isReactivation"
@@ -59,7 +60,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
             REACTIVATE
           </ng-container>
         </button>
-        <a
+        <button
           mat-button
           color="primary"
           matStepperPrevious
@@ -67,8 +68,9 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.previousStep"
           id="step-c-back-button"
         >
-          Previous Step
-        </a>
+        <a>
+          Previous Step</a>
+        </button>
       </div>
     </form>
   </mat-card-content>
diff --git a/src/app/register2/components/step-d/step-d.component.ts b/src/app/register2/components/step-d/step-d.component.ts
index a24cd37c86..3d7d8ca6bd 100644
--- a/src/app/register2/components/step-d/step-d.component.ts
+++ b/src/app/register2/components/step-d/step-d.component.ts
@@ -15,6 +15,7 @@ import { BaseStepDirective } from '../BaseStep'
 export class StepDComponent extends BaseStepDirective {
   @Input() loading
   @Input() reactivation: ReactivationLocal
+  nextButtonWasClicked = false
 
   constructor() {
     super()
diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts
index 3612777a57..ec21904f8e 100644
--- a/src/app/register2/pages/register/register2.component.ts
+++ b/src/app/register2/pages/register/register2.component.ts
@@ -220,48 +220,48 @@ export class Register2Component implements OnInit, AfterViewInit {
     }
   }
 
-  openDialog(duplicateRecordsSearchResults: SearchResults): void {
-    const duplicateRecords = duplicateRecordsSearchResults['expanded-result']
-    const dialogParams = {
-      width: `1078px`,
-      height: `600px`,
-      maxWidth: `90vw`,
+  // openDialog(duplicateRecordsSearchResults: SearchResults): void {
+  //   const duplicateRecords = duplicateRecordsSearchResults['expanded-result']
+  //   const dialogParams = {
+  //     width: `1078px`,
+  //     height: `600px`,
+  //     maxWidth: `90vw`,
 
-      data: {
-        duplicateRecords,
-        titleLabel: $localize`:@@register.titleLabel:Could this be you?`,
-        // tslint:disable-next-line: max-line-length
-        bodyLabel: $localize`:@@register.bodyLabel:We found some accounts with your name, which means you may have already created an ORCID iD using a different email address. Before creating an account, please confirm that none of these records belong to you. Not sure if any of these are you?`,
-        contactLabel: $localize`:@@register.contactLabel:Contact us.`,
-        firstNameLabel: $localize`:@@register.firstNameLabel:First Name`,
-        lastNameLabel: $localize`:@@register.lastNameLabel:Last Name`,
-        affiliationsLabel: $localize`:@@register.affiliationsLabel:Affiliations`,
-        dateCreatedLabel: $localize`:@@register.dateCreatedLabel:Date Created`,
-        viewRecordLabel: $localize`:@@register.viewRecordLabel:View Record`,
-        signinLabel: $localize`:@@register.signinLabel:I ALREADY HAVE AN ID, GO BACK TO SIGN IN`,
-        continueLabel: $localize`:@@register.continueLabel:NONE OF THESE ARE ME, CONTINUE WITH REGISTRATION`,
-      },
-    }
+  //     data: {
+  //       duplicateRecords,
+  //       titleLabel: $localize`:@@register.titleLabel:Could this be you?`,
+  //       // tslint:disable-next-line: max-line-length
+  //       bodyLabel: $localize`:@@register.bodyLabel:We found some accounts with your name, which means you may have already created an ORCID iD using a different email address. Before creating an account, please confirm that none of these records belong to you. Not sure if any of these are you?`,
+  //       contactLabel: $localize`:@@register.contactLabel:Contact us.`,
+  //       firstNameLabel: $localize`:@@register.firstNameLabel:First Name`,
+  //       lastNameLabel: $localize`:@@register.lastNameLabel:Last Name`,
+  //       affiliationsLabel: $localize`:@@register.affiliationsLabel:Affiliations`,
+  //       dateCreatedLabel: $localize`:@@register.dateCreatedLabel:Date Created`,
+  //       viewRecordLabel: $localize`:@@register.viewRecordLabel:View Record`,
+  //       signinLabel: $localize`:@@register.signinLabel:I ALREADY HAVE AN ID, GO BACK TO SIGN IN`,
+  //       continueLabel: $localize`:@@register.continueLabel:NONE OF THESE ARE ME, CONTINUE WITH REGISTRATION`,
+  //     },
+  //   }
 
-    if (this.platform.tabletOrHandset) {
-      dialogParams['maxWidth'] = '95vw'
-      dialogParams['maxHeight'] = '95vh'
-    }
+  //   if (this.platform.tabletOrHandset) {
+  //     dialogParams['maxWidth'] = '95vw'
+  //     dialogParams['maxHeight'] = '95vh'
+  //   }
 
-    const dialogRef = this._dialog.open(IsThisYouComponent, dialogParams)
+  //   const dialogRef = this._dialog.open(IsThisYouComponent, dialogParams)
 
-    dialogRef.afterClosed().subscribe((confirmRegistration) => {
-      if (!confirmRegistration) {
-        this._router.navigate(['signin'])
-      }
-    })
-  }
+  //   dialogRef.afterClosed().subscribe((confirmRegistration) => {
+  //     if (!confirmRegistration) {
+  //       this._router.navigate(['signin'])
+  //     }
+  //   })
+  // }
 
-  selectionChange(event: StepperSelectionEvent) {
-    if (this.platform.columns4 || this.platform.columns8) {
-      this.focusCurrentStep(event)
-    }
-  }
+  // 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

From 2f5c3e37bbbba82db38ebf58dd41cfcacdd4c074 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 15:04:17 -0600
Subject: [PATCH 12/21] fix aria issues

---
 src/app/app-routing.module.ts                 |  10 +-
 src/app/app.component.ts                      |   5 +-
 .../register2/register2.backend-validators.ts |   3 +-
 .../core/register2/register2.form-adapter.ts  |   1 -
 src/app/core/register2/register2.service.ts   |   4 +-
 src/app/guards/register-toggl.guard.ts        |  14 +-
 src/app/layout/header/header.component.ts     |   1 -
 .../form-password.component.html              |   4 +-
 .../components/step-a/step-a.component.ts     |   2 +-
 src/app/register2/components/BaseForm.ts      |   1 -
 .../form-anti-robots.component.html           |  15 +-
 .../form-anti-robots.component.scss           |   5 +
 .../form-anti-robots.component.ts             |  12 +-
 .../form-notifications.component.spec.ts      |   4 +-
 .../form-password.component.html              | 212 +++++-----
 .../form-password.component.scss              |   2 -
 .../form-password.component.scss-theme.scss   |   5 +-
 .../form-password/form-password.component.ts  |  76 +++-
 ...-personal-additional-emails.component.html |  61 ++-
 ...rm-personal-additional-emails.component.ts |  11 +-
 .../form-personal.component.html              | 395 ++++++++++++------
 .../form-personal.component.scss              |   1 -
 .../form-personal.component.spec.ts           |   4 +-
 .../form-personal/form-personal.component.ts  | 104 ++---
 .../form-terms/form-terms.component.html      |  20 +-
 .../form-terms/form-terms.component.scss      |   2 +-
 .../form-terms/form-terms.component.ts        |   8 +-
 .../form-visibility.component.html            | 176 ++++----
 .../form-visibility.component.ts              |   1 +
 .../components/register2.scss-theme.scss      |  71 ++--
 .../register2/components/register2.style.scss |  60 +--
 .../components/step-a/step-a.component.html   |   7 +-
 .../components/step-a/step-a.component.scss   |   2 -
 .../components/step-a/step-a.component.ts     |  28 +-
 .../components/step-b/step-b.component.html   |   7 +-
 .../components/step-b/step-b.component.ts     |   8 +-
 .../components/step-c-t/step-c.component.html |   7 +-
 .../components/step-d/step-d.component.html   |  17 +-
 .../components/step-d/step-d.component.ts     |   2 +-
 .../pages/register/register2.component.ts     |   8 +-
 src/app/register2/register.module.ts          |   2 +-
 src/app/types/register.endpoint.ts            |   1 -
 src/assets/scss/material.palettes.scss        |   7 +-
 src/index.html                                |   5 +-
 44 files changed, 816 insertions(+), 575 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 900250dd4e..d291608be3 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -93,10 +93,10 @@ const routes: Routes = [
     canMatch: [RegisterTogglGuard],
     canActivateChild: [LanguageGuard, RegisterGuard],
     loadChildren: () => {
-      return localStorage.getItem('REGISTRATION_2_0') === 'enable'?
-       import('./register/register.module').then((m) => m.RegisterModule):
-       import('./register2/register.module').then((m) => m.Register2Module)
-    }
+      return localStorage.getItem('REGISTRATION_2_0') === 'enable'
+        ? import('./register/register.module').then((m) => m.RegisterModule)
+        : import('./register2/register.module').then((m) => m.Register2Module)
+    },
   },
   {
     path: ApplicationRoutes.search,
@@ -184,4 +184,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, {})],
   exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 47cfd0477e..4c749731f6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -58,7 +58,10 @@ export class AppComponent {
           this.currentRouteIsHeadlessOnOauthPage = this.showHeadlessOnOauthPage(
             platformInfo.currentRoute
           )
-          console.log('currentRouteIsHeadlessOnOauthPage', this.currentRouteIsHeadlessOnOauthPage)
+          console.log(
+            'currentRouteIsHeadlessOnOauthPage',
+            this.currentRouteIsHeadlessOnOauthPage
+          )
           this.setPlatformClasses(platformInfo)
           this.screenDirection = platformInfo.screenDirection
           if (
diff --git a/src/app/core/register2/register2.backend-validators.ts b/src/app/core/register2/register2.backend-validators.ts
index 0dc62cdb35..92abbe4f71 100644
--- a/src/app/core/register2/register2.backend-validators.ts
+++ b/src/app/core/register2/register2.backend-validators.ts
@@ -24,8 +24,7 @@ interface HasFormAdapters {
     StepA: UntypedFormGroup,
     StepB: UntypedFormGroup,
     StepC: UntypedFormGroup,
-    StepD: UntypedFormGroup,
-
+    StepD: UntypedFormGroup
   ): RegisterForm
 }
 
diff --git a/src/app/core/register2/register2.form-adapter.ts b/src/app/core/register2/register2.form-adapter.ts
index 2e8d82b4a1..f4d52ad296 100644
--- a/src/app/core/register2/register2.form-adapter.ts
+++ b/src/app/core/register2/register2.form-adapter.ts
@@ -121,7 +121,6 @@ export function Register2FormAdapterMixin<T extends Constructor<any>>(base: T) {
       StepB: UntypedFormGroup,
       StepC: UntypedFormGroup,
       StepD: UntypedFormGroup
-
     ): RegisterForm {
       return {
         ...StepA.value.personal,
diff --git a/src/app/core/register2/register2.service.ts b/src/app/core/register2/register2.service.ts
index 95a5c55a8f..a362de9d4c 100644
--- a/src/app/core/register2/register2.service.ts
+++ b/src/app/core/register2/register2.service.ts
@@ -76,7 +76,9 @@ export class Register2Service extends _RegisterServiceMixingBase {
   }
 
   getEmailCategory(email: string): Observable<EmailCategoryEndpoint> {
-    return this._http.get<any>(`${environment.API_WEB}email-domain/find-category?domain=${email}`)
+    return this._http.get<any>(
+      `${environment.API_WEB}email-domain/find-category?domain=${email}`
+    )
   }
 
   register(
diff --git a/src/app/guards/register-toggl.guard.ts b/src/app/guards/register-toggl.guard.ts
index 6369c3224e..32acc733ab 100644
--- a/src/app/guards/register-toggl.guard.ts
+++ b/src/app/guards/register-toggl.guard.ts
@@ -15,7 +15,11 @@ import { TogglzService } from '../core/togglz/togglz.service'
   providedIn: 'root',
 })
 export class RegisterTogglGuard {
-  constructor(private _user: UserService, private _router: Router, private _togglz: TogglzService) {}
+  constructor(
+    private _user: UserService,
+    private _router: Router,
+    private _togglz: TogglzService
+  ) {}
 
   canMatch(
     next: ActivatedRouteSnapshot,
@@ -24,8 +28,8 @@ export class RegisterTogglGuard {
     return this._togglz.getStateOf('REGISTRATION_2_0').pipe(
       map((session) => {
         if (session) {
-        localStorage.setItem('REGISTRATION_2_0', 'enabled')
-        }else {
+          localStorage.setItem('REGISTRATION_2_0', 'enabled')
+        } else {
           localStorage.removeItem('REGISTRATION_2_0')
         }
 
@@ -38,9 +42,7 @@ export class RegisterTogglGuard {
         // IT JUST HELPS SETTING THE LOGIC TWO WHICH VERSION OF THE REGISTRATION MODULE SHOULD BE LOADED.
 
         return true
-      }),
-      /// wait 1 second
-      delay(1000),
+      })
     )
   }
 }
diff --git a/src/app/layout/header/header.component.ts b/src/app/layout/header/header.component.ts
index 6284f6d11e..e178339add 100644
--- a/src/app/layout/header/header.component.ts
+++ b/src/app/layout/header/header.component.ts
@@ -78,7 +78,6 @@ export class HeaderComponent implements OnInit {
         path === `/${ApplicationRoutes.inbox}` ||
         path === `/${ApplicationRoutes.developerTools}` ||
         path === `/${ApplicationRoutes.register}`
-
     })
   }
 
diff --git a/src/app/register/components/form-password/form-password.component.html b/src/app/register/components/form-password/form-password.component.html
index 7c8077b9be..2e033006b1 100644
--- a/src/app/register/components/form-password/form-password.component.html
+++ b/src/app/register/components/form-password/form-password.component.html
@@ -11,9 +11,9 @@
       />
       <mat-error
         *ngIf="form.hasError('required', 'password')"
-        i18n="@@register.passwordRequired"
+        i18n="@@register.passwordRequired2"
       >
-        A password is required
+        Please enter a password
       </mat-error>
       <mat-error
         *ngIf="form.hasError('passwordIsEqualToTheEmail', 'password')"
diff --git a/src/app/register/components/step-a/step-a.component.ts b/src/app/register/components/step-a/step-a.component.ts
index 5b1aad2af3..cd10541d5e 100644
--- a/src/app/register/components/step-a/step-a.component.ts
+++ b/src/app/register/components/step-a/step-a.component.ts
@@ -23,7 +23,7 @@ export class StepAComponent extends BaseStepDirective {
   infoSiteBaseUrl = environment.INFO_SITE
 
   goForward() {
-    console.log('goForward' , this.formGroup.controls.personal)
+    console.log('goForward', this.formGroup.controls.personal)
     this.formGroup.markAllAsTouched()
   }
 
diff --git a/src/app/register2/components/BaseForm.ts b/src/app/register2/components/BaseForm.ts
index 475a050d1d..ae83992e84 100644
--- a/src/app/register2/components/BaseForm.ts
+++ b/src/app/register2/components/BaseForm.ts
@@ -15,7 +15,6 @@ export abstract class BaseForm implements ControlValueAccessor, AsyncValidator {
   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
       // require since most form controls extending this class
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.html b/src/app/register2/components/form-anti-robots/form-anti-robots.component.html
index 20bd4df427..ca9d1ebcd1 100644
--- a/src/app/register2/components/form-anti-robots/form-anti-robots.component.html
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.html
@@ -1,14 +1,17 @@
 <ng-container [formGroup]="form">
+  <mat-error
+    *ngIf="
+      captcha.hasError('captcha') &&
+      (form.controls.captcha.touched || nextButtonWasClicked)
+    "
+    i18n="@@register.recaptchaRequired"
+    >Please check the recaptcha box</mat-error
+  >
+
   <div
     appRecaptcha
     (captchaFail)="captchaFail($event)"
     (captchaLoaded)="captchaLoaded($event)"
     formControlName="captcha"
   ></div>
-
-  <mat-error
-    *ngIf="captcha.hasError('captcha') && errorState"
-    i18n="@@register.recaptchaRequired"
-    >Please check the recaptcha box</mat-error
-  >
 </ng-container>
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss b/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss
index b919dd4393..caf102980c 100644
--- a/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.scss
@@ -5,3 +5,8 @@
     }
   }
 }
+
+mat-error {
+  margin: 8px 0;
+  display: block;
+}
diff --git a/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts b/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
index 8e2db1ea13..8e4deb5254 100644
--- a/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
+++ b/src/app/register2/components/form-anti-robots/form-anti-robots.component.ts
@@ -1,4 +1,4 @@
-import { Component, DoCheck, forwardRef, OnInit } from '@angular/core'
+import { Component, DoCheck, forwardRef, Input, OnInit } from '@angular/core'
 import {
   NG_ASYNC_VALIDATORS,
   NG_VALUE_ACCESSOR,
@@ -30,10 +30,8 @@ import { BaseForm } from '../BaseForm'
     },
   ],
 })
-export class FormAntiRobotsComponent
-  extends BaseForm
-  implements OnInit, DoCheck
-{
+export class FormAntiRobotsComponent extends BaseForm implements OnInit {
+  @Input() nextButtonWasClicked
   captchaFailState = false
   captchaLoadedWithWidgetId: number
   $widgetIdUpdated = new Subject()
@@ -79,10 +77,6 @@ export class FormAntiRobotsComponent
     this.$widgetIdUpdated.next()
   }
 
-  ngDoCheck(): void {
-    this.errorState = this._errorStateMatcher.isErrorState(this.captcha, null)
-  }
-
   // OVERWRITE
   registerOnChange(fn: any) {
     merge(
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.spec.ts b/src/app/register2/components/form-notifications/form-notifications.component.spec.ts
index ddf0a6fa7e..4489db6ff2 100644
--- a/src/app/register2/components/form-notifications/form-notifications.component.spec.ts
+++ b/src/app/register2/components/form-notifications/form-notifications.component.spec.ts
@@ -2,9 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import {
-  MatLegacyDialog as MatDialog
-} from '@angular/material/legacy-dialog'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
 import { RouterTestingModule } from '@angular/router/testing'
 import { PlatformInfoService } from '../../../cdk/platform-info'
diff --git a/src/app/register2/components/form-password/form-password.component.html b/src/app/register2/components/form-password/form-password.component.html
index 9292aed9d0..29eaee5067 100644
--- a/src/app/register2/components/form-password/form-password.component.html
+++ b/src/app/register2/components/form-password/form-password.component.html
@@ -1,11 +1,28 @@
 <div [formGroup]="form">
-  <h2 i18n="@@register.yourPasswords" class="orc-font-body no-top-margin">Your password</h2>
+  <h2 i18n="@@register.yourPasswords" class="orc-font-body no-top-margin">
+    Your password
+  </h2>
   <div class="input-container">
-    <mat-label i18n="@@register.password" class="orc-font-small-print" [ngClass]="{'error': passwordTouched && form.controls.password.errors}">Password</mat-label>
+    <mat-label
+      id="password-label"
+      i18n="@@register.password"
+      class="orc-font-small-print"
+      [ngClass]="{ error: passwordTouched && form.controls.password.errors }"
+      >Password</mat-label
+    >
 
-    <mat-form-field appearance="outline" [hideRequiredMarker]="true" [ngClass]="{'valid-password-input' : confirmPasswordValid && passwordValid}">
-      <mat-icon *ngIf="confirmPasswordValid && passwordValid" matSuffix>done</mat-icon>
+    <mat-form-field
+      appearance="outline"
+      [hideRequiredMarker]="true"
+      [ngClass]="{
+        'valid-password-input': confirmPasswordValid && passwordValid
+      }"
+    >
+      <mat-icon *ngIf="confirmPasswordValid && passwordValid" matSuffix
+        >done</mat-icon
+      >
       <input
+        aria-label="password-label"
         formControlName="password"
         type="password"
         matInput
@@ -14,120 +31,119 @@ <h2 i18n="@@register.yourPasswords" class="orc-font-body no-top-margin">Your pas
       />
     </mat-form-field>
     <mat-error
-    *ngIf="passwordTouched && form.hasError('required', 'password')"
-    i18n="@@register.passwordRequired"
-  >
-    A password is required
-  </mat-error>
-  <mat-error
-    *ngIf="passwordTouched && form.hasError('passwordIsEqualToTheEmail', 'password')"
-    i18n="@@register.passwordNotEmail"
-  >
-    Password must not be the same as your email address
-  </mat-error>
-  <mat-error
-    *ngIf="
-       passwordTouched &&
-      !form.hasError('required', 'password') &&
-      (form.hasError('minlength', 'password') ||
-        form.hasError('pattern', 'password'))
-    "
-    i18n="@@register.wrongPasswordPattern"
-  >
-    Password must match all pattern requirements
-  </mat-error>
-  <mat-error
-    *ngIf="       passwordTouched &&
-     form.hasError('maxlength', 'password')"
-    i18n="@@register.passwordIsToLongV2"
-  >
-    Password must be between 8 and 256 characters
-  </mat-error>
-  <mat-error *ngIf="       passwordTouched &&
-   this.form.hasError('backendError', 'password')">
-    <div
-      *ngFor="let error of this.form.getError('backendError', 'password')"
+      *ngIf="passwordTouched && form.hasError('required', 'password')"
+      i18n="@@register.passwordRequired"
     >
-      <app-backend-error [errorCode]="error"></app-backend-error>
-    </div>
-  </mat-error>
-
-
+      A password is required
+    </mat-error>
+    <mat-error
+      *ngIf="
+        passwordTouched &&
+        form.hasError('passwordIsEqualToTheEmail', 'password')
+      "
+      i18n="@@register.passwordNotEmail"
+    >
+      Password must not be the same as your email address
+    </mat-error>
+    <mat-error
+      *ngIf="
+        passwordTouched &&
+        !form.hasError('required', 'password') &&
+        (form.hasError('minlength', 'password') ||
+          form.hasError('pattern', 'password'))
+      "
+      i18n="@@register.wrongPasswordPattern2"
+    >
+      Password must meet all requirements
+    </mat-error>
+    <mat-error
+      *ngIf="passwordTouched && form.hasError('maxlength', 'password')"
+      i18n="@@register.passwordIsToLongV22"
+    >
+      Password must meet be between 8 and 256 characters
+    </mat-error>
+    <mat-error
+      *ngIf="passwordTouched && this.form.hasError('backendError', 'password')"
+    >
+      <div *ngFor="let error of this.form.getError('backendError', 'password')">
+        <app-backend-error [errorCode]="error"></app-backend-error>
+      </div>
+    </mat-error>
   </div>
 
-<div class="input-container">
-  <mat-form-field appearance="outline" [hideRequiredMarker]="true" [ngClass]="{'valid-password-input' : confirmPasswordValid && passwordValid}">
-    <mat-icon *ngIf="confirmPasswordValid && passwordValid" matSuffix>done</mat-icon>
-    <input
-      formControlName="passwordConfirm"
-      type="password"
-      matInput
-      autocomplete="new-password"
-      id="password-confirm-input"
-      [placeholder]="labelConfirmPassword"
-    />
-
-  </mat-form-field>
-  <mat-error
-  *ngIf="form.hasError('required', 'passwordConfirm') && confirmPasswordTouched"
-  i18n="@@register.passwordConfirmationRequired"
->
-  Retype your password
-</mat-error>
-<mat-error
-  *ngIf="form.hasError('passwordIsEqualToTheEmail', 'passwordConfirm')"
-  i18n="@@register.passwordCantBeEmail"
->
-  Password must not be the same as your email address
-</mat-error>
+  <div class="input-container">
+    <mat-form-field
+      id="password-confirm-input-label"
+      appearance="outline"
+      [hideRequiredMarker]="true"
+      [ngClass]="{
+        'valid-password-input': confirmPasswordValid && passwordValid
+      }"
+    >
+      <mat-icon *ngIf="confirmPasswordValid && passwordValid" matSuffix
+        >done</mat-icon
+      >
+      <input
+        id="password-confirm-input-label"
+        formControlName="passwordConfirm"
+        type="password"
+        matInput
+        autocomplete="new-password"
+        id="password-confirm-input"
+        [placeholder]="labelConfirmPassword"
+      />
+    </mat-form-field>
+    <mat-error
+      *ngIf="
+        form.hasError('required', 'passwordConfirm') && confirmPasswordTouched
+      "
+      i18n="@@register.passwordConfirmationRequired"
+    >
+      Retype your password
+    </mat-error>
+    <mat-error
+      *ngIf="
+        form.hasError('passwordIsEqualToTheEmail', 'passwordConfirm') &&
+        confirmPasswordTouched
+      "
+      i18n="@@register.passwordCantBeEmail"
+    >
+      Password must not be the same as your email address
+    </mat-error>
 
-<mat-error
-  *ngIf="form.hasError('mismatch', 'passwordConfirm')"
-  i18n="@@register.passwordConfirmationMatch"
->
-  The password and confirmed password must match
-</mat-error>
-</div>
+    <mat-error
+      *ngIf="
+        form.hasError('mismatch', 'passwordConfirm') && confirmPasswordTouched
+      "
+      i18n="@@register.passwordConfirmationMatch2"
+    >
+      Passwords do not match
+    </mat-error>
+  </div>
 
   <p i18n="@@register.yourPasswordHas">Your password has:</p>
   <ol>
     <li>
       <ng-container
-        [ngTemplateOutlet]="
-          form.hasError('required', 'password') ||
-          form.hasError('minlength', 'password')
-            ? invalid
-            : valid
-        "
+        [ngTemplateOutlet]="validate8orMoreCharacters ? invalid : valid"
       ></ng-container>
       <div i18n="@@register.passwordLength">8 or more characters</div>
     </li>
     <li>
       <ng-container
-        [ngTemplateOutlet]="
-          form.hasError('required', 'password') ||
-          form.getError('pattern', 'password')?.requiredPattern ==
-            hasLetterOrSymbolPattern
-            ? invalid
-            : valid
-        "
+        [ngTemplateOutlet]="validateAtLeastALetterOrSymbol ? invalid : valid"
       ></ng-container>
-      <div i18n="@@register.atLeastALetterOrSymbol">At least 1 letter or symbol</div>
+      <div i18n="@@register.atLeastALetterOrSymbol">
+        At least 1 letter or symbol
+      </div>
     </li>
     <li>
       <ng-container
-        [ngTemplateOutlet]="
-          form.hasError('required', 'password') ||
-          form.getError('pattern', 'password')?.requiredPattern ==
-            hasNumberPattern
-            ? invalid
-            : valid
-        "
+        [ngTemplateOutlet]="validateAtLeastANumber ? invalid : valid"
       ></ng-container>
       <div i18n="@@register.atLeastANumber">At least 1 number</div>
     </li>
   </ol>
-
 </div>
 
 <ng-template #valid>
@@ -135,5 +151,7 @@ <h2 i18n="@@register.yourPasswords" class="orc-font-body no-top-margin">Your pas
 </ng-template>
 
 <ng-template #invalid>
-  <mat-icon class="no-checked" class="material-icons-outlined">radio_button_unchecked </mat-icon>
+  <mat-icon class="no-checked" class="material-icons-outlined"
+    >radio_button_unchecked
+  </mat-icon>
 </ng-template>
diff --git a/src/app/register2/components/form-password/form-password.component.scss b/src/app/register2/components/form-password/form-password.component.scss
index 97c36c4f1f..43f5ce104c 100644
--- a/src/app/register2/components/form-password/form-password.component.scss
+++ b/src/app/register2/components/form-password/form-password.component.scss
@@ -20,8 +20,6 @@ ol {
   }
 }
 
-
 mat-icon {
   margin-inline-end: 8px;
 }
-
diff --git a/src/app/register2/components/form-password/form-password.component.scss-theme.scss b/src/app/register2/components/form-password/form-password.component.scss-theme.scss
index 46a484dcc7..fd6b070566 100644
--- a/src/app/register2/components/form-password/form-password.component.scss-theme.scss
+++ b/src/app/register2/components/form-password/form-password.component.scss-theme.scss
@@ -12,12 +12,9 @@
     color: map-get($foreground, 'brand-primary-dark');
   }
 
-
-  ::ng-deep  .mat-icon{
+  ::ng-deep .mat-icon {
     color: map-get($background, 'ui-background-light');
   }
-
-
 }
 
 @include form-password($orcid-app-theme);
diff --git a/src/app/register2/components/form-password/form-password.component.ts b/src/app/register2/components/form-password/form-password.component.ts
index 3a0c486dc7..5550e699c0 100644
--- a/src/app/register2/components/form-password/form-password.component.ts
+++ b/src/app/register2/components/form-password/form-password.component.ts
@@ -13,6 +13,8 @@ import { RegisterForm } from 'src/app/types/register.endpoint'
 import { OrcidValidators } from 'src/app/validators'
 
 import { BaseForm } from '../BaseForm'
+import { LiveAnnouncer } from '@angular/cdk/a11y'
+import { environment } from 'src/environments/environment'
 
 @Component({
   selector: 'app-form-password',
@@ -22,7 +24,6 @@ import { BaseForm } from '../BaseForm'
     './form-password.component.scss',
     '../register2.scss-theme.scss',
     '../register2.style.scss',
-
   ],
   providers: [
     {
@@ -48,7 +49,13 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
   hasLetterOrSymbolPattern = HAS_LETTER_OR_SYMBOL
   @Input() personalData: RegisterForm
   @Input() nextButtonWasClicked: boolean
-  constructor(private _register: Register2Service) {
+  currentValidate8orMoreCharactersStatus: boolean
+  ccurentValidateAtLeastALetterOrSymbolStatus: boolean
+  currentValidateAtLeastANumber: boolean
+  constructor(
+    private _register: Register2Service,
+    private _liveAnnouncer: LiveAnnouncer
+  ) {
     super()
   }
   ngOnInit() {
@@ -116,10 +123,12 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
   }
 
   get confirmPasswordTouched() {
-    return this.form.controls['passwordConfirm'].touched || this.nextButtonWasClicked
+    return (
+      this.form.controls['passwordConfirm'].touched || this.nextButtonWasClicked
+    )
   }
   get passwordTouched() {
-    return this.form.controls['password'].touched ||  this.nextButtonWasClicked
+    return this.form.controls['password'].touched || this.nextButtonWasClicked
   }
 
   get confirmPasswordValid() {
@@ -129,5 +138,64 @@ export class FormPasswordComponent extends BaseForm implements OnInit {
     return this.form.controls['password'].valid
   }
 
+  get validate8orMoreCharacters() {
+    const status =
+      this.form.hasError('required', 'password') ||
+      this.form.hasError('minlength', 'password')
+
+    if (this.currentValidate8orMoreCharactersStatus !== status) {
+      this.announce(
+        status
+          ? $localize`:@@register.passwordLengthError:Password must be 8 or more characters`
+          : $localize`:@@register.passwordLengthOk:Password is 8 or more characters`
+      )
+    }
+    this.currentValidate8orMoreCharactersStatus = status
+
+    return status
+  }
+
+  get validateAtLeastALetterOrSymbol() {
+    const status =
+      this.form.hasError('required', 'password') ||
+      this.form.getError('pattern', 'password')?.requiredPattern ==
+        this.hasLetterOrSymbolPattern
+
+    if (this.ccurentValidateAtLeastALetterOrSymbolStatus !== status) {
+      this.announce(
+        status
+          ? $localize`:@@register.passwordLetterOrSymbolError:Password must contain at least a letter or symbol`
+          : $localize`:@@register.passwordLetterOrSymbolOk:Password contains at least a letter or symbol`
+      )
+    }
+    this.ccurentValidateAtLeastALetterOrSymbolStatus = status
+
+    return status
+  }
+
+  get validateAtLeastANumber() {
+    const status =
+      this.form.hasError('required', 'password') ||
+      this.form.getError('pattern', 'password')?.requiredPattern ==
+        this.hasNumberPattern
+
+    if (this.currentValidateAtLeastANumber !== status) {
+      this.announce(
+        status
+          ? $localize`:@@register.passwordNumberError:Password must contain at least a number`
+          : $localize`:@@register.passwordNumberOk:Password contains at least a number`
+      )
+    }
 
+    this.currentValidateAtLeastANumber = status
+
+    return status
+  }
+
+  private announce(announcement: string) {
+    if (environment.debugger) {
+      console.debug('📢' + announcement)
+    }
+    this._liveAnnouncer.announce(announcement, 'assertive')
+  }
 }
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
index 42c23342d1..261b582c61 100644
--- a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.html
@@ -1,34 +1,53 @@
 <ng-container [formGroup]="additionalEmails">
-  <div class="input-container margin-top-12" *ngFor="
+  <div
+    class="input-container margin-top-12"
+    *ngFor="
       let additionalEmailControl of additionalEmails?.controls | keyvalue;
       index as i
-    ">
-
-    <mat-label class="orc-font-small-print ">
-      <ng-container i18n="@@register.additionalEmails">Additional email</ng-container>
+    "
+  >
+    <mat-label class="orc-font-small-print" id="additional-email-label">
+      <ng-container i18n="@@register.additionalEmails"
+        >Additional email</ng-container
+      >
       {{ i !== 0 ? i : '' }}
       <label i18n="@@register.optional">(Optional)</label>
     </mat-label>
     <mat-form-field appearance="outline">
-
-      <input [attr.placeholder]="labelAddAnAddionalEmail" #emailInput formControlName="{{ additionalEmailControl.key }}"
-        matInput [errorStateMatcher]="backendErrorsMatcher" appTrim [id]="additionalEmailControl.key" type="email" />
-
+      <input
+        aria-labelledby="additional-email-label"
+        [attr.placeholder]="labelAddAnAddionalEmail"
+        #emailInput
+        formControlName="{{ additionalEmailControl.key }}"
+        matInput
+        [errorStateMatcher]="backendErrorsMatcher"
+        appTrim
+        [id]="additionalEmailControl.key"
+        type="email"
+      />
     </mat-form-field>
-    <mat-error *ngIf="
-    additionalEmailsTouched &&
-    additionalEmails.hasError('email', additionalEmailControl.key) ||
-    additionalEmails.hasError('pattern', additionalEmailControl.key)
-  " i18n="@@register.invalidEmail">
+    <mat-error
+      *ngIf="
+        (additionalEmailsTouched &&
+          additionalEmails.hasError('email', additionalEmailControl.key)) ||
+        additionalEmails.hasError('pattern', additionalEmailControl.key)
+      "
+      i18n="@@register.invalidEmail"
+    >
       Invalid email format
     </mat-error>
-    <mat-error *ngFor="
-    let error of getControlErrorAtFormLevel(
-      additionalEmailControl.value,
-      'backendErrors'
-    )
-  ">
-      <app-backend-error [errorCode]="error" [value]="additionalEmailControl.value.value"></app-backend-error>
+    <mat-error
+      *ngFor="
+        let error of getControlErrorAtFormLevel(
+          additionalEmailControl.value,
+          'backendErrors'
+        )
+      "
+    >
+      <app-backend-error
+        [errorCode]="error"
+        [value]="additionalEmailControl.value.value"
+      ></app-backend-error>
     </mat-error>
 
     <!-- <button
diff --git a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
index fafa287f8e..85784289b0 100644
--- a/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
+++ b/src/app/register2/components/form-personal-additional-emails/form-personal-additional-emails.component.ts
@@ -19,7 +19,10 @@ import { ErrorStateMatcherForFormLevelErrors } from '../../ErrorStateMatcherForF
 @Component({
   selector: 'app-form-personal-additional-emails',
   templateUrl: './form-personal-additional-emails.component.html',
-  styleUrls: ['./form-personal-additional-emails.component.scss', '../register2.style.scss'],
+  styleUrls: [
+    './form-personal-additional-emails.component.scss',
+    '../register2.style.scss',
+  ],
 })
 export class FormPersonalAdditionalEmailsComponent implements AfterViewInit {
   labelInfoAboutEmails = $localize`:@@register.ariaLabelInfoEmails:info about emails`
@@ -34,7 +37,7 @@ export class FormPersonalAdditionalEmailsComponent implements AfterViewInit {
   constructor(
     private _ref: ChangeDetectorRef,
     private _changeDetectorRef: ChangeDetectorRef
-  ) { }
+  ) {}
 
   backendErrorsMatcher = new ErrorStateMatcherForFormLevelErrors(
     this.getControlErrorAtFormLevel,
@@ -47,7 +50,7 @@ export class FormPersonalAdditionalEmailsComponent implements AfterViewInit {
   ): string[] {
     return (
       control?.parent?.parent?.errors?.[errorGroup]?.['additionalEmails'][
-      control.value
+        control.value
       ] || []
     )
   }
@@ -90,7 +93,7 @@ export class FormPersonalAdditionalEmailsComponent implements AfterViewInit {
   public ngAfterViewInit() {
     this._ref.detectChanges()
   }
-  get additionalEmailsTouched () {
+  get additionalEmailsTouched() {
     return this.additionalEmails.touched
   }
 }
diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
index 485486da38..d4725a04df 100644
--- a/src/app/register2/components/form-personal/form-personal.component.html
+++ b/src/app/register2/components/form-personal/form-personal.component.html
@@ -1,201 +1,329 @@
 <ng-container [formGroup]="form">
-  <h2 i18n="@@register.yourNames" class="orc-font-body margin-top-12">Your names</h2>
-
+  <h2 i18n="@@register.yourNames" class="orc-font-body margin-top-12">
+    Your names
+  </h2>
 
   <div class="input-container">
-    <mat-label i18n="@@register.givenNames" class="orc-font-small-print"
-      [ngClass]="{'error': givenNameFormTouched && form.controls.givenNames.errors}">Given names</mat-label>
+    <mat-label
+      i18n="@@register.givenNames"
+      class="orc-font-small-print"
+      id="given-names-input-label"
+      [ngClass]="{
+        error: givenNameFormTouched && form.controls.givenNames.errors
+      }"
+      >Given names</mat-label
+    >
     <mat-form-field appearance="outline" [hideRequiredMarker]="true" async>
-      <input id="given-names-input" formControlName="givenNames" matInput #firstInput
-        [attr.placeholder]="labelNameYouMostCommonly" />
+      <input
+        aria-labelledby="given-names-input-label"
+        id="given-names-input"
+        formControlName="givenNames"
+        matInput
+        [attr.placeholder]="labelNameYouMostCommonly"
+      />
     </mat-form-field>
 
-    <mat-error *ngIf="givenNameFormTouched && form.hasError('required', 'givenNames')"
-      i18n="@@register.firstNamePassword">
-      Please enter your first/given name
+    <mat-error
+      *ngIf="givenNameFormTouched && form.hasError('required', 'givenNames')"
+      i18n="@@register.firstNameError"
+    >
+      Please enter your given names
     </mat-error>
-    <mat-error *ngIf=" givenNameFormTouched && form.hasError('illegalName', 'givenNames')" i18n="@@register.invalidName">
+    <mat-error
+      *ngIf="givenNameFormTouched && form.hasError('illegalName', 'givenNames')"
+      i18n="@@register.invalidName"
+    >
       Invalid name characters or format
     </mat-error>
-    <mat-error *ngIf="givenNameFormTouched && form.hasError('backendError', 'givenNames')">
+    <mat-error
+      *ngIf="
+        givenNameFormTouched && form.hasError('backendError', 'givenNames')
+      "
+    >
       <div *ngFor="let error of form.getError('backendError', 'givenNames')">
         <app-backend-error [errorCode]="error"></app-backend-error>
       </div>
     </mat-error>
   </div>
   <div class="input-container">
-
-    <mat-label class="orc-font-small-print"><ng-container i18n="@@register.familyName">Family names</ng-container>
-      <label i18n="@@register.optional">(Optional)</label></mat-label>
+    <mat-label class="orc-font-small-print"
+      ><ng-container i18n="@@register.familyName">Family names</ng-container>
+      <label id="family-names-input-label" i18n="@@register.optional"
+        >(Optional)</label
+      ></mat-label
+    >
     <mat-form-field appearance="outline" [hideRequiredMarker]="true">
-
-      <input id="family-names-input" formControlName="familyNames" matInput [placeholder]="labelFamilyNamePlaceholder" />
-
+      <input
+        aria-labelledby="family-names-input-label"
+        id="family-names-input"
+        formControlName="familyNames"
+        matInput
+        [placeholder]="labelFamilyNamePlaceholder"
+      />
     </mat-form-field>
-    <mat-error *ngIf="familyNamesFormTouched && form.hasError('illegalName', 'familyNames')" i18n="@@register.invalidName">
+    <mat-error
+      *ngIf="
+        familyNamesFormTouched && form.hasError('illegalName', 'familyNames')
+      "
+      i18n="@@register.invalidName"
+    >
       Invalid name characters or format
     </mat-error>
-    <mat-error *ngIf="familyNamesFormTouched && form.hasError('backendError', 'familyNames')">
+    <mat-error
+      *ngIf="
+        familyNamesFormTouched && form.hasError('backendError', 'familyNames')
+      "
+    >
       <div *ngFor="let error of form.getError('backendError', 'familyNames')">
         <app-backend-error [errorCode]="error"></app-backend-error>
       </div>
     </mat-error>
   </div>
 
-
   <!-- EMAIL -->
 
-
-
-
-  <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">Your email addresses</h2>
+  <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
+    Your email addresses
+  </h2>
   <ng-container formGroupName="emails">
     <div class="input-container">
+      <mat-label
+        class="orc-font-small-print"
+        class="orc-font-small-print"
+        id="email-input-input-label"
+        [ngClass]="{
+          error: emailFormTouched && form.hasError('required', 'emails.email')
+        }"
+        id="email-input-label"
+        i18n="@@register.primaryEmail"
+        >Email</mat-label
+      >
 
-      <mat-label class="orc-font-small-print" class="orc-font-small-print"
-        [ngClass]="{error: emailFormTouched && form.hasError('required', 'emails.email') }"
-        i18n="@@register.primaryEmail">Email</mat-label>
-
-      <mat-form-field appearance="outline" [hideRequiredMarker]="true" [ngClass]="{'valid-password-input' : emailsAreValid}">
+      <mat-form-field
+        appearance="outline"
+        [hideRequiredMarker]="true"
+        [ngClass]="{ 'valid-password-input': emailsAreValid }"
+      >
         <mat-icon *ngIf="emailsAreValid" matSuffix>done</mat-icon>
 
-        <input id="email-input" formControlName="email" matInput appTrim type="email" />
+        <input
+          aria-labelledby="email-input-input-label"
+          id="email-input"
+          aria-labelledby="email-input-label"
+          formControlName="email"
+          matInput
+          appTrim
+          type="email"
+        />
       </mat-form-field>
-      <mat-error *ngIf="emailFormTouched && form.hasError('required', 'emails.email')"
-        i18n="@@register.primaryEmailRequired">
-        An email is required
+      <mat-error
+        *ngIf="emailFormTouched && form.hasError('required', 'emails.email')"
+        i18n="@@register.primaryEmailRequired2"
+      >
+        Please enter your email
       </mat-error>
-      <mat-error *ngIf="
-        (this.emails.hasError('email', 'email') ||
-        this.emails.hasError('pattern', 'email'))
-      " i18n="@@register.invalidEmail">
-        Invalid email format
+      <mat-error
+        *ngIf="
+          this.emails.hasError('email', 'email') ||
+          this.emails.hasError('pattern', 'email')
+        "
+        i18n="@@register.invalidEmail2"
+      >
+        Please enter a valid email address, for example joe@institution.edu
       </mat-error>
 
-      <mat-error *ngIf="this.emails.hasError('backendError', 'email') && emailFormTouched">
-        <div *ngFor="let error of this.emails.getError('backendError', 'email')">
-          <app-backend-error [errorCode]="error" [value]="emails.get('email').value"></app-backend-error>
+      <mat-error
+        *ngIf="
+          this.emails.hasError('backendError', 'email') && emailFormTouched
+        "
+      >
+        <div
+          *ngFor="let error of this.emails.getError('backendError', 'email')"
+        >
+          <app-backend-error
+            [errorCode]="error"
+            [value]="emails.get('email').value"
+          ></app-backend-error>
         </div>
       </mat-error>
     </div>
 
+    <ng-container *ngIf="this.emails.hasError('backendError', 'email')">
+      <div
+        *ngFor="let error of this.emails.getError('backendError', 'email')"
+        class="info"
+      >
+        <div>
+          <mat-icon class="large-material-icon material-symbols-outlined"
+            >error</mat-icon
+          >
+        </div>
+        <div class="content">
+          <div i18n="@@account.warningDuplicated">
+            <p>
+              The email address
+              <strong>{{ emails.get('email').value }}</strong> is associated
+              with an existing ORCID record.
+            </p>
+          </div>
 
-<ng-container *ngIf="this.emails.hasError('backendError', 'email')">
-  <div
-  *ngFor="let error of this.emails.getError('backendError', 'email')"
-  class="info"
-
->
-  <div>
-    <mat-icon class="large-material-icon material-symbols-outlined">error</mat-icon>
-  </div>
-  <div class="content">
-    <div i18n="@@account.warningDuplicated">
-      <p>
-      The email address <strong>{{emails.get('email').value}}</strong> is associated with an existing ORCID record.
-    </div>
-    <div>
-      <a routerLink="/signin"> Sign in to ORCID using this email address</a>
-    </div>
-  </div>
-</div>
-</ng-container>
-
+          <div>
+            <a routerLink="/signin">
+              Sign in to ORCID using this email address</a
+            >
+          </div>
+        </div>
+      </div>
+    </ng-container>
 
-  <!-- EMAIL CONFIRMATION  -->
+    <!-- EMAIL CONFIRMATION  -->
 
     <!-- <mat-label i18n="@@register.confirmEmail"
     >Confirm primary email</mat-label
   > -->
     <div class="input-container">
+      <mat-form-field
+        appearance="outline"
+        *ngIf="!reactivation?.isReactivation"
+        [hideRequiredMarker]="true"
+        [ngClass]="{ 'valid-password-input': emailsAreValid }"
+      >
+        <mat-icon *ngIf="emailsAreValid" matSuffix>done</mat-icon>
 
-      <mat-form-field appearance="outline" *ngIf="!reactivation?.isReactivation" [hideRequiredMarker]="true" [ngClass]="{'valid-password-input' : emailsAreValid}">
-        <mat-icon *ngIf="emailsAreValid"  matSuffix>done</mat-icon>
-
-        <input formControlName="confirmEmail" matInput (paste)="(false)" appTrim autocomplete="off" type="email"
-          id="confirm-email-input" [attr.labelConfirmEmail]="labelConfirmEmail"
-          [attr.placeholder]="labelConfirmEmail" />
-
+        <input
+          formControlName="confirmEmail"
+          matInput
+          (paste)="(false)"
+          appTrim
+          autocomplete="off"
+          type="email"
+          id="confirm-email-input"
+          [attr.placeholder]="labelConfirmEmail"
+          [attr.aria-label]="arialabelConfirmEmail"
+        />
       </mat-form-field>
-      <mat-error *ngIf="emailFormTouched && form.hasError('required', 'emails.confirmEmail')" i18n="@@register.confirmEmailRequired">
-        Please confirm your email
+      <mat-error
+        *ngIf="
+          emailFormTouched && form.hasError('required', 'emails.confirmEmail')
+        "
+        i18n="@@register.confirmEmailRequired2"
+      >
+        Please confirm your email address
       </mat-error>
-      <mat-error *ngIf="
-      emailConfirmationFormTouched &&
-        (this.emails.hasError('email', 'confirmEmail') ||
-        this.emails.hasError('pattern', 'confirmEmail'))
-      " i18n="@@register.invalidEmail">
+      <mat-error
+        *ngIf="
+          emailConfirmationFormTouched &&
+          (this.emails.hasError('email', 'confirmEmail') ||
+            this.emails.hasError('pattern', 'confirmEmail'))
+        "
+        i18n="@@register.invalidEmail"
+      >
         Invalid email format
       </mat-error>
-      <mat-error *ngIf="this.emails.hasError('mismatch', 'confirmEmail') && emailConfirmationFormTouched" i18n="@@register.confirmationEmailNotMatch">
-        Email confirmation does not match
+      <mat-error
+        *ngIf="
+          this.emails.hasError('mismatch', 'confirmEmail') &&
+          emailConfirmationFormTouched
+        "
+        i18n="@@register.confirmationEmailNotMatch2"
+      >
+        Email addresses do not match
       </mat-error>
-      <mat-error *ngIf="this.emails.hasError('backendError', 'emails.confirmEmail')">
-        <div *ngFor="
-          let error of form.getError('backendError', 'emails.confirmEmail')
-        ">
+      <mat-error
+        *ngIf="this.emails.hasError('backendError', 'emails.confirmEmail')"
+      >
+        <div
+          *ngFor="
+            let error of form.getError('backendError', 'emails.confirmEmail')
+          "
+        >
           <app-backend-error [errorCode]="error"></app-backend-error>
         </div>
       </mat-error>
     </div>
 
-
     <ng-container *ngIf="personalEmail && emailConfirmationValid">
-      <div
-      class="announce"
-    >
-      <div>
-        <img src="/assets/vectors/personal-email-icon.svg"  aria-hidden="true">
-      </div>
-      <div class="content">
-        <div i18n="@@account.warningDuplicated">
-          <h3 class="orc-font-body"> This looks like a personal email</h3>     </div>
+      <div class="announce">
         <div>
-        <ng-container> Add a </ng-container><strong>professional email</strong> <ng-container> as backup so we can better recommend affiliations and other related data to you.  </ng-container>    </div>
+          <img
+            src="/assets/vectors/personal-email-icon.svg"
+            aria-hidden="true"
+          />
+        </div>
+        <div class="content">
+          <div i18n="@@account.warningDuplicated">
+            <h3 class="orc-font-body">This looks like a personal email</h3>
+          </div>
+          <div>
+            <ng-container> Add a </ng-container
+            ><strong>professional email</strong>
+            <ng-container>
+              as backup so we can better recommend affiliations and other
+              related data to you.
+            </ng-container>
+          </div>
+        </div>
       </div>
-    </div>
-  </ng-container>
-
-  <ng-container *ngIf="undefinedEmail  && emailConfirmationValid">
-    <div
-    class="announce"
-  >
-    <div>
-      <img src="/assets/vectors/undefined-email-icon.svg"  aria-hidden="true">
-    </div>
-    <div class="content">
-      <div i18n="@@account.warningDuplicated">
-        <h3 class="orc-font-body"> Add another email to secure your account</h3>     </div>
-      <div>
-      Adding an additional email as backup helps secure your account and make sure you can always sign in.  </div>
-    </div>
-  </div>
-  </ng-container>
+    </ng-container>
 
-  <ng-container *ngIf="professionalEmail && emailConfirmationValid">
-    <div
-    class="announce"
-    >
-    <div>
-     <img src="/assets/vectors/professional-email-icon.svg" aria-hidden="true">
-    </div>
-    <div class="content">
-      <div i18n="@@account.warningDuplicated">
-        <h3 class="orc-font-body">This looks like a professional email</h3>
+    <ng-container *ngIf="undefinedEmail && emailConfirmationValid">
+      <div class="announce">
+        <div>
+          <img
+            src="/assets/vectors/undefined-email-icon.svg"
+            aria-hidden="true"
+          />
+        </div>
+        <div class="content">
+          <div i18n="@@account.warningDuplicated">
+            <h3 class="orc-font-body">
+              Add another email to secure your account
+            </h3>
+          </div>
+          <div>
+            Adding an additional email as backup helps secure your account and
+            make sure you can always sign in.
+          </div>
+        </div>
       </div>
-      <div>
-        <ng-container>We recommend adding a </ng-container><strong>personal email</strong> <ng-container> as backup so you always have access to your ORCID account if you change jobs or roles.</ng-container>
+    </ng-container>
+
+    <ng-container *ngIf="professionalEmail && emailConfirmationValid">
+      <div class="announce">
+        <div>
+          <img
+            src="/assets/vectors/professional-email-icon.svg"
+            aria-hidden="true"
+          />
+        </div>
+        <div class="content">
+          <div i18n="@@account.warningDuplicated">
+            <h3 class="orc-font-body">This looks like a professional email</h3>
+          </div>
+          <div>
+            <ng-container>We recommend adding a </ng-container
+            ><strong>personal email</strong>
+            <ng-container>
+              as backup so you always have access to your ORCID account if you
+              change jobs or roles.</ng-container
+            >
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
-  </ng-container>
+    </ng-container>
 
     <!-- ADDITIONAL EMAILS -->
-    <app-form-personal-additional-emails [additionalEmails]="additionalEmails"></app-form-personal-additional-emails>
+    <app-form-personal-additional-emails
+      [additionalEmails]="additionalEmails"
+    ></app-form-personal-additional-emails>
   </ng-container>
 </ng-container>
 
-<mde-popover #namesPopover="mdePopover" [mdePopoverOverlapTrigger]="false" [mdePopoverCloseOnClick]="true">
+<mde-popover
+  #namesPopover="mdePopover"
+  [mdePopoverOverlapTrigger]="false"
+  [mdePopoverCloseOnClick]="true"
+>
   <mat-card class="mat-elevation-z3 orcid-popover">
     <p i18n="@@register.firstNameDetail">
       First name is your given name or the name you most commonly go by.
@@ -205,8 +333,11 @@ <h3 class="orc-font-body">This looks like a professional email</h3>
       You will have a chance to add additional names after you have created your
       account.
     </p>
-    <a href="https://support.orcid.org/hc/articles/360006973853"
-      target="orcid.frontend.register.help.more_info.link.text" i18n="@@register.moreInfoOnNames">More information on
-      names</a>
+    <a
+      href="https://support.orcid.org/hc/articles/360006973853"
+      target="orcid.frontend.register.help.more_info.link.text"
+      i18n="@@register.moreInfoOnNames"
+      >More information on names</a
+    >
   </mat-card>
 </mde-popover>
diff --git a/src/app/register2/components/form-personal/form-personal.component.scss b/src/app/register2/components/form-personal/form-personal.component.scss
index fde0f78e1f..4cef8a0ce4 100644
--- a/src/app/register2/components/form-personal/form-personal.component.scss
+++ b/src/app/register2/components/form-personal/form-personal.component.scss
@@ -2,4 +2,3 @@
   display: flex;
   flex-direction: column;
 }
-
diff --git a/src/app/register2/components/form-personal/form-personal.component.spec.ts b/src/app/register2/components/form-personal/form-personal.component.spec.ts
index 570b9eca44..50fd107f33 100644
--- a/src/app/register2/components/form-personal/form-personal.component.spec.ts
+++ b/src/app/register2/components/form-personal/form-personal.component.spec.ts
@@ -2,9 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { Overlay } from '@angular/cdk/overlay'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
-import {
-  MatLegacyDialog as MatDialog
-} from '@angular/material/legacy-dialog'
+import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
 import { RouterTestingModule } from '@angular/router/testing'
 import { PlatformInfoService } from '../../../cdk/platform-info'
diff --git a/src/app/register2/components/form-personal/form-personal.component.ts b/src/app/register2/components/form-personal/form-personal.component.ts
index bf577fe182..b088be0e12 100644
--- a/src/app/register2/components/form-personal/form-personal.component.ts
+++ b/src/app/register2/components/form-personal/form-personal.component.ts
@@ -21,22 +21,40 @@ import {
 import { Register2Service } from 'src/app/core/register2/register2.service'
 import { OrcidValidators } from 'src/app/validators'
 
-import { debounce, debounceTime, filter, first, startWith, switchMap } from 'rxjs/operators'
+import {
+  debounce,
+  debounceTime,
+  filter,
+  first,
+  startWith,
+  switchMap,
+} 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'
 export class MyErrorStateMatcher implements ErrorStateMatcher {
-  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
-    const isSubmitted = form && form.submitted;
-    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  isErrorState(
+    control: FormControl | null,
+    form: FormGroupDirective | NgForm | null
+  ): boolean {
+    const isSubmitted = form && form.submitted
+    return !!(
+      control &&
+      control.invalid &&
+      (control.dirty || control.touched || isSubmitted)
+    )
   }
 }
 
 @Component({
   selector: 'app-form-personal',
   templateUrl: './form-personal.component.html',
-  styleUrls: ['./form-personal.component.scss', '../register2.style.scss', '../register2.scss-theme.scss'],
+  styleUrls: [
+    './form-personal.component.scss',
+    '../register2.style.scss',
+    '../register2.scss-theme.scss',
+  ],
   preserveWhitespaces: true,
   providers: [
     {
@@ -51,18 +69,13 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
     },
   ],
 })
-
-
-
-export class FormPersonalComponent
-  extends BaseForm
-  implements OnInit, AfterViewInit {
-  matcher = new MyErrorStateMatcher;
+export class FormPersonalComponent extends BaseForm implements OnInit {
+  matcher = new MyErrorStateMatcher()
   @Input() nextButtonWasClicked: boolean
   @Input() reactivation: ReactivationLocal
-  @ViewChild('firstInput') firstInput: ElementRef
-  @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective;
+  @ViewChild(FormGroupDirective) formGroupDir: FormGroupDirective
 
+  arialabelConfirmEmail = $localize`:@@register.labelConfirmEmail:Confirm your email address`
   labelInfoAboutName = $localize`:@@register.ariaLabelInfo:info about names`
   labelClose = $localize`:@@register.ariaLabelClose:close`
   labelConfirmEmail = $localize`:@@register.confirmEmail:Confirm primary email`
@@ -109,21 +122,20 @@ export class FormPersonalComponent
       }
     )
 
-    this.emails.controls['email'].valueChanges.pipe(debounceTime(1000),filter( () =>
-      !this.emails.controls['email'].errors
-    ), switchMap(
-      (value) => {
-        const emailDomain = value.split('@')[1]
-        return this._register.getEmailCategory(emailDomain)
-      }
-    )).subscribe(value => {
-      this.professionalEmail = value.category === 'PROFESSIONAL'
-      this.personalEmail = value.category === 'PERSONAL'
-      this.undefinedEmail = value.category === 'UNDEFINED'
-
-    })
-
-
+    this.emails.controls['email'].valueChanges
+      .pipe(
+        debounceTime(1000),
+        filter(() => !this.emails.controls['email'].errors),
+        switchMap((value) => {
+          const emailDomain = value.split('@')[1]
+          return this._register.getEmailCategory(emailDomain)
+        })
+      )
+      .subscribe((value) => {
+        this.professionalEmail = value.category === 'PROFESSIONAL'
+        this.personalEmail = value.category === 'PERSONAL'
+        this.undefinedEmail = value.category === 'UNDEFINED'
+      })
 
     if (!this.reactivation?.isReactivation) {
       this.emails.addControl(
@@ -134,8 +146,6 @@ export class FormPersonalComponent
       )
     }
 
-
-
     this.form = new UntypedFormGroup({
       givenNames: new UntypedFormControl('', {
         validators: [Validators.required, OrcidValidators.illegalName],
@@ -160,15 +170,6 @@ export class FormPersonalComponent
     }
   }
 
-  ngAfterViewInit(): void {
-    // Timeout used to get focus on the first input after the first step loads
-    setTimeout(() => {
-      this.firstInput.nativeElement.focus()
-    }), 100
-    }
-
-
-
   allEmailsAreUnique(): ValidatorFn {
     return (formGroup: UntypedFormGroup) => {
       let hasError = false
@@ -228,11 +229,17 @@ export class FormPersonalComponent
   }
 
   get emailFormTouched() {
-    return ((this.form.controls.emails as any).controls?.email as any)?.touched || this.nextButtonWasClicked
+    return (
+      ((this.form.controls.emails as any).controls?.email as any)?.touched ||
+      this.nextButtonWasClicked
+    )
   }
 
   get emailConfirmationFormTouched() {
-    return ((this.form.controls.emails as any).controls?.confirmEmail as any)?.touched || this.nextButtonWasClicked
+    return (
+      ((this.form.controls.emails as any).controls?.confirmEmail as any)
+        ?.touched || this.nextButtonWasClicked
+    )
   }
 
   get familyNamesFormTouched() {
@@ -244,14 +251,15 @@ export class FormPersonalComponent
   }
 
   get emailConfirmationValid() {
-    return ((this.form.controls.emails as any).controls?.confirmEmail as any).valid
+    return ((this.form.controls.emails as any).controls?.confirmEmail as any)
+      .valid
   }
 
   get givenNameFormTouched() {
-    return this.form.controls.givenNames?.touched
-}
+    return this.form.controls.givenNames?.touched || this.nextButtonWasClicked
+  }
 
-get emailsAreValid() {
-  return this.emailConfirmationValid && this.emailValid
-}
+  get emailsAreValid() {
+    return this.emailConfirmationValid && this.emailValid
   }
+}
diff --git a/src/app/register2/components/form-terms/form-terms.component.html b/src/app/register2/components/form-terms/form-terms.component.html
index 9e8736f61c..de0d8f3ba9 100644
--- a/src/app/register2/components/form-terms/form-terms.component.html
+++ b/src/app/register2/components/form-terms/form-terms.component.html
@@ -1,4 +1,14 @@
 <h2 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h2>
+<mat-error
+  *ngIf="
+    termsOfUseWasTouched &&
+    (form.hasError('required', 'termsOfUse') ||
+      form.hasError('required', 'dataProcessed'))
+  "
+  i18n="@@register.termsRequired"
+  >You must accept the terms we use and consent to your data being processed in
+  the United States</mat-error
+>
 
 <ng-container [formGroup]="form">
   <mat-checkbox
@@ -53,14 +63,4 @@ <h2 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h2>
       More information on how ORCID process your data.
     </a>
   </mat-checkbox>
-  <mat-error
-    *ngIf="
-    termsOfUseWasTouched &&
-      (form.hasError('required', 'termsOfUse') ||
-        form.hasError('required', 'dataProcessed'))
-    "
-    i18n="@@register.termsRequired"
-    >To continue creating your ORCID iD you must accept the terms of use and
-    consent to your data being processed in the United States.</mat-error
-  >
 </ng-container>
diff --git a/src/app/register2/components/form-terms/form-terms.component.scss b/src/app/register2/components/form-terms/form-terms.component.scss
index 66e0ae0b04..d54b46deff 100644
--- a/src/app/register2/components/form-terms/form-terms.component.scss
+++ b/src/app/register2/components/form-terms/form-terms.component.scss
@@ -1,5 +1,4 @@
 :host {
-  margin-bottom: 25px;
   display: block;
 }
 
@@ -9,4 +8,5 @@ mat-checkbox {
 
 mat-error {
   margin: 8px 0;
+  display: block;
 }
diff --git a/src/app/register2/components/form-terms/form-terms.component.ts b/src/app/register2/components/form-terms/form-terms.component.ts
index d85d7762cc..307bbcafdd 100644
--- a/src/app/register2/components/form-terms/form-terms.component.ts
+++ b/src/app/register2/components/form-terms/form-terms.component.ts
@@ -15,9 +15,11 @@ import { BaseForm } from '../BaseForm'
 @Component({
   selector: 'app-form-terms',
   templateUrl: './form-terms.component.html',
-  styleUrls: ['./form-terms.component.scss',
-  '../register2.style.scss',
-  '../register2.scss-theme.scss',],
+  styleUrls: [
+    './form-terms.component.scss',
+    '../register2.style.scss',
+    '../register2.scss-theme.scss',
+  ],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.html b/src/app/register2/components/form-visibility/form-visibility.component.html
index d09e58cb2b..da300264df 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.html
+++ b/src/app/register2/components/form-visibility/form-visibility.component.html
@@ -7,102 +7,105 @@
     </ng-container>
   </p>
   <fieldset>
-  <legend class="orc-font-body mat-subheading-2" i18n="@@register.visibility">
-    Visibility settings
-  </legend>
+    <legend class="orc-font-body mat-subheading-2" i18n="@@register.visibility">
+      Visibility settings
+    </legend>
 
-  <p i18n="@@register.visibilityDescription3">
-    By default, what visibility should be given to new items added to your ORCID
-    Record?
-  </p>
-  <div class="margin-tb-32">
-    <mat-radio-group
-      formControlName="activitiesVisibilityDefault"
-      color="primary"
-    >
-      <mat-radio-button
-        id="visibility-everyone-input"
-        [value]="visibilityOptions[0]"
-        class="orcid-radio-button-with-icons"
+    <p i18n="@@register.visibilityDescription3">
+      By default, what visibility should be given to new items added to your
+      ORCID Record?
+    </p>
+    <div class="margin-tb-32">
+      <p>
+        <mat-error
+          *ngIf="
+            form.hasError('required', 'activitiesVisibilityDefault') &&
+            errorState
+          "
+          i18n="@@register.visibilityRequired2"
+          >Please select a default visibility for new items</mat-error
+        >
+      </p>
+      <mat-radio-group
+        formControlName="activitiesVisibilityDefault"
+        color="primary"
       >
-        <img
-          src="./assets/vectors/visibility-everyone2.svg"
-          aria-hidden="true"
-          alt=""
-        />
-        <div class="inlined">
-          <div>
-            <strong i18n="@@register.VisibilityEveryone">Everyone</strong>
+        <mat-radio-button
+          id="visibility-everyone-input"
+          [value]="visibilityOptions[0]"
+          class="orcid-radio-button-with-icons"
+        >
+          <img
+            src="./assets/vectors/visibility-everyone2.svg"
+            aria-hidden="true"
+            alt=""
+          />
+          <div class="inlined">
+            <div>
+              <strong i18n="@@register.VisibilityEveryone">Everyone</strong>
 
-            <ng-container i18n="@@register.VisibilityEveryone2"
-              >(87% of users choose this)</ng-container
-            >
-            <div class="text-light orc-font-small-print">Everyone can see these items</div>
+              <ng-container i18n="@@register.VisibilityEveryone2"
+                >(87% of users choose this)</ng-container
+              >
+              <div class="text-light orc-font-small-print">
+                Everyone can see these items
+              </div>
+            </div>
           </div>
-        </div>
-      </mat-radio-button>
-      <mat-radio-button
-        id="visibility-trusted-input"
-        [value]="visibilityOptions[1]"
-        class="orcid-radio-button-with-icons"
-      >
-        <img
-          src="./assets/vectors/visibility-trusted-source2.jpg"
-          aria-hidden="true"
-          alt=""
-        />
-        <div class="inlined">
-          <div>
-            <strong i18n="@@register.VisibilityTrusted"
-              >Trusted Organizations</strong
-            >
-            <ng-container i18n="@@register.VisibilityTrusted2"
-              >(5% of users choose this)</ng-container
-            >
-            <div class="text-light orc-font-small-print">
-              Only people and organizations you’ve given permission
+        </mat-radio-button>
+        <mat-radio-button
+          id="visibility-trusted-input"
+          [value]="visibilityOptions[1]"
+          class="orcid-radio-button-with-icons"
+        >
+          <img
+            src="./assets/vectors/visibility-trusted-source2.jpg"
+            aria-hidden="true"
+            alt=""
+          />
+          <div class="inlined">
+            <div>
+              <strong i18n="@@register.VisibilityTrusted"
+                >Trusted Organizations</strong
+              >
+              <ng-container i18n="@@register.VisibilityTrusted2"
+                >(5% of users choose this)</ng-container
+              >
+              <div class="text-light orc-font-small-print">
+                Only people and organizations you’ve given permission
+              </div>
             </div>
           </div>
-        </div>
-      </mat-radio-button>
-      <mat-radio-button
-        id="visibility-private-input"
-        [value]="visibilityOptions[2]"
-        class="orcid-radio-button-with-icons"
-      >
-        <img
-          src="./assets/vectors/visibility-only-me2.jpg"
-          aria-hidden="true"
-          alt=""
-        />
-        <div class="inlined">
-          <div>
-            <strong i18n="@@register.VisibilityPrivate">Only me</strong>
+        </mat-radio-button>
+        <mat-radio-button
+          id="visibility-private-input"
+          [value]="visibilityOptions[2]"
+          class="orcid-radio-button-with-icons"
+        >
+          <img
+            src="./assets/vectors/visibility-only-me2.jpg"
+            aria-hidden="true"
+            alt=""
+          />
+          <div class="inlined">
+            <div>
+              <strong i18n="@@register.VisibilityPrivate">Only me</strong>
 
-            <ng-container i18n="@@register.VisibilityPrivate2"
-              >(8% of users choose this)</ng-container
-            >
-            <div class="text-light orc-font-small-print">
-              Items are private and only visible to you
+              <ng-container i18n="@@register.VisibilityPrivate2"
+                >(8% of users choose this)</ng-container
+              >
+              <div class="text-light orc-font-small-print">
+                Items are private and only visible to you
+              </div>
             </div>
           </div>
-        </div>
-      </mat-radio-button>
-    </mat-radio-group>
-
-    <p>
-      <mat-error
-      *ngIf="
-        form.hasError('required', 'activitiesVisibilityDefault') && errorState
-      "
-      i18n="@@register.visibilityRequired"
-      >Please choose a default visibility setting.</mat-error
-    >
-    </p>
-  </div>
-</fieldset>
+        </mat-radio-button>
+      </mat-radio-group>
+    </div>
+  </fieldset>
   <p class="no-top-margin">
     <a
+      [attr.aria-label]="ariaLabelMoreInformationOnVisibility"
       class="mat-button-font"
       href="https://support.orcid.org/hc/articles/360006897614"
       target="_blank"
@@ -111,7 +114,6 @@
       >More information on visibility settings
 
       <mat-icon>open_in_new</mat-icon>
-      </a
-    >
+    </a>
   </p>
 </ng-container>
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.ts b/src/app/register2/components/form-visibility/form-visibility.component.ts
index e29daa388b..e12d3ffdc6 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.ts
+++ b/src/app/register2/components/form-visibility/form-visibility.component.ts
@@ -38,6 +38,7 @@ export class FormVisibilityComponent
   extends BaseForm
   implements OnInit, DoCheck
 {
+  ariaLabelMoreInformationOnVisibility = $localize`:@@register.ariaLabelMoreInformationOnVisibility:More information on visibility settings (Opens in new tab)`
   visibilityOptions = VISIBILITY_OPTIONS
   errorState = false
   activitiesVisibilityDefault = new UntypedFormControl('', Validators.required)
diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
index 8974df6e9a..7f860f7666 100644
--- a/src/app/register2/components/register2.scss-theme.scss
+++ b/src/app/register2/components/register2.scss-theme.scss
@@ -8,21 +8,18 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
-
   .step-actions {
-    border-color: mat.get-color-from-palette($background,
-        ui-background-light);
+    border-color: mat.get-color-from-palette($background, ui-background-light);
     .mat-raised-button.mat-primary {
       background-color: mat.get-color-from-palette($primary, 700);
-      }
-      a {
-        color: mat.get-color-from-palette($primary, 700);
-      }
+    }
+    a {
+      color: mat.get-color-from-palette($primary, 700);
+    }
   }
 
   a > mat-icon {
     color: mat.get-color-from-palette($primary, 200) !important;
-
   }
 
   ::ng-deep .valid {
@@ -35,32 +32,50 @@
 
   .text-light {
     color: map-get($foreground, 'text-dark-mid');
-
   }
 
   .info {
-    background-color: mat.get-color-from-palette($background, state-notice-lightest);
-    border-color: mat.get-color-from-palette($foreground,
-        'state-notice-dark'
-      ) !important;
+    background-color: mat.get-color-from-palette(
+      $background,
+      state-notice-lightest
+    );
+    border-color: mat.get-color-from-palette(
+      $foreground,
+      'state-notice-dark'
+    ) !important;
 
     mat-icon {
-      color: mat.get-color-from-palette($foreground,
-          'state-notice-dark'
-        ) !important;
+      color: mat.get-color-from-palette(
+        $foreground,
+        'state-notice-dark'
+      ) !important;
     }
   }
 
   .announce {
-    background-color: mat.get-color-from-palette($background, state-info-lightest);
-    border-color: mat.get-color-from-palette($foreground,
+    background-color: mat.get-color-from-palette(
+      $background,
+      state-info-lightest
+    );
+    border-color: mat.get-color-from-palette(
+      $foreground,
+      'state-info-dark'
+    ) !important;
+
+    mat-icon {
+      color: mat.get-color-from-palette(
+        $foreground,
         'state-info-dark'
       ) !important;
+    }
+  }
 
-    mat-icon {
-      color: mat.get-color-from-palette($foreground,
-          'state-info-dark'
-        ) !important;
+  :host {
+    ::ng-deep {
+      .container .mat-horizontal-content-container,
+      .container {
+        background-color: map-get($background, 'ui-background-lightest');
+      }
     }
   }
 
@@ -71,23 +86,13 @@
       }
       .mat-form-field-outline {
         color: map-get($foreground, 'brand-primary-dark');
-        background-color:     mat.get-color-from-palette(
+        background-color: mat.get-color-from-palette(
           $background,
           brand-primary-lightest
         );
-
       }
-
-
     }
-
-
-
-
   }
-
-
-
 }
 
 @include theme($orcid-app-theme);
diff --git a/src/app/register2/components/register2.style.scss b/src/app/register2/components/register2.style.scss
index 1b28a9e176..427a9d30f6 100644
--- a/src/app/register2/components/register2.style.scss
+++ b/src/app/register2/components/register2.style.scss
@@ -3,15 +3,18 @@ a {
   font-weight: normal;
 }
 
-.no-top-margin{
+.no-top-margin {
   margin-top: 0;
 }
 
-h2.margin-top-12, .step-actions.margin-top-12,.margin-top-12 {
+h2.margin-top-12,
+.step-actions.margin-top-12,
+.margin-top-12 {
   margin-top: 12px;
 }
 
-h2,legend {
+h2,
+legend {
   margin-top: 32px;
   margin-bottom: 14px;
   font-weight: bold;
@@ -21,7 +24,6 @@ fieldset {
   border: none;
   margin: 0;
   padding: 0;
-
 }
 
 .margin-tb-32 {
@@ -29,16 +31,10 @@ fieldset {
   margin-bottom: 32px;
 }
 
-app-form-terms {
-  margin-bottom: 32px;
-
-}
-
 mat-card-title img {
   margin-bottom: 32px;
 }
 
-
 .input-container {
   padding-bottom: 20px;
 }
@@ -58,12 +54,10 @@ mat-label.orc-font-small-print {
   padding-top: 32px;
   a {
     font-style: italic;
-
   }
 }
 
 :host ::ng-deep {
-
   mat-error {
     margin-top: 8px;
     font-size: 12px;
@@ -74,16 +68,11 @@ mat-label.orc-font-small-print {
 
     .mat-form-field-subscript-wrapper {
       padding: 0;
-
     }
 
     .mat-form-field-wrapper {
       padding-bottom: 2px;
     }
-
-
-
-
   }
 
   .mat-form-field-appearance-outline {
@@ -113,13 +102,7 @@ mat-label.orc-font-small-print {
 
   mat-form-field.mat-form-field.mat-primary.mat-form-field-type-mat-input.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-invalid {
     margin-bottom: 0px;
-
-
   }
-
-
-
-
 }
 
 .orc-font-heading-small {
@@ -127,8 +110,8 @@ mat-label.orc-font-small-print {
   font-weight: 500;
 }
 
-
-.info, .announce{
+.info,
+.announce {
   .content div:not(:last-child) {
     margin-bottom: 16px;
   }
@@ -143,27 +126,19 @@ mat-label.orc-font-small-print {
     margin: 0;
   }
 
-  mat-icon, img{
+  mat-icon,
+  img {
     margin-right: 16px;
   }
 
   h3 {
     margin: 0;
   }
-
-
 }
 
-
-
 // MATERIAL OVERWRITES
 
 ::ng-deep {
-
-
-
-
-
   .mat-horizontal-stepper-content {
     max-width: 580px;
   }
@@ -174,31 +149,20 @@ mat-label.orc-font-small-print {
     }
   }
 
-
-
   mat-vertical-stepper.orcid-stepper-wizard mat-card p,
   mat-horizontal-stepper.orcid-stepper-wizard mat-card p {
     margin-bottom: 16px;
-
-
-
   }
 
-
   mat-vertical-stepper.orcid-stepper-wizard mat-card mat-form-field,
   mat-vertical-stepper.orcid-stepper-wizard mat-card .input-container,
   mat-horizontal-stepper.orcid-stepper-wizard mat-card mat-form-field,
   mat-horizontal-stepper.orcid-stepper-wizard mat-card .input-container {
     margin-bottom: 0px;
-
   }
 
-
   mat-vertical-stepper.orcid-stepper-wizard,
   mat-horizontal-stepper.orcid-stepper-wizard {
-
-
-
     mat-card {
       a > mat-icon {
         margin-bottom: -11px;
@@ -214,7 +178,6 @@ mat-label.orc-font-small-print {
         margin-bottom: 32px;
       }
 
-
       .step-actions {
         display: flex;
         flex-direction: column;
@@ -225,7 +188,4 @@ mat-label.orc-font-small-print {
       }
     }
   }
-
 }
-
-
diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
index 5dcef4caa1..049aa79c5f 100644
--- a/src/app/register2/components/step-a/step-a.component.html
+++ b/src/app/register2/components/step-a/step-a.component.html
@@ -35,6 +35,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
         rel="noopener noreferrer"
         target="_blank"
         i18n="@@register.terms"
+        #firstInput
         >terms of use</a
       ><ng-container i18n="@@register.only"
         >, you may only register for an ORCID iD for yourself. Already have an
@@ -59,7 +60,6 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.next"
           color="primary"
           (click)="nextButton2()"
-
         >
           NEXT STEP
         </button>
@@ -72,9 +72,8 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.back"
           id="step-a-back-button"
         >
-        <a>
-          Cancel registration</a>
-      </button>
+          <a> Cancel registration</a>
+        </button>
       </div>
     </form>
   </mat-card-content>
diff --git a/src/app/register2/components/step-a/step-a.component.scss b/src/app/register2/components/step-a/step-a.component.scss
index 9bd1205fc7..4cef8a0ce4 100644
--- a/src/app/register2/components/step-a/step-a.component.scss
+++ b/src/app/register2/components/step-a/step-a.component.scss
@@ -2,5 +2,3 @@
   display: flex;
   flex-direction: column;
 }
-
-
diff --git a/src/app/register2/components/step-a/step-a.component.ts b/src/app/register2/components/step-a/step-a.component.ts
index cfaa0bcc43..40e5870d80 100644
--- a/src/app/register2/components/step-a/step-a.component.ts
+++ b/src/app/register2/components/step-a/step-a.component.ts
@@ -1,4 +1,10 @@
-import { Component, Input } from '@angular/core'
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core'
 
 import { Router } from '@angular/router'
 import { first } from 'rxjs/operators'
@@ -11,10 +17,16 @@ import { BaseStepDirective } from '../BaseStep'
 @Component({
   selector: 'app-step-a',
   templateUrl: './step-a.component.html',
-  styleUrls: ['./step-a.component.scss', '../register2.style.scss', '../register2.scss-theme.scss'],
+  styleUrls: [
+    './step-a.component.scss',
+    '../register2.style.scss',
+    '../register2.scss-theme.scss',
+  ],
   preserveWhitespaces: true,
 })
-export class StepAComponent extends BaseStepDirective {
+export class StepAComponent extends BaseStepDirective implements AfterViewInit {
+  @ViewChild('firstInput') firstInput: ElementRef
+
   @Input() reactivation: ReactivationLocal
   nextButtonWasClicked: boolean
 
@@ -50,7 +62,15 @@ export class StepAComponent extends BaseStepDirective {
       })
   }
 
-  nextButton2 () {
+  ngAfterViewInit(): void {
+    // Timeout used to get focus on the first input after the first step loads
+    setTimeout(() => {
+      this.firstInput.nativeElement.focus()
+    }),
+      100
+  }
+
+  nextButton2() {
     this.nextButtonWasClicked = true
     // this.formGroup.controls.personal.markAsTouched()
   }
diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
index c9949166be..b5d29608d1 100644
--- a/src/app/register2/components/step-b/step-b.component.html
+++ b/src/app/register2/components/step-b/step-b.component.html
@@ -12,8 +12,8 @@
         *ngIf="!reactivation?.isReactivation"
         i18n="@@register.create"
       >
-      <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
-    </ng-container>
+        <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+      </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
         i18n="@@register.reactivation"
@@ -62,8 +62,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.previousStep"
           id="step-c-back-button"
         >
-        <a>
-          Previous Step</a>
+          <a> Previous Step</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/components/step-b/step-b.component.ts b/src/app/register2/components/step-b/step-b.component.ts
index 4d95c7d7bd..4d3549abac 100644
--- a/src/app/register2/components/step-b/step-b.component.ts
+++ b/src/app/register2/components/step-b/step-b.component.ts
@@ -6,12 +6,16 @@ import { BaseStepDirective } from '../BaseStep'
 @Component({
   selector: 'app-step-b',
   templateUrl: './step-b.component.html',
-  styleUrls: ['./step-b.component.scss', '../register2.style.scss', '../register2.scss-theme.scss'],
+  styleUrls: [
+    './step-b.component.scss',
+    '../register2.style.scss',
+    '../register2.scss-theme.scss',
+  ],
 })
 export class StepBComponent extends BaseStepDirective {
   @Input() personalData
   @Input() reactivation: ReactivationLocal
-  nextButtonWasClicked = false;
+  nextButtonWasClicked = false
 
   constructor() {
     super()
diff --git a/src/app/register2/components/step-c-t/step-c.component.html b/src/app/register2/components/step-c-t/step-c.component.html
index 67aae4b25d..8cf7f724ae 100644
--- a/src/app/register2/components/step-c-t/step-c.component.html
+++ b/src/app/register2/components/step-c-t/step-c.component.html
@@ -18,8 +18,8 @@
         *ngIf="!reactivation?.isReactivation"
         i18n="@@register.create"
       >
-      <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
-    </ng-container>
+        <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+      </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
         i18n="@@register.reactivation"
@@ -68,8 +68,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.previousStep"
           id="step-c-back-button"
         >
-        <a>
-          Previous Step</a>
+          <a> Previous Step</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/components/step-d/step-d.component.html b/src/app/register2/components/step-d/step-d.component.html
index 30bad9cc99..59716bb9e5 100644
--- a/src/app/register2/components/step-d/step-d.component.html
+++ b/src/app/register2/components/step-d/step-d.component.html
@@ -18,8 +18,8 @@
         *ngIf="!reactivation?.isReactivation"
         i18n="@@register.create"
       >
-      <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
-    </ng-container>
+        <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+      </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
         i18n="@@register.reactivation"
@@ -37,8 +37,14 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
       <app-form-notifications
         formControlName="sendOrcidNews"
       ></app-form-notifications>
-      <app-form-terms formControlName="termsOfUse" [nextButtonWasClicked]="nextButtonWasClicked"></app-form-terms>
-      <app-form-anti-robots formControlName="captcha"></app-form-anti-robots>
+      <app-form-terms
+        formControlName="termsOfUse"
+        [nextButtonWasClicked]="nextButtonWasClicked"
+      ></app-form-terms>
+      <app-form-anti-robots
+        formControlName="captcha"
+        [nextButtonWasClicked]="nextButtonWasClicked"
+      ></app-form-anti-robots>
       <div class="step-actions">
         <button
           id="step-c-register-button"
@@ -68,8 +74,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           i18n="@@shared.previousStep"
           id="step-c-back-button"
         >
-        <a>
-          Previous Step</a>
+          <a> Previous Step</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/components/step-d/step-d.component.ts b/src/app/register2/components/step-d/step-d.component.ts
index 3d7d8ca6bd..4494886392 100644
--- a/src/app/register2/components/step-d/step-d.component.ts
+++ b/src/app/register2/components/step-d/step-d.component.ts
@@ -9,7 +9,7 @@ import { BaseStepDirective } from '../BaseStep'
   styleUrls: [
     './step-d.component.scss',
     '../register2.style.scss',
-    '../register2.scss-theme.scss'
+    '../register2.scss-theme.scss',
   ],
 })
 export class StepDComponent extends BaseStepDirective {
diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts
index ec21904f8e..61abcc3223 100644
--- a/src/app/register2/pages/register/register2.component.ts
+++ b/src/app/register2/pages/register/register2.component.ts
@@ -36,7 +36,11 @@ import { ReactivationLocal } from '../../../types/reactivation.local'
 @Component({
   selector: 'app-register-2',
   templateUrl: './register2.component.html',
-  styleUrls: ['./register2.component.scss'],
+  styleUrls: [
+    './register2.component.scss',
+    '../../components/register2.scss-theme.scss',
+    '../../components/register2.style.scss',
+  ],
 })
 export class Register2Component implements OnInit, AfterViewInit {
   @ViewChild('lastStep') lastStep: MatStep
@@ -158,7 +162,7 @@ export class Register2Component implements OnInit, AfterViewInit {
               this.FormGroupStepC,
               this.FormGroupStepD,
               this.reactivation,
-              this.requestInfoForm,
+              this.requestInfoForm
             )
           })
         )
diff --git a/src/app/register2/register.module.ts b/src/app/register2/register.module.ts
index 465e046e6a..353415edf4 100644
--- a/src/app/register2/register.module.ts
+++ b/src/app/register2/register.module.ts
@@ -48,7 +48,7 @@ import { Register2Component } from './pages/register/register2.component'
     FormAntiRobotsComponent,
     BackendErrorComponent,
     TopBarRecordIssuesComponent,
-    Register2Component
+    Register2Component,
   ],
   imports: [
     CommonModule,
diff --git a/src/app/types/register.endpoint.ts b/src/app/types/register.endpoint.ts
index c1f863e0fe..edfd755d85 100644
--- a/src/app/types/register.endpoint.ts
+++ b/src/app/types/register.endpoint.ts
@@ -43,4 +43,3 @@ export interface RegisterConfirmResponse {
   errors?: any[]
   url: string
 }
-
diff --git a/src/assets/scss/material.palettes.scss b/src/assets/scss/material.palettes.scss
index b91867de92..9cfc5723fb 100644
--- a/src/assets/scss/material.palettes.scss
+++ b/src/assets/scss/material.palettes.scss
@@ -139,7 +139,7 @@ $state-notice-light: #ffdf72;
 
 $state-notice-dark: #ff9c00;
 
-$state-notice-lightest: #FFFBEE;
+$state-notice-lightest: #fffbee;
 
 $state-notice-darkest: #ff6400;
 
@@ -156,6 +156,5 @@ $dark-primary-background: #f6f6f6;
 $state-info-dark: #1565c0;
 $state-info-lightest: #bbdefb;
 
-
-$state-info-darkest: #0D47A1;
-$state-info-lightest: #F1F8FE;
+$state-info-darkest: #0d47a1;
+$state-info-lightest: #f1f8fe;
diff --git a/src/index.html b/src/index.html
index 77dcd82ef9..2ddb810920 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,7 +19,10 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,600,0,0"
+    />
     <meta name="theme-color" content="#1976d2" />
     <script
       type="text/javascript"

From 8cfe420d1e4ed04c6db5709adecf45775bd541a8 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 16:12:14 -0600
Subject: [PATCH 13/21] enable translations

---
 .../cdk/platform-info/browserlist.regexp.ts   |  3 +-
 .../form-notifications.component.html         |  6 +-
 .../form-personal.component.html              | 54 ++++++++-----
 .../form-terms/form-terms.component.html      |  6 +-
 .../form-visibility.component.html            | 20 ++++-
 .../components/step-a/step-a.component.html   | 17 ++---
 .../components/step-b/step-b.component.html   | 13 ++--
 .../components/step-c-t/step-c.component.html | 15 ++--
 .../components/step-d/step-d.component.html   |  6 +-
 .../register/register.en.properties           | 75 +++++++++++++++++++
 10 files changed, 159 insertions(+), 56 deletions(-)

diff --git a/src/app/cdk/platform-info/browserlist.regexp.ts b/src/app/cdk/platform-info/browserlist.regexp.ts
index 545a90290e..bf8c4aa5cf 100644
--- a/src/app/cdk/platform-info/browserlist.regexp.ts
+++ b/src/app/cdk/platform-info/browserlist.regexp.ts
@@ -1,3 +1,2 @@
 // tslint:disable-next-line: max-line-length
-export const BROWSERLIST_REGEXP =
-  /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
+export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
diff --git a/src/app/register2/components/form-notifications/form-notifications.component.html b/src/app/register2/components/form-notifications/form-notifications.component.html
index 21bd4b38ae..acd08e0f1e 100644
--- a/src/app/register2/components/form-notifications/form-notifications.component.html
+++ b/src/app/register2/components/form-notifications/form-notifications.component.html
@@ -1,8 +1,8 @@
 <div [formGroup]="form">
-  <h2 class="orc-font-body" i18n="@@account.tipsFeaturesEmail">
+  <h2 class="orc-font-body" i18n="@@register.tipsFeaturesEmail">
     Tips & features email
   </h2>
-  <p i18n="@@account.weOccasionallySend">
+  <p i18n="@@register.weOccasionallySend">
     We occasionally send out an email with information on new features and tips
     for getting the best out of your ORCID record.
   </p>
@@ -12,7 +12,7 @@ <h2 class="orc-font-body" i18n="@@account.tipsFeaturesEmail">
     color="primary"
   >
     <!-- prettier-ignore -->
-    <div class="mat-checkbox-content" i18n="@@account.idLikeToReceiveTipsFeatures"
+    <div class="mat-checkbox-content" i18n="@@register.idLikeToReceiveTipsFeatures"
   >I’d like to receive the ORCID tips & features email
 </div>
   </mat-checkbox>
diff --git a/src/app/register2/components/form-personal/form-personal.component.html b/src/app/register2/components/form-personal/form-personal.component.html
index d4725a04df..6b3aa05109 100644
--- a/src/app/register2/components/form-personal/form-personal.component.html
+++ b/src/app/register2/components/form-personal/form-personal.component.html
@@ -159,16 +159,23 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
           >
         </div>
         <div class="content">
-          <div i18n="@@account.warningDuplicated">
+          <div>
             <p>
-              The email address
-              <strong>{{ emails.get('email').value }}</strong> is associated
-              with an existing ORCID record.
+              <ng-container i18n="@@register.theEmailAddress">
+                The email address
+              </ng-container>
+              <strong>{{ emails.get('email').value }}</strong>
+              <ng-container i18n="@@register.isAssociatedWuthAnExisting"
+                >is associated with an existing ORCID record.
+              </ng-container>
             </p>
           </div>
 
           <div>
-            <a routerLink="/signin">
+            <a
+              routerLink="/signin"
+              i18n="@@register.signInToOrcidUsingThisEmail"
+            >
               Sign in to ORCID using this email address</a
             >
           </div>
@@ -251,13 +258,20 @@ <h2 i18n="@@register.yourEmailAddresses" class="orc-font-body margin-top-12">
           />
         </div>
         <div class="content">
-          <div i18n="@@account.warningDuplicated">
-            <h3 class="orc-font-body">This looks like a personal email</h3>
+          <div>
+            <h3
+              class="orc-font-body"
+              i18n="@@register.thisLooksLikeAPersonalEmail"
+            >
+              This looks like a personal email
+            </h3>
           </div>
           <div>
-            <ng-container> Add a </ng-container
-            ><strong>professional email</strong>
-            <ng-container>
+            <ng-container i18n="@@register.addA"> Add a </ng-container
+            ><strong i18n="@@register.professionalEmail"
+              >professional email</strong
+            >
+            <ng-container i18n="@@register.asBackupSoWeCanBetter">
               as backup so we can better recommend affiliations and other
               related data to you.
             </ng-container>
@@ -275,12 +289,12 @@ <h3 class="orc-font-body">This looks like a personal email</h3>
           />
         </div>
         <div class="content">
-          <div i18n="@@account.warningDuplicated">
-            <h3 class="orc-font-body">
+          <div>
+            <h3 class="orc-font-body" i18n="@@register.addAnotherEmailToSecure">
               Add another email to secure your account
             </h3>
           </div>
-          <div>
+          <div i18n="@@register.addingAnAddiotionalEmailAsBackup">
             Adding an additional email as backup helps secure your account and
             make sure you can always sign in.
           </div>
@@ -297,13 +311,19 @@ <h3 class="orc-font-body">
           />
         </div>
         <div class="content">
-          <div i18n="@@account.warningDuplicated">
-            <h3 class="orc-font-body">This looks like a professional email</h3>
+          <div>
+            <h3
+              class="orc-font-body"
+              i18n="@@regiser.thisLooksLikeAProffessional"
+            >
+              This looks like a professional email
+            </h3>
           </div>
           <div>
-            <ng-container>We recommend adding a </ng-container
+            <ng-container i18n="@@register.weRecommendAdding"
+              >We recommend adding a </ng-container
             ><strong>personal email</strong>
-            <ng-container>
+            <ng-container i18n="@@register.asBackupSoYouAlways">
               as backup so you always have access to your ORCID account if you
               change jobs or roles.</ng-container
             >
diff --git a/src/app/register2/components/form-terms/form-terms.component.html b/src/app/register2/components/form-terms/form-terms.component.html
index de0d8f3ba9..9869e20092 100644
--- a/src/app/register2/components/form-terms/form-terms.component.html
+++ b/src/app/register2/components/form-terms/form-terms.component.html
@@ -5,7 +5,7 @@ <h2 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h2>
     (form.hasError('required', 'termsOfUse') ||
       form.hasError('required', 'dataProcessed'))
   "
-  i18n="@@register.termsRequired"
+  i18n="@@register.youMustAccept"
   >You must accept the terms we use and consent to your data being processed in
   the United States</mat-error
 >
@@ -32,11 +32,11 @@ <h2 class="orc-font-body" i18n="@@register.termsOfUse">Terms of Use</h2>
       target="_blank"
       rel="noopener noreferrer"
       class="mat-button-font"
-      i18n="@@register.terms"
+      i18n="@@register.termsOfUse2"
     >
       terms of use
     </a>
-    <ng-container i18n="@@register.agree"
+    <ng-container i18n="@@register.agree2"
       >and agree to my data being publicly accessible where marked as “Visible
       to Everyone”.</ng-container
     >
diff --git a/src/app/register2/components/form-visibility/form-visibility.component.html b/src/app/register2/components/form-visibility/form-visibility.component.html
index da300264df..01e8a7c4b5 100644
--- a/src/app/register2/components/form-visibility/form-visibility.component.html
+++ b/src/app/register2/components/form-visibility/form-visibility.component.html
@@ -7,7 +7,10 @@
     </ng-container>
   </p>
   <fieldset>
-    <legend class="orc-font-body mat-subheading-2" i18n="@@register.visibility">
+    <legend
+      class="orc-font-body mat-subheading-2"
+      i18n="@@register.visibilityLegend"
+    >
       Visibility settings
     </legend>
 
@@ -47,7 +50,10 @@
               <ng-container i18n="@@register.VisibilityEveryone2"
                 >(87% of users choose this)</ng-container
               >
-              <div class="text-light orc-font-small-print">
+              <div
+                class="text-light orc-font-small-print"
+                i18n="@@register.everioneCanSeeThese"
+              >
                 Everyone can see these items
               </div>
             </div>
@@ -71,7 +77,10 @@
               <ng-container i18n="@@register.VisibilityTrusted2"
                 >(5% of users choose this)</ng-container
               >
-              <div class="text-light orc-font-small-print">
+              <div
+                class="text-light orc-font-small-print"
+                i18n="@@register.onlyPeopleAndOrganization"
+              >
                 Only people and organizations you’ve given permission
               </div>
             </div>
@@ -94,7 +103,10 @@
               <ng-container i18n="@@register.VisibilityPrivate2"
                 >(8% of users choose this)</ng-container
               >
-              <div class="text-light orc-font-small-print">
+              <div
+                class="text-light orc-font-small-print"
+                i18n="@@register.itemsArePrivateAndOnly"
+              >
                 Items are private and only visible to you
               </div>
             </div>
diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
index 049aa79c5f..ce5d295c0f 100644
--- a/src/app/register2/components/step-a/step-a.component.html
+++ b/src/app/register2/components/step-a/step-a.component.html
@@ -8,11 +8,10 @@
           alt="orcid logo"
         />
       </div>
-      <ng-container
-        *ngIf="!reactivation?.isReactivation"
-        i18n="@@register.create"
-      >
-        <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+      <ng-container *ngIf="!reactivation?.isReactivation">
+        <h1 class="orc-font-heading-small" i18n="@@register.create">
+          Create your ORCID iD
+        </h1>
       </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
@@ -57,11 +56,11 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           id="step-a-next-button"
           mat-raised-button
           matStepperNext
-          i18n="@@shared.next"
+          i18n="@@register.nextStep"
           color="primary"
           (click)="nextButton2()"
         >
-          NEXT STEP
+          Next Step
         </button>
         <button
           mat-button
@@ -69,10 +68,10 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           (click)="goBack()"
           matStepperPrevious
           type="button"
-          i18n="@@shared.back"
+
           id="step-a-back-button"
         >
-          <a> Cancel registration</a>
+          <a  i18n="@@register.cancelRegistration"> Cancel registration</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
index b5d29608d1..d94fa6ac32 100644
--- a/src/app/register2/components/step-b/step-b.component.html
+++ b/src/app/register2/components/step-b/step-b.component.html
@@ -8,11 +8,10 @@
           alt="orcid logo"
         />
       </div>
-      <ng-container
-        *ngIf="!reactivation?.isReactivation"
-        i18n="@@register.create"
-      >
-        <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+      <ng-container *ngIf="!reactivation?.isReactivation">
+        <h1 class="orc-font-heading-small" i18n="@@register.create">
+          Create your ORCID iD
+        </h1>
       </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
@@ -59,10 +58,10 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           color="primary"
           matStepperPrevious
           type="button"
-          i18n="@@shared.previousStep"
+
           id="step-c-back-button"
         >
-          <a> Previous Step</a>
+          <a   i18n="@@register.previousStep"> Previous Step</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/components/step-c-t/step-c.component.html b/src/app/register2/components/step-c-t/step-c.component.html
index 8cf7f724ae..28d4b8f825 100644
--- a/src/app/register2/components/step-c-t/step-c.component.html
+++ b/src/app/register2/components/step-c-t/step-c.component.html
@@ -14,11 +14,10 @@
           alt="orcid logo"
         />
       </div>
-      <ng-container
-        *ngIf="!reactivation?.isReactivation"
-        i18n="@@register.create"
-      >
-        <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
+      <ng-container *ngIf="!reactivation?.isReactivation">
+        <h1 class="orc-font-heading-small" i18n="@@register.create">
+          Create your ORCID iD
+        </h1>
       </ng-container>
       <ng-container
         *ngIf="reactivation?.isReactivation"
@@ -27,7 +26,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3.2"
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2.3"
       >Step 3 of 4 - Visibility</mat-card-subtitle
     >
   </mat-card-header>
@@ -65,10 +64,10 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
           color="primary"
           matStepperPrevious
           type="button"
-          i18n="@@shared.previousStep"
           id="step-c-back-button"
         >
-          <a> Previous Step</a>
+          <a           i18n="@@shared.previousStep"
+          > Previous Step</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/components/step-d/step-d.component.html b/src/app/register2/components/step-d/step-d.component.html
index 59716bb9e5..e2eab81396 100644
--- a/src/app/register2/components/step-d/step-d.component.html
+++ b/src/app/register2/components/step-d/step-d.component.html
@@ -27,7 +27,7 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
         Thank you for reactivating your ORCID iD.
       </ng-container>
     </mat-card-title>
-    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step3.2"
+    <mat-card-subtitle role="heading" aria-level="2" i18n="@@register.step2.3"
       >Step 4 of 4 - Terms and conditions</mat-card-subtitle
     >
   </mat-card-header>
@@ -55,9 +55,9 @@ <h1 class="orc-font-heading-small">Create your ORCID iD</h1>
         >
           <ng-container
             *ngIf="!reactivation?.isReactivation"
-            i18n="@@register.register"
+            i18n="@@register.completeRegistration"
           >
-            REGISTER
+            Complete registration
           </ng-container>
           <ng-container
             *ngIf="reactivation?.isReactivation"
diff --git a/src/locale/properties/register/register.en.properties b/src/locale/properties/register/register.en.properties
index f6ea3d69ff..8aac0fab2f 100644
--- a/src/locale/properties/register/register.en.properties
+++ b/src/locale/properties/register/register.en.properties
@@ -118,3 +118,78 @@ register.passwordRequirements5=characters in length and are case sensitive.
 register.passwordRequirements6=Your password must contain
 register.passwordRequirements7=At least 1 letter, symbol or space
 register.passwordRequirements8=At least 1 number
+
+
+
+register.tipsFeaturesEmail=Tips & features email
+register.idLikeToReceiveTipsFeatures=I’d like to receive the ORCID tips & features email
+weOccasionallySend=We occasionally send out an email with information on new features and tips for getting the best out of your ORCID record.
+register.passwordConfirmationRequired=Retype your password
+register.passwordCantBeEmail=Password must not be the same as your email address
+register.passwordConfirmationMatch2=Passwords do not match
+yourPasswordHas=Your password has:
+
+
+register.passwordLength=8 or more characters
+register.atLeastALetterOrSymbol=At least 1 letter or symbol
+register.atLeastANumber=At least 1 number
+register.yourNames=Your names
+register.givenNames=Given names
+register.firstNameError=Please enter your given names
+register.familyName=Family names
+register.yourEmailAddresses=Your email addresses
+register.primaryEmailRequired2=Please enter your email
+register.invalidEmail2=Please enter a valid email address, for example joe@institution.edu
+register.isAssociatedWuthAnExisting=is associated with an existing ORCID record.
+register.theEmailAddress=The email address
+register.signInToOrcidUsingThisEmail=Sign in to ORCID using this email address
+register.confirmEmailRequired2=Please confirm your email address
+register.invalidEmail=Invalid email format
+register.confirmationEmailNotMatch2=Email addresses do not match
+register.thisLooksLikeAPersonalEmail=This looks like a personal email
+register.asBackupSoWeCanBetter=as backup so we can better recommend affiliations and other related data to you.
+register.professionalEmail=professional email
+register.addA=Add a
+register.addAnotherEmailToSecure=Add another email to secure your account
+register.addingAnAddiotionalEmailAsBackup=Adding an additional email as backup helps secure your account and make sure you can always sign in.
+regiser.thisLooksLikeAProffessional=This looks like a professional email
+register.asBackupSoYouAlways=as backup so you always have access to your ORCID account if you change jobs or roles.
+register.weRecommendAdding=We recommend adding a
+register.youMustAccept=You must accept the terms we use and consent to your data being processed in the United States
+register.consentTo=I consent to the
+register.termsOfUse2=terms of use
+register.agree2=and agree to my data being publicly accessible where marked as “Visible to Everyone”.
+register.visibilityLegend=Visibility settings
+register.visibilityDescription3=By default, what visibility should be given to new items added to your ORCID Record?
+register.visibilityRequired2=Please select a default visibility for new items
+register.everioneCanSeeThese=Everyone can see these items
+register.onlyPeopleAndOrganization=Only people and organizations you’ve given permission
+register.itemsArePrivateAndOnly=Items are private and only visible to you
+register.step1.2=Step 1 of 4 - Names and emails
+register.nextStep=Next Step
+register.cancelRegistration=Cancel registration
+register.step2.2=Step 2 of 4 - Password
+register.previousStep=Previous Step
+register.completeRegistration=Complete registration
+register.step3.4=>Step 3 of 4 - Visibility
+register.step2.4=>Step 4 of 4 - Terms and conditions
+register.passwordRequired2=Please enter a password
+register.weOccasionallySend=We occasionally send out an email with information on new features and tips for getting the best out of your ORCID record.
+register.yourPasswords=Your password
+register.wrongPasswordPattern2=Password must meet all requirements
+register.passwordIsToLongV22=Password must meet be between 8 and 256 characters
+register.yourPasswordHas=Your password has:
+register.passwordLengthError=Password must be 8 or more characters
+register.passwordLengthOk=Password is 8 or more characters
+register.passwordLetterOrSymbolError=Password must contain at least a letter or symbol
+register.passwordLetterOrSymbolOk=Password contains at least a letter or symbol
+register.passwordNumberError:Password must contain at least a number
+register.passwordNumberOk:Password contains at least a number
+register.labelConfirmEmail=Confirm your email address
+register.labelNameYouMostMost=The name you most commonly go by
+register.familyNamePlaceholder=Your family name or surname
+register.ariaLabelMoreInformationOnVisibility=More information on visibility settings (Opens in new tab)
+register.step2.3=Step 3 of 4 - Visibility
+shared.previousStep=Previous Step
+register.addAnAdditionalEmail=Add an additional email
+register.everioneCanSeeThese=Everyone can see these items

From d8487411ebaa7cf3800b085e32e6be511b123ff9 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 16:12:48 -0600
Subject: [PATCH 14/21] Generate testing messages

---
 .../register/register.en.properties           | 16 +----
 .../register/register.lr.properties           | 63 +++++++++++++++++++
 .../register/register.rl.properties           | 63 +++++++++++++++++++
 .../register/register.xx.properties           | 63 +++++++++++++++++++
 4 files changed, 191 insertions(+), 14 deletions(-)

diff --git a/src/locale/properties/register/register.en.properties b/src/locale/properties/register/register.en.properties
index 8aac0fab2f..f76687b330 100644
--- a/src/locale/properties/register/register.en.properties
+++ b/src/locale/properties/register/register.en.properties
@@ -118,19 +118,11 @@ register.passwordRequirements5=characters in length and are case sensitive.
 register.passwordRequirements6=Your password must contain
 register.passwordRequirements7=At least 1 letter, symbol or space
 register.passwordRequirements8=At least 1 number
-
-
-
 register.tipsFeaturesEmail=Tips & features email
 register.idLikeToReceiveTipsFeatures=I’d like to receive the ORCID tips & features email
 weOccasionallySend=We occasionally send out an email with information on new features and tips for getting the best out of your ORCID record.
-register.passwordConfirmationRequired=Retype your password
-register.passwordCantBeEmail=Password must not be the same as your email address
 register.passwordConfirmationMatch2=Passwords do not match
 yourPasswordHas=Your password has:
-
-
-register.passwordLength=8 or more characters
 register.atLeastALetterOrSymbol=At least 1 letter or symbol
 register.atLeastANumber=At least 1 number
 register.yourNames=Your names
@@ -144,7 +136,6 @@ register.isAssociatedWuthAnExisting=is associated with an existing ORCID record.
 register.theEmailAddress=The email address
 register.signInToOrcidUsingThisEmail=Sign in to ORCID using this email address
 register.confirmEmailRequired2=Please confirm your email address
-register.invalidEmail=Invalid email format
 register.confirmationEmailNotMatch2=Email addresses do not match
 register.thisLooksLikeAPersonalEmail=This looks like a personal email
 register.asBackupSoWeCanBetter=as backup so we can better recommend affiliations and other related data to you.
@@ -156,11 +147,9 @@ regiser.thisLooksLikeAProffessional=This looks like a professional email
 register.asBackupSoYouAlways=as backup so you always have access to your ORCID account if you change jobs or roles.
 register.weRecommendAdding=We recommend adding a
 register.youMustAccept=You must accept the terms we use and consent to your data being processed in the United States
-register.consentTo=I consent to the
 register.termsOfUse2=terms of use
 register.agree2=and agree to my data being publicly accessible where marked as “Visible to Everyone”.
 register.visibilityLegend=Visibility settings
-register.visibilityDescription3=By default, what visibility should be given to new items added to your ORCID Record?
 register.visibilityRequired2=Please select a default visibility for new items
 register.everioneCanSeeThese=Everyone can see these items
 register.onlyPeopleAndOrganization=Only people and organizations you’ve given permission
@@ -183,8 +172,8 @@ register.passwordLengthError=Password must be 8 or more characters
 register.passwordLengthOk=Password is 8 or more characters
 register.passwordLetterOrSymbolError=Password must contain at least a letter or symbol
 register.passwordLetterOrSymbolOk=Password contains at least a letter or symbol
-register.passwordNumberError:Password must contain at least a number
-register.passwordNumberOk:Password contains at least a number
+register.passwordNumberError=Password must contain at least a number
+register.passwordNumberOk=Password contains at least a number
 register.labelConfirmEmail=Confirm your email address
 register.labelNameYouMostMost=The name you most commonly go by
 register.familyNamePlaceholder=Your family name or surname
@@ -192,4 +181,3 @@ register.ariaLabelMoreInformationOnVisibility=More information on visibility set
 register.step2.3=Step 3 of 4 - Visibility
 shared.previousStep=Previous Step
 register.addAnAdditionalEmail=Add an additional email
-register.everioneCanSeeThese=Everyone can see these items
diff --git a/src/locale/properties/register/register.lr.properties b/src/locale/properties/register/register.lr.properties
index d3889a620b..4481b34f5d 100644
--- a/src/locale/properties/register/register.lr.properties
+++ b/src/locale/properties/register/register.lr.properties
@@ -119,3 +119,66 @@ register.passwordRequirements6=LR
 register.passwordRequirements7=LR
 register.passwordRequirements8=LR
 register.doesNotAllowCommonPassword=LR
+register.tipsFeaturesEmail=LR
+register.idLikeToReceiveTipsFeatures=LR
+weOccasionallySend=LR
+register.passwordConfirmationMatch2=LR
+yourPasswordHas=LR
+register.atLeastALetterOrSymbol=LR
+register.atLeastANumber=LR
+register.yourNames=LR
+register.givenNames=LR
+register.firstNameError=LR
+register.familyName=LR
+register.yourEmailAddresses=LR
+register.primaryEmailRequired2=LR
+register.invalidEmail2=LR
+register.isAssociatedWuthAnExisting=LR
+register.theEmailAddress=LR
+register.signInToOrcidUsingThisEmail=LR
+register.confirmEmailRequired2=LR
+register.confirmationEmailNotMatch2=LR
+register.thisLooksLikeAPersonalEmail=LR
+register.asBackupSoWeCanBetter=LR
+register.professionalEmail=LR
+register.addA=LR
+register.addAnotherEmailToSecure=LR
+register.addingAnAddiotionalEmailAsBackup=LR
+regiser.thisLooksLikeAProffessional=LR
+register.asBackupSoYouAlways=LR
+register.weRecommendAdding=LR
+register.youMustAccept=LR
+register.termsOfUse2=LR
+register.agree2=LR
+register.visibilityLegend=LR
+register.visibilityRequired2=LR
+register.everioneCanSeeThese=LR
+register.onlyPeopleAndOrganization=LR
+register.itemsArePrivateAndOnly=LR
+register.step1.2=LR
+register.nextStep=LR
+register.cancelRegistration=LR
+register.step2.2=LR
+register.previousStep=LR
+register.completeRegistration=LR
+register.step3.4=LR
+register.step2.4=LR
+register.passwordRequired2=LR
+register.weOccasionallySend=LR
+register.yourPasswords=LR
+register.wrongPasswordPattern2=LR
+register.passwordIsToLongV22=LR
+register.yourPasswordHas=LR
+register.passwordLengthError=LR
+register.passwordLengthOk=LR
+register.passwordLetterOrSymbolError=LR
+register.passwordLetterOrSymbolOk=LR
+register.passwordNumberError=LR
+register.passwordNumberOk=LR
+register.labelConfirmEmail=LR
+register.labelNameYouMostMost=LR
+register.familyNamePlaceholder=LR
+register.ariaLabelMoreInformationOnVisibility=LR
+register.step2.3=LR
+shared.previousStep=LR
+register.addAnAdditionalEmail=LR
diff --git a/src/locale/properties/register/register.rl.properties b/src/locale/properties/register/register.rl.properties
index df4474e229..c154af954a 100644
--- a/src/locale/properties/register/register.rl.properties
+++ b/src/locale/properties/register/register.rl.properties
@@ -119,3 +119,66 @@ register.passwordRequirements6=RL
 register.passwordRequirements7=RL
 register.passwordRequirements8=RL
 register.doesNotAllowCommonPassword=RL
+register.tipsFeaturesEmail=RL
+register.idLikeToReceiveTipsFeatures=RL
+weOccasionallySend=RL
+register.passwordConfirmationMatch2=RL
+yourPasswordHas=RL
+register.atLeastALetterOrSymbol=RL
+register.atLeastANumber=RL
+register.yourNames=RL
+register.givenNames=RL
+register.firstNameError=RL
+register.familyName=RL
+register.yourEmailAddresses=RL
+register.primaryEmailRequired2=RL
+register.invalidEmail2=RL
+register.isAssociatedWuthAnExisting=RL
+register.theEmailAddress=RL
+register.signInToOrcidUsingThisEmail=RL
+register.confirmEmailRequired2=RL
+register.confirmationEmailNotMatch2=RL
+register.thisLooksLikeAPersonalEmail=RL
+register.asBackupSoWeCanBetter=RL
+register.professionalEmail=RL
+register.addA=RL
+register.addAnotherEmailToSecure=RL
+register.addingAnAddiotionalEmailAsBackup=RL
+regiser.thisLooksLikeAProffessional=RL
+register.asBackupSoYouAlways=RL
+register.weRecommendAdding=RL
+register.youMustAccept=RL
+register.termsOfUse2=RL
+register.agree2=RL
+register.visibilityLegend=RL
+register.visibilityRequired2=RL
+register.everioneCanSeeThese=RL
+register.onlyPeopleAndOrganization=RL
+register.itemsArePrivateAndOnly=RL
+register.step1.2=RL
+register.nextStep=RL
+register.cancelRegistration=RL
+register.step2.2=RL
+register.previousStep=RL
+register.completeRegistration=RL
+register.step3.4=RL
+register.step2.4=RL
+register.passwordRequired2=RL
+register.weOccasionallySend=RL
+register.yourPasswords=RL
+register.wrongPasswordPattern2=RL
+register.passwordIsToLongV22=RL
+register.yourPasswordHas=RL
+register.passwordLengthError=RL
+register.passwordLengthOk=RL
+register.passwordLetterOrSymbolError=RL
+register.passwordLetterOrSymbolOk=RL
+register.passwordNumberError=RL
+register.passwordNumberOk=RL
+register.labelConfirmEmail=RL
+register.labelNameYouMostMost=RL
+register.familyNamePlaceholder=RL
+register.ariaLabelMoreInformationOnVisibility=RL
+register.step2.3=RL
+shared.previousStep=RL
+register.addAnAdditionalEmail=RL
diff --git a/src/locale/properties/register/register.xx.properties b/src/locale/properties/register/register.xx.properties
index 8553d4fc94..404cdaa77f 100644
--- a/src/locale/properties/register/register.xx.properties
+++ b/src/locale/properties/register/register.xx.properties
@@ -119,3 +119,66 @@ register.passwordRequirements6=X
 register.passwordRequirements7=X
 register.passwordRequirements8=X
 register.doesNotAllowCommonPassword=X
+register.tipsFeaturesEmail=X
+register.idLikeToReceiveTipsFeatures=X
+weOccasionallySend=X
+register.passwordConfirmationMatch2=X
+yourPasswordHas=X
+register.atLeastALetterOrSymbol=X
+register.atLeastANumber=X
+register.yourNames=X
+register.givenNames=X
+register.firstNameError=X
+register.familyName=X
+register.yourEmailAddresses=X
+register.primaryEmailRequired2=X
+register.invalidEmail2=X
+register.isAssociatedWuthAnExisting=X
+register.theEmailAddress=X
+register.signInToOrcidUsingThisEmail=X
+register.confirmEmailRequired2=X
+register.confirmationEmailNotMatch2=X
+register.thisLooksLikeAPersonalEmail=X
+register.asBackupSoWeCanBetter=X
+register.professionalEmail=X
+register.addA=X
+register.addAnotherEmailToSecure=X
+register.addingAnAddiotionalEmailAsBackup=X
+regiser.thisLooksLikeAProffessional=X
+register.asBackupSoYouAlways=X
+register.weRecommendAdding=X
+register.youMustAccept=X
+register.termsOfUse2=X
+register.agree2=X
+register.visibilityLegend=X
+register.visibilityRequired2=X
+register.everioneCanSeeThese=X
+register.onlyPeopleAndOrganization=X
+register.itemsArePrivateAndOnly=X
+register.step1.2=X
+register.nextStep=X
+register.cancelRegistration=X
+register.step2.2=X
+register.previousStep=X
+register.completeRegistration=X
+register.step3.4=X
+register.step2.4=X
+register.passwordRequired2=X
+register.weOccasionallySend=X
+register.yourPasswords=X
+register.wrongPasswordPattern2=X
+register.passwordIsToLongV22=X
+register.yourPasswordHas=X
+register.passwordLengthError=X
+register.passwordLengthOk=X
+register.passwordLetterOrSymbolError=X
+register.passwordLetterOrSymbolOk=X
+register.passwordNumberError=X
+register.passwordNumberOk=X
+register.labelConfirmEmail=X
+register.labelNameYouMostMost=X
+register.familyNamePlaceholder=X
+register.ariaLabelMoreInformationOnVisibility=X
+register.step2.3=X
+shared.previousStep=X
+register.addAnAdditionalEmail=X

From 540b784fb9d3dec8aa9be19b306a790269c46bec Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 16:24:21 -0600
Subject: [PATCH 15/21] Few last fixes

---
 src/app/layout/header/header.component.ts       |  2 +-
 .../components/register2.scss-theme.scss        |  1 +
 .../register2.component.scss.theme.scss         | 17 +++++++++++++++++
 .../pages/register/register2.component.ts       |  1 +
 4 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 src/app/register2/pages/register/register2.component.scss.theme.scss

diff --git a/src/app/layout/header/header.component.ts b/src/app/layout/header/header.component.ts
index e178339add..84829e1999 100644
--- a/src/app/layout/header/header.component.ts
+++ b/src/app/layout/header/header.component.ts
@@ -77,7 +77,7 @@ export class HeaderComponent implements OnInit {
         path === `/${ApplicationRoutes.selfService}` ||
         path === `/${ApplicationRoutes.inbox}` ||
         path === `/${ApplicationRoutes.developerTools}` ||
-        path === `/${ApplicationRoutes.register}`
+        path.indexOf( `/${ApplicationRoutes.register}`) !== -1
     })
   }
 
diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
index 7f860f7666..b44e92e40e 100644
--- a/src/app/register2/components/register2.scss-theme.scss
+++ b/src/app/register2/components/register2.scss-theme.scss
@@ -71,6 +71,7 @@
   }
 
   :host {
+
     ::ng-deep {
       .container .mat-horizontal-content-container,
       .container {
diff --git a/src/app/register2/pages/register/register2.component.scss.theme.scss b/src/app/register2/pages/register/register2.component.scss.theme.scss
new file mode 100644
index 0000000000..38db9d095b
--- /dev/null
+++ b/src/app/register2/pages/register/register2.component.scss.theme.scss
@@ -0,0 +1,17 @@
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $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);
diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts
index 61abcc3223..dd3cfe5a12 100644
--- a/src/app/register2/pages/register/register2.component.ts
+++ b/src/app/register2/pages/register/register2.component.ts
@@ -38,6 +38,7 @@ import { ReactivationLocal } from '../../../types/reactivation.local'
   templateUrl: './register2.component.html',
   styleUrls: [
     './register2.component.scss',
+    './register2.component.scss.theme.scss',
     '../../components/register2.scss-theme.scss',
     '../../components/register2.style.scss',
   ],

From a1c876df3f169eea6f25c7d7dd68af0c9801b246 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 16:26:29 -0600
Subject: [PATCH 16/21] clean up

---
 src/app/app.component.ts                                | 6 ------
 src/app/guards/register-toggl.guard.ts                  | 3 ++-
 src/app/register/components/step-a/step-a.component.ts  | 1 -
 src/app/register2/components/BaseForm.ts                | 1 -
 src/app/register2/pages/register/register2.component.ts | 1 -
 5 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4c749731f6..6044e1eac7 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -58,10 +58,6 @@ export class AppComponent {
           this.currentRouteIsHeadlessOnOauthPage = this.showHeadlessOnOauthPage(
             platformInfo.currentRoute
           )
-          console.log(
-            'currentRouteIsHeadlessOnOauthPage',
-            this.currentRouteIsHeadlessOnOauthPage
-          )
           this.setPlatformClasses(platformInfo)
           this.screenDirection = platformInfo.screenDirection
           if (
@@ -116,8 +112,6 @@ export class AppComponent {
   }
   showHeadlessOnOauthPage(currentRoute: string): boolean {
     if (currentRoute) {
-      console.log(currentRoute)
-
       const value = HeadlessOnOauthRoutes.filter(
         (url) => currentRoute.indexOf('/' + url) === 0
       )
diff --git a/src/app/guards/register-toggl.guard.ts b/src/app/guards/register-toggl.guard.ts
index 32acc733ab..c18a827dd9 100644
--- a/src/app/guards/register-toggl.guard.ts
+++ b/src/app/guards/register-toggl.guard.ts
@@ -33,7 +33,6 @@ export class RegisterTogglGuard {
           localStorage.removeItem('REGISTRATION_2_0')
         }
 
-        console.log('writed!')
         // PLEASE NOTE THE PURPOSE OF THIS GUARD IS TO SET THE 'REGISTRATION_2_0' togglz
         // before the registration module is loaded.
         // This is done by setting the localStorage item 'REGISTRATION_2_0'.
@@ -41,6 +40,8 @@ export class RegisterTogglGuard {
         // DESPITE OF THIS BEEN A GUARD, IT DOES NOT PREVENT THE USER FROM ACCESSING THE REGISTRATION MODULE.
         // IT JUST HELPS SETTING THE LOGIC TWO WHICH VERSION OF THE REGISTRATION MODULE SHOULD BE LOADED.
 
+        // PLEASE NOTE THAT HAVING TO WAIT FOR THE FLAG TO LOAD BEFORE LOADING THE REGISTRATION MODULE
+        // IS A TEMPORAL SOLUTION AND MAKES THE LOADING OF THE REGISTRATION MODULE SLOWER.
         return true
       })
     )
diff --git a/src/app/register/components/step-a/step-a.component.ts b/src/app/register/components/step-a/step-a.component.ts
index cd10541d5e..cc3c652e92 100644
--- a/src/app/register/components/step-a/step-a.component.ts
+++ b/src/app/register/components/step-a/step-a.component.ts
@@ -23,7 +23,6 @@ export class StepAComponent extends BaseStepDirective {
   infoSiteBaseUrl = environment.INFO_SITE
 
   goForward() {
-    console.log('goForward', this.formGroup.controls.personal)
     this.formGroup.markAllAsTouched()
   }
 
diff --git a/src/app/register2/components/BaseForm.ts b/src/app/register2/components/BaseForm.ts
index ae83992e84..317ced3fb2 100644
--- a/src/app/register2/components/BaseForm.ts
+++ b/src/app/register2/components/BaseForm.ts
@@ -26,7 +26,6 @@ export abstract class BaseForm implements ControlValueAccessor, AsyncValidator {
   }
   registerOnChange(fn: any): void {
     this.form.valueChanges.subscribe((value) => {
-      console.log('valueChanges', value)
       fn(value)
     })
   }
diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts
index dd3cfe5a12..c5e021df6f 100644
--- a/src/app/register2/pages/register/register2.component.ts
+++ b/src/app/register2/pages/register/register2.component.ts
@@ -271,7 +271,6 @@ export class Register2Component implements OnInit, AfterViewInit {
   // Fix to material vertical stepper not focusing current header
   // related issue https://github.com/angular/components/issues/8881
   focusCurrentStep(event: StepperSelectionEvent) {
-    console.log('event', event)
     let nextStep: ElementRef
     if (event.selectedIndex === 0) {
       nextStep = this.stepComponentA

From ed820546880e5dfa68e8df4c7ae8c7f90a014aee Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 16:30:39 -0600
Subject: [PATCH 17/21] format

---
 src/app/cdk/platform-info/browserlist.regexp.ts             | 3 ++-
 src/app/layout/header/header.component.ts                   | 2 +-
 src/app/register2/components/register2.scss-theme.scss      | 1 -
 src/app/register2/components/step-a/step-a.component.html   | 3 +--
 src/app/register2/components/step-b/step-b.component.html   | 3 +--
 src/app/register2/components/step-c-t/step-c.component.html | 3 +--
 .../pages/register/register2.component.scss.theme.scss      | 6 ++----
 7 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/app/cdk/platform-info/browserlist.regexp.ts b/src/app/cdk/platform-info/browserlist.regexp.ts
index bf8c4aa5cf..545a90290e 100644
--- a/src/app/cdk/platform-info/browserlist.regexp.ts
+++ b/src/app/cdk/platform-info/browserlist.regexp.ts
@@ -1,2 +1,3 @@
 // tslint:disable-next-line: max-line-length
-export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
+export const BROWSERLIST_REGEXP =
+  /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
diff --git a/src/app/layout/header/header.component.ts b/src/app/layout/header/header.component.ts
index 84829e1999..eb039c74ec 100644
--- a/src/app/layout/header/header.component.ts
+++ b/src/app/layout/header/header.component.ts
@@ -77,7 +77,7 @@ export class HeaderComponent implements OnInit {
         path === `/${ApplicationRoutes.selfService}` ||
         path === `/${ApplicationRoutes.inbox}` ||
         path === `/${ApplicationRoutes.developerTools}` ||
-        path.indexOf( `/${ApplicationRoutes.register}`) !== -1
+        path.indexOf(`/${ApplicationRoutes.register}`) !== -1
     })
   }
 
diff --git a/src/app/register2/components/register2.scss-theme.scss b/src/app/register2/components/register2.scss-theme.scss
index b44e92e40e..7f860f7666 100644
--- a/src/app/register2/components/register2.scss-theme.scss
+++ b/src/app/register2/components/register2.scss-theme.scss
@@ -71,7 +71,6 @@
   }
 
   :host {
-
     ::ng-deep {
       .container .mat-horizontal-content-container,
       .container {
diff --git a/src/app/register2/components/step-a/step-a.component.html b/src/app/register2/components/step-a/step-a.component.html
index ce5d295c0f..100150de90 100644
--- a/src/app/register2/components/step-a/step-a.component.html
+++ b/src/app/register2/components/step-a/step-a.component.html
@@ -68,10 +68,9 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
           (click)="goBack()"
           matStepperPrevious
           type="button"
-
           id="step-a-back-button"
         >
-          <a  i18n="@@register.cancelRegistration"> Cancel registration</a>
+          <a i18n="@@register.cancelRegistration"> Cancel registration</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/components/step-b/step-b.component.html b/src/app/register2/components/step-b/step-b.component.html
index d94fa6ac32..1cb78c7fe6 100644
--- a/src/app/register2/components/step-b/step-b.component.html
+++ b/src/app/register2/components/step-b/step-b.component.html
@@ -58,10 +58,9 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
           color="primary"
           matStepperPrevious
           type="button"
-
           id="step-c-back-button"
         >
-          <a   i18n="@@register.previousStep"> Previous Step</a>
+          <a i18n="@@register.previousStep"> Previous Step</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/components/step-c-t/step-c.component.html b/src/app/register2/components/step-c-t/step-c.component.html
index 28d4b8f825..f1955d20f1 100644
--- a/src/app/register2/components/step-c-t/step-c.component.html
+++ b/src/app/register2/components/step-c-t/step-c.component.html
@@ -66,8 +66,7 @@ <h1 class="orc-font-heading-small" i18n="@@register.create">
           type="button"
           id="step-c-back-button"
         >
-          <a           i18n="@@shared.previousStep"
-          > Previous Step</a>
+          <a i18n="@@shared.previousStep"> Previous Step</a>
         </button>
       </div>
     </form>
diff --git a/src/app/register2/pages/register/register2.component.scss.theme.scss b/src/app/register2/pages/register/register2.component.scss.theme.scss
index 38db9d095b..8915a0e475 100644
--- a/src/app/register2/pages/register/register2.component.scss.theme.scss
+++ b/src/app/register2/pages/register/register2.component.scss.theme.scss
@@ -9,9 +9,7 @@
   $background: map-get($theme, background);
 
   :host {
-
-        background-color: map-get($background, 'ui-background-lightest');
+    background-color: map-get($background, 'ui-background-lightest');
   }
-
- }
+}
 @include theme($orcid-app-theme);

From 938e7a4a2de08c54c90f0e4459cf86adf207fe78 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Thu, 23 Nov 2023 16:42:55 -0600
Subject: [PATCH 18/21] Fix testing

---
 .../components/step-d/step-d.component.spec.ts         | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/register2/components/step-d/step-d.component.spec.ts b/src/app/register2/components/step-d/step-d.component.spec.ts
index b1ec6c6df5..33538efa82 100644
--- a/src/app/register2/components/step-d/step-d.component.spec.ts
+++ b/src/app/register2/components/step-d/step-d.component.spec.ts
@@ -1,19 +1,19 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
-import { StepCComponent } from './step-d.component'
+import { StepDComponent } from './step-d.component'
 
 describe('StepCComponent', () => {
-  let component: StepCComponent
-  let fixture: ComponentFixture<StepCComponent>
+  let component: StepDComponent
+  let fixture: ComponentFixture<StepDComponent>
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [StepCComponent],
+      declarations: [StepDComponent],
     }).compileComponents()
   })
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(StepCComponent)
+    fixture = TestBed.createComponent(StepDComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
   })

From bc8c0bc91e93c8e2418a3ac441ba55627fe625ba Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 27 Nov 2023 10:09:06 -0600
Subject: [PATCH 19/21] Fix flag

---
 src/app/app-routing.module.ts       | 6 +++---
 src/app/register/register.module.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index d291608be3..a124e65118 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -93,8 +93,8 @@ const routes: Routes = [
     canMatch: [RegisterTogglGuard],
     canActivateChild: [LanguageGuard, RegisterGuard],
     loadChildren: () => {
-      return localStorage.getItem('REGISTRATION_2_0') === 'enable'
-        ? import('./register/register.module').then((m) => m.RegisterModule)
+      return localStorage.getItem('REGISTRATION_2_0') !== 'enable'
+        ? import('./register/register.module').then((m) => m.RegisterModuleLegacy)
         : import('./register2/register.module').then((m) => m.Register2Module)
     },
   },
@@ -156,7 +156,7 @@ const routes: Routes = [
     matcher: routerReactivation,
     canActivateChild: [LanguageGuard, RegisterGuard],
     loadChildren: () =>
-      import('./register/register.module').then((m) => m.RegisterModule),
+      import('./register/register.module').then((m) => m.RegisterModuleLegacy),
   },
   {
     path: ApplicationRoutes.selfService,
diff --git a/src/app/register/register.module.ts b/src/app/register/register.module.ts
index 4757a9c74a..f7519921a0 100644
--- a/src/app/register/register.module.ts
+++ b/src/app/register/register.module.ts
@@ -71,4 +71,4 @@ import { MdePopoverModule } from '../cdk/popover'
     WarningMessageModule,
   ],
 })
-export class RegisterModule {}
+export class RegisterModuleLegacy {}

From e8a127b8126f91119ea3c57008307af3a3f3f501 Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 27 Nov 2023 17:05:00 -0600
Subject: [PATCH 20/21] fix angel comments

---
 .../top-bar-record-issues.component.html      |  1 -
 .../top-bar-record-issues.component.scss      |  0
 .../top-bar-record-issues.component.spec.ts   | 24 -----------
 .../top-bar-record-issues.component.ts        | 12 ------
 .../pages/register/register2.component.ts     | 41 -------------------
 5 files changed, 78 deletions(-)
 delete mode 100644 src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.html
 delete mode 100644 src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.scss
 delete mode 100644 src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.spec.ts
 delete mode 100644 src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.ts

diff --git a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.html b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.html
deleted file mode 100644
index 2661e57176..0000000000
--- a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>top-bar-record-issues works!</p>
diff --git a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.scss b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.spec.ts b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.spec.ts
deleted file mode 100644
index 4255f98cad..0000000000
--- a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing'
-
-import { TopBarRecordIssuesComponent } from './top-bar-record-issues.component'
-
-describe('TopBarRecordIssuesComponent', () => {
-  let component: TopBarRecordIssuesComponent
-  let fixture: ComponentFixture<TopBarRecordIssuesComponent>
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TopBarRecordIssuesComponent],
-    }).compileComponents()
-  })
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TopBarRecordIssuesComponent)
-    component = fixture.componentInstance
-    fixture.detectChanges()
-  })
-
-  it('should create', () => {
-    expect(component).toBeTruthy()
-  })
-})
diff --git a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.ts b/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.ts
deleted file mode 100644
index c6f3ba3de2..0000000000
--- a/src/app/register2/components/top-bar-record-issues/top-bar-record-issues.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Component, OnInit } from '@angular/core'
-
-@Component({
-  selector: 'app-top-bar-record-issues',
-  templateUrl: './top-bar-record-issues.component.html',
-  styleUrls: ['./top-bar-record-issues.component.scss'],
-})
-export class TopBarRecordIssuesComponent implements OnInit {
-  constructor() {}
-
-  ngOnInit(): void {}
-}
diff --git a/src/app/register2/pages/register/register2.component.ts b/src/app/register2/pages/register/register2.component.ts
index c5e021df6f..1cf21f17b7 100644
--- a/src/app/register2/pages/register/register2.component.ts
+++ b/src/app/register2/pages/register/register2.component.ts
@@ -225,48 +225,7 @@ export class Register2Component implements OnInit, AfterViewInit {
     }
   }
 
-  // openDialog(duplicateRecordsSearchResults: SearchResults): void {
-  //   const duplicateRecords = duplicateRecordsSearchResults['expanded-result']
-  //   const dialogParams = {
-  //     width: `1078px`,
-  //     height: `600px`,
-  //     maxWidth: `90vw`,
 
-  //     data: {
-  //       duplicateRecords,
-  //       titleLabel: $localize`:@@register.titleLabel:Could this be you?`,
-  //       // tslint:disable-next-line: max-line-length
-  //       bodyLabel: $localize`:@@register.bodyLabel:We found some accounts with your name, which means you may have already created an ORCID iD using a different email address. Before creating an account, please confirm that none of these records belong to you. Not sure if any of these are you?`,
-  //       contactLabel: $localize`:@@register.contactLabel:Contact us.`,
-  //       firstNameLabel: $localize`:@@register.firstNameLabel:First Name`,
-  //       lastNameLabel: $localize`:@@register.lastNameLabel:Last Name`,
-  //       affiliationsLabel: $localize`:@@register.affiliationsLabel:Affiliations`,
-  //       dateCreatedLabel: $localize`:@@register.dateCreatedLabel:Date Created`,
-  //       viewRecordLabel: $localize`:@@register.viewRecordLabel:View Record`,
-  //       signinLabel: $localize`:@@register.signinLabel:I ALREADY HAVE AN ID, GO BACK TO SIGN IN`,
-  //       continueLabel: $localize`:@@register.continueLabel:NONE OF THESE ARE ME, CONTINUE WITH REGISTRATION`,
-  //     },
-  //   }
-
-  //   if (this.platform.tabletOrHandset) {
-  //     dialogParams['maxWidth'] = '95vw'
-  //     dialogParams['maxHeight'] = '95vh'
-  //   }
-
-  //   const dialogRef = this._dialog.open(IsThisYouComponent, dialogParams)
-
-  //   dialogRef.afterClosed().subscribe((confirmRegistration) => {
-  //     if (!confirmRegistration) {
-  //       this._router.navigate(['signin'])
-  //     }
-  //   })
-  // }
-
-  // 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

From c583bb7643e55ac08359b10e4195b975fb47cbbb Mon Sep 17 00:00:00 2001
From: Leonardo Mendoza <leomendoza123@gmail.com>
Date: Mon, 27 Nov 2023 17:11:40 -0600
Subject: [PATCH 21/21] fix angel comments

---
 src/app/register2/register.module.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/register2/register.module.ts b/src/app/register2/register.module.ts
index 353415edf4..9516628b63 100644
--- a/src/app/register2/register.module.ts
+++ b/src/app/register2/register.module.ts
@@ -31,7 +31,6 @@ import { BackendErrorComponent } from './components/backend-error/backend-error.
 import { FormAntiRobotsComponent } from './components/form-anti-robots/form-anti-robots.component'
 import { FormPersonalAdditionalEmailsComponent } from './components/form-personal-additional-emails/form-personal-additional-emails.component'
 import { StepCTComponent } from './components/step-c-t/step-c.component'
-import { TopBarRecordIssuesComponent } from './components/top-bar-record-issues/top-bar-record-issues.component'
 import { Register2Component } from './pages/register/register2.component'
 @NgModule({
   declarations: [
@@ -47,7 +46,6 @@ import { Register2Component } from './pages/register/register2.component'
     FormPersonalAdditionalEmailsComponent,
     FormAntiRobotsComponent,
     BackendErrorComponent,
-    TopBarRecordIssuesComponent,
     Register2Component,
   ],
   imports: [