PD-5112 update deprecation process

Author: aromanovv

src/app/account-settings/components/settings-actions-duplicated/settings-actions-duplicated.component.html

@@ -1,4 +1,28 @@
 <app-settings-panels-data>
+  @if (success) {
+  <app-alert-message type="success" class="mb-4.5">
+    <h4 title i18n>Duplicate account removed</h4>
+    <p
+      content
+      class="mt-0.5"
+      i18n="
+        successful deprecation message|orcidToDeprecate=accound id that was
+        deprecated
+      "
+    >
+      <span>The record</span>&nbsp;<strong>{{ orcidToDeprecate }}</strong
+      >&nbsp;<span>has been deprecated.</span>
+    </p>
+  </app-alert-message>
+  } @if (cancelAuthentication) {
+  <app-alert-message type="warning" class="mb-4.5">
+    <h4 title i18n>Duplicate account not removed</h4>
+    <p content class="mt-0.5" i18n>
+      We could not verify your ORCID account details. The duplicate record has
+      not been deprecated.
+    </p>
+  </app-alert-message>
+  }
   <p i18n="@@account.ifYouHaveTwoorMore" class="mb-0 leading-5.25">
     If you have two or more ORCID records you can easily remove any unwanted
     duplicates.
@@ -16,97 +40,45 @@
   </p>
 
   <app-alert-message class="row mb-8">
-    <h3 title i18n>What happens when you remove a duplicate ORCID account?</h3>
+    <h4 title i18n>What happens when you remove a duplicate ORCID account?</h4>
 
     <ul content i18n>
-      <li class="list-disc">
+      <li class="list-disc!">
         The email addresses are transferred from the duplicate account to
         <strong>{{ orcid }}</strong>
       </li>
