feat: enable autocomplete for one-time-code (#2749)

* feat: enable autocomplete for one-time-code

Add HTML attributes to enable autofill by password managers.

* Code review changes: one-time code fields will behave consistently

---------

Co-authored-by: Angel Montenegro <a.montenegro@orcid.org>

Author: olivier-maury

src/app/account-settings/pages/confirm-deactivate-account/confirm-deactivate-account.component.html

@@ -128,8 +128,9 @@
         >
           <input
             id="twoFactorCode"
-            type="text"
+            autocomplete="one-time-code"
             inputmode="numeric"
+            name="totp"
             aria-labelledby="2fa-input-label"
             formControlName="twoFactorCode"
             matInput

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

@@ -2,6 +2,7 @@
   <div class="input-container">
     <mat-label
       class="orc-font-small-print"
+      for="totp"
       i18n="@@ngOrcid.signin.2fa.label"
       [ngClass]="{
         error: isVerificationCodeInvalid
@@ -20,7 +21,11 @@
         formControlName="verificationCode"
         cdkFocusInitial
         appTrim
-        autocomplete="off"
+        autocomplete="one-time-code"
+        id="totp"
+        inputmode="numeric"
+        name="totp"
+        type="text"
       />
     </mat-form-field>
     <ng-container *ngIf="!recoveryCode">
@@ -119,7 +124,10 @@
         #inputRecoveryCode
         formControlName="recoveryCode"
         appTrim
-        autocomplete="off"
+        autocomplete="one-time-code"
+        inputmode="numeric"
+        name="totp"
+        type="text"
       />
     </mat-form-field>
     <ng-container *ngIf="recoveryCode">

src/app/two-factor-setup/components/two-factor-enable/two-factor-enable.component.html

@@ -117,7 +117,11 @@
             #inputVerificationCode
             formControlName="verificationCode"
             appTrim
-            autocomplete="off"
+            autocomplete="one-time-code"
+            id="totp"
+            inputmode="numeric"
+            name="totp"
+            type="text"
             data-cy="verification-code-input"
           />
           <mat-hint align="end"