[ENG-9975] Fix(profile-information): fix authenticated orcid is not shown

CHANGELOG

@@ -0,0 +1,11 @@
+# Changelog
+
+We follow the CalVer (https://calver.org/) versioning scheme: YY.MINOR.MICRO.
+
+26.1.0 (2026-01-01)
+===================
+
+* Angular FE support for Notification Refactor Project
+
+# vi: ft=markdown
+

angular.json

@@ -50,6 +50,7 @@
             "styles": [
               "src/styles/styles.scss",
               "node_modules/primeflex/primeflex.css",
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
               "node_modules/ngx-markdown-editor/assets/highlight.js/agate.min.css"
             ],
             "stylePreprocessorOptions": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "osf",
-  "version": "25.4.0",
+  "version": "26.1.0",
   "scripts": {
     "ng": "ng",
     "analyze-bundle": "ng build --configuration=analyze-bundle && source-map-explorer dist/**/*.js --no-border-checks",

src/app/features/metadata/components/cedar-template-form/cedar-template-form.component.ts

@@ -25,9 +25,6 @@ import { ActivatedRoute } from '@angular/router';
 
 import { ENVIRONMENT } from '@core/provider/environment.provider';
 
-import 'cedar-artifact-viewer';
-import 'cedar-embeddable-editor';
-
 import { CEDAR_CONFIG, CEDAR_VIEWER_CONFIG } from '../../constants';
 import { CedarMetadataHelper } from '../../helpers';
 import {
@@ -71,6 +68,8 @@ export class CedarTemplateFormComponent {
   readonly downloadUrl = signal<string>('');
   readonly schemaName = signal<string>('');
 
+  readonly fileGuid = toSignal(this.route.params.pipe(map((params) => params['fileGuid'])) ?? of(undefined));
+
   shareItems = [
     {
       label: 'files.detail.actions.share.email',
@@ -123,7 +122,17 @@ export class CedarTemplateFormComponent {
     this.validateCedarMetadata();
   }
 
-  readonly fileGuid = toSignal(this.route.params.pipe(map((params) => params['fileGuid'])) ?? of(undefined));
+  private initializeFormData(): void {
+    const template = this.template()?.attributes?.template;
+    if (!template) return;
+    const metadata = this.existingRecord()?.attributes?.metadata;
+    if (this.existingRecord()) {
+      const structuredMetadata = CedarMetadataHelper.buildStructuredMetadata(metadata);
+      this.formData.set(structuredMetadata);
+    } else {
+      this.formData.set(CedarMetadataHelper.buildEmptyMetadata());
+    }
+  }
 
   downloadMetadadaRecord() {
     if (this.fileGuid()) {
@@ -174,18 +183,6 @@ export class CedarTemplateFormComponent {
     }
   }
 
-  private initializeFormData(): void {
-    const template = this.template()?.attributes?.template;
-    if (!template) return;
-    const metadata = this.existingRecord()?.attributes?.metadata;
-    if (this.existingRecord()) {
-      const structuredMetadata = CedarMetadataHelper.buildStructuredMetadata(metadata);
-      this.formData.set(structuredMetadata);
-    } else {
-      this.formData.set(CedarMetadataHelper.buildEmptyMetadata());
-    }
-  }
-
   handleEmailShare(): void {
     const url = window.location.href;
     window.location.href = `mailto:?subject=${this.schemaName()}&body=${url}`;

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

@@ -14,12 +14,10 @@ <h1>{{ currentUser()?.fullName }}</h1>
 
     <div class="flex flex-column gap-4 min-w-0 xl:align-items-end xl:flex-1">
       <div class="flex flex-column gap-3 w-full md:flex-row xl:gap-4 xl:justify-content-end">
-        @if (currentUser()?.social?.orcid) {
+        @if (orcidId()) {
           <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/' + currentUser()?.social?.orcid">
-              https://orcid.org/{{ currentUser()?.social?.orcid }}
-            </a>
+            <a class="font-bold" [href]="'https://orcid.org/' + orcidId()"> https://orcid.org/{{ orcidId() }} </a>
           </div>
         }
 

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

@@ -43,6 +43,20 @@ export class ProfileInformationComponent {
 
   userSocials = computed(() => mapUserSocials(this.currentUser()?.social, SOCIAL_LINKS));
 
+  orcidId = computed(() => {
+    const orcid = this.currentUser()?.external_identity?.ORCID;
+    if (!orcid || !orcid.id) {
+      return undefined;
+    }
+
+    const status = (orcid.status || '').toUpperCase();
+    if (status !== 'VERIFIED') {
+      return undefined;
+    }
+
+    return orcid.id;
+  });
+
   toProfileSettings() {
     this.editProfile.emit();
   }

src/app/shared/enums/subscriptions/subscription-frequency.enum.ts

@@ -1,5 +1,5 @@
 export enum SubscriptionFrequency {
   Never = 'none',
   Daily = 'daily',
-  Instant = 'instant',
+  Instant = 'instantly',
 }

src/app/shared/mappers/user/user.mapper.ts

@@ -32,6 +32,7 @@ export class UserMapper {
       employment: user.attributes.employment,
       iri: user.links.iri,
       social: user.attributes.social,
+      external_identity: user.attributes.external_identity,
       defaultRegionId: user.relationships?.default_region?.data?.id,
       canViewReviews: user.attributes.can_view_reviews === true, // [NS] Do not simplify it
       timezone: user.attributes.timezone,

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

@@ -0,0 +1,8 @@
+export interface OrcidInfo {
+  id: string;
+  status: string;
+}
+
+export interface ExternalIdentityModel {
+  ORCID?: OrcidInfo | null;
+}

src/app/shared/models/user/user-json-api.model.ts

@@ -2,6 +2,7 @@ import { ResponseDataJsonApi } from '../common/json-api.model';
 
 import { Education } from './education.model';
 import { Employment } from './employment.model';
+import { ExternalIdentityModel } from './external-identity.model';
 import { SocialModel } from './social.model';
 
 export type UserResponseJsonApi = ResponseDataJsonApi<UserDataJsonApi>;
@@ -47,6 +48,7 @@ export interface UserAttributesJsonApi {
   suffix: string;
   locale: string;
   social: SocialModel;
+  external_identity: ExternalIdentityModel;
   timezone: string;
 }
 

src/app/shared/models/user/user.models.ts

@@ -1,5 +1,6 @@
 import { Education } from './education.model';
 import { Employment } from './employment.model';
+import { ExternalIdentityModel } from './external-identity.model';
 import { SocialModel } from './social.model';
 
 export interface UserData {
@@ -24,6 +25,7 @@ export interface UserModel {
   timezone: string;
   locale: string;
   social: SocialModel;
+  external_identity: ExternalIdentityModel;
   defaultRegionId: string;
   link?: string;
   iri?: string;

src/main.ts

@@ -3,6 +3,9 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from '@osf/app.component';
 import { appConfig } from '@osf/app.config';
 
+import 'cedar-embeddable-editor';
+import 'cedar-artifact-viewer';
+
 bootstrapApplication(AppComponent, {
   providers: [...appConfig.providers],
 }).catch((err) =>

src/styles/styles.scss

@@ -7,11 +7,6 @@
 @use "base";
 @use "icons";
 
-@use "@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@use "@fortawesome/fontawesome-free/scss/solid.scss";
-@use "@fortawesome/fontawesome-free/scss/brands.scss";
-@use "@fortawesome/fontawesome-free/scss/regular.scss";
-
 @use "./components/md-editor";
 @use "./components/preprints";
 @use "./components/collections";