From 20b24e3d6385b449d784c0a475cf221c9311bc2f Mon Sep 17 00:00:00 2001
From: Daniel Palafox <dp852@hotmail.com>
Date: Mon, 18 Mar 2024 14:31:59 -0600
Subject: [PATCH 1/2] fix: Update 2FA error conditions and styling (#2200)

Co-authored-by: Daniel Palafox <daniel.p4l4fox@gmail.com>
---
 ...-factor-authentication-form.component.html | 487 ++++++++++--------
 ...-factor-authentication-form.component.scss | 188 +++----
 ...hentication-form.component.scss-theme.scss |  34 +-
 ...wo-factor-authentication-form.component.ts | 268 +++++-----
 .../form-sign-in/form-sign-in.component.html  |   2 +-
 .../components/social/social.component.html   | 140 ++---
 .../institutional-access-no-background.svg    |  11 +
 7 files changed, 628 insertions(+), 502 deletions(-)
 create mode 100644 src/assets/vectors/institutional-access-no-background.svg

diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html
index ab93f2ac42..62a449b443 100644
--- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html
+++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html
@@ -1,202 +1,285 @@
-<form [formGroup]="twoFactorForm" (ngSubmit)="onSubmit()">
-  <p i18n="@@ngOrcid.signin.2fa.heading" *ngIf="!signInUpdatesV1Togglz">
-    Two-factor authentication
-  </p>
-  <div [ngClass]="{ 'input-container': signInUpdatesV1Togglz }">
-    <mat-label
-      class="orc-font-small-print"
-      i18n="@@ngOrcid.signin.2fa.label"
-      [ngClass]="{
-        error:
-          verificationFormControl?.touched && verificationFormControl.errors
-      }"
-      *ngIf="!recoveryCode && signInUpdatesV1Togglz"
-      >Two-factor authentication code
-    </mat-label>
-    <mat-form-field
-      appearance="outline"
-      class="row deactivate"
-      *ngIf="!recoveryCode"
-    >
-      <mat-label
-        i18n="@@ngOrcid.signin.2fa.label"
-        *ngIf="!signInUpdatesV1Togglz"
-      >
-        Two-factor authentication code
-      </mat-label>
-      <input
-        matInput
-        #inputVerificationCode
-        formControlName="verificationCode"
-        cdkFocusInitial
-        appTrim
-        autocomplete="off"
-      />
-      <mat-hint align="end"
-        >{{ inputVerificationCode.value?.length || 0 }}/6</mat-hint
-      >
-      <mat-error *ngIf="verificationFormControl.hasError('required')">
-        <p
-          i18n="@@ngOrcid.signin.2fa.verificationCodeRequired"
-          class="error-message"
-        >
-          Authentication code is required
-        </p>
-        <p class="error-length">
-          {{ inputVerificationCode.value?.length || 0 }}/6
-        </p>
-      </mat-error>
-
-      <mat-error
-        *ngIf="
-          verificationFormControl.hasError('minlength') ||
-          verificationFormControl.hasError('maxlength')
-        "
-      >
-        <p
-          i18n="@@ngOrcid.signin.2fa.badVerificationCodeLength"
-          class="error-message"
-        >
-          Invalid authentication code length
-        </p>
-        <p class="error-length">
-          {{ inputVerificationCode.value?.length || 0 }}/6
-        </p>
-      </mat-error>
-    </mat-form-field>
-  </div>
-  <p>
-    <a
-      [ngClass]="{
-        'mat-button-font': !signInUpdatesV1Togglz,
-        underline: signInUpdatesV1Togglz,
-        'orcid-orc-font-body-small': signInUpdatesV1Togglz
-      }"
-      (click)="showAuthenticationCode()"
-      i18n="@@ngOrcid.signin.2fa.instructionsPart1"
-      >Enter a code
-    </a>
-    <ng-container i18n="@@ngOrcid.signin.2fa.instructionsPart2">
-      from your two-factor authentication app
-    </ng-container>
-  </p>
-  <p>
-    <ng-container i18n="@@ngOrcid.signin.2fa.noDevice1">
-      Don't have your device?
-    </ng-container>
-    <a
-      [ngClass]="{
-        'mat-button-font': !signInUpdatesV1Togglz,
-        underline: signInUpdatesV1Togglz,
-        'orcid-orc-font-body-small': signInUpdatesV1Togglz
-      }"
-      (click)="showRecoveryCode()"
-      i18n="@@ngOrcid.signin.2fa.noDevice2"
-      >Enter a recovery code
-    </a>
-  </p>
-  <p>
-    <ng-container i18n="@@ngOrcid.signin.2fa.noDeviceOrRecovery">
-      Don't have your device or recovery code?
-    </ng-container>
-    <a
-      [ngClass]="{
-        'mat-button-font': !signInUpdatesV1Togglz,
-        underline: signInUpdatesV1Togglz,
-        'orcid-orc-font-body-small': signInUpdatesV1Togglz
-      }"
-      (click)="navigateTo('https://support.orcid.org/')"
-      rel="noopener noreferrer"
-      target="_blank"
-      i18n="@@shared.orcidHelpCenter"
-      >ORCID Help Center
-    </a>
-  </p>
-  <div [ngClass]="{ 'input-container': signInUpdatesV1Togglz }">
-    <mat-label
-      class="orc-font-small-print"
-      i18n="@@ngOrcid.signin.2fa.recoveryCode"
-      [ngClass]="{
-        error:
-          recoveryCodeFormControl?.touched && recoveryCodeFormControl.errors
-      }"
-      *ngIf="recoveryCode && signInUpdatesV1Togglz"
-      >Recovery code
-    </mat-label>
-    <mat-form-field
-      appearance="outline"
-      class="row two-factor"
-      *ngIf="recoveryCode"
-    >
-      <mat-label
-        i18n="@@ngOrcid.signin.2fa.recoveryCode"
-        *ngIf="!signInUpdatesV1Togglz"
-      >
-        Recovery code
-      </mat-label>
-      <input
-        matInput
-        #inputRecoveryCode
-        formControlName="recoveryCode"
-        appTrim
-        autocomplete="off"
-      />
-      <mat-hint align="end"
-        >{{ inputRecoveryCode.value?.length || 0 }}/10</mat-hint
-      >
-      <mat-error *ngIf="recoveryCodeFormControl.hasError('required')">
-        <p
-          i18n="@@ngOrcid.signin.2fa.recoveryCodeRequired"
-          class="error-message"
-        >
-          Recovery code is required
-        </p>
-        <p class="error-length">
-          {{ inputRecoveryCode.value?.length || 0 }}/10
-        </p>
-      </mat-error>
-
-      <mat-error
-        *ngIf="
-          recoveryCodeFormControl.hasError('minlength') ||
-          recoveryCodeFormControl.hasError('maxlength')
-        "
-      >
-        <p
-          i18n="@@ngOrcid.signin.2fa.badRecoveryCodeLength"
-          class="error-message"
-        >
-          Invalid recovery code length
-        </p>
-        <p class="error-length">
-          {{ inputRecoveryCode.value?.length || 0 }}/10
-        </p>
-      </mat-error>
-    </mat-form-field>
-  </div>
-
-  <button
-    mat-raised-button
-    class="row mat-elevation-z0 two-factor"
-    type="submit"
-    i18n="@@ngOrcid.signin.2fa.authenticate"
-    id="authenticateButton"
-    [ngClass]="{
-      'authenticate-button': signInUpdatesV1Togglz
-    }"
-  >
-    AUTHENTICATE
-  </button>
-</form>
-<mat-error *ngIf="showBadVerificationCode" class="orcid-error">
-  <mat-icon inline="true">error</mat-icon>
-  <ng-container i18n="@@ngOrcid.signin.2fa.badVerificationCode">
-    Invalid authentication code
-  </ng-container>
-</mat-error>
-<mat-error *ngIf="showBadRecoveryCode" class="orcid-error">
-  <mat-icon inline="true">error</mat-icon>
-  <ng-container i18n="@@ngOrcid.signin.2fa.badRecoveryCode">
-    Invalid recovery code
-  </ng-container>
-</mat-error>
+<form [formGroup]="twoFactorForm" (ngSubmit)="onSubmit()">
+  <p i18n="@@ngOrcid.signin.2fa.heading" *ngIf="!signInUpdatesV1Togglz">
+    Two-factor authentication
+  </p>
+  <div [ngClass]="{ 'input-container': signInUpdatesV1Togglz }">
+    <mat-label
+      class="orc-font-small-print"
+      i18n="@@ngOrcid.signin.2fa.label"
+      [ngClass]="{
+        error:
+          verificationWasTouched && isVerificationCodeInvalid
+      }"
+      *ngIf="!recoveryCode && signInUpdatesV1Togglz"
+      >Two-factor authentication code
+    </mat-label>
+    <mat-form-field
+      appearance="outline"
+      class="row deactivate"
+      *ngIf="!recoveryCode"
+    >
+      <mat-label
+        i18n="@@ngOrcid.signin.2fa.label"
+        *ngIf="!signInUpdatesV1Togglz"
+      >
+        Two-factor authentication code
+      </mat-label>
+      <input
+        matInput
+        #inputVerificationCode
+        formControlName="verificationCode"
+        cdkFocusInitial
+        appTrim
+        autocomplete="off"
+      />
+      <ng-container *ngIf="!signInUpdatesV1Togglz">
+        <mat-hint align="end"
+          >{{ inputVerificationCode.value?.length || 0 }}/6</mat-hint
+        >
+        <mat-error *ngIf="verificationFormControl.hasError('required')">
+          <p
+            i18n="@@ngOrcid.signin.2fa.verificationCodeRequired"
+            class="error-message"
+          >
+            Authentication code is required
+          </p>
+          <p class="error-length">
+            {{ inputVerificationCode.value?.length || 0 }}/6
+          </p>
+        </mat-error>
+
+        <mat-error
+          *ngIf="
+            verificationFormControl.hasError('minlength') ||
+            verificationFormControl.hasError('maxlength')
+          "
+        >
+          <p
+            i18n="@@ngOrcid.signin.2fa.badVerificationCodeLength"
+            class="error-message"
+          >
+            Invalid authentication code length
+          </p>
+          <p class="error-length">
+            {{ inputVerificationCode.value?.length || 0 }}/6
+          </p>
+        </mat-error>
+      </ng-container>
+    </mat-form-field>
+    <ng-container *ngIf="signInUpdatesV1Togglz && !recoveryCode">
+      <mat-hint
+        class="orc-font-small-print error-length"
+        *ngIf="!isVerificationCodeInvalid"
+        >{{ verificationFormControl.value?.length || 0 }}/6</mat-hint
+      >
+      <mat-error *ngIf="verificationWasTouched && verificationFormControl.hasError('required')">
+        <p
+          i18n="@@ngOrcid.signin.2fa.verificationCodeRequired"
+          class="error-message"
+        >
+          Authentication code is required
+        </p>
+        <p class="error-length">
+          {{ verificationFormControl.value?.length || 0 }}/6
+        </p>
+      </mat-error>
+
+      <mat-error
+        *ngIf="
+          verificationWasTouched && (
+          verificationFormControl.hasError('minlength') ||
+          verificationFormControl.hasError('maxlength')
+          )
+        "
+      >
+        <p
+          i18n="@@ngOrcid.signin.2fa.badVerificationCodeLength"
+          class="error-message"
+        >
+          Invalid authentication code length
+        </p>
+        <p class="error-length">
+          {{ verificationFormControl.value?.length || 0 }}/6
+        </p>
+      </mat-error>
+  </ng-container>
+  </div>
+  <p
+    [ngClass]="{
+      'enter-code': signInUpdatesV1Togglz && isVerificationCodeInvalid
+    }"
+  >
+    <a
+      [ngClass]="{
+        'mat-button-font': !signInUpdatesV1Togglz,
+        underline: signInUpdatesV1Togglz,
+        'orc-font-body-small': signInUpdatesV1Togglz
+      }"
+      (click)="showAuthenticationCode()"
+      i18n="@@ngOrcid.signin.2fa.instructionsPart1"
+      >Enter a code
+    </a>
+    <ng-container i18n="@@ngOrcid.signin.2fa.instructionsPart2">
+      from your two-factor authentication app
+    </ng-container>
+  </p>
+  <p>
+    <ng-container i18n="@@ngOrcid.signin.2fa.noDevice1">
+      Don't have your device?
+    </ng-container>
+    <a
+      [ngClass]="{
+        'mat-button-font': !signInUpdatesV1Togglz,
+        underline: signInUpdatesV1Togglz,
+        'orc-font-body-small': signInUpdatesV1Togglz
+      }"
+      (click)="showRecoveryCode()"
+      i18n="@@ngOrcid.signin.2fa.noDevice2"
+      >Enter a recovery code
+    </a>
+  </p>
+  <p>
+    <ng-container i18n="@@ngOrcid.signin.2fa.noDeviceOrRecovery">
+      Don't have your device or recovery code?
+    </ng-container>
+    <a
+      [ngClass]="{
+        'mat-button-font': !signInUpdatesV1Togglz,
+        underline: signInUpdatesV1Togglz,
+        'orcid-orc-font-body-small': signInUpdatesV1Togglz
+      }"
+      (click)="navigateTo('https://support.orcid.org/')"
+      rel="noopener noreferrer"
+      target="_blank"
+      i18n="@@shared.orcidHelpCenter"
+      >ORCID Help Center
+    </a>
+  </p>
+  <div [ngClass]="{ 'input-container': signInUpdatesV1Togglz }">
+    <mat-label
+      class="orc-font-small-print"
+      i18n="@@ngOrcid.signin.2fa.recoveryCode"
+      [ngClass]="{
+        error:
+          recoveryCodeFormControl?.touched && recoveryCodeFormControl.errors
+      }"
+      *ngIf="recoveryCode && signInUpdatesV1Togglz"
+      >Recovery code
+    </mat-label>
+    <mat-form-field
+      appearance="outline"
+      class="row two-factor"
+      *ngIf="recoveryCode"
+    >
+      <mat-label
+        i18n="@@ngOrcid.signin.2fa.recoveryCode"
+        *ngIf="!signInUpdatesV1Togglz"
+      >
+        Recovery code
+      </mat-label>
+      <input
+        matInput
+        #inputRecoveryCode
+        formControlName="recoveryCode"
+        appTrim
+        autocomplete="off"
+      />
+      <ng-container *ngIf="!signInUpdatesV1Togglz">
+        <mat-hint align="end"
+          >{{ inputRecoveryCode.value?.length || 0 }}/10</mat-hint
+        >
+        <mat-error *ngIf="recoveryCodeFormControl.hasError('required')">
+          <p
+            i18n="@@ngOrcid.signin.2fa.recoveryCodeRequired"
+            class="error-message"
+          >
+            Recovery code is required
+          </p>
+          <p class="error-length">
+            {{ inputRecoveryCode.value?.length || 0 }}/10
+          </p>
+        </mat-error>
+
+        <mat-error
+          *ngIf="
+            recoveryCodeFormControl.hasError('minlength') ||
+            recoveryCodeFormControl.hasError('maxlength')
+            "
+          >
+          <p
+            i18n="@@ngOrcid.signin.2fa.badRecoveryCodeLength"
+            class="error-message"
+          >
+            Invalid recovery code length
+          </p>
+          <p class="error-length">
+            {{ inputRecoveryCode.value?.length || 0 }}/10
+          </p>
+        </mat-error>
+      </ng-container>
+    </mat-form-field>
+    <ng-container *ngIf="signInUpdatesV1Togglz && recoveryCode">
+      <mat-hint
+        class="orc-font-small-print error-message"
+        *ngIf="!isRecoveryCodeInvalid"
+      >{{ recoveryCodeFormControl.value?.length || 0 }}/10</mat-hint
+      >
+      <mat-error
+        *ngIf="recoveryCodeWasTouched && recoveryCodeFormControl.hasError('required')">
+        <p
+          i18n="@@ngOrcid.signin.2fa.recoveryCodeRequired"
+          class="error-message"
+        >
+          Recovery code is required
+        </p>
+        <p class="error-length">
+          {{ recoveryCodeFormControl.value?.length || 0 }}/10
+        </p>
+      </mat-error>
+
+      <mat-error
+        *ngIf="
+          recoveryCodeWasTouched && (
+          recoveryCodeFormControl.hasError('minlength') ||
+          recoveryCodeFormControl.hasError('maxlength')
+          )
+        "
+      >
+        <p
+          i18n="@@ngOrcid.signin.2fa.badRecoveryCodeLength"
+          class="error-message"
+        >
+          Invalid recovery code length
+        </p>
+        <p class="error-length">
+          {{ recoveryCodeFormControl.value?.length || 0 }}/10
+        </p>
+      </mat-error>
+    </ng-container>
+  </div>
+
+  <button
+    mat-raised-button
+    class="row mat-elevation-z0 two-factor"
+    type="submit"
+    i18n="@@ngOrcid.signin.2fa.authenticate"
+    id="authenticateButton"
+    [ngClass]="{
+      'authenticate-button': signInUpdatesV1Togglz
+    }"
+  >
+    AUTHENTICATE
+  </button>
+</form>
+<mat-error *ngIf="showBadVerificationCode" class="orcid-error">
+  <mat-icon inline="true">error</mat-icon>
+  <ng-container i18n="@@ngOrcid.signin.2fa.badVerificationCode">
+    Invalid authentication code
+  </ng-container>
+</mat-error>
+<mat-error *ngIf="showBadRecoveryCode" class="orcid-error">
+  <mat-icon inline="true">error</mat-icon>
+  <ng-container i18n="@@ngOrcid.signin.2fa.badRecoveryCode">
+    Invalid recovery code
+  </ng-container>
+</mat-error>
diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss
index c9b74ad4e1..9ef870a7b2 100644
--- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss
+++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss
@@ -1,92 +1,96 @@
-:host {
-  width: 100%;
-}
-
-.mat-button-font {
-  margin: auto;
-}
-
-.two-factor {
-  margin-top: 12px;
-}
-
-.error-message {
-  float: left;
-  margin: 0;
-  [dir='rtl'] :host & {
-    float: right;
-  }
-}
-
-.error-length {
-  float: right;
-  margin: 0;
-  [dir='rtl'] :host & {
-    float: left;
-  }
-}
-
-.orcid-error {
-  margin-top: 20px !important;
-}
-
-.input-container {
-  margin-bottom: 20px;
-  ::ng-deep {
-    mat-error {
-      margin-top: 8px !important;
-      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;
-    }
-  }
-}
-
-mat-label.orc-font-small-print {
-  font-weight: bold;
-  display: block;
-  margin-bottom: 4px;
-
-  label {
-    font-weight: normal;
-  }
-}
+:host {
+  width: 100%;
+}
+
+.mat-button-font {
+  margin: auto;
+}
+
+.two-factor {
+  margin-top: 12px;
+}
+
+.error-message {
+  float: left;
+  margin: 0;
+  [dir='rtl'] :host & {
+    float: right;
+  }
+}
+
+.error-length {
+  float: right;
+  margin: 0;
+  [dir='rtl'] :host & {
+    float: left;
+  }
+}
+
+.orcid-error {
+  margin-top: 20px !important;
+}
+
+.input-container {
+  margin-bottom: 20px;
+  ::ng-deep {
+    mat-error {
+      margin-top: 8px !important;
+      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;
+    }
+  }
+}
+
+p.enter-code {
+  margin-top: 28px;
+}
+
+mat-label.orc-font-small-print {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 4px;
+
+  label {
+    font-weight: normal;
+  }
+}
diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss
index c2cb366e91..73a51f868f 100644
--- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss
+++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss
@@ -1,15 +1,19 @@
-@use '@angular/material' as mat;
-@import 'src/assets/scss/material.orcid-theme.scss';
-
-@mixin two-factor-authentication-form-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  .authenticate-button {
-    color: $orcid-light-primary-text;
-    background: mat.get-color-from-palette($primary, 700);
-  }
-}
-
-@include two-factor-authentication-form-theme($orcid-app-theme);
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin two-factor-authentication-form-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .authenticate-button {
+    color: $orcid-light-primary-text;
+    background: mat.get-color-from-palette($primary, 700);
+  }
+
+  .error {
+    color: map-get($foreground, 'state-warning-dark');
+  }
+}
+
+@include two-factor-authentication-form-theme($orcid-app-theme);
diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts
index bdcdc952fc..4f7b7ffe45 100644
--- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts
+++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts
@@ -1,122 +1,146 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Inject,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core'
-import {
-  UntypedFormControl,
-  UntypedFormGroup,
-  Validators,
-} from '@angular/forms'
-import { WINDOW } from '../../window'
-
-@Component({
-  selector: 'app-two-factor-authentication-form',
-  templateUrl: './two-factor-authentication-form.component.html',
-  styleUrls: [
-    './two-factor-authentication-form.component.scss',
-    './two-factor-authentication-form.component.scss-theme.scss',
-  ],
-  preserveWhitespaces: true,
-})
-export class TwoFactorAuthenticationFormComponent implements AfterViewInit {
-  @Input() showBadVerificationCode: boolean
-  @Input() showBadRecoveryCode: boolean
-  @Input() signInUpdatesV1Togglz: boolean
-  @Output() authenticate = new EventEmitter<{
-    verificationCode?: string
-    recoveryCode?: string
-  }>()
-
-  @ViewChild('inputVerificationCode')
-  inputVerificationCode: ElementRef
-  @ViewChild('inputRecoveryCode')
-  inputRecoveryCode: ElementRef
-
-  recoveryCode = false
-
-  verificationFormControl = new UntypedFormControl('', [
-    Validators.required,
-    Validators.minLength(6),
-    Validators.maxLength(6),
-  ])
-
-  recoveryCodeFormControl = new UntypedFormControl('', [
-    Validators.required,
-    Validators.maxLength(10),
-    Validators.minLength(10),
-  ])
-
-  twoFactorForm = new UntypedFormGroup({
-    verificationCode: this.verificationFormControl,
-    recoveryCode: this.recoveryCodeFormControl,
-  })
-
-  constructor(
-    private cdref: ChangeDetectorRef,
-    @Inject(WINDOW) private window: Window
-  ) {}
-
-  ngAfterViewInit() {
-    this.inputVerificationCode.nativeElement.focus()
-    this.cdref.detectChanges()
-  }
-
-  onSubmit() {
-    this.hideErrorMessages()
-    this.disableValidators()
-
-    if (this.twoFactorForm.valid) {
-      this.authenticate.emit({
-        verificationCode: this.twoFactorForm.value.verificationCode,
-        recoveryCode: this.twoFactorForm.value.recoveryCode,
-      })
-
-      this.enableValidators()
-    }
-  }
-
-  disableValidators() {
-    if (!this.recoveryCode) {
-      this.recoveryCodeFormControl.disable()
-    } else {
-      this.verificationFormControl.disable()
-    }
-  }
-
-  enableValidators() {
-    this.verificationFormControl.enable()
-    this.recoveryCodeFormControl.enable()
-  }
-
-  showRecoveryCode() {
-    this.hideErrorMessages()
-    this.recoveryCode = true
-    setTimeout(() => {
-      this.inputRecoveryCode.nativeElement.focus()
-    })
-  }
-
-  showAuthenticationCode() {
-    this.hideErrorMessages()
-    this.recoveryCode = false
-    setTimeout(() => {
-      this.inputVerificationCode.nativeElement.focus()
-    })
-  }
-
-  hideErrorMessages() {
-    this.showBadRecoveryCode = false
-    this.showBadRecoveryCode = false
-  }
-
-  navigateTo(val) {
-    this.window.location.href = val
-  }
-}
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms'
+import { WINDOW } from '../../window'
+
+@Component({
+  selector: 'app-two-factor-authentication-form',
+  templateUrl: './two-factor-authentication-form.component.html',
+  styleUrls: [
+    './two-factor-authentication-form.component.scss',
+    './two-factor-authentication-form.component.scss-theme.scss',
+  ],
+  preserveWhitespaces: true,
+})
+export class TwoFactorAuthenticationFormComponent implements AfterViewInit {
+  @Input() showBadVerificationCode: boolean
+  @Input() showBadRecoveryCode: boolean
+  @Input() signInUpdatesV1Togglz: boolean
+  @Output() authenticate = new EventEmitter<{
+    verificationCode?: string
+    recoveryCode?: string
+  }>()
+
+  @ViewChild('inputVerificationCode')
+  inputVerificationCode: ElementRef
+  @ViewChild('inputRecoveryCode')
+  inputRecoveryCode: ElementRef
+
+  recoveryCode = false
+
+  twoFactorForm = new UntypedFormGroup({
+    verificationCode: new UntypedFormControl('', [
+      Validators.required,
+      Validators.minLength(6),
+      Validators.maxLength(6),
+    ]),
+    recoveryCode: new UntypedFormControl('', [
+      Validators.required,
+      Validators.maxLength(10),
+      Validators.minLength(10),
+    ]),
+  })
+
+  get verificationFormControl() {
+    return this.twoFactorForm.controls.verificationCode
+  }
+
+  get recoveryCodeFormControl() {
+    return this.twoFactorForm.controls.recoveryCode
+  }
+
+  get verificationWasTouched() {
+    return this.verificationFormControl.dirty || this.verificationFormControl.touched
+  }
+
+  get recoveryCodeWasTouched() {
+    return this.recoveryCodeFormControl.dirty || this.recoveryCodeFormControl.touched
+  }
+
+  get isVerificationCodeInvalid() {
+    return (this.verificationWasTouched && this.verificationFormControl.hasError('required'))  ||
+            this.verificationFormControl.hasError('minlength') ||
+            this.verificationFormControl.hasError('maxlength')
+  }
+
+  get isRecoveryCodeInvalid() {
+    return (this. recoveryCodeWasTouched && this.verificationFormControl.hasError('required')) ||
+            this.verificationFormControl.hasError('minlength') ||
+            this.verificationFormControl.hasError('maxlength')
+  }
+
+  constructor(
+    private cdref: ChangeDetectorRef,
+    @Inject(WINDOW) private window: Window
+  ) {}
+
+  ngAfterViewInit() {
+    this.inputVerificationCode.nativeElement.focus()
+    this.cdref.detectChanges()
+  }
+
+  onSubmit() {
+    this.hideErrorMessages()
+    this.disableValidators()
+
+    if (this.twoFactorForm.valid) {
+      this.authenticate.emit({
+        verificationCode: this.twoFactorForm.value.verificationCode,
+        recoveryCode: this.twoFactorForm.value.recoveryCode,
+      })
+
+      this.enableValidators()
+    }
+  }
+
+  disableValidators() {
+    if (!this.recoveryCode) {
+      this.recoveryCodeFormControl.disable()
+    } else {
+      this.verificationFormControl.disable()
+    }
+  }
+
+  enableValidators() {
+    this.verificationFormControl.enable()
+    this.recoveryCodeFormControl.enable()
+  }
+
+  showRecoveryCode() {
+    this.hideErrorMessages()
+    this.recoveryCode = true
+    setTimeout(() => {
+      this.inputRecoveryCode.nativeElement.focus()
+    })
+  }
+
+  showAuthenticationCode() {
+    this.hideErrorMessages()
+    this.recoveryCode = false
+    setTimeout(() => {
+      this.inputVerificationCode.nativeElement.focus()
+    })
+  }
+
+  hideErrorMessages() {
+    this.showBadRecoveryCode = false
+    this.showBadRecoveryCode = false
+  }
+
+  navigateTo(val) {
+    this.window.location.href = val
+  }
+}
diff --git a/src/app/sign-in/components/form-sign-in/form-sign-in.component.html b/src/app/sign-in/components/form-sign-in/form-sign-in.component.html
index ffb043a98c..794a319ead 100644
--- a/src/app/sign-in/components/form-sign-in/form-sign-in.component.html
+++ b/src/app/sign-in/components/form-sign-in/form-sign-in.component.html
@@ -114,7 +114,7 @@
       </mat-error>
 
       <app-print-errors
