PD-5548 add 2fa creation dates (#2833)

Co-authored-by: andrej romanov <50377758+auumgn@users.noreply.github.com>

Author: aromanovv

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
     </div>
   </app-alert-message>
-  } @if (!twoFactorState) {
+  } @if (!twoFactorInfo?.enabled) {
   <div class="two-factor-panel">
     <p class="two-factor-panel__copy" i18n="@@account.addExtraSecurity">
       Add extra security to your ORCID account by enabling two-factor
@@ -58,9 +58,14 @@ <h4 i18n="@@account.signInWith2FA">Sign in with 2FA</h4>
           check_circle
         </mat-icon>
         <div>
-          <p class="two-factor-panel__requirement-title" i18n>
+          <p class="two-factor-panel__requirement-title leading-5.25" i18n>
             Authentication app
           </p>
+          <small>
+            {{
+              twoFactorInfo?.twoFactorCreationDate | monthDayYearDateToString
+            }}
+          </small>
         </div>
       </div>
     </section>
@@ -83,9 +88,14 @@ <h4 i18n="@@account.accountRecovery">Account recovery</h4>
           check_circle
         </mat-icon>
         <div>
-          <p class="two-factor-panel__requirement-title" i18n>
+          <p class="two-factor-panel__requirement-title leading-5.25" i18n>
             2FA recovery codes
           </p>
+          <small class="leading-4.5">
+            {{
+              twoFactorInfo?.recoveryCodeCreationDate | monthDayYearDateToString
+            }}
+          </small>
         </div>
       </div>
     </section>

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;
 }
 

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;

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<any>()
 
   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

src/app/account-settings/components/settings-security/settings-security.component.html

@@ -9,7 +9,7 @@ <h2 class="orc-font-body-large col" i18n="@@account.security">Security</h2>
   [loading]="settingSecurityPasswordLoading"
 >
   <app-settings-security-password
-    [twoFactorState]="twoFactorState"
+    [twoFactorState]="twoFactorEnabled"
     *ngIf="settingSecurityPasswordOpen"
     (loading)="settingSecurityPasswordLoading = $event"
   >
@@ -21,11 +21,11 @@ <h2 class="orc-font-body-large col" i18n="@@account.security">Security</h2>
   class="row"
   id="cy-2FA-panel"
   [title]="titleTwoFactor"
-  [type]="{ value: 'two-factor', enabled: twoFactorState }"
+  [type]="{ value: 'two-factor', enabled: twoFactorEnabled }"
   [loading]="settingSecurityTwoFactorLoading"
 >
   <app-settings-security-two-factor-auth
-    [twoFactorState]="twoFactorState"
+    [twoFactorInfo]="twoFactorInfo"
     (twoFactorStateOutput)="twoFactorStateChanges($event)"
   >
   </app-settings-security-two-factor-auth>
@@ -39,7 +39,7 @@ <h2 class="orc-font-body-large col" i18n="@@account.security">Security</h2>
   [loading]="settingSecurityAlternateAccountsLoading"
 >
   <app-settings-security-alternate-sign-in
-    [twoFactorState]="twoFactorState"
+    [twoFactorState]="twoFactorEnabled"
     (loading)="settingSecurityAlternateAccountsLoading = $event"
     *ngIf="settingSecurityAlternateAccounts"
   ></app-settings-security-alternate-sign-in>

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
   }
 }

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
 }