[ENG-10584][ENG-10585] Allow users to disconnect existing orcid in social tab

src/app/features/profile/components/profile-information/profile-information.component.ts

@@ -9,6 +9,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
 import { EducationHistoryComponent } from '@osf/shared/components/education-history/education-history.component';
 import { EmploymentHistoryComponent } from '@osf/shared/components/employment-history/employment-history.component';
 import { SOCIAL_LINKS } from '@osf/shared/constants/social-links.const';
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
 import { IS_MEDIUM } from '@osf/shared/helpers/breakpoints.tokens';
 import { UserModel } from '@osf/shared/models/user/user.models';
 import { SortByDatePipe } from '@osf/shared/pipes/sort-by-date.pipe';
@@ -45,7 +46,7 @@ export class ProfileInformationComponent {
 
   orcidId = computed(() => {
     const orcid = this.currentUser()?.external_identity?.ORCID;
-    return orcid?.status?.toUpperCase() === 'VERIFIED' ? orcid.id : undefined;
+    return orcid?.status?.toUpperCase() === ExternalIdentityStatus.VERIFIED ? orcid.id : undefined;
   });
 
   toProfileSettings() {

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.html

@@ -0,0 +1,39 @@
+<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]="orcidUrl()"> {{ orcidUrl() }} </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>
+      } @else {
+        <p-button
+          class="w-6 md:w-auto"
+          [label]="'settings.profileSettings.social.connectOrcid' | translate"
+          severity="secondary"
+          (onClick)="connectOrcid()"
+        >
+        </p-button>
+        <p
+          class="mt-2 text-sm text-gray-600"
+          [innerHTML]="'settings.profileSettings.social.orcidDescription' | translate"
+        ></p>
+      }
+    </div>
+  </div>
+</div>

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts

