[ENG-10063] orcid integration (#939)

* feat(profile-settings): Add query-param to specify a tab (#906)

* [ENG-10584][ENG-10585] Allow users to disconnect existing orcid in social tab (#912)

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

* feat(settings): Add dummy connect button when no orcid is associated with user

* chore(settings): move authenticated identity to own component

* refactor(settings): Implement CR suggestions; Update tests

* refactor(settings): Update authenticated identity test

* refactor(settings): Update authenticated identity test to use OSFTestingModule

* feat(settings): Allow user to connect ORCID in profile settings page (#918)

* [ENG-10684] Update Authenticated Identity section (#924)

* feat(settings): update authenticated identity section

* style(settings): Update styles

* refactor(settings): Update Authenticated Identity section

* chore(settings): Update Authenticated identity section language (#930)

* fix(settings): Update connectOrcid to properly logging user out (#934)

Author: futa-ikeda

src/app/core/services/auth.service.ts

@@ -73,13 +73,13 @@ export class AuthService {
     window.location.href = loginUrl;
   }
 
-  logout(): void {
+  logout(nextUrl?: string): void {
     this.loaderService.show();
     this.actions.clearCurrentUser();
 
     if (isPlatformBrowser(this.platformId)) {
       this.cookieService.deleteAll();
-      window.location.href = `${this.webUrl}/logout/?next=${encodeURIComponent('/')}`;
+      window.location.href = `${this.webUrl}/logout/?next=${encodeURIComponent(nextUrl || '/')}`;
     }
   }
 

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

@@ -10,6 +10,7 @@ import { RouterLink } from '@angular/router';
 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 { Institution } from '@osf/shared/models/institutions/institutions.model';
 import { UserModel } from '@osf/shared/models/user/user.model';
@@ -50,7 +51,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,40 @@
+<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 {
+        <img ngSrc="assets/images/integrations/orcid-logotype.png" width="130" height="40" alt="orcid" />
+        <p class="mt-2" [innerHTML]="'settings.profileSettings.social.orcidDescription' | translate"></p>
+        <p class="mt-2 font-bold">{{ 'settings.profileSettings.social.orcidWarning' | translate }}</p>
+        <div class="mt-2">
+          <p-button
+            class="w-6 md:w-auto"
+            [label]="'settings.profileSettings.social.connectOrcid' | translate"
+            severity="secondary"
+            (onClick)="connectOrcid()"
+          >
+          </p-button>
+        </div>
+      }
+    </div>
+  </div>
+</div>

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

@@ -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.spec.ts

@@ -0,0 +1,92 @@
+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 { ENVIRONMENT } from '@core/provider/environment.provider';
+import { AuthService } from '@core/services/auth.service';
+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';
+import { ProfileSettingsTabOption } from '../../enums';
+
+@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 authService = inject(AuthService);
+  private readonly environment = inject(ENVIRONMENT);
+  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 {
+    const webUrl = this.environment.webUrl;
+    const casUrl = this.environment.casUrl;
+    const finalDestination = new URL(`${webUrl}/settings/profile`);
+    finalDestination.searchParams.set('tab', ProfileSettingsTabOption.Social.toString());
+    const casLoginUrl = new URL(`${casUrl}/login`);
+    casLoginUrl.search = new URLSearchParams({
+      redirectOrcid: 'true',
+      service: `${webUrl}/login`,
+      next: encodeURIComponent(finalDestination.toString()),
+    }).toString();
+    this.authService.logout(casLoginUrl.toString());
+  }
+}

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

@@ -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.html

@@ -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.spec.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/features/settings/profile-settings/components/social/social.component.ts

@@ -5,6 +5,7 @@ import { BehaviorSubject } from 'rxjs';
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { ActivatedRoute } from '@angular/router';
 
 import { SelectComponent } from '@osf/shared/components/select/select.component';
 import { SubHeaderComponent } from '@osf/shared/components/sub-header/sub-header.component';
@@ -34,7 +35,11 @@ describe('ProfileSettingsComponent', () => {
           SelectComponent
         ),
       ],
-      providers: [MockProvider(IS_MEDIUM, isMedium), MockProvider(TranslateService)],
+      providers: [
+        MockProvider(IS_MEDIUM, isMedium),
+        MockProvider(TranslateService),
+        { provide: ActivatedRoute, useValue: { snapshot: { queryParams: {} } } },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(ProfileSettingsComponent);
@@ -46,6 +51,14 @@ describe('ProfileSettingsComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should update selected tab on init based on query param', () => {
+    const testTabValue = 2;
+    component['route'] = { snapshot: { queryParams: { tab: testTabValue } } } as any;
+
+    component.ngOnInit();
+    expect(component['selectedTab']).toBe(testTabValue);
+  });
+
   it('should update selected tab when onTabChange is called', () => {
     const newTabIndex = 2;
     component.onTabChange(newTabIndex);