Merge branch 'main' into feature/9107-record-summaries

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>

src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.html

@@ -7,8 +7,7 @@
       class="orc-font-small-print"
       i18n="@@ngOrcid.signin.2fa.label"
       [ngClass]="{
-        error:
-          verificationFormControl?.touched && verificationFormControl.errors
+        error: verificationWasTouched && isVerificationCodeInvalid
       }"
       *ngIf="!recoveryCode && signInUpdatesV1Togglz"
       >Two-factor authentication code
@@ -32,25 +31,67 @@
         appTrim
         autocomplete="off"
       />
-      <mat-hint align="end"
-        >{{ inputVerificationCode.value?.length || 0 }}/6</mat-hint
+      <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')
+        "
       >
-      <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
+          {{ verificationFormControl.value?.length || 0 }}/6
         </p>
       </mat-error>
 
       <mat-error
         *ngIf="
-          verificationFormControl.hasError('minlength') ||
-          verificationFormControl.hasError('maxlength')
+          verificationWasTouched &&
+          (verificationFormControl.hasError('minlength') ||
+            verificationFormControl.hasError('maxlength'))
         "
       >
         <p
@@ -60,17 +101,21 @@
           Invalid authentication code length
         </p>
         <p class="error-length">
-          {{ inputVerificationCode.value?.length || 0 }}/6
+          {{ verificationFormControl.value?.length || 0 }}/6
         </p>
       </mat-error>
-    </mat-form-field>
+    </ng-container>
   </div>
-  <p>
+  <p
+    [ngClass]="{
+      'enter-code': signInUpdatesV1Togglz && isVerificationCodeInvalid
+    }"
+  >
     <a
       [ngClass]="{
         'mat-button-font': !signInUpdatesV1Togglz,
         underline: signInUpdatesV1Togglz,
-        'orcid-orc-font-body-small': signInUpdatesV1Togglz
+        'orc-font-body-small': signInUpdatesV1Togglz
       }"
       (click)="showAuthenticationCode()"
       i18n="@@ngOrcid.signin.2fa.instructionsPart1"
@@ -88,7 +133,7 @@
       [ngClass]="{
         'mat-button-font': !signInUpdatesV1Togglz,
         underline: signInUpdatesV1Togglz,
-        'orcid-orc-font-body-small': signInUpdatesV1Togglz
+        'orc-font-body-small': signInUpdatesV1Togglz
       }"
       (click)="showRecoveryCode()"
       i18n="@@ngOrcid.signin.2fa.noDevice2"
@@ -141,25 +186,67 @@
         appTrim
         autocomplete="off"
       />
-      <mat-hint align="end"
-        >{{ inputRecoveryCode.value?.length || 0 }}/10</mat-hint
+      <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')
+        "
       >
-      <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
+          {{ recoveryCodeFormControl.value?.length || 0 }}/10
         </p>
       </mat-error>
 
       <mat-error
         *ngIf="
-          recoveryCodeFormControl.hasError('minlength') ||
-          recoveryCodeFormControl.hasError('maxlength')
+          recoveryCodeWasTouched &&
+          (recoveryCodeFormControl.hasError('minlength') ||
+            recoveryCodeFormControl.hasError('maxlength'))
         "
       >
         <p
@@ -169,10 +256,10 @@
           Invalid recovery code length
         </p>
         <p class="error-length">
-          {{ inputRecoveryCode.value?.length || 0 }}/10
+          {{ recoveryCodeFormControl.value?.length || 0 }}/10
         </p>
       </mat-error>
-    </mat-form-field>
+    </ng-container>
   </div>
 
   <button

src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss

@@ -81,6 +81,10 @@
   }
 }
 
+p.enter-code {
+  margin-top: 28px;
+}
+
 mat-label.orc-font-small-print {
   font-weight: bold;
   display: block;

src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.scss-theme.scss

@@ -10,6 +10,10 @@
     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);

src/app/cdk/two-factor-authentication-form/two-factor/two-factor-authentication-form.component.ts

@@ -41,23 +41,57 @@ export class TwoFactorAuthenticationFormComponent implements AfterViewInit {
 
   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,
+    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

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"
+        *ngIf="
+          signInUpdatesV1Togglz && printError && !badCredentials && !show2FA
+        "
         [showDeprecatedError]="showDeprecatedError"
         [showUnclaimedError]="showUnclaimedError"
         [showDeactivatedError]="showDeactivatedError"

src/app/sign-in/components/social/social.component.html

@@ -14,7 +14,7 @@
   <img
     [src]="
       signInUpdatesV1Togglz
-        ? './assets/vectors/institutional-access.svg'
+        ? './assets/vectors/institutional-access-no-background.svg'
         : './assets/vectors/institutional-access.svg'
     "
     alt="Institutional"