PD-6046 PD-6045 add 2FA recovery phone number

projects/orcid-registry-ui/src/lib/components/auth-challenge/auth-challenge.component.html

@@ -276,6 +276,7 @@ <h1 class="orc-font-heading-small text-center font-normal" i18n>
   <button
     mat-raised-button
     type="submit"
+    id="cy-verify-account-continue"
     class="verify-button row orc-font-body mat-elevation-z0 text-center h-10! mb-6 block w-full"
     i18n
     [disabled]="loading || parentForm.invalid || parentForm.pending"
@@ -290,6 +291,7 @@ <h1 class="orc-font-heading-small text-center font-normal" i18n>
   <button
     mat-button
     type="button"
+    id="cy-cancel-account-verification"
     (click)="onCancel()"
     class="text-center orc-font-body-small h-10! w-full block content-center cancel font-normal!"
     i18n

projects/orcid-ui-docs/src/app/pages/orcid-ui/step-view-page.component.html

@@ -22,6 +22,11 @@
         <input matInput [(ngModel)]="config.primaryLabel" />
       </mat-form-field>
 
+      <mat-form-field appearance="outline">
+        <mat-label>Secondary action label</mat-label>
+        <input matInput [(ngModel)]="config.secondaryLabel" />
+      </mat-form-field>
+
       <mat-checkbox [(ngModel)]="config.primaryDisabled">
         Disable primary action
       </mat-checkbox>
@@ -38,6 +43,7 @@
         [title]="config.title"
         [subtitle]="config.subtitle"
         [primaryLabel]="config.primaryLabel"
+        [secondaryLabel]="config.secondaryLabel"
         [primaryDisabled]="config.primaryDisabled"
         [fullWidthActions]="config.fullWidthActions"
       >
@@ -60,8 +66,10 @@
   [title]="title"
   [subtitle]="subtitle"
   [primaryLabel]="primaryLabel"
+  [secondaryLabel]="secondaryLabel"
   [primaryDisabled]="isPrimaryDisabled"
   (primaryAction)="onPrimary()"
+  (secondaryAction)="onSecondary()"
 &gt;
   &lt;div&gt;Step content goes here&lt;/div&gt;
 
@@ -79,6 +87,10 @@ <h4>Inputs</h4>
         <code>subtitle</code>: Optional secondary line (for step count copy).
       </li>
       <li><code>primaryLabel</code>: Optional primary button label.</li>
+      <li>
+        <code>secondaryLabel</code>: Optional secondary action, rendered as a
+        link below the primary button.
+      </li>
       <li><code>primaryDisabled</code>: Disables primary action.</li>
       <li>
         <code>fullWidthActions</code>: Makes action buttons stretch to width.
@@ -90,6 +102,10 @@ <h4>Outputs</h4>
       <li>
         <code>primaryAction</code>: Emitted when primary action is clicked.
       </li>
+      <li>
+        <code>secondaryAction</code>: Emitted when the secondary action is
+        clicked.
+      </li>
     </ul>
 
     <h4>Slots</h4>

projects/orcid-ui-docs/src/app/pages/orcid-ui/step-view-page.component.ts

@@ -29,6 +29,7 @@ export class StepViewPageComponent {
     title: 'Enable two-factor authentication',
     subtitle: 'Step 1 of 2 - Authentication app',
     primaryLabel: 'Next step - 2FA recovery codes',
+    secondaryLabel: 'Cancel',
     primaryDisabled: false,
     fullWidthActions: true,
   }

projects/orcid-ui/src/lib/components/step-view/step-view.component.html

@@ -24,13 +24,23 @@ <h2 class="orcid-step-view__title">{{ title }}</h2>
       <button
         *ngIf="primaryLabel"
         mat-flat-button
+        id="cy-step-view-primary-action"
         class="orcid-step-view__primary-action"
         type="button"
         [disabled]="primaryDisabled"
         (click)="primaryAction.emit()"
       >
         {{ primaryLabel }}
       </button>
+      <button
+        *ngIf="secondaryLabel"
+        id="cy-step-view-secondary-action"
+        class="orcid-step-view__secondary-action"
+        type="button"
+        (click)="secondaryAction.emit()"
+      >
+        {{ secondaryLabel }}
+      </button>
     </div>
   </footer>
 </section>

projects/orcid-ui/src/lib/components/step-view/step-view.component.scss

@@ -62,16 +62,18 @@
 
 .orcid-step-view__actions {
   display: flex;
-  gap: var(--orcid-space-4, 16px);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--orcid-space-m, 24px);
   justify-content: center;
 }
 
 .orcid-step-view__actions--full {
   width: 100%;
 }
 
