Merge branch 'main' into aromanovv/PD-4790-improve-auth-challenge

Author: aromanovv

CHANGELOG.md

@@ -1,3 +1,15 @@
+## v2.131.6 - 2026-03-12
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.131.5...v2.131.6)
+
+- [#2767](https://github.com/ORCID/orcid-angular/pull/2767): PD-4792 add auth challenge to disable 2fa
+
+## v2.131.5 - 2026-03-12
+
+[Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.131.4...v2.131.5)
+
+- [#2771](https://github.com/ORCID/orcid-angular/pull/2771): PD-5141
+
 ## v2.131.4 - 2026-03-11
 
 [Full Changelog](https://github.com/ORCID/orcid-angular/compare/v2.131.3...v2.131.4)

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

@@ -13,9 +13,7 @@
       </div>
     </app-alert-message>
     }
-    <p class="mb-4 mt-0" i18n>
-      Change or update your account password.
-    </p>
+    <p class="mb-4 mt-0" i18n>Change or update your account password.</p>
     <div class="row mb-6 flex flex-wrap">
       <label
         class="row mat-caption"

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.html

@@ -1,4 +1,17 @@
 <app-settings-panels-data>
+  @if (success) {
+  <app-alert-message type="success" class="mb-4.5">
+    <div content class="mt-0.5" i18n>
+      Two-factor authentication has been disabled
+    </div>
+  </app-alert-message>
+  } @if (cancel) {
+  <app-alert-message type="warning" class="mb-4.5">
+    <div content class="mt-0.5" i18n>
+      Two-factor authentication was not disabled
+    </div>
+  </app-alert-message>
+  }
   <p>
     <ng-container i18n="@@account.addExtraSecurity">
       Add extra security to your ORCID account by enabling two-factor

src/app/account-settings/components/settings-security-two-factor-auth/settings-security-two-factor-auth.component.ts

@@ -1,8 +1,16 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { ApplicationRoutes } from '../../../constants'
 import { Router } from '@angular/router'
-import { first } from 'rxjs/operators'
+import { first, takeUntil } from 'rxjs/operators'
 import { TwoFactorAuthenticationService } from '../../../core/two-factor-authentication/two-factor-authentication.service'
+import { MatDialog } from '@angular/material/dialog'
+import { AuthChallengeComponent } from '@orcid/registry-ui'
+import { AuthChallengeFormData } from '../../../types/common.endpoint'
+import {
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  Validators,
+} from '@angular/forms'
 
 @Component({
   selector: 'app-settings-security-two-factor-auth',
@@ -16,35 +24,75 @@ import { TwoFactorAuthenticationService } from '../../../core/two-factor-authent
 export class SettingsSecurityTwoFactorAuthComponent implements OnInit {
   @Input() twoFactorState: boolean
   @Output() twoFactorStateOutput = new EventEmitter<any>()
-  @Output() loading = new EventEmitter<boolean>()
+
+  form: UntypedFormGroup
+  success = false
+  cancel = false
+  authChallengeLabel = $localize`:@@accountSettings.security.disable2FA:disable 2FA`
 
   constructor(
     private _router: Router,
-    private twoFactorAuthenticationService: TwoFactorAuthenticationService
+    private twoFactorAuthenticationService: TwoFactorAuthenticationService,
+    private _fb: UntypedFormBuilder,
+    private _dialog: MatDialog
   ) {}
 
-  ngOnInit(): void {}
-
-  disable() {
-    this.twoFactorAuthenticationService
-      .disable()
-      .pipe(first())
-      .subscribe((result) => {
-        this.loading.next(false)
-        if (!result.enabled) {
-          this.twoFactorState = result.enabled
-          this.twoFactorStateOutput.emit(false)
-        }
+  ngOnInit(): void {
+    this.form = this._fb.group({
+      password: [null, Validators.required],
+      twoFactorCode: [null, [Validators.minLength(6), Validators.maxLength(6)]],
+      twoFactorRecoveryCode: [
+        null,
+        [Validators.minLength(10), Validators.maxLength(10)],
+      ],
+    })
+  }
+
+  openAuthChallenge() {
+    const dialogRef = this._dialog.open<AuthChallengeComponent>(
+      AuthChallengeComponent,
+      {
+        data: {
+          parentForm: this.form,
+          actionDescription: this.authChallengeLabel,
+        } as AuthChallengeFormData,
+      }
+    )
+
+    dialogRef.componentInstance.submitAttempt
+      .pipe(takeUntil(dialogRef.afterClosed()))
+      .subscribe(() => {
+        this.twoFactorAuthenticationService
+          .disable(this.form.value)
+          .pipe(first())
+          .subscribe({
+            next: (response: any) => {
+              if (response.success) {
+                this.twoFactorState = response.enabled
+                this.twoFactorStateOutput.emit(false)
+                dialogRef.close(true)
+              } else {
+                dialogRef.componentInstance.loading = false
+                dialogRef.componentInstance.processBackendResponse(response)
+              }
+            },
+          })
       })
 
+    dialogRef.afterClosed().subscribe((success) => {
+      if (success) {
+        this.success = true
+      } else {
+        this.cancel = true
+      }
+    })
   }
 
   twoFactor() {
     if (!this.twoFactorState) {
       this._router.navigate([ApplicationRoutes.twoFactorSetup])
     } else {
-      this.loading.next(true)
-      this.disable()
+      this.openAuthChallenge()
     }
   }
 }

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

@@ -27,7 +27,6 @@ <h2 class="orc-font-body-large col" i18n="@@account.security">Security</h2>
   <app-settings-security-two-factor-auth
     [twoFactorState]="twoFactorState"
     (twoFactorStateOutput)="twoFactorStateChanges($event)"
-    (loading)="settingSecurityTwoFactorLoading = $event"
   >
   </app-settings-security-two-factor-auth>
 </app-settings-panels>

src/app/core/two-factor-authentication/two-factor-authentication.service.ts

@@ -11,6 +11,7 @@ import {
 import { catchError, retry } from 'rxjs/operators'
 import { ERROR_REPORT } from '../../errors'
 import { ErrorHandlerService } from '../error-handler/error-handler.service'
+import { AuthChallenge } from '../../types/common.endpoint'
 
 @Injectable({
   providedIn: 'root',
@@ -31,10 +32,10 @@ export class TwoFactorAuthenticationService {
     )
   }
 
-  disable(): Observable<Status> {
+  disable(data: AuthChallenge): Observable<Status> {
     return this._http.post<Status>(
       runtimeEnvironment.BASE_URL + '2FA/disable.json',
-      {},
+      data,
       { headers: this.headers }
     )
   }