diff --git a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html
index 0336426a9..a085f90de 100644
--- a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html
+++ b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html
@@ -11,7 +11,7 @@
Two-factor authentication was not disabled
- } @if (!twoFactorState) {
+ } @if (!twoFactorInfo?.enabled) {
Add extra security to your ORCID account by enabling two-factor
@@ -58,9 +58,14 @@
Sign in with 2FA
check_circle
-
+
Authentication app
+
+ {{
+ twoFactorInfo?.twoFactorCreationDate | monthDayYearDateToString
+ }}
+
@@ -83,9 +88,14 @@ Account recovery
check_circle
-
+
2FA recovery codes
+
+ {{
+ twoFactorInfo?.recoveryCodeCreationDate | monthDayYearDateToString
+ }}
+
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 4498f340c..cc73797a4 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
@@ -68,8 +68,8 @@
.two-factor-panel__requirement-icon {
color: var(--orcid-color-brand-primary-dark, #7faa26);
- width: 24px;
- height: 24px;
+ width: 25px;
+ height: 25px;
font-size: 24px;
}
diff --git a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss
index a6df14378..b3fdd7660 100644
--- a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss
+++ b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.scss-theme.scss
@@ -16,6 +16,10 @@
color: map-get($foreground, 'brand-primary-darkest');
}
+ small {
+ color: mat.m2-get-contrast-color-from-palette($primary, 200);
+ }
+
.two-factor-panel__enable-button {
color: $orcid-light-primary-text !important;
background: $brand-secondary-dark !important;
diff --git a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.ts b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.ts
index 76fd47572..b8c2caa3e 100644
--- a/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.ts
+++ b/src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.ts
@@ -11,6 +11,7 @@ import {
UntypedFormGroup,
Validators,
} from '@angular/forms'
+import { Status } from '../../../types/two-factor.endpoint'
@Component({
selector: 'app-settings-security-two-factor-auth',
@@ -22,7 +23,7 @@ import {
standalone: false,
})
export class SettingsSecurityTwoFactorAuthComponent implements OnInit {
- @Input() twoFactorState: boolean
+ @Input() twoFactorInfo: Status | undefined
@Output() twoFactorStateOutput = new EventEmitter()
form: UntypedFormGroup
@@ -68,7 +69,9 @@ export class SettingsSecurityTwoFactorAuthComponent implements OnInit {
.subscribe({
next: (response: any) => {
if (response.success) {
- this.twoFactorState = response.enabled
+ if (this.twoFactorInfo) {
+ this.twoFactorInfo.enabled = response.enabled
+ }
this.twoFactorStateOutput.emit(false)
dialogRef.close(true)
} else {
@@ -89,7 +92,7 @@ export class SettingsSecurityTwoFactorAuthComponent implements OnInit {
}
twoFactor() {
- if (!this.twoFactorState) {
+ if (!this.twoFactorInfo?.enabled) {
this._router.navigate([ApplicationRoutes.twoFactorSetup])
} else {
this.cancel = false
diff --git a/src/app/account-settings/components/settings-security/settings-security.component.html b/src/app/account-settings/components/settings-security/settings-security.component.html
index 6788378e2..5a4f6e7aa 100644
--- a/src/app/account-settings/components/settings-security/settings-security.component.html
+++ b/src/app/account-settings/components/settings-security/settings-security.component.html
@@ -9,7 +9,7 @@ Security
[loading]="settingSecurityPasswordLoading"
>
@@ -21,11 +21,11 @@ Security
class="row"
id="cy-2FA-panel"
[title]="titleTwoFactor"
- [type]="{ value: 'two-factor', enabled: twoFactorState }"
+ [type]="{ value: 'two-factor', enabled: twoFactorEnabled }"
[loading]="settingSecurityTwoFactorLoading"
>
@@ -39,7 +39,7 @@ Security
[loading]="settingSecurityAlternateAccountsLoading"
>
diff --git a/src/app/account-settings/components/settings-security/settings-security.component.ts b/src/app/account-settings/components/settings-security/settings-security.component.ts
index 868d26256..418e115bb 100644
--- a/src/app/account-settings/components/settings-security/settings-security.component.ts
+++ b/src/app/account-settings/components/settings-security/settings-security.component.ts
@@ -2,6 +2,7 @@ import { Component, Inject, OnInit } from '@angular/core'
import { TwoFactorAuthenticationService } from '../../../core/two-factor-authentication/two-factor-authentication.service'
import { first } from 'rxjs/operators'
import { WINDOW } from 'src/app/cdk/window'
+import { Status } from '../../../types/two-factor.endpoint'
@Component({
selector: 'app-settings-security',
@@ -22,7 +23,8 @@ export class SettingsSecurityComponent implements OnInit {
settingSecurityTwoFactorLoading = false
settingSecurityAlternateAccountsLoading = false
- twoFactorState = false
+ twoFactorEnabled = false
+ twoFactorInfo: Status | undefined
constructor(
private twoFactorAuthenticationService: TwoFactorAuthenticationService,
@@ -34,7 +36,8 @@ export class SettingsSecurityComponent implements OnInit {
.checkState()
.pipe(first())
.subscribe((result) => {
- this.twoFactorState = result.enabled
+ this.twoFactorInfo = result
+ this.twoFactorEnabled = result.enabled
})
const hash = this._window.location.hash.substr(1)
switch (hash) {
@@ -51,6 +54,6 @@ export class SettingsSecurityComponent implements OnInit {
}
twoFactorStateChanges($event) {
- this.twoFactorState = $event
+ this.twoFactorEnabled = $event
}
}
diff --git a/src/app/types/two-factor.endpoint.ts b/src/app/types/two-factor.endpoint.ts
index f857078d1..6266007f2 100644
--- a/src/app/types/two-factor.endpoint.ts
+++ b/src/app/types/two-factor.endpoint.ts
@@ -1,3 +1,5 @@
+import { AuthChallenge, ExtendedDate } from './common.endpoint'
+
export interface TwoFactor {
orcid?: string
recoveryCode?: string
@@ -16,6 +18,8 @@ export interface QrCode {
url: string
}
-export interface Status {
+export interface Status extends AuthChallenge {
enabled: boolean
+ twoFactorCreationDate: ExtendedDate
+ recoveryCodeCreationDate: ExtendedDate
}