-.orcid-step-view__actions--full button {
-  flex: 1 1 auto;
+.orcid-step-view__actions--full .orcid-step-view__primary-action {
+  width: 100%;
 }
 
 .orcid-step-view__primary-action {
@@ -83,6 +85,16 @@
   opacity: 0.6;
 }
 
+.orcid-step-view__secondary-action {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  color: var(--orcid-color-brand-secondary-dark, #085c77);
+  font: inherit;
+}
+
 @media (max-width: 767px) {
   .orcid-step-view {
     padding: var(--orcid-space-4, 16px);

projects/orcid-ui/src/lib/components/step-view/step-view.component.ts

@@ -31,8 +31,13 @@ export class OrcidStepViewComponent {
   /** Disables the primary action button when true. */
   @Input() primaryDisabled = false
 
+  /** Optional text for a secondary action, shown as a link below the primary button. */
+  @Input() secondaryLabel = ''
+
   /** Whether footer buttons should fill the container width. */
   @Input() fullWidthActions = true
 
   @Output() primaryAction = new EventEmitter<void>()
+
+  @Output() secondaryAction = new EventEmitter<void>()
 }

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html

@@ -1,5 +1,25 @@
 <app-settings-panels-data>
-  @if (success) {
+  @if (recoveryPhoneOutcome === 'added' || recoveryPhoneOutcome === 'updated') {
+  <app-alert-message type="success" class="mb-4.5">
+    <div content class="mt-0.5">
+      @if (recoveryPhoneOutcome === 'added') {
+      <span i18n="@@account.recoveryPhoneAdded"
+        >Your recovery phone number has been added</span
+      >
+      } @else {
+      <span i18n="@@account.recoveryPhoneUpdated"
+        >Your recovery phone number has been updated</span
+      >
+      }
+    </div>
+  </app-alert-message>
+  } @if (recoveryPhoneOutcome === 'failed') {
+  <app-alert-message type="warning" class="mb-4.5">
+    <div content class="mt-0.5" i18n="@@account.recoveryPhoneNotUpdated">
+      Your recovery phone number was not updated
+    </div>
+  </app-alert-message>
+  } @if (success) {
   <app-alert-message type="success" class="mb-4.5">
     <div content class="mt-0.5" i18n>
       Two-factor authentication has been disabled
@@ -62,6 +82,9 @@ <h4 i18n="@@account.signInWith2FA">Sign in with 2FA</h4>
             Authentication app
           </p>
           <small>
+            @if (recoveryPhoneTogglz && !loadingTogglz) {
+            <span i18n="@@account.enabledDateLabel">Enabled:</span>
+            }
             {{
               twoFactorInfo?.twoFactorCreationDate | monthDayYearDateToString
             }}
@@ -71,14 +94,72 @@ <h4 i18n="@@account.signInWith2FA">Sign in with 2FA</h4>
     </section>
 
     <section class="two-factor-panel__section">
+      @if (recoveryPhoneTogglz && !loadingTogglz) {
+      <h4 i18n="@@account.twoFABackup">2FA backup</h4>
+      } @else {
       <h4 i18n="@@account.accountRecovery">Account recovery</h4>
+      }
       <p
         class="two-factor-panel__section-description"
         i18n="@@account.accountRecoveryDescription"
       >
         Recover access to your ORCID account if you can't use your
         authentication app.
       </p>
+
+      @if (recoveryPhoneTogglz && !loadingTogglz) {
+      <div class="two-factor-panel__requirement">
+        <mat-icon
+          inline="true"
+          aria-hidden="true"
+          class="two-factor-panel__requirement-icon"
+          [class.two-factor-panel__requirement-icon--unmet]="!hasRecoveryPhone"
+        >
+          {{ hasRecoveryPhone ? 'check_circle' : 'radio_button_unchecked' }}
+        </mat-icon>
+        <div class="two-factor-panel__requirement-body">
+          <div>
+            <p class="two-factor-panel__requirement-title leading-5.25">
+              <span i18n="@@account.recoveryPhoneNumber"
+                >Recovery phone number</span
+              >
+              @if (hasRecoveryPhone) {
+              <span class="two-factor-panel__requirement-value">{{
+                twoFactorInfo?.maskedRecoveryPhoneNumber
+              }}</span>
+              }
+            </p>
+            @if (hasRecoveryPhone) {
+            <small class="leading-4.5">
+              @if (twoFactorInfo?.recoveryPhoneModified) {
+              <span i18n="@@account.modifiedDateLabel">Modified:</span>
+              } @else {
+              <span i18n="@@account.enabledDateLabel">Enabled:</span>
+              }
+              {{ recoveryPhoneDate | monthDayYearDateToString }}
+            </small>
+            }
+          </div>
+          <button
+            type="button"
+            id="cy-manage-recovery-phone"
+            class="two-factor-panel__requirement-action"
+            (click)="manageRecoveryPhone()"
+          >
+            @if (hasRecoveryPhone) {
+            <span i18n="@@account.manageRecoveryPhoneNumber"
+              >Manage recovery phone number</span
+            >
+            } @else {
+            <span i18n="@@account.addRecoveryPhoneNumber"
+              >Add recovery phone number</span
+            >
+            }
+          </button>
+        </div>
+      </div>
+      }
+
       <div class="two-factor-panel__requirement">
         <mat-icon
           inline="true"
@@ -92,6 +173,9 @@ <h4 i18n="@@account.accountRecovery">Account recovery</h4>
             2FA recovery codes
           </p>
           <small class="leading-4.5">
+            @if (recoveryPhoneTogglz && !loadingTogglz) {
+            <span i18n="@@account.enabledDateLabel">Enabled:</span>
+            }
             {{
               twoFactorInfo?.recoveryCodeCreationDate | monthDayYearDateToString
             }}
@@ -100,10 +184,27 @@ <h4 i18n="@@account.accountRecovery">Account recovery</h4>
       </div>
     </section>
 
+    @if (recoveryPhoneTogglz && !loadingTogglz) {
+    <h4 class="two-factor-panel__disable-heading" i18n="@@account.disableTwoFactorAuth">
+      Disable two-factor authentication
+    </h4>
+    }
     <p class="two-factor-panel__copy" i18n="@@account.disable2FAWarning">
       You can disable two-factor authentication at any time. Turning 2FA off
       will reset any account recovery options you have set up.
     </p>
+    @if (recoveryPhoneTogglz && !loadingTogglz) {
+    <a
+      class="two-factor-panel__link two-factor-panel__link--disable-info"
+      href="https://support.orcid.org/hc/en-us/articles/360006971673"
+      rel="noopener noreferrer"
+      target="_blank"
+      i18n="@@account.learnMoreAbout2FA"
+    >
+      Learn more about two-factor authentication
+      <mat-icon inline="true" aria-hidden="true">open_in_new</mat-icon>
+    </a>
+    } @else {
     <a
       class="two-factor-panel__link two-factor-panel__link--disable-info"
       href="https://support.orcid.org/hc/en-us/articles/360006971673"
@@ -114,6 +215,7 @@ <h4 i18n="@@account.accountRecovery">Account recovery</h4>
       Find out more about disabling two-factor authentication
       <mat-icon inline="true" aria-hidden="true">open_in_new</mat-icon>
     </a>
+    }
     <button
       mat-raised-button
       id="cy-two-factor-disable"

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss

@@ -61,6 +61,17 @@
   padding-top: 16px;
 }
 
+/*
+ * A row holds its content 16px below the rule it draws. The space underneath
+ * comes from whatever follows: the section's own padding for the last row, and
+ * for any other row only the section's 8px gap, which left the rule between
+ * two rows sitting closer to the one above it than the one below. The other
+ * 8px goes here, so a rule has 16px on both sides wherever rows are stacked.
+ */
+.two-factor-panel__requirement + .two-factor-panel__requirement {
+  margin-top: 8px;
+}
+
 .two-factor-panel__requirement-title {
   margin: 0;
   font-weight: 700;
@@ -73,6 +84,41 @@
   font-size: 24px;
 }
 
+.two-factor-panel__disable-heading {
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.two-factor-panel__requirement-icon--unmet {
+  color: var(--orcid-color-border-subtle, #bdbdbd);
+}
+
+/* The row holding the number and its add/manage link */
+.two-factor-panel__requirement-body {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--orcid-space-s, 8px);
+  width: 100%;
+}
+
+.two-factor-panel__requirement-value {
+  margin-left: var(--orcid-space-xs, 4px);
+}
+
+.two-factor-panel__requirement-action {
+  background: none;
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  color: var(--orcid-color-brand-secondary-dark, #085c77);
+  font: inherit;
+  text-align: left;
+}
+
 .two-factor-panel__disable-button {
   align-self: flex-start;
   background: var(--orcid-color-state-warning-dark, #d32f2f) !important;