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 }