From c587c0e9ba60063988eee5d91dee2297cd9a0049 Mon Sep 17 00:00:00 2001 From: futa-ikeda Date: Wed, 18 Mar 2026 17:31:34 -0400 Subject: [PATCH 1/6] feat(settings): Allow users to disconnect orcid in social tab --- .../components/social/social.component.html | 28 +++++++++++ .../social/social.component.spec.ts | 23 +++++++++- .../components/social/social.component.ts | 46 +++++++++++++++++-- src/assets/i18n/en.json | 2 + 4 files changed, 94 insertions(+), 5 deletions(-) diff --git a/src/app/features/settings/profile-settings/components/social/social.component.html b/src/app/features/settings/profile-settings/components/social/social.component.html index e34553fe1..0ab7afff8 100644 --- a/src/app/features/settings/profile-settings/components/social/social.component.html +++ b/src/app/features/settings/profile-settings/components/social/social.component.html @@ -1,3 +1,31 @@ +
+
+

+ {{ 'settings.profileSettings.social.labels.authenticatedIdentity' | translate }} +

+
+
+
+ @if (existingOrcid) { +
+ orcid + https://orcid.org/{{ existingOrcid }} + + +
+ } +
+
+
+
+ } @else { + + +

} diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 56deae48d..42651e0ab 100644 --- a/src/assets/i18n/en.json +++ b/src/assets/i18n/en.json @@ -1848,7 +1848,9 @@ "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. Learn more about ORCID.", "title": "Social Link {{index}}", "successUpdate": "Social successfully updated.", "labels": { From 7f93d13c15fe5d7b56a94eab17d14c96e1d914f8 Mon Sep 17 00:00:00 2001 From: futa-ikeda Date: Thu, 19 Mar 2026 11:36:12 -0400 Subject: [PATCH 3/6] chore(settings): move authenticated identity to own component --- .../authenticated-identity.component.html | 39 +++++++++ .../authenticated-identity.component.scss | 0 .../authenticated-identity.component.spec.ts | 60 ++++++++++++++ .../authenticated-identity.component.ts | 79 +++++++++++++++++++ .../components/social/social.component.html | 39 +-------- .../social/social.component.spec.ts | 23 +----- .../components/social/social.component.ts | 43 +--------- 7 files changed, 184 insertions(+), 99 deletions(-) create mode 100644 src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.html create mode 100644 src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.scss create mode 100644 src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts create mode 100644 src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts diff --git a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.html b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.html new file mode 100644 index 000000000..1f2db43d1 --- /dev/null +++ b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.html @@ -0,0 +1,39 @@ +
+
+

+ {{ 'settings.profileSettings.social.labels.authenticatedIdentity' | translate }} +

+
+
+
+ @if (existingOrcid) { +
+ orcid + {{ orcidUrl() }} + + +
+ } @else { + + +

+ } +
+
+
diff --git a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.scss b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts new file mode 100644 index 000000000..e1bf80d1b --- /dev/null +++ b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts @@ -0,0 +1,60 @@ +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 { MockCustomConfirmationServiceProvider } from '@testing/mocks/custom-confirmation.service.mock'; +import { provideMockStore } from '@testing/providers/store-provider.mock'; + +describe('AuthenticatedIdentityComponent', () => { + let component: AuthenticatedIdentityComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AuthenticatedIdentityComponent], + providers: [ + { provide: CustomConfirmationService, useValue: MockCustomConfirmationServiceProvider.useValue }, + provideMockStore({ + signals: [ + { + selector: AccountSettingsSelectors.getExternalIdentities, + value: [ + { + id: 'ORCID', + externalId: '0001-0002-0003-0004', + status: 'VERIFIED', + }, + ], + }, + ], + }), + ], + }).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(MockCustomConfirmationServiceProvider.useValue.confirmDelete).toHaveBeenCalled(); + }); + + it('should show connect button when no existing ORCID is present in external identities', () => { + TestBed.inject(provideMockStore).overrideSelector(AccountSettingsSelectors.getExternalIdentities, []); + fixture.detectChanges(); + + expect(component.existingOrcid).toBeUndefined(); + expect(component.orcidUrl()).toBeNull(); + }); +}); diff --git a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts new file mode 100644 index 000000000..a0d66b28f --- /dev/null +++ b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts @@ -0,0 +1,79 @@ +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, effect, inject } from '@angular/core'; + +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 { + private readonly customConfirmationService = inject(CustomConfirmationService); + private readonly toastService = inject(ToastService); + private readonly loaderService = inject(LoaderService); + + constructor() { + effect(() => { + 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; + }); + + 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')); + }, + }); + } + + connectOrcid(): void { + /* no-op for now*/ + } +} diff --git a/src/app/features/settings/profile-settings/components/social/social.component.html b/src/app/features/settings/profile-settings/components/social/social.component.html index 0ebce0e3f..777d4fd88 100644 --- a/src/app/features/settings/profile-settings/components/social/social.component.html +++ b/src/app/features/settings/profile-settings/components/social/social.component.html @@ -1,41 +1,4 @@ -
-
-

- {{ 'settings.profileSettings.social.labels.authenticatedIdentity' | translate }} -

-
-
-
- @if (existingOrcid) { -
- orcid - https://orcid.org/{{ existingOrcid }} - - -
- } @else { - - -

- } -
-
-
+
- @if (existingOrcid) { + @if (existingOrcid()) {
orcid {{ orcidUrl() }} diff --git a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts index e1bf80d1b..45931fc2d 100644 --- a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts +++ b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts @@ -1,7 +1,13 @@ +import { TranslatePipe, TranslateService } from '@ngx-translate/core'; +import { MockPipe, 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 { LoaderService } from '@osf/shared/services/loader.service'; +import { ToastService } from '@osf/shared/services/toast.service'; import { AuthenticatedIdentityComponent } from './authenticated-identity.component'; @@ -12,22 +18,27 @@ describe('AuthenticatedIdentityComponent', () => { let component: AuthenticatedIdentityComponent; let fixture: ComponentFixture; + const mockExternalIdentities = signal([ + { + id: 'ORCID', + externalId: '0001-0002-0003-0004', + status: 'VERIFIED', + }, + ]); + beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [AuthenticatedIdentityComponent], + imports: [AuthenticatedIdentityComponent, MockPipe(TranslatePipe)], providers: [ + MockProvider(ToastService), + MockProvider(LoaderService), + MockProvider(TranslateService), { provide: CustomConfirmationService, useValue: MockCustomConfirmationServiceProvider.useValue }, provideMockStore({ signals: [ { selector: AccountSettingsSelectors.getExternalIdentities, - value: [ - { - id: 'ORCID', - externalId: '0001-0002-0003-0004', - status: 'VERIFIED', - }, - ], + value: mockExternalIdentities, }, ], }), @@ -44,17 +55,17 @@ describe('AuthenticatedIdentityComponent', () => { }); it('should show existing user ORCID when present in external identities', () => { - expect(component.existingOrcid).toEqual('0001-0002-0003-0004'); + expect(component.existingOrcid()).toEqual('0001-0002-0003-0004'); expect(component.orcidUrl()).toEqual('https://orcid.org/0001-0002-0003-0004'); component.disconnectOrcid(); expect(MockCustomConfirmationServiceProvider.useValue.confirmDelete).toHaveBeenCalled(); }); it('should show connect button when no existing ORCID is present in external identities', () => { - TestBed.inject(provideMockStore).overrideSelector(AccountSettingsSelectors.getExternalIdentities, []); + mockExternalIdentities.set([]); fixture.detectChanges(); - expect(component.existingOrcid).toBeUndefined(); + expect(component.existingOrcid()).toBeUndefined(); expect(component.orcidUrl()).toBeNull(); }); }); diff --git a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts index a0d66b28f..ee32a80c6 100644 --- a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts +++ b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.ts @@ -8,8 +8,9 @@ import { Tooltip } from 'primeng/tooltip'; import { finalize } from 'rxjs'; import { NgOptimizedImage } from '@angular/common'; -import { ChangeDetectionStrategy, Component, computed, effect, inject } from '@angular/core'; +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'; @@ -27,15 +28,15 @@ import { styleUrl: './authenticated-identity.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class AuthenticatedIdentityComponent { +export class AuthenticatedIdentityComponent implements OnInit { private readonly customConfirmationService = inject(CustomConfirmationService); private readonly toastService = inject(ToastService); private readonly loaderService = inject(LoaderService); - constructor() { - effect(() => { - this.actions.getExternalIdentities(); - }); + private readonly ORCID_PROVIDER = 'ORCID'; + + ngOnInit() { + this.actions.getExternalIdentities(); } readonly actions = createDispatchMap({ @@ -46,27 +47,24 @@ export class AuthenticatedIdentityComponent { readonly externalIdentities = select(AccountSettingsSelectors.getExternalIdentities); readonly orcidUrl = computed(() => { - return this.existingOrcid ? `https://orcid.org/${this.existingOrcid}` : null; + return this.existingOrcid() ? `https://orcid.org/${this.existingOrcid()}` : null; }); - 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; - } + 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: 'ORCID' }, + messageParams: { name: this.ORCID_PROVIDER }, messageKey: 'settings.accountSettings.connectedIdentities.deleteDialog.message', onConfirm: () => { this.loaderService.show(); this.actions - .deleteExternalIdentity('ORCID') + .deleteExternalIdentity(this.ORCID_PROVIDER) .pipe(finalize(() => this.loaderService.hide())) .subscribe(() => this.toastService.showSuccess('settings.accountSettings.connectedIdentities.successDelete')); }, diff --git a/src/app/features/settings/profile-settings/components/social/social.component.spec.ts b/src/app/features/settings/profile-settings/components/social/social.component.spec.ts index 06a51c93d..c7889e9c0 100644 --- a/src/app/features/settings/profile-settings/components/social/social.component.spec.ts +++ b/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 }], diff --git a/src/app/shared/enums/external-identity-status.enum.ts b/src/app/shared/enums/external-identity-status.enum.ts new file mode 100644 index 000000000..f12d85dbb --- /dev/null +++ b/src/app/shared/enums/external-identity-status.enum.ts @@ -0,0 +1,5 @@ +export enum ExternalIdentityStatus { + VERIFIED = 'VERIFIED', + LINK = 'LINK', + CREATE = 'CREATE', +} diff --git a/src/app/shared/models/user/external-identity.model.ts b/src/app/shared/models/user/external-identity.model.ts index 9703400e0..9b88bdc41 100644 --- a/src/app/shared/models/user/external-identity.model.ts +++ b/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 { From 25bd9e86ba389e7d10a955675eba1025fc171558 Mon Sep 17 00:00:00 2001 From: futa-ikeda Date: Fri, 20 Mar 2026 09:52:43 -0400 Subject: [PATCH 5/6] refactor(settings): Update authenticated identity test --- .../authenticated-identity.component.spec.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts index 45931fc2d..c786e4324 100644 --- a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts +++ b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts @@ -11,12 +11,16 @@ import { ToastService } from '@osf/shared/services/toast.service'; import { AuthenticatedIdentityComponent } from './authenticated-identity.component'; -import { MockCustomConfirmationServiceProvider } from '@testing/mocks/custom-confirmation.service.mock'; +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; + let customConfirmationServiceMock: CustomConfirmationServiceMockType; const mockExternalIdentities = signal([ { @@ -27,13 +31,14 @@ describe('AuthenticatedIdentityComponent', () => { ]); beforeEach(async () => { + customConfirmationServiceMock = CustomConfirmationServiceMock.simple(); await TestBed.configureTestingModule({ imports: [AuthenticatedIdentityComponent, MockPipe(TranslatePipe)], providers: [ MockProvider(ToastService), MockProvider(LoaderService), MockProvider(TranslateService), - { provide: CustomConfirmationService, useValue: MockCustomConfirmationServiceProvider.useValue }, + MockProvider(CustomConfirmationService, customConfirmationServiceMock), provideMockStore({ signals: [ { @@ -58,7 +63,7 @@ describe('AuthenticatedIdentityComponent', () => { expect(component.existingOrcid()).toEqual('0001-0002-0003-0004'); expect(component.orcidUrl()).toEqual('https://orcid.org/0001-0002-0003-0004'); component.disconnectOrcid(); - expect(MockCustomConfirmationServiceProvider.useValue.confirmDelete).toHaveBeenCalled(); + expect(customConfirmationServiceMock.confirmDelete).toHaveBeenCalled(); }); it('should show connect button when no existing ORCID is present in external identities', () => { From abbf8a7a4d19ae77fff6c212356ab646bcd80783 Mon Sep 17 00:00:00 2001 From: futa-ikeda Date: Fri, 20 Mar 2026 10:48:55 -0400 Subject: [PATCH 6/6] refactor(settings): Update authenticated identity test to use OSFTestingModule --- .../authenticated-identity.component.spec.ts | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts index c786e4324..5f2583462 100644 --- a/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts +++ b/src/app/features/settings/profile-settings/components/authenticated-identity/authenticated-identity.component.spec.ts @@ -1,16 +1,14 @@ -import { TranslatePipe, TranslateService } from '@ngx-translate/core'; -import { MockPipe, MockProvider } from 'ng-mocks'; +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 { LoaderService } from '@osf/shared/services/loader.service'; -import { ToastService } from '@osf/shared/services/toast.service'; import { AuthenticatedIdentityComponent } from './authenticated-identity.component'; +import { OSFTestingModule } from '@testing/osf.testing.module'; import { CustomConfirmationServiceMock, CustomConfirmationServiceMockType, @@ -33,11 +31,8 @@ describe('AuthenticatedIdentityComponent', () => { beforeEach(async () => { customConfirmationServiceMock = CustomConfirmationServiceMock.simple(); await TestBed.configureTestingModule({ - imports: [AuthenticatedIdentityComponent, MockPipe(TranslatePipe)], + imports: [AuthenticatedIdentityComponent, OSFTestingModule], providers: [ - MockProvider(ToastService), - MockProvider(LoaderService), - MockProvider(TranslateService), MockProvider(CustomConfirmationService, customConfirmationServiceMock), provideMockStore({ signals: [