feat(settings): Allow users to disconnect orcid in social tab

Author: futa-ikeda

src/app/features/settings/profile-settings/components/social/social.component.html

@@ -1,3 +1,31 @@
+<div class="flex flex-column row-gap-4 border-1 border-round-lg grey-border-color p-3 md:p-4 xl:p-5">
+  <div class="flex flex-row justify-content-between">
+    <h2>
+      {{ 'settings.profileSettings.social.labels.authenticatedIdentity' | translate }}
+    </h2>
+  </div>
+  <div class="flex flex-column row-gap-4 w-full md:flex-row md:align-items-end md:column-gap-3">
+    <div class="w-full md:w-12">
+      @if (existingOrcid) {
+        <div class="flex flex-row align-items-center gap-2">
+          <img ngSrc="assets/icons/colored/orcid.svg" width="16" height="16" alt="orcid" />
+          <a class="font-bold" [href]="'https://orcid.org/' + existingOrcid"> https://orcid.org/{{ existingOrcid }} </a>
+          <p-button
+            icon="fas fa-times"
+            class="w-6 md:w-auto"
+            severity="danger"
+            variant="text"
+            [pTooltip]="'settings.profileSettings.social.disconnectOrcid' | translate"
+            [ariaLabel]="'settings.profileSettings.social.disconnectOrcid' | translate"
+            (onClick)="disconnectOrcid()"
+          >
+          </p-button>
+        </div>
+      }
+    </div>
+  </div>
+</div>
+
 <form [formGroup]="socialLinksForm">
   <div formArrayName="links" class="flex flex-column row-gap-4 social">
     @for (link of links.controls; track index; let index = $index) {

src/app/features/settings/profile-settings/components/social/social.component.ts

@@ -3,6 +3,9 @@ import { createDispatchMap, select } from '@ngxs/store';
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { Button } from 'primeng/button';
+import { Tooltip } from 'primeng/tooltip';
+
+import { finalize } from 'rxjs';
 
 import {
   ChangeDetectionStrategy,
@@ -24,12 +27,17 @@ import { ToastService } from '@osf/shared/services/toast.service';
 import { SocialModel } from '@shared/models/user/social.model';
 import { SocialLinksForm } from '@shared/models/user/social-links.model';
 
+import {
+  AccountSettingsSelectors,
+  DeleteExternalIdentity,
+  GetExternalIdentities,
+} from '../../../account-settings/store';
 import { hasSocialLinkChanges, mapSocialLinkToPayload } from '../../helpers';
 import { SocialFormComponent } from '../social-form/social-form.component';
 
 @Component({
   selector: 'osf-social',
-  imports: [Button, ReactiveFormsModule, SocialFormComponent, TranslatePipe],
+  imports: [Button, ReactiveFormsModule, SocialFormComponent, Tooltip, TranslatePipe],
   templateUrl: './social.component.html',
   styleUrl: './social.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -46,13 +54,21 @@ export class SocialComponent {
 
   private readonly socials = SOCIAL_LINKS;
 
-  readonly actions = createDispatchMap({ updateProfileSettingsSocialLinks: UpdateProfileSettingsSocialLinks });
+  readonly actions = createDispatchMap({
+    updateProfileSettingsSocialLinks: UpdateProfileSettingsSocialLinks,
+    deleteExternalIdentity: DeleteExternalIdentity,
+    getExternalIdentities: GetExternalIdentities,
+  });
   readonly socialLinks = select(UserSelectors.getSocialLinks);
+  readonly externalIdentities = select(AccountSettingsSelectors.getExternalIdentities);
 
   readonly socialLinksForm = this.fb.group({ links: this.fb.array<SocialLinksForm>([]) });
 
   constructor() {
-    effect(() => this.setInitialData());
+    effect(() => {
+      this.setInitialData();
+      this.actions.getExternalIdentities();
+    });
   }
 
   get links(): FormArray<FormGroup> {
@@ -106,6 +122,30 @@ export class SocialComponent {
     return currentLinks.some((link, index) => hasSocialLinkChanges(link, initialSocialLinks, index, this.socials));
   }
 
+  get existingOrcid(): string | undefined {
+    const externalIdentities = this.externalIdentities();
+    const existingOrcid = externalIdentities?.find((identity) => identity.id === 'ORCID');
+    if (existingOrcid && existingOrcid.status === 'VERIFIED') {
+      return existingOrcid.externalId;
+    }
+    return undefined;
+  }
+
+  disconnectOrcid(): void {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'settings.accountSettings.connectedIdentities.deleteDialog.header',
+      messageParams: { name: 'ORCID' },
+      messageKey: 'settings.accountSettings.connectedIdentities.deleteDialog.message',
+      onConfirm: () => {
+        this.loaderService.show();
+        this.actions
+          .deleteExternalIdentity('ORCID')
+          .pipe(finalize(() => this.loaderService.hide()))
+          .subscribe(() => this.toastService.showSuccess('settings.accountSettings.connectedIdentities.successDelete'));
+      },
+    });
+  }
+
   private setInitialData(): void {
     const socialLinks = this.socialLinks();
     this.links.clear();

src/assets/i18n/en.json

@@ -1848,9 +1848,11 @@
         "successUpdate": "Settings successfully updated."
       },
       "social": {
+        "disconnectOrcid": "Disconnect ORCID",
         "title": "Social Link {{index}}",
         "successUpdate": "Social successfully updated.",
         "labels": {
+          "authenticatedIdentity": "Authenticated identity",
           "researcherId": "ResearcherID",
           "orcid": "ORCID",
           "linkedIn": "LinkedIn",