-        *ngIf="signInUpdatesV1Togglz && printError && !badCredentials"
+        *ngIf="signInUpdatesV1Togglz && printError && !badCredentials && !show2FA"
         [showDeprecatedError]="showDeprecatedError"
         [showUnclaimedError]="showUnclaimedError"
         [showDeactivatedError]="showDeactivatedError"
diff --git a/src/app/sign-in/components/social/social.component.html b/src/app/sign-in/components/social/social.component.html
index cc488374ef..2951ed6766 100644
--- a/src/app/sign-in/components/social/social.component.html
+++ b/src/app/sign-in/components/social/social.component.html
@@ -1,70 +1,70 @@
-<button
-  mat-raised-button
-  id="access-through-your-institution-button"
-  (click)="accessThroughInstitution()"
-  class="mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
-  [ngClass]="{
-    institution: !signInUpdatesV1Togglz,
-    institutional: signInUpdatesV1Togglz,
-    mobile: signInUpdatesV1Togglz && !platform.columns12
-  }"
-  type="button"
-  [attr.aria-label]="labelInstitutionalButton"
->
-  <img
-    [src]="
-      signInUpdatesV1Togglz
-        ? './assets/vectors/institutional-access.svg'
-        : './assets/vectors/institutional-access.svg'
-    "
-    alt="Institutional"
-  />
-  <ng-container
-    i18n="@@ngOrcid.signin.institutionalAccount"
-    *ngIf="!signInUpdatesV1Togglz"
-  >
-    Access through your institution
-  </ng-container>
-  <ng-container
-    i18n="@@ngOrcid.signin.signInInstitution"
-    *ngIf="signInUpdatesV1Togglz"
-  >
-    Sign in through your institution
-  </ng-container>
-</button>
-<form ngNoForm action="{{ baseUri }}signin/google" method="POST">
-  <input type="hidden" name="_csrf" value="{{ csrf }}" />
-  <input type="hidden" name="scope" value="email" />
-  <button
-    mat-raised-button
-    class="google mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
-    type="submit"
-    [attr.aria-label]="labelGoogleButton"
-    [ngClass]="{ google: signInUpdatesV1Togglz }"
-  >
-    <img src="./assets/vectors/google.svg" alt="Google" />
-    <ng-container i18n="@@ngOrcid.signin.google">
-      Sign in with Google
-    </ng-container>
-  </button>
-</form>
-<form
-  ngNoForm
-  action="{{ baseUri }}signin/facebook"
-  method="POST"
-  *ngIf="!signInUpdatesV1Togglz"
->
-  <input type="hidden" name="_csrf" value="{{ csrf }}" />
-  <input type="hidden" name="scope" value="email" />
-  <button
-    mat-raised-button
-    class="facebook mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
-    type="submit"
-    [attr.aria-label]="labelFacebookButton"
-  >
-    <img src="./assets/vectors/facebook.svg" alt="Facebook" />
-    <ng-container i18n="@@ngOrcid.signin.facebook">
-      Sign in with Facebook
-    </ng-container>
-  </button>
-</form>
+<button
+  mat-raised-button
+  id="access-through-your-institution-button"
+  (click)="accessThroughInstitution()"
+  class="mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
+  [ngClass]="{
+    institution: !signInUpdatesV1Togglz,
+    institutional: signInUpdatesV1Togglz,
+    mobile: signInUpdatesV1Togglz && !platform.columns12
+  }"
+  type="button"
+  [attr.aria-label]="labelInstitutionalButton"
+>
+  <img
+    [src]="
+      signInUpdatesV1Togglz
+        ? './assets/vectors/institutional-access-no-background.svg'
+        : './assets/vectors/institutional-access.svg'
+    "
+    alt="Institutional"
+  />
+  <ng-container
+    i18n="@@ngOrcid.signin.institutionalAccount"
+    *ngIf="!signInUpdatesV1Togglz"
+  >
+    Access through your institution
+  </ng-container>
+  <ng-container
+    i18n="@@ngOrcid.signin.signInInstitution"
+    *ngIf="signInUpdatesV1Togglz"
+  >
+    Sign in through your institution
+  </ng-container>
+</button>
+<form ngNoForm action="{{ baseUri }}signin/google" method="POST">
+  <input type="hidden" name="_csrf" value="{{ csrf }}" />
+  <input type="hidden" name="scope" value="email" />
+  <button
+    mat-raised-button
+    class="google mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
+    type="submit"
+    [attr.aria-label]="labelGoogleButton"
+    [ngClass]="{ google: signInUpdatesV1Togglz }"
+  >
+    <img src="./assets/vectors/google.svg" alt="Google" />
+    <ng-container i18n="@@ngOrcid.signin.google">
+      Sign in with Google
+    </ng-container>
+  </button>
+</form>
+<form
+  ngNoForm
+  action="{{ baseUri }}signin/facebook"
+  method="POST"
+  *ngIf="!signInUpdatesV1Togglz"
+>
+  <input type="hidden" name="_csrf" value="{{ csrf }}" />
+  <input type="hidden" name="scope" value="email" />
+  <button
+    mat-raised-button
+    class="facebook mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
+    type="submit"
+    [attr.aria-label]="labelFacebookButton"
+  >
+    <img src="./assets/vectors/facebook.svg" alt="Facebook" />
+    <ng-container i18n="@@ngOrcid.signin.facebook">
+      Sign in with Facebook
+    </ng-container>
+  </button>
+</form>
diff --git a/src/assets/vectors/institutional-access-no-background.svg b/src/assets/vectors/institutional-access-no-background.svg
new file mode 100644
index 0000000000..261bea3b9f
--- /dev/null
+++ b/src/assets/vectors/institutional-access-no-background.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_85_578)">
+<path d="M3.20385 8.86558H20.7838C21.3454 8.86558 21.835 8.51398 22.0102 7.98598C22.1494 7.45798 21.9742 6.89638 21.5182 6.57958L12.7294 0.249578C12.2734 -0.0660216 11.6794 -0.0660216 11.2594 0.249578L2.46945 6.57838C2.15505 6.82438 1.94385 7.17598 1.94385 7.59838C1.94385 8.30278 2.50425 8.86558 3.20385 8.86558ZM11.995 2.85118L16.8622 6.33238H7.12785L11.9962 2.85238L11.995 2.85118ZM10.273 17.5212L10.3126 11.8344L7.40145 10.4244V18.93L10.273 17.5212ZM16.6414 18.8904V10.506L13.7698 11.9148V17.6004L16.6414 18.8904Z" fill="#212121"/>
+<path d="M23.3182 21.5724H22.2574V20.5116C22.2574 20.1456 21.961 19.848 21.5962 19.848H20.6026V11.3328C20.6026 10.524 19.9426 9.86157 19.1374 9.86157C18.3298 9.86157 17.671 10.524 17.671 11.3328V19.848L6.31896 19.8456V11.3328C6.31896 10.524 5.65896 9.86157 4.85256 9.86157C4.04616 9.86157 3.38736 10.524 3.38736 11.3328V19.8444H2.39616C2.03136 19.8444 1.73496 20.142 1.73496 20.5092V21.5688H0.67416C0.30936 21.5688 0.0141602 21.8664 0.0141602 22.2336V23.3856H23.9758V22.2384C23.977 21.8712 23.683 21.5736 23.3182 21.5724Z" fill="#212121"/>
+</g>
+<defs>
+<clipPath id="clip0_85_578">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From b313505010001f56d06774acbff6872b7e298267 Mon Sep 17 00:00:00 2001
From: amontenegro <amontenegro@users.noreply.github.com>
Date: Mon, 18 Mar 2024 20:33:27 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=A4=96=20GITHUB=20ACTIONS=20format=5F?=
 =?UTF-8?q?prettier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../form-authorize.component.html             |   9 +-
 ...-factor-authentication-form.component.html | 574 +++++++++---------
 ...-factor-authentication-form.component.scss | 192 +++---
 ...hentication-form.component.scss-theme.scss |  38 +-
 ...wo-factor-authentication-form.component.ts | 302 ++++-----
 .../form-sign-in/form-sign-in.component.html  |   7 +-
 .../components/social/social.component.html   | 140 ++---
 7 files changed, 639 insertions(+), 623 deletions(-)