-      <li class="list-disc">
+      <li class="list-disc!">
         All information on the duplicate account is permanently deleted
       </li>
     </ul>
   </app-alert-message>
   @if (authenticated) {
   <form [formGroup]="form" (ngSubmit)="onSubmit()">
-    <ng-container *ngIf="data.deprecatingAccountName">
-      <strong
-        >{{ data.deprecatingAccountName }}
-        <a
-          id="cy-deprecating-orcid"
-          class="underline"
-          routerLink="/"
-          +
-          data.deprecatingOrcid
-          rel="noopener noreferrer"
-          target="_blank"
-          >({{ data.deprecatingOrcid }})</a
-        ></strong
-      >
-    </ng-container>
-    <ng-container *ngIf="!data.deprecatingAccountName">
-      <strong
-        ><ng-container i18n="@@account.nameIsPri">Name is private</ng-container>
-        <a
-          id="cy-deprecating-orcid"
-          class="underline"
-          routerLink="/"
-          +
-          data.deprecatingOrcid
-          rel="noopener noreferrer"
-          target="_blank"
-          >{{ data.deprecatingOrcid }}</a
-        ></strong
-      >
-    </ng-container>
-    <div *ngFor="let email of data.deprecatingEmails">{{ email }}</div>
-
-    <h2 class="keep">
-      <strong class="orc-font-body-large" i18n="@@account.keepThisRecord"
-        >Keep this record</strong
-      >
-    </h2>
-
-    <ng-container *ngIf="data.primaryAccountName">
-      <strong
-        >{{ data.primaryAccountName }}
-        <a
-          id="cy-primary-orcid"
-          class="underline"
-          routerLink="/"
-          +
-          data.primaryOrcid
-          rel="noopener noreferrer"
-          target="_blank"
-          >({{ data.primaryOrcid }})</a
-        ></strong
-      >
-    </ng-container>
-    <ng-container *ngIf="!data.primaryAccountName">
-      <strong>
-        <a
-          id="cy-primary-orcid"
-          class="underline"
-          routerLink="/"
-          +
-          data.primaryOrcid
-          rel="noopener noreferrer"
-          target="_blank"
-          >{{ data.primaryOrcid }}</a
-        ></strong
-      >
-    </ng-container>
-    <div *ngFor="let email of data.primaryEmails">{{ email }}</div>
+    <h3 i18n class="mb-2 mt-0">You are removing this duplicate account</h3>
+    @if (data.deprecatingAccountName) {
+    <p class="leading-5.25">{{ data.deprecatingAccountName }}</p>
+    } @else {
+    <p class="leading-5.25" i18n="@@account.nameIsPri">Name is private</p>
+    }
+    <p class="mb-6! leading-5.25">
+      https:{{ baseUrl + data.deprecatingOrcid }}
+    </p>
 
+    <strong i18n class="leading-5.25"
+      >Email addresses to be transferred to this account</strong
+    >&nbsp;<strong>({{ orcid }})</strong>
+    <div class="mb-6!">{{ data.deprecatingEmails?.join(', ') }}</div>
+    <em class="block mb-8!" i18n
+      >All other information on this account will be permanently deleted.</em
+    >
     <button
       mat-raised-button
       color="warn"
-      (click)="onSubmit()"
-      i18n="@@account.removeDuplicatedRecord"
+      type="submit"
+      i18n
       id="cy-remove-duplicate-record"
     >
-      Remove duplicate record
+      Remove duplicate account
     </button>
   </form>
   } @else {
@@ -129,7 +101,8 @@ <h3 i18n class="mt-0 mb-2">Which account do you want to remove?</h3>
     </label>
     <mat-form-field
       appearance="outline"
-      class="mat-form-field-min input-container"
+      subscriptSizing="dynamic"
+      class="mat-form-field-min input-container mb-6!"
     >
       <input
         formControlName="deprecatingOrcidOrEmail"
@@ -152,7 +125,8 @@ <h3 i18n class="mt-0 mb-2">Which account do you want to remove?</h3>
     </label>
     <mat-form-field
       appearance="outline"
-      class="mat-form-field-min input-container mb-8"
+      subscriptSizing="dynamic"
+      class="mat-form-field-min input-container mb-8!"
     >
       <input
         formControlName="password"
@@ -164,14 +138,16 @@ <h3 i18n class="mt-0 mb-2">Which account do you want to remove?</h3>
       />
     </mat-form-field>
 
-    <mat-error *ngFor="let error of errors">{{ error }}</mat-error>
+    <mat-error class="mb-4! -mt-2!" *ngFor="let error of errors">{{
+      error
+    }}</mat-error>
 
     <div class="button-container">
       <button
         mat-raised-button
         i18n
         type="submit"
-        [disabled]="form.invalid"
+        [disabled]="form.invalid || loadingVerify"
         class="cy-remove-duplicated-record"
       >
         Verify duplicate account details

src/app/account-settings/components/settings-actions-duplicated/settings-actions-duplicated.component.scss

@@ -11,7 +11,6 @@ ul {
 .button-container {
   display: flex;
   align-items: row;
-  margin-top: 16px;
 }
 
 :host {

src/app/account-settings/components/settings-actions-duplicated/settings-actions-duplicated.component.scss-theme.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+@import 'src/assets/scss/material.orcid-theme.scss';
+
+@mixin settings-actions-duplicated($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .cy-remove-duplicated-record {
+    background: $brand-secondary-dark !important;
+    color: white !important;
+  }
+
+  .cy-remove-duplicated-record[disabled] {
+    opacity: 30%;
+  }
+
+  #cy-remove-duplicate-record {
+    background-color: $state-warning-darkest !important;
+    color: white !important;
+  }
+}
+
+@include settings-actions-duplicated($orcid-app-theme);

src/app/account-settings/components/settings-actions-duplicated/settings-actions-duplicated.component.ts

@@ -1,6 +1,9 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import {
+  FormGroupDirective,
+  NgForm,
   UntypedFormBuilder,
+  UntypedFormControl,
   UntypedFormGroup,
   Validators,
 } from '@angular/forms'
@@ -15,16 +18,27 @@ import { AuthChallengeComponent } from '@orcid/registry-ui'
 import { AuthChallengeFormData } from '../../../types/common.endpoint'
 import { DuplicateRemoveEndpoint } from '../../../types/account-actions-duplicated'
 import { ErrorStateMatcherForTwoFactorFields } from '../../../sign-in/ErrorStateMatcherForTwoFactorFields'
-
+import { ErrorStateMatcher } from '@angular/material/core'
+export class NeverShowErrorMatcher implements ErrorStateMatcher {
+  isErrorState(
+    control: UntypedFormControl | null,
+    form: FormGroupDirective | NgForm | null
+  ): boolean {
+    return false
+  }
+}
 @Component({
   selector: 'app-settings-actions-duplicated',
   templateUrl: './settings-actions-duplicated.component.html',
-  styleUrls: ['./settings-actions-duplicated.component.scss'],
+  styleUrls: [
+    './settings-actions-duplicated.component.scss',
+    './settings-actions-duplicated.component.scss-theme.scss',
+  ],
   preserveWhitespaces: true,
   standalone: false,
 })
 export class SettingsActionsDuplicatedComponent implements OnInit {
-  errorMatcher = new ErrorStateMatcherForTwoFactorFields()
+  errorMatcher = new NeverShowErrorMatcher()
   userSession: UserSession
   constructor(
     private _duplicateService: AccountActionsDuplicatedService,
@@ -44,10 +58,13 @@ export class SettingsActionsDuplicatedComponent implements OnInit {
   showBadVerificationCode = false
   show2FA = true
   authenticated = false
+  loadingVerify = false
   cancelAuthentication = false
   success = false
+  orcidToDeprecate = ''
   orcid = ''
   data: DuplicateRemoveEndpoint
+  baseUrl = runtimeEnvironment.BASE_URL
 
   ngOnInit(): void {
     this.form = this._form.group({
@@ -68,15 +85,15 @@ export class SettingsActionsDuplicatedComponent implements OnInit {
       })
   }
 
-  openAuthChallenge(orcid: string) {
+  openAuthChallenge(orcidOrEmail: string) {
     const dialogRef = this._dialog.open<AuthChallengeComponent>(
       AuthChallengeComponent,
       {
         data: {
           parentForm: this.form,
           showPasswordField: false,
           actionDescription: this.authChallengeLeadingText,
-          boldText: orcid,
+          boldText: orcidOrEmail,
           trailingText: this.authChallengeTrailingText,
         } as AuthChallengeFormData,
       }
@@ -88,6 +105,7 @@ export class SettingsActionsDuplicatedComponent implements OnInit {
         this._duplicateService.validateDeprecation(this.form.value).subscribe({
           next: (response: any) => {
             if (response.success) {
+              this.orcidToDeprecate = response.deprecatingOrcid
               this.data = response
               dialogRef.close(true)
             } else {
@@ -102,6 +120,7 @@ export class SettingsActionsDuplicatedComponent implements OnInit {
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur()
       }
+      this.loadingVerify = false
       this.form.reset()
       if (success) {
         this.authenticated = true
@@ -113,21 +132,30 @@ export class SettingsActionsDuplicatedComponent implements OnInit {
 
   submitVerify() {
     if (this.form.valid) {
+      this.cancelAuthentication = false
+      this.success = false
+      this.loadingVerify = true
       this._duplicateService.validateDeprecation(this.form.value).subscribe({
         next: (response: any) => {
           this.errors = []
           this.loading.next(false)
           if (response.success) {
+            this.loadingVerify = false
+            this.orcidToDeprecate = response.deprecatingOrcid
             this.data = response
             this.authenticated = true
           } else {
             if (response.errors?.length) {
+              this.loadingVerify = false
               this.errors = response.errors
             } else if (response.twoFactorEnabled) {
-              this.openAuthChallenge(response.deprecatingOrcid)
+              this.openAuthChallenge(response.deprecatingOrcidOrEmail)
             }
           }
         },
+        error: () => {
+          this.loadingVerify = false
+        },
       })
     }
   }
@@ -144,7 +172,7 @@ export class SettingsActionsDuplicatedComponent implements OnInit {
           this.form.reset()
           this.success = true
         }
-        if (data.errors?.length) {
+        if (data.errors?.length || !data.twoFactorToken) {
           this.errors = data.errors
           this.cancelAuthentication = true
         }

src/app/types/account-actions-duplicated.ts

@@ -10,5 +10,6 @@ export interface DuplicateRemoveEndpoint extends AuthChallenge {
   primaryEmails?: string[]
   primaryOrcid?: string
   primaryAccountName?: string
+  twoFactorToken?: string
   verificationCodeRequired?: boolean
 }