PD-5452

Author: cryptalith

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

@@ -1,6 +1,8 @@
 <app-documentation-page
+  i18n-title="@@orcidUiDocs.stepView.title"
+  i18n-description="@@orcidUiDocs.stepView.description"
   title="Step View"
-  description="A reusable step shell for guided flows with title/subtitle, projected body content, optional footer projection, and primary/secondary action outputs."
+  description="A reusable step shell for guided flows with title/subtitle, projected body content, optional footer projection, and a primary action output."
 >
   <div controls>
     <p>Change these values to preview `orcid-step-view` behavior:</p>
@@ -20,11 +22,6 @@
         <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>
@@ -41,7 +38,6 @@
         [title]="config.title"
         [subtitle]="config.subtitle"
         [primaryLabel]="config.primaryLabel"
-        [secondaryLabel]="config.secondaryLabel"
         [primaryDisabled]="config.primaryDisabled"
         [fullWidthActions]="config.fullWidthActions"
       >
@@ -64,10 +60,8 @@
   [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;
 
@@ -85,7 +79,6 @@ <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 button label.</li>
       <li><code>primaryDisabled</code>: Disables primary action.</li>
       <li>
         <code>fullWidthActions</code>: Makes action buttons stretch to width.
@@ -97,9 +90,6 @@ <h4>Outputs</h4>
       <li>
         <code>primaryAction</code>: Emitted when primary action is clicked.
       </li>
-      <li>
-        <code>secondaryAction</code>: Emitted when secondary action is clicked.
-      </li>
     </ul>
 
     <h4>Slots</h4>

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

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

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

@@ -21,15 +21,6 @@ <h2 class="orcid-step-view__title">{{ title }}</h2>
       class="orcid-step-view__actions"
       [class.orcid-step-view__actions--full]="fullWidthActions"
     >
-      <button
-        *ngIf="secondaryLabel"
-        mat-stroked-button
-        type="button"
-        (click)="secondaryAction.emit()"
-      >
-        {{ secondaryLabel }}
-      </button>
-
       <button
         *ngIf="primaryLabel"
         mat-flat-button

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

@@ -28,15 +28,11 @@ export class OrcidStepViewComponent {
   /** Optional text for the primary action button. */
   @Input() primaryLabel = ''
 
-  /** Optional text for the secondary action button. */
-  @Input() secondaryLabel = ''
-
   /** Disables the primary action button when true. */
   @Input() primaryDisabled = false
 
   /** Whether footer buttons should fill the container width. */
   @Input() fullWidthActions = true
 
   @Output() primaryAction = new EventEmitter<void>()
-  @Output() secondaryAction = new EventEmitter<void>()
 }

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

@@ -14,7 +14,11 @@
     </p>
 
     <div class="qr-wrapper">
-      <img src="{{ environment.API_WEB }}2FA/qr-code.png" alt="qr code" />
+      <img
+        src="{{ environment.API_WEB }}2FA/qr-code.png"
+        alt="qr code"
+        i18n-alt="@@account.qrCodeAltText"
+      />
     </div>
 
     <p class="step-copy setup-code-row">

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

@@ -15,6 +15,7 @@ import { RumJourneyEventService } from '../../../rum/service/customEvent.service
 import { AppEventName } from '../../../rum/app-event-names'
 
 declare const runtimeEnvironment: any
+declare const $localize: any
 
 export const clipboardTooltip: MatTooltipDefaultOptions = {
   showDelay: 500,
@@ -44,7 +45,8 @@ export class TwoFactorEnableComponent implements OnInit {
   twoFactorForm: UntypedFormGroup
   showTextCode = false
   loading = false
-  textCodeCopiedTooltip = 'Setup code has been copied to the clipboard'
+  textCodeCopiedTooltip =
+    $localize`:@@account.setupCodeClipboard:Setup code has been copied to the clipboard`
 
   constructor(
     private _twoFactorService: TwoFactorAuthenticationService,

src/app/two-factor-setup/components/two-factor-recovery-codes/two-factor-recovery-codes.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, inject } from '@angular/core'
 import { ApplicationRoutes } from '../../../constants'
 import { WINDOW } from '../../../cdk/window'
 import {
@@ -10,6 +10,8 @@ import { Router } from '@angular/router'
 import { RumJourneyEventService } from '../../../rum/service/customEvent.service'
 import { AppEventName } from '../../../rum/app-event-names'
 
+declare const $localize: any
+
 @Component({
   selector: 'app-two-factor-recovery-codes',
   templateUrl: './two-factor-recovery-codes.component.html',
@@ -27,9 +29,9 @@ export class TwoFactorRecoveryCodesComponent implements OnInit {
   hasDownloadedOrCopied = false
 
   tooltipClipboard = $localize`:@@account.clipboard:Backup codes have been copied to the clipboard`
+  private window = inject<Window>(WINDOW)
 
   constructor(
-    @Inject(WINDOW) private window: Window,
     private router: Router,
     private _observability: RumJourneyEventService
   ) {}