diff --git a/src/app/authorize/components/form-authorize/form-authorize.component.html b/src/app/authorize/components/form-authorize/form-authorize.component.html
index 6e6bd48607..f753ae9ae1 100644
--- a/src/app/authorize/components/form-authorize/form-authorize.component.html
+++ b/src/app/authorize/components/form-authorize/form-authorize.component.html
@@ -177,10 +177,11 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
       <div class="row" [ngClass]="{ 'center-content': platformInfo.columns4 }">
         <div class="col l2 profile-icon-wrapper">
           <div class="icon">
-            <mat-icon
-              class="profile-icon"
-              aria-hidden="false"
-              ><img src="./assets/vectors/profile-not-verified.svg" alt="profile icon" />
+            <mat-icon class="profile-icon" aria-hidden="false"
+              ><img
+                src="./assets/vectors/profile-not-verified.svg"
+                alt="profile icon"
+              />
             </mat-icon>
           </div>
         </div>
diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html
index 62a449b443..edf4e9003c 100644
--- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html
+++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html
@@ -1,285 +1,289 @@
-<form [formGroup]="twoFactorForm" (ngSubmit)="onSubmit()">
-  <p i18n="@@ngOrcid.signin.2fa.heading" *ngIf="!signInUpdatesV1Togglz">
-    Two-factor authentication
-  </p>
-  <div [ngClass]="{ 'input-container': signInUpdatesV1Togglz }">
-    <mat-label
-      class="orc-font-small-print"
-      i18n="@@ngOrcid.signin.2fa.label"
-      [ngClass]="{
-        error:
-          verificationWasTouched && isVerificationCodeInvalid
-      }"
-      *ngIf="!recoveryCode && signInUpdatesV1Togglz"
-      >Two-factor authentication code
-    </mat-label>
-    <mat-form-field
-      appearance="outline"
-      class="row deactivate"
-      *ngIf="!recoveryCode"
-    >
-      <mat-label
-        i18n="@@ngOrcid.signin.2fa.label"
-        *ngIf="!signInUpdatesV1Togglz"
-      >
-        Two-factor authentication code
-      </mat-label>
-      <input
-        matInput
-        #inputVerificationCode
-        formControlName="verificationCode"
-        cdkFocusInitial
-        appTrim
-        autocomplete="off"
-      />
-      <ng-container *ngIf="!signInUpdatesV1Togglz">
-        <mat-hint align="end"
-          >{{ inputVerificationCode.value?.length || 0 }}/6</mat-hint
-        >
-        <mat-error *ngIf="verificationFormControl.hasError('required')">
-          <p
-            i18n="@@ngOrcid.signin.2fa.verificationCodeRequired"
-            class="error-message"
-          >
-            Authentication code is required
-          </p>
-          <p class="error-length">
-            {{ inputVerificationCode.value?.length || 0 }}/6
-          </p>
-        </mat-error>
-
-        <mat-error
-          *ngIf="
-            verificationFormControl.hasError('minlength') ||
-            verificationFormControl.hasError('maxlength')
-          "
-        >
-          <p
-            i18n="@@ngOrcid.signin.2fa.badVerificationCodeLength"
-            class="error-message"
-          >
-            Invalid authentication code length
-          </p>
-          <p class="error-length">
-            {{ inputVerificationCode.value?.length || 0 }}/6
-          </p>
-        </mat-error>
-      </ng-container>
-    </mat-form-field>
-    <ng-container *ngIf="signInUpdatesV1Togglz && !recoveryCode">
-      <mat-hint
-        class="orc-font-small-print error-length"
-        *ngIf="!isVerificationCodeInvalid"
-        >{{ verificationFormControl.value?.length || 0 }}/6</mat-hint
-      >
-      <mat-error *ngIf="verificationWasTouched && verificationFormControl.hasError('required')">
-        <p
-          i18n="@@ngOrcid.signin.2fa.verificationCodeRequired"
-          class="error-message"
-        >
-          Authentication code is required
-        </p>
-        <p class="error-length">
-          {{ verificationFormControl.value?.length || 0 }}/6
-        </p>
-      </mat-error>
-
-      <mat-error
-        *ngIf="
-          verificationWasTouched && (
-          verificationFormControl.hasError('minlength') ||
-          verificationFormControl.hasError('maxlength')
-          )
-        "
-      >
-        <p
-          i18n="@@ngOrcid.signin.2fa.badVerificationCodeLength"
-          class="error-message"
-        >
-          Invalid authentication code length
-        </p>
-        <p class="error-length">
-          {{ verificationFormControl.value?.length || 0 }}/6
-        </p>
-      </mat-error>
-  </ng-container>
-  </div>
-  <p
-    [ngClass]="{
-      'enter-code': signInUpdatesV1Togglz && isVerificationCodeInvalid
-    }"
-  >
-    <a
-      [ngClass]="{
-        'mat-button-font': !signInUpdatesV1Togglz,
-        underline: signInUpdatesV1Togglz,
-        'orc-font-body-small': signInUpdatesV1Togglz
-      }"
-      (click)="showAuthenticationCode()"
-      i18n="@@ngOrcid.signin.2fa.instructionsPart1"
-      >Enter a code
-    </a>
-    <ng-container i18n="@@ngOrcid.signin.2fa.instructionsPart2">
-      from your two-factor authentication app
-    </ng-container>
-  </p>
-  <p>
-    <ng-container i18n="@@ngOrcid.signin.2fa.noDevice1">
-      Don't have your device?
-    </ng-container>
-    <a
-      [ngClass]="{
-        'mat-button-font': !signInUpdatesV1Togglz,
-        underline: signInUpdatesV1Togglz,
-        'orc-font-body-small': signInUpdatesV1Togglz
-      }"
-      (click)="showRecoveryCode()"
-      i18n="@@ngOrcid.signin.2fa.noDevice2"
-      >Enter a recovery code
-    </a>
-  </p>
-  <p>
-    <ng-container i18n="@@ngOrcid.signin.2fa.noDeviceOrRecovery">
-      Don't have your device or recovery code?
-    </ng-container>
-    <a
-      [ngClass]="{
-        'mat-button-font': !signInUpdatesV1Togglz,
-        underline: signInUpdatesV1Togglz,
-        'orcid-orc-font-body-small': signInUpdatesV1Togglz
-      }"
-      (click)="navigateTo('https://support.orcid.org/')"
-      rel="noopener noreferrer"
-      target="_blank"
-      i18n="@@shared.orcidHelpCenter"
-      >ORCID Help Center
-    </a>
-  </p>
-  <div [ngClass]="{ 'input-container': signInUpdatesV1Togglz }">
-    <mat-label
-      class="orc-font-small-print"
-      i18n="@@ngOrcid.signin.2fa.recoveryCode"
-      [ngClass]="{
-        error:
-          recoveryCodeFormControl?.touched && recoveryCodeFormControl.errors
-      }"
-      *ngIf="recoveryCode && signInUpdatesV1Togglz"
-      >Recovery code
-    </mat-label>
-    <mat-form-field
-      appearance="outline"
-      class="row two-factor"
-      *ngIf="recoveryCode"
-    >
-      <mat-label
-        i18n="@@ngOrcid.signin.2fa.recoveryCode"
-        *ngIf="!signInUpdatesV1Togglz"
-      >
-        Recovery code
-      </mat-label>
-      <input
-        matInput
-        #inputRecoveryCode
-        formControlName="recoveryCode"
-        appTrim
-        autocomplete="off"
-      />
-      <ng-container *ngIf="!signInUpdatesV1Togglz">
-        <mat-hint align="end"
-          >{{ inputRecoveryCode.value?.length || 0 }}/10</mat-hint
-        >
-        <mat-error *ngIf="recoveryCodeFormControl.hasError('required')">
-          <p
-            i18n="@@ngOrcid.signin.2fa.recoveryCodeRequired"
-            class="error-message"
-          >
-            Recovery code is required
-          </p>
-          <p class="error-length">
-            {{ inputRecoveryCode.value?.length || 0 }}/10
-          </p>
-        </mat-error>
-
-        <mat-error
-          *ngIf="
-            recoveryCodeFormControl.hasError('minlength') ||
-            recoveryCodeFormControl.hasError('maxlength')
-            "
-          >
-          <p
-            i18n="@@ngOrcid.signin.2fa.badRecoveryCodeLength"
-            class="error-message"
-          >
-            Invalid recovery code length
-          </p>
-          <p class="error-length">
-            {{ inputRecoveryCode.value?.length || 0 }}/10
-          </p>
-        </mat-error>
-      </ng-container>
-    </mat-form-field>
-    <ng-container *ngIf="signInUpdatesV1Togglz && recoveryCode">
-      <mat-hint
-        class="orc-font-small-print error-message"
-        *ngIf="!isRecoveryCodeInvalid"
-      >{{ recoveryCodeFormControl.value?.length || 0 }}/10</mat-hint
-      >
-      <mat-error
-        *ngIf="recoveryCodeWasTouched && recoveryCodeFormControl.hasError('required')">
-        <p
-          i18n="@@ngOrcid.signin.2fa.recoveryCodeRequired"
-          class="error-message"
-        >
-          Recovery code is required
-        </p>
-        <p class="error-length">
-          {{ recoveryCodeFormControl.value?.length || 0 }}/10
-        </p>
-      </mat-error>
-
-      <mat-error
-        *ngIf="
-          recoveryCodeWasTouched && (
-          recoveryCodeFormControl.hasError('minlength') ||
-          recoveryCodeFormControl.hasError('maxlength')
-          )
-        "
-      >
-        <p
-          i18n="@@ngOrcid.signin.2fa.badRecoveryCodeLength"
-          class="error-message"
-        >
-          Invalid recovery code length
-        </p>
-        <p class="error-length">
-          {{ recoveryCodeFormControl.value?.length || 0 }}/10
-        </p>
-      </mat-error>
-    </ng-container>
-  </div>
-
-  <button
-    mat-raised-button
-    class="row mat-elevation-z0 two-factor"
-    type="submit"
-    i18n="@@ngOrcid.signin.2fa.authenticate"
-    id="authenticateButton"
-    [ngClass]="{
-      'authenticate-button': signInUpdatesV1Togglz
-    }"
-  >
-    AUTHENTICATE
-  </button>
-</form>
-<mat-error *ngIf="showBadVerificationCode" class="orcid-error">
-  <mat-icon inline="true">error</mat-icon>
-  <ng-container i18n="@@ngOrcid.signin.2fa.badVerificationCode">
-    Invalid authentication code
-  </ng-container>
-</mat-error>
-<mat-error *ngIf="showBadRecoveryCode" class="orcid-error">
-  <mat-icon inline="true">error</mat-icon>
-  <ng-container i18n="@@ngOrcid.signin.2fa.badRecoveryCode">
-    Invalid recovery code
-  </ng-container>
-</mat-error>
+<form [formGroup]="twoFactorForm" (ngSubmit)="onSubmit()">
+  <p i18n="@@ngOrcid.signin.2fa.heading" *ngIf="!signInUpdatesV1Togglz">
+    Two-factor authentication
+  </p>
+  <div [ngClass]="{ 'input-container': signInUpdatesV1Togglz }">
+    <mat-label
+      class="orc-font-small-print"
+      i18n="@@ngOrcid.signin.2fa.label"
+      [ngClass]="{
+        error: verificationWasTouched && isVerificationCodeInvalid
+      }"
+      *ngIf="!recoveryCode && signInUpdatesV1Togglz"
+      >Two-factor authentication code
+    </mat-label>
+    <mat-form-field
+      appearance="outline"
+      class="row deactivate"
+      *ngIf="!recoveryCode"
+    >
+      <mat-label
+        i18n="@@ngOrcid.signin.2fa.label"
+        *ngIf="!signInUpdatesV1Togglz"
+      >
+        Two-factor authentication code
+      </mat-label>
+      <input
+        matInput
+        #inputVerificationCode
+        formControlName="verificationCode"
+        cdkFocusInitial
+        appTrim
+        autocomplete="off"
+      />
+      <ng-container *ngIf="!signInUpdatesV1Togglz">
+        <mat-hint align="end"
+          >{{ inputVerificationCode.value?.length || 0 }}/6</mat-hint
+        >
+        <mat-error *ngIf="verificationFormControl.hasError('required')">
+          <p
+            i18n="@@ngOrcid.signin.2fa.verificationCodeRequired"
+            class="error-message"
+          >
+            Authentication code is required
+          </p>
+          <p class="error-length">
+            {{ inputVerificationCode.value?.length || 0 }}/6
+          </p>
+        </mat-error>
+
+        <mat-error
+          *ngIf="
+            verificationFormControl.hasError('minlength') ||
+            verificationFormControl.hasError('maxlength')
+          "
+        >
+          <p
+            i18n="@@ngOrcid.signin.2fa.badVerificationCodeLength"
+            class="error-message"
+          >
+            Invalid authentication code length
+          </p>
+          <p class="error-length">
+            {{ inputVerificationCode.value?.length || 0 }}/6
+          </p>
+        </mat-error>
+      </ng-container>
+    </mat-form-field>
+    <ng-container *ngIf="signInUpdatesV1Togglz && !recoveryCode">
+      <mat-hint
+        class="orc-font-small-print error-length"
+        *ngIf="!isVerificationCodeInvalid"
+        >{{ verificationFormControl.value?.length || 0 }}/6</mat-hint
+      >
+      <mat-error
+        *ngIf="
+          verificationWasTouched && verificationFormControl.hasError('required')
+        "
+      >
+        <p
+          i18n="@@ngOrcid.signin.2fa.verificationCodeRequired"
+          class="error-message"
+        >
+          Authentication code is required
+        </p>
+        <p class="error-length">
+          {{ verificationFormControl.value?.length || 0 }}/6
+        </p>
+      </mat-error>
+
+      <mat-error
+        *ngIf="
+          verificationWasTouched &&
+          (verificationFormControl.hasError('minlength') ||
+            verificationFormControl.hasError('maxlength'))
+        "
+      >
+        <p
+          i18n="@@ngOrcid.signin.2fa.badVerificationCodeLength"
+          class="error-message"
+        >
+          Invalid authentication code length
+        </p>
+        <p class="error-length">
+          {{ verificationFormControl.value?.length || 0 }}/6
+        </p>
+      </mat-error>
+    </ng-container>
+  </div>
+  <p
+    [ngClass]="{
+      'enter-code': signInUpdatesV1Togglz && isVerificationCodeInvalid
+    }"
+  >
+    <a
+      [ngClass]="{
+        'mat-button-font': !signInUpdatesV1Togglz,
+        underline: signInUpdatesV1Togglz,
+        'orc-font-body-small': signInUpdatesV1Togglz
+      }"
+      (click)="showAuthenticationCode()"
+      i18n="@@ngOrcid.signin.2fa.instructionsPart1"
+      >Enter a code
+    </a>
+    <ng-container i18n="@@ngOrcid.signin.2fa.instructionsPart2">
+      from your two-factor authentication app
+    </ng-container>
+  </p>
+  <p>
+    <ng-container i18n="@@ngOrcid.signin.2fa.noDevice1">
+      Don't have your device?
+    </ng-container>
+    <a
+      [ngClass]="{
+        'mat-button-font': !signInUpdatesV1Togglz,
+        underline: signInUpdatesV1Togglz,
+        'orc-font-body-small': signInUpdatesV1Togglz
+      }"
+      (click)="showRecoveryCode()"
+      i18n="@@ngOrcid.signin.2fa.noDevice2"
+      >Enter a recovery code
+    </a>
+  </p>
+  <p>
+    <ng-container i18n="@@ngOrcid.signin.2fa.noDeviceOrRecovery">
+      Don't have your device or recovery code?
+    </ng-container>
+    <a
+      [ngClass]="{
+        'mat-button-font': !signInUpdatesV1Togglz,
+        underline: signInUpdatesV1Togglz,
+        'orcid-orc-font-body-small': signInUpdatesV1Togglz
+      }"
+      (click)="navigateTo('https://support.orcid.org/')"
+      rel="noopener noreferrer"
+      target="_blank"
+      i18n="@@shared.orcidHelpCenter"
+      >ORCID Help Center
+    </a>
+  </p>
+  <div [ngClass]="{ 'input-container': signInUpdatesV1Togglz }">
+    <mat-label
+      class="orc-font-small-print"
+      i18n="@@ngOrcid.signin.2fa.recoveryCode"
+      [ngClass]="{
+        error:
+          recoveryCodeFormControl?.touched && recoveryCodeFormControl.errors
+      }"
+      *ngIf="recoveryCode && signInUpdatesV1Togglz"
+      >Recovery code
+    </mat-label>
+    <mat-form-field
+      appearance="outline"
+      class="row two-factor"
+      *ngIf="recoveryCode"
+    >
+      <mat-label
+        i18n="@@ngOrcid.signin.2fa.recoveryCode"
+        *ngIf="!signInUpdatesV1Togglz"
+      >
+        Recovery code
+      </mat-label>
+      <input
+        matInput
+        #inputRecoveryCode
+        formControlName="recoveryCode"
+        appTrim
+        autocomplete="off"
+      />
+      <ng-container *ngIf="!signInUpdatesV1Togglz">
+        <mat-hint align="end"
+          >{{ inputRecoveryCode.value?.length || 0 }}/10</mat-hint
+        >
+        <mat-error *ngIf="recoveryCodeFormControl.hasError('required')">
+          <p
+            i18n="@@ngOrcid.signin.2fa.recoveryCodeRequired"
+            class="error-message"
+          >
+            Recovery code is required
+          </p>
+          <p class="error-length">
+            {{ inputRecoveryCode.value?.length || 0 }}/10
+          </p>
+        </mat-error>
+
+        <mat-error
+          *ngIf="
+            recoveryCodeFormControl.hasError('minlength') ||
+            recoveryCodeFormControl.hasError('maxlength')
+          "
+        >
+          <p
+            i18n="@@ngOrcid.signin.2fa.badRecoveryCodeLength"
+            class="error-message"
+          >
+            Invalid recovery code length
+          </p>
+          <p class="error-length">
+            {{ inputRecoveryCode.value?.length || 0 }}/10
+          </p>
+        </mat-error>
+      </ng-container>
+    </mat-form-field>
+    <ng-container *ngIf="signInUpdatesV1Togglz && recoveryCode">
+      <mat-hint
+        class="orc-font-small-print error-message"
+        *ngIf="!isRecoveryCodeInvalid"
+        >{{ recoveryCodeFormControl.value?.length || 0 }}/10</mat-hint
+      >
+      <mat-error
+        *ngIf="
+          recoveryCodeWasTouched && recoveryCodeFormControl.hasError('required')
+        "
+      >
+        <p
+          i18n="@@ngOrcid.signin.2fa.recoveryCodeRequired"
+          class="error-message"
+        >
+          Recovery code is required
+        </p>
+        <p class="error-length">
+          {{ recoveryCodeFormControl.value?.length || 0 }}/10
+        </p>
+      </mat-error>
+
+      <mat-error
+        *ngIf="
+          recoveryCodeWasTouched &&
+          (recoveryCodeFormControl.hasError('minlength') ||
+            recoveryCodeFormControl.hasError('maxlength'))
+        "
+      >
+        <p
+          i18n="@@ngOrcid.signin.2fa.badRecoveryCodeLength"
+          class="error-message"
+        >
+          Invalid recovery code length
+        </p>
+        <p class="error-length">
+          {{ recoveryCodeFormControl.value?.length || 0 }}/10
+        </p>
+      </mat-error>
+    </ng-container>
+  </div>
+
+  <button
+    mat-raised-button
+    class="row mat-elevation-z0 two-factor"
+    type="submit"
+    i18n="@@ngOrcid.signin.2fa.authenticate"
+    id="authenticateButton"
+    [ngClass]="{
+      'authenticate-button': signInUpdatesV1Togglz
+    }"
+  >
+    AUTHENTICATE
+  </button>
+</form>
+<mat-error *ngIf="showBadVerificationCode" class="orcid-error">
+  <mat-icon inline="true">error</mat-icon>
+  <ng-container i18n="@@ngOrcid.signin.2fa.badVerificationCode">
+    Invalid authentication code
+  </ng-container>
+</mat-error>
+<mat-error *ngIf="showBadRecoveryCode" class="orcid-error">
+  <mat-icon inline="true">error</mat-icon>
+  <ng-container i18n="@@ngOrcid.signin.2fa.badRecoveryCode">
+    Invalid recovery code
+  </ng-container>
+</mat-error>
diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss
index 9ef870a7b2..9e9c321fc6 100644
--- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss
+++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss
@@ -1,96 +1,96 @@
-:host {
-  width: 100%;
-}
-
-.mat-button-font {
-  margin: auto;
-}
-
-.two-factor {
-  margin-top: 12px;
-}
-
-.error-message {
-  float: left;
-  margin: 0;
-  [dir='rtl'] :host & {
-    float: right;
-  }
-}
-
-.error-length {
-  float: right;
-  margin: 0;
-  [dir='rtl'] :host & {
-    float: left;
-  }
-}
-
-.orcid-error {
-  margin-top: 20px !important;
-}
-
-.input-container {
-  margin-bottom: 20px;
-  ::ng-deep {
-    mat-error {
-      margin-top: 8px !important;
-      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;
-    }
-  }
-}
-
-p.enter-code {
-  margin-top: 28px;
-}
-
-mat-label.orc-font-small-print {
-  font-weight: bold;
-  display: block;
-  margin-bottom: 4px;
-
-  label {
-    font-weight: normal;
-  }
-}
+:host {
+  width: 100%;
+}
+
+.mat-button-font {
+  margin: auto;
+}
+
+.two-factor {
+  margin-top: 12px;
+}
+
+.error-message {
+  float: left;
+  margin: 0;
+  [dir='rtl'] :host & {
+    float: right;
+  }
+}
+
+.error-length {
+  float: right;
+  margin: 0;
+  [dir='rtl'] :host & {
+    float: left;
+  }
+}
+
+.orcid-error {
+  margin-top: 20px !important;
+}
+
+.input-container {
+  margin-bottom: 20px;
+  ::ng-deep {
+    mat-error {
+      margin-top: 8px !important;
+      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;
+    }
+  }
+}
+
+p.enter-code {
+  margin-top: 28px;
+}
+
+mat-label.orc-font-small-print {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 4px;
+
+  label {
+    font-weight: normal;
+  }
+}
diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss
index 73a51f868f..d50c78394b 100644
--- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss
+++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss
@@ -1,19 +1,19 @@
-@use '@angular/material' as mat;
-@import 'src/assets/scss/material.orcid-theme.scss';
-
-@mixin two-factor-authentication-form-theme($theme) {
-  $primary: map-get($theme, primary);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
-
-  .authenticate-button {
-    color: $orcid-light-primary-text;
-    background: mat.get-color-from-palette($primary, 700);
-  }
-
-  .error {
-    color: map-get($foreground, 'state-warning-dark');
-  }
-}
-
-@include two-factor-authentication-form-theme($orcid-app-theme);
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin two-factor-authentication-form-theme($theme) {
+  $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .authenticate-button {
+    color: $orcid-light-primary-text;
+    background: mat.get-color-from-palette($primary, 700);
+  }
+
+  .error {
+    color: map-get($foreground, 'state-warning-dark');
+  }
+}
+
+@include two-factor-authentication-form-theme($orcid-app-theme);
diff --git a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts
index 4f7b7ffe45..0c4fc22f25 100644
--- a/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts
+++ b/src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts
@@ -1,146 +1,156 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  Inject,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core'
-import {
-  UntypedFormControl,
-  UntypedFormGroup,
-  Validators,
-} from '@angular/forms'
-import { WINDOW } from '../../window'
-
-@Component({
-  selector: 'app-two-factor-authentication-form',
-  templateUrl: './two-factor-authentication-form.component.html',
-  styleUrls: [
-    './two-factor-authentication-form.component.scss',
-    './two-factor-authentication-form.component.scss-theme.scss',
-  ],
-  preserveWhitespaces: true,
-})
-export class TwoFactorAuthenticationFormComponent implements AfterViewInit {
-  @Input() showBadVerificationCode: boolean
-  @Input() showBadRecoveryCode: boolean
-  @Input() signInUpdatesV1Togglz: boolean
-  @Output() authenticate = new EventEmitter<{
-    verificationCode?: string
-    recoveryCode?: string
-  }>()
-
-  @ViewChild('inputVerificationCode')
-  inputVerificationCode: ElementRef
-  @ViewChild('inputRecoveryCode')
-  inputRecoveryCode: ElementRef
-
-  recoveryCode = false
-
-  twoFactorForm = new UntypedFormGroup({
-    verificationCode: new UntypedFormControl('', [
-      Validators.required,
-      Validators.minLength(6),
-      Validators.maxLength(6),
-    ]),
-    recoveryCode: new UntypedFormControl('', [
-      Validators.required,
-      Validators.maxLength(10),
-      Validators.minLength(10),
-    ]),
-  })
-
-  get verificationFormControl() {
-    return this.twoFactorForm.controls.verificationCode
-  }
-
-  get recoveryCodeFormControl() {
-    return this.twoFactorForm.controls.recoveryCode
-  }
-
-  get verificationWasTouched() {
-    return this.verificationFormControl.dirty || this.verificationFormControl.touched
-  }
-
-  get recoveryCodeWasTouched() {
-    return this.recoveryCodeFormControl.dirty || this.recoveryCodeFormControl.touched
-  }
-
-  get isVerificationCodeInvalid() {
-    return (this.verificationWasTouched && this.verificationFormControl.hasError('required'))  ||
-            this.verificationFormControl.hasError('minlength') ||
-            this.verificationFormControl.hasError('maxlength')
-  }
-
-  get isRecoveryCodeInvalid() {
-    return (this. recoveryCodeWasTouched && this.verificationFormControl.hasError('required')) ||
-            this.verificationFormControl.hasError('minlength') ||
-            this.verificationFormControl.hasError('maxlength')
-  }
-
-  constructor(
-    private cdref: ChangeDetectorRef,
-    @Inject(WINDOW) private window: Window
-  ) {}
-
-  ngAfterViewInit() {
-    this.inputVerificationCode.nativeElement.focus()
-    this.cdref.detectChanges()
-  }
-
-  onSubmit() {
-    this.hideErrorMessages()
-    this.disableValidators()
-
-    if (this.twoFactorForm.valid) {
-      this.authenticate.emit({
-        verificationCode: this.twoFactorForm.value.verificationCode,
-        recoveryCode: this.twoFactorForm.value.recoveryCode,
-      })
-
-      this.enableValidators()
-    }
-  }
-
-  disableValidators() {
-    if (!this.recoveryCode) {
-      this.recoveryCodeFormControl.disable()
-    } else {
-      this.verificationFormControl.disable()
-    }
-  }
-
-  enableValidators() {
-    this.verificationFormControl.enable()
-    this.recoveryCodeFormControl.enable()
-  }
-
-  showRecoveryCode() {
-    this.hideErrorMessages()
-    this.recoveryCode = true
-    setTimeout(() => {
-      this.inputRecoveryCode.nativeElement.focus()
-    })
-  }
-
-  showAuthenticationCode() {
-    this.hideErrorMessages()
-    this.recoveryCode = false
-    setTimeout(() => {
-      this.inputVerificationCode.nativeElement.focus()
-    })
-  }
-
-  hideErrorMessages() {
-    this.showBadRecoveryCode = false
-    this.showBadRecoveryCode = false
-  }
-
-  navigateTo(val) {
-    this.window.location.href = val
-  }
-}
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import {
+  UntypedFormControl,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms'
+import { WINDOW } from '../../window'
+
+@Component({
+  selector: 'app-two-factor-authentication-form',
+  templateUrl: './two-factor-authentication-form.component.html',
+  styleUrls: [
+    './two-factor-authentication-form.component.scss',
+    './two-factor-authentication-form.component.scss-theme.scss',
+  ],
+  preserveWhitespaces: true,
+})
+export class TwoFactorAuthenticationFormComponent implements AfterViewInit {
+  @Input() showBadVerificationCode: boolean
+  @Input() showBadRecoveryCode: boolean
+  @Input() signInUpdatesV1Togglz: boolean
+  @Output() authenticate = new EventEmitter<{
+    verificationCode?: string
+    recoveryCode?: string
+  }>()
+
+  @ViewChild('inputVerificationCode')
+  inputVerificationCode: ElementRef
+  @ViewChild('inputRecoveryCode')
+  inputRecoveryCode: ElementRef
+
+  recoveryCode = false
+
+  twoFactorForm = new UntypedFormGroup({
+    verificationCode: new UntypedFormControl('', [
+      Validators.required,
+      Validators.minLength(6),
+      Validators.maxLength(6),
+    ]),
+    recoveryCode: new UntypedFormControl('', [
+      Validators.required,
+      Validators.maxLength(10),
+      Validators.minLength(10),
+    ]),
+  })
+
+  get verificationFormControl() {
+    return this.twoFactorForm.controls.verificationCode
+  }
+
+  get recoveryCodeFormControl() {
+    return this.twoFactorForm.controls.recoveryCode
+  }
+
+  get verificationWasTouched() {
+    return (
+      this.verificationFormControl.dirty || this.verificationFormControl.touched
+    )
+  }
+
+  get recoveryCodeWasTouched() {
+    return (
+      this.recoveryCodeFormControl.dirty || this.recoveryCodeFormControl.touched
+    )
+  }
+
+  get isVerificationCodeInvalid() {
+    return (
+      (this.verificationWasTouched &&
+        this.verificationFormControl.hasError('required')) ||
+      this.verificationFormControl.hasError('minlength') ||
+      this.verificationFormControl.hasError('maxlength')
+    )
+  }
+
+  get isRecoveryCodeInvalid() {
+    return (
+      (this.recoveryCodeWasTouched &&
+        this.verificationFormControl.hasError('required')) ||
+      this.verificationFormControl.hasError('minlength') ||
+      this.verificationFormControl.hasError('maxlength')
+    )
+  }
+
+  constructor(
+    private cdref: ChangeDetectorRef,
+    @Inject(WINDOW) private window: Window
+  ) {}
+
+  ngAfterViewInit() {
+    this.inputVerificationCode.nativeElement.focus()
+    this.cdref.detectChanges()
+  }
+
+  onSubmit() {
+    this.hideErrorMessages()
+    this.disableValidators()
+
+    if (this.twoFactorForm.valid) {
+      this.authenticate.emit({
+        verificationCode: this.twoFactorForm.value.verificationCode,
+        recoveryCode: this.twoFactorForm.value.recoveryCode,
+      })
+
+      this.enableValidators()
+    }
+  }
+
+  disableValidators() {
+    if (!this.recoveryCode) {
+      this.recoveryCodeFormControl.disable()
+    } else {
+      this.verificationFormControl.disable()
+    }
+  }
+
+  enableValidators() {
+    this.verificationFormControl.enable()
+    this.recoveryCodeFormControl.enable()
+  }
+
+  showRecoveryCode() {
+    this.hideErrorMessages()
+    this.recoveryCode = true
+    setTimeout(() => {
+      this.inputRecoveryCode.nativeElement.focus()
+    })
+  }
+
+  showAuthenticationCode() {
+    this.hideErrorMessages()
+    this.recoveryCode = false
+    setTimeout(() => {
+      this.inputVerificationCode.nativeElement.focus()
+    })
+  }
+
+  hideErrorMessages() {
+    this.showBadRecoveryCode = false
+    this.showBadRecoveryCode = false
+  }
+
+  navigateTo(val) {
+    this.window.location.href = val
+  }
+}
diff --git a/src/app/sign-in/components/form-sign-in/form-sign-in.component.html b/src/app/sign-in/components/form-sign-in/form-sign-in.component.html
index 794a319ead..520fddf023 100644
--- a/src/app/sign-in/components/form-sign-in/form-sign-in.component.html
+++ b/src/app/sign-in/components/form-sign-in/form-sign-in.component.html
@@ -62,8 +62,7 @@
   <ng-container *ngIf="signInUpdatesV1Togglz">
     <app-my-orcid-alerts
       *ngIf="
-        (emailVerified || invalidVerifyUrl) ||
-        (printError && badCredentials)
+        emailVerified || invalidVerifyUrl || (printError && badCredentials)
       "
       [emailVerified]="emailVerified"
       [invalidVerifyUrl]="invalidVerifyUrl"
@@ -114,7 +113,9 @@
       </mat-error>
 
       <app-print-errors
-        *ngIf="signInUpdatesV1Togglz && printError && !badCredentials && !show2FA"
+        *ngIf="
+          signInUpdatesV1Togglz && printError && !badCredentials && !show2FA
+        "
         [showDeprecatedError]="showDeprecatedError"
         [showUnclaimedError]="showUnclaimedError"
         [showDeactivatedError]="showDeactivatedError"
diff --git a/src/app/sign-in/components/social/social.component.html b/src/app/sign-in/components/social/social.component.html
index 2951ed6766..6753d4a648 100644
--- a/src/app/sign-in/components/social/social.component.html
+++ b/src/app/sign-in/components/social/social.component.html
@@ -1,70 +1,70 @@
-<button
-  mat-raised-button
-  id="access-through-your-institution-button"
-  (click)="accessThroughInstitution()"
-  class="mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
-  [ngClass]="{
-    institution: !signInUpdatesV1Togglz,
-    institutional: signInUpdatesV1Togglz,
-    mobile: signInUpdatesV1Togglz && !platform.columns12
-  }"
-  type="button"
-  [attr.aria-label]="labelInstitutionalButton"
->
-  <img
-    [src]="
-      signInUpdatesV1Togglz
-        ? './assets/vectors/institutional-access-no-background.svg'
-        : './assets/vectors/institutional-access.svg'
-    "
-    alt="Institutional"
-  />
-  <ng-container
-    i18n="@@ngOrcid.signin.institutionalAccount"
-    *ngIf="!signInUpdatesV1Togglz"
-  >
-    Access through your institution
-  </ng-container>
-  <ng-container
-    i18n="@@ngOrcid.signin.signInInstitution"
-    *ngIf="signInUpdatesV1Togglz"
-  >
-    Sign in through your institution
-  </ng-container>
-</button>
-<form ngNoForm action="{{ baseUri }}signin/google" method="POST">
-  <input type="hidden" name="_csrf" value="{{ csrf }}" />
-  <input type="hidden" name="scope" value="email" />
-  <button
-    mat-raised-button
-    class="google mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
-    type="submit"
-    [attr.aria-label]="labelGoogleButton"
-    [ngClass]="{ google: signInUpdatesV1Togglz }"
-  >
-    <img src="./assets/vectors/google.svg" alt="Google" />
-    <ng-container i18n="@@ngOrcid.signin.google">
-      Sign in with Google
-    </ng-container>
-  </button>
-</form>
-<form
-  ngNoForm
-  action="{{ baseUri }}signin/facebook"
-  method="POST"
-  *ngIf="!signInUpdatesV1Togglz"
->
-  <input type="hidden" name="_csrf" value="{{ csrf }}" />
-  <input type="hidden" name="scope" value="email" />
-  <button
-    mat-raised-button
-    class="facebook mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
-    type="submit"
-    [attr.aria-label]="labelFacebookButton"
-  >
-    <img src="./assets/vectors/facebook.svg" alt="Facebook" />
-    <ng-container i18n="@@ngOrcid.signin.facebook">
-      Sign in with Facebook
-    </ng-container>
-  </button>
-</form>
+<button
+  mat-raised-button
+  id="access-through-your-institution-button"
+  (click)="accessThroughInstitution()"
+  class="mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
+  [ngClass]="{
+    institution: !signInUpdatesV1Togglz,
+    institutional: signInUpdatesV1Togglz,
+    mobile: signInUpdatesV1Togglz && !platform.columns12
+  }"
+  type="button"
+  [attr.aria-label]="labelInstitutionalButton"
+>
+  <img
+    [src]="
+      signInUpdatesV1Togglz
+        ? './assets/vectors/institutional-access-no-background.svg'
+        : './assets/vectors/institutional-access.svg'
+    "
+    alt="Institutional"
+  />
+  <ng-container
+    i18n="@@ngOrcid.signin.institutionalAccount"
+    *ngIf="!signInUpdatesV1Togglz"
+  >
+    Access through your institution
+  </ng-container>
+  <ng-container
+    i18n="@@ngOrcid.signin.signInInstitution"
+    *ngIf="signInUpdatesV1Togglz"
+  >
+    Sign in through your institution
+  </ng-container>
+</button>
+<form ngNoForm action="{{ baseUri }}signin/google" method="POST">
+  <input type="hidden" name="_csrf" value="{{ csrf }}" />
+  <input type="hidden" name="scope" value="email" />
+  <button
+    mat-raised-button
+    class="google mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
+    type="submit"
+    [attr.aria-label]="labelGoogleButton"
+    [ngClass]="{ google: signInUpdatesV1Togglz }"
+  >
+    <img src="./assets/vectors/google.svg" alt="Google" />
+    <ng-container i18n="@@ngOrcid.signin.google">
+      Sign in with Google
+    </ng-container>
+  </button>
+</form>
+<form
+  ngNoForm
+  action="{{ baseUri }}signin/facebook"
+  method="POST"
+  *ngIf="!signInUpdatesV1Togglz"
+>
+  <input type="hidden" name="_csrf" value="{{ csrf }}" />
+  <input type="hidden" name="scope" value="email" />
+  <button
+    mat-raised-button
+    class="facebook mat-button-wrap-text-with-icon mobile-fixed-width mat-elevation-z0"
+    type="submit"
+    [attr.aria-label]="labelFacebookButton"
+  >
+    <img src="./assets/vectors/facebook.svg" alt="Facebook" />
+    <ng-container i18n="@@ngOrcid.signin.facebook">
+      Sign in with Facebook
+    </ng-container>
+  </button>
+</form>