@@ -0,0 +1,71 @@
+import { MockProvider } from 'ng-mocks';
+
+import { signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountSettingsSelectors } from '@osf/features/settings/account-settings/store/account-settings.selectors';
+import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
+
+import { AuthenticatedIdentityComponent } from './authenticated-identity.component';
+
+import { OSFTestingModule } from '@testing/osf.testing.module';
+import {
+  CustomConfirmationServiceMock,
+  CustomConfirmationServiceMockType,
+} from '@testing/providers/custom-confirmation-provider.mock';
+import { provideMockStore } from '@testing/providers/store-provider.mock';
+
+describe('AuthenticatedIdentityComponent', () => {
+  let component: AuthenticatedIdentityComponent;
+  let fixture: ComponentFixture<AuthenticatedIdentityComponent>;
+  let customConfirmationServiceMock: CustomConfirmationServiceMockType;
+
+  const mockExternalIdentities = signal([
+    {
+      id: 'ORCID',
+      externalId: '0001-0002-0003-0004',
+      status: 'VERIFIED',
+    },
+  ]);
+
+  beforeEach(async () => {
+    customConfirmationServiceMock = CustomConfirmationServiceMock.simple();
+    await TestBed.configureTestingModule({
+      imports: [AuthenticatedIdentityComponent, OSFTestingModule],
+      providers: [
+        MockProvider(CustomConfirmationService, customConfirmationServiceMock),
+        provideMockStore({
+          signals: [
+            {
+              selector: AccountSettingsSelectors.getExternalIdentities,
+              value: mockExternalIdentities,
+            },
+          ],
+        }),
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AuthenticatedIdentityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show existing user ORCID when present in external identities', () => {
+    expect(component.existingOrcid()).toEqual('0001-0002-0003-0004');
+    expect(component.orcidUrl()).toEqual('https://orcid.org/0001-0002-0003-0004');
+    component.disconnectOrcid();
+    expect(customConfirmationServiceMock.confirmDelete).toHaveBeenCalled();
+  });
+
+  it('should show connect button when no existing ORCID is present in external identities', () => {
+    mockExternalIdentities.set([]);
+    fixture.detectChanges();
+
+    expect(component.existingOrcid()).toBeUndefined();
+    expect(component.orcidUrl()).toBeNull();
+  });
+});

src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts

@@ -0,0 +1,77 @@
+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 { NgOptimizedImage } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, OnInit } from '@angular/core';
+
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
+import { CustomConfirmationService } from '@osf/shared/services/custom-confirmation.service';
+import { LoaderService } from '@osf/shared/services/loader.service';
+import { ToastService } from '@osf/shared/services/toast.service';
+
+import {
+  AccountSettingsSelectors,
+  DeleteExternalIdentity,
+  GetExternalIdentities,
+} from '../../../account-settings/store';
+
+@Component({
+  selector: 'osf-authenticated-identity',
+  imports: [NgOptimizedImage, Button, Tooltip, TranslatePipe],
+  templateUrl: './authenticated-identity.component.html',
+  styleUrl: './authenticated-identity.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AuthenticatedIdentityComponent implements OnInit {
+  private readonly customConfirmationService = inject(CustomConfirmationService);
+  private readonly toastService = inject(ToastService);
+  private readonly loaderService = inject(LoaderService);
+
+  private readonly ORCID_PROVIDER = 'ORCID';
+
+  ngOnInit() {
+    this.actions.getExternalIdentities();
+  }
+
+  readonly actions = createDispatchMap({
+    deleteExternalIdentity: DeleteExternalIdentity,
+    getExternalIdentities: GetExternalIdentities,
+  });
+
+  readonly externalIdentities = select(AccountSettingsSelectors.getExternalIdentities);
+
+  readonly orcidUrl = computed(() => {
+    return this.existingOrcid() ? `https://orcid.org/${this.existingOrcid()}` : null;
+  });
+
+  readonly existingOrcid = computed(
+    (): string | undefined =>
+      this.externalIdentities()?.find((i) => i.id === 'ORCID' && i.status === ExternalIdentityStatus.VERIFIED)
+        ?.externalId
+  );
+
+  disconnectOrcid(): void {
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'settings.accountSettings.connectedIdentities.deleteDialog.header',
+      messageParams: { name: this.ORCID_PROVIDER },
+      messageKey: 'settings.accountSettings.connectedIdentities.deleteDialog.message',
+      onConfirm: () => {
+        this.loaderService.show();
+        this.actions
+          .deleteExternalIdentity(this.ORCID_PROVIDER)
+          .pipe(finalize(() => this.loaderService.hide()))
+          .subscribe(() => this.toastService.showSuccess('settings.accountSettings.connectedIdentities.successDelete'));
+      },
+    });
+  }
+
+  connectOrcid(): void {
+    /* no-op for now*/
+  }
+}

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

@@ -1,3 +1,5 @@
+<osf-authenticated-identity />
+
 <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.spec.ts

@@ -8,6 +8,7 @@ import { CustomConfirmationService } from '@osf/shared/services/custom-confirmat
 import { LoaderService } from '@osf/shared/services/loader.service';
 import { ToastService } from '@osf/shared/services/toast.service';
 
+import { AuthenticatedIdentityComponent } from '../authenticated-identity/authenticated-identity.component';
 import { SocialFormComponent } from '../social-form/social-form.component';
 
 import { SocialComponent } from './social.component';
@@ -24,7 +25,12 @@ describe('SocialComponent', () => {
     jest.clearAllMocks();
 
     await TestBed.configureTestingModule({
-      imports: [SocialComponent, MockComponent(SocialFormComponent), MockPipe(TranslatePipe)],
+      imports: [
+        SocialComponent,
+        MockComponent(SocialFormComponent),
+        MockComponent(AuthenticatedIdentityComponent),
+        MockPipe(TranslatePipe),
+      ],
       providers: [
         provideMockStore({
           signals: [{ selector: UserSelectors.getSocialLinks, value: MOCK_USER.social }],

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

@@ -25,11 +25,12 @@ import { SocialModel } from '@shared/models/user/social.model';
 import { SocialLinksForm } from '@shared/models/user/social-links.model';
 
 import { hasSocialLinkChanges, mapSocialLinkToPayload } from '../../helpers';
+import { AuthenticatedIdentityComponent } from '../authenticated-identity/authenticated-identity.component';
 import { SocialFormComponent } from '../social-form/social-form.component';
 
 @Component({
   selector: 'osf-social',
-  imports: [Button, ReactiveFormsModule, SocialFormComponent, TranslatePipe],
+  imports: [Button, ReactiveFormsModule, SocialFormComponent, AuthenticatedIdentityComponent, TranslatePipe],
   templateUrl: './social.component.html',
   styleUrl: './social.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -52,7 +53,9 @@ export class SocialComponent {
   readonly socialLinksForm = this.fb.group({ links: this.fb.array<SocialLinksForm>([]) });
 
   constructor() {
-    effect(() => this.setInitialData());
+    effect(() => {
+      this.setInitialData();
+    });
   }
 
   get links(): FormArray<FormGroup> {

src/app/shared/enums/external-identity-status.enum.ts

@@ -0,0 +1,5 @@
+export enum ExternalIdentityStatus {
+  VERIFIED = 'VERIFIED',
+  LINK = 'LINK',
+  CREATE = 'CREATE',
+}

src/app/shared/models/user/external-identity.model.ts

@@ -1,6 +1,8 @@
+import { ExternalIdentityStatus } from '@osf/shared/enums/external-identity-status.enum';
+
 export interface OrcidInfo {
   id: string;
-  status: string;
+  status: ExternalIdentityStatus;
 }
 
 export interface ExternalIdentityModel {

src/assets/i18n/en.json

@@ -1848,9 +1848,13 @@
         "successUpdate": "Settings successfully updated."
       },
       "social": {
+        "connectOrcid": "Connect ORCID",
+        "disconnectOrcid": "Disconnect ORCID",
+        "orcidDescription": "Link your ORCID. ORCID is a free, unique, persistent identifier (PID) for individuals to use as they engage in research, scholarship, and innovation activities. Learn how ORCID can help you spend more time conducting your research and less time managing it. <a href='https://orcid.org/' target='_blank'>Learn more about ORCID.</a>",
         "title": "Social Link {{index}}",
         "successUpdate": "Social successfully updated.",
         "labels": {
+          "authenticatedIdentity": "Authenticated identity",
           "researcherId": "ResearcherID",
           "orcid": "ORCID",
           "linkedIn": "LinkedIn",