{{ title }}
+{{ subtitle }}
+
+
+
+
+Change these values to preview `orcid-step-view` behavior:
++ Use this projected body region for form controls and explanatory text. +
++ The parent flow controls step transitions and handles output events. +
+ + +<orcid-step-view
+ [title]="title"
+ [subtitle]="subtitle"
+ [primaryLabel]="primaryLabel"
+ [primaryDisabled]="isPrimaryDisabled"
+ (primaryAction)="onPrimary()"
+>
+ <div>Step content goes here</div>
+
+ <div orcidStepViewFooter>
+ <button mat-button type="button">Extra footer control</button>
+ </div>
+</orcid-step-view>title: Main step title.subtitle: Optional secondary line (for step count copy).
+ primaryLabel: Optional primary button label.primaryDisabled: Disables primary action.fullWidthActions: Makes action buttons stretch to width.
+ primaryAction: Emitted when primary action is clicked.
+ [orcidStepViewFooter]: Optional projected footer area.
+ {{ subtitle }}
+
-
Add extra security to your ORCID account by enabling two-factor
authentication (2FA).
-
-
-
- Two-factor authentication is currently:
-
-
- ON
- OFF
-
+ Use your authentication app to generate a verification code whenever you
+ sign in to ORCID.
+
+ Authentication app
+
+ Recover access to your ORCID account if you can't use your
+ authentication app.
+
+ 2FA recovery codes
+
+ You can disable two-factor authentication at any time. Turning 2FA off
+ will reset any account recovery options you have set up.
+
+
-
+
+ }
diff --git a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss
index e69de29bb2..34e337e30e 100644
--- a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss
+++ b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss
@@ -0,0 +1,80 @@
+.two-factor-panel {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.two-factor-panel--enabled {
+ gap: 24px;
+}
+
+.two-factor-panel__section {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding-bottom: 16px;
+ border-bottom: 1px solid #e0e0e0;
+}
+
+.two-factor-panel__section h4 {
+ margin: 0;
+ font-size: 16px;
+ line-height: 24px;
+}
+
+.two-factor-panel__section p {
+ margin: 0;
+}
+
+.two-factor-panel__copy {
+ margin: 0;
+}
+
+.two-factor-panel__copy--intro {
+ margin-top: var(--orcid-space-l, 32px);
+}
+
+.two-factor-panel__link {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ width: fit-content;
+ text-decoration: underline;
+}
+
+.two-factor-panel__link--disable-info {
+ margin-top: calc(var(--orcid-space-s, 8px) - var(--orcid-space-m, 24px));
+ margin-bottom: calc(var(--orcid-space-l, 32px) - var(--orcid-space-m, 24px));
+}
+
+.two-factor-panel__section-description {
+ margin-bottom: var(--orcid-space-m, 24px) !important;
+}
+
+.two-factor-panel__requirement {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ border-top: 1px solid var(--orcid-color-border-subtle, #dddddd);
+ padding-top: 16px;
+}
+
+.two-factor-panel__requirement-title {
+ margin: 0;
+ font-weight: 700;
+}
+
+.two-factor-panel__requirement-icon {
+ color: var(--orcid-color-brand-primary-dark, #7faa26);
+ width: 24px;
+ height: 24px;
+ font-size: 24px;
+}
+
+.two-factor-panel__disable-button {
+ align-self: flex-start;
+ background: var(--orcid-color-state-warning-dark, #d32f2f) !important;
+ border-color: var(--orcid-color-state-warning-dark, #d32f2f) !important;
+ color: #fff !important;
+}
diff --git a/src/app/cdk/account-panel/settings-panels/settings-panels.component.scss b/src/app/cdk/account-panel/settings-panels/settings-panels.component.scss
index b89e3322d1..9c9716514f 100644
--- a/src/app/cdk/account-panel/settings-panels/settings-panels.component.scss
+++ b/src/app/cdk/account-panel/settings-panels/settings-panels.component.scss
@@ -39,6 +39,11 @@
strong {
margin-inline-end: 3px;
}
+
+ .on,
+ .off {
+ font-weight: 400;
+ }
}
.actions-container {
display: flex;
diff --git a/src/app/rum/app-event-names.ts b/src/app/rum/app-event-names.ts
index fd90aeb33f..990b93c43f 100644
--- a/src/app/rum/app-event-names.ts
+++ b/src/app/rum/app-event-names.ts
@@ -17,6 +17,10 @@ export enum AppEventName {
SignInFailure = 'sign_in_failure',
/** HTTP/network failure on sign-in POST (distinct from application-level sign_in_failure). */
SignInHttpError = 'sign_in_http_error',
+ TwoFactorSetupStep1Loaded = 'two_factor_setup_step1_loaded',
+ TwoFactorSetupStep2Loaded = 'two_factor_setup_step2_loaded',
+ TwoFactorSetupFinalButtonClicked = 'two_factor_setup_final_button_clicked',
+ TwoFactorSetupFinalCompleted = 'two_factor_setup_final_completed',
// ─── Orcid registration journey events ─────────────────────────────────────
StepASignInButtonClicked = 'step-a-sign-in-button-clicked',
diff --git a/src/app/rum/terminating-rum-events.ts b/src/app/rum/terminating-rum-events.ts
index dc519b03fb..fed1708840 100644
--- a/src/app/rum/terminating-rum-events.ts
+++ b/src/app/rum/terminating-rum-events.ts
@@ -27,6 +27,7 @@ export const TERMINATING_SIMPLE_EVENT_NAMES: ReadonlySetSign in with 2FA
+
+
+
+
+
+ Account recovery
+
+
+
+
+
+