Merge pull request #2453 from ORCID/lmendoza/batch-of-work-jan-2025

Lmendoza/batch of work jan 2025

src/app/app-routing.module.ts

@@ -171,7 +171,10 @@ const routes: Routes = [
   },
   {
     path: '**',
-    redirectTo: '/',
+    loadChildren: () =>
+      import('./page-not-found-404/page-not-found-404.module').then(
+        (m) => m.PageNotFound404Module
+      ),
   },
 ]
 

src/app/cdk/deep-select-input/deep-select-input/deep-select-input.component.html

@@ -15,6 +15,7 @@
       [value]="selectedItem?.label"
       matInput
       [errorStateMatcher]="getMatcher()"
+      role="menu"
     />
     <mat-icon matSuffix>arrow_drop_down</mat-icon>
     <mat-error *ngIf="invalid" i18n="@@works.selectAWorkType">

src/app/cdk/panel/panels/panels.component.spec.ts

@@ -95,7 +95,7 @@ describe('PanelsComponent', () => {
     const dialogs = await loader.getAllHarnesses(MatDialogHarness)
     expect(dialogs.length).toBe(1)
     expect(await dialogs[0].getText()).toContain(
-      'Please verify your primary email address'
+      'Please verify your email addresses'
     )
   })
 })

src/app/cdk/top-bar-verification-email/modals/top-bar-verification-email-modal/top-bar-verification-email-modal.component.html

@@ -2,7 +2,7 @@
   <app-modal-header>
     <mat-icon class="material-icons-outlined info">info</mat-icon>
     <ng-container i18n="@@topBar.pleaseVerifyYourPrimary">
-      Please verify your primary email address
+      Please verify your email addresses
     </ng-container>
   </app-modal-header>
   <div
@@ -11,24 +11,22 @@
       'orc-font-small-print': isMobile
     }"
   >
-    <div class="row">
-      <p i18n="@@topBar.youNeedToVerify">
-        You need to verify your primary email address in order to access all of
-        ORCID’s editing features.
-      </p>
+    <div class="text-content">
       <p>
+        <ng-container i18n="@@topBar.youNeedToVerify"
+          >You need to verify at least one email address in order to access all
+          of ORCID’s editing features.</ng-container
+        >
         <ng-container i18n="@@topBar.toVerifyYourEmail">
-          To verify your email please click the link in the message we have sent
-          to:
+          To verify your email address, click the link in the email sent to:
         </ng-container>
-        <br />
-        <strong>
-          {{ primaryEmail }}
-        </strong>
+      </p>
+      <p>
+        {{ primaryEmail }}
       </p>
       <p>
         <strong i18n="@@topBar.iDontHave">
-          I don’t have the verification email
+          Don’t have a verification email?
         </strong>
         <br />
         <ng-container i18n="@@topBar.clickTheButton">
@@ -50,29 +48,16 @@
       <p>
         <strong i18n="@@side-bar.needHelp"> Need help?</strong>
         <br />
-        <ng-container i18n="@@topBar.visitOur"> Visit our</ng-container>
+        <ng-container i18n="@@topBar.visitOur"> Visit the</ng-container>
         <a
           class="underline"
           href="https://support.orcid.org/hc/articles/360006973793"
           rel="noopener noreferrer"
           target="_blank"
           i18n="@@topBar.knowledge"
           [attr.aria-label]="ariaLabelKnowledgeBase"
-          >knowledge base</a
-        >
-        <ng-container i18n="@@topBar.baseOrContact"
-          >or contact the support team at</ng-container
-        >
-        <br />
-        <a
-          class="underline"
-          href="https://support.orcid.org/"
-          rel="noopener noreferrer"
-          target="_blank"
-          [attr.aria-label]="ariaLabelKnowledgeSupport"
+          >ORCID help centre</a
         >
-          https://support.orcid.org/
-        </a>
       </p>
     </div>
   </div>

src/app/cdk/top-bar-verification-email/modals/top-bar-verification-email-modal/top-bar-verification-email-modal.component.scss

@@ -14,7 +14,12 @@ app-modal {
 
 .need-help {
   p {
+    display: block;
     margin-top: 4px;
     margin-inline-end: 0;
   }
 }
+
+.text-content {
+  flex-direction: column;
+}

src/app/cdk/top-bar-verification-email/modals/top-bar-verification-email-modal/top-bar-verification-email-modal.component.scss-theme.scss

@@ -14,6 +14,9 @@
       'state-notice-dark'
     ) !important;
   }
+  :host button {
+    background: mat.get-color-from-palette($primary, 700);
+  }
 }
 
 @include top-bar-verification-modal-theme($orcid-app-theme);

src/app/cdk/top-bar-verification-email/top-bar-verification-email.component.html

@@ -9,18 +9,18 @@ <h3 title class="orc-font-body" i18n="@@topBar.thankYouForRegistering">
         i18n="@@topBar.weHaveSent"
         *ngIf="messageType === 'forManualEditing'"
       >
-        We have sent verification messages to each of your registered email
-        addresses. You will need to verify your primary email address before you
-        can begin adding information manually to your ORCID record.
+        We have sent verification emails to each of your registered email
+        addresses. You need to verify at least one email address before you can
+        begin adding information manually to your ORCID record.
       </p>
       <p
         class="orc-font-body-small"
         i18n="@@topBar.weHaveSentForCredentials"
         *ngIf="messageType === 'forCredentials'"
       >
-        We have sent verification messages to each of your registered email
-        addresses. You will need to verify your primary email address before you
-        can register your ORCID Public API credentials.
+        We have sent verification emails to each of your registered email
+        addresses. You need to verify at least one email address before you can
+        register your ORCID Public API credentials.
       </p>
       <button
         class="mat-button-wrap-text"
@@ -36,41 +36,31 @@ <h3 title class="orc-font-body" i18n="@@topBar.thankYouForRegistering">
 
   <app-alert-message *ngIf="!emailVerified && verifyEmailSend">
     <h3 title class="orc-font-body" i18n="@@side-bar.pleaseVerify">
-      Please verify your primary email address!
+      Please verify your email addresses
     </h3>
     <ng-container content>
       <p class="orc-font-body-small">
         <ng-container i18n="@@side-bar.youNeedToVerify">
-          You need to verify your primary email in order to access all of
-          ORCID’s editing features.
+          You need to verify at least one email address in order to access all
+          of ORCID’s editing features.
         </ng-container>
         <br />
         <ng-container i18n="@@side-bar.youNeedToVerify2">
-          To verify your email, click the link in the message sent to:
+          To verify your email address, click the link in the email sent to:
         </ng-container>
       </p>
       <div class="no-wrap orc-font-body-small">
         <p class="email-container">{{ primaryEmail }}</p>
         <p class="need-help">
           <strong i18n="@@side-bar.needHelp"> Need help?</strong> <br />
-          <ng-container i18n="@@side-bar.visitOur"> Visit our </ng-container>
+          <ng-container i18n="@@side-bar.visitOur"> Visit the </ng-container>
           <a
             class="underline"
             target="_blank"
             rel="noopener noreferrer"
             href="https://support.orcid.org/hc/articles/360006973793"
             i18n="@@side-bar.knowledge"
-            >knowledge base
-          </a>
-          <ng-container i18n="@@side-bar.orContact"> or contact </ng-container>
-          <a
-            class="underline"
-            target="_blank"
-            rel="noopener noreferrer"
-            i18n="@@side-bar.support"
-            href="https://support.orcid.org/"
-          >
-            support.
+            >ORCID help centre
           </a>
         </p>
       </div>

src/app/record/components/not-found/not-found.component.html → src/app/page-not-found-404/not-found/not-found.component.html

@@ -13,20 +13,22 @@
       >
         <img src="assets/vectors/orcid.logo.icon.svg" alt="orcid logo" />
         <h2 class="orc-font-heading-small" i18n="@@record.notFound">
-          We’re really sorry, we can’t find the ORCID record you’re looking for.
+          We’re really sorry, we can’t find the page you’re looking for.
         </h2>
         <p class="orc-font-body-large" i18n="@@record.whatHappened">
           What happened?
         </p>
         <div class="orc-font-body-small">
           <div class="if-you">
             <b i18n="@@record.ifYouTyped">
-              If you typed in the URL or ORCID iD by hand
+              If you typed in a URL or link by hand
             </b>
             <p i18n="@@record.pleaseCheck">
-              Please check that the ORCID iD - the 16-digit number at the end of
-              the URL - is correct. A correctly-formatted ORCID URL looks like
-              this: https://orcid.org/1234-5678-9101-1121
+              Please check the URL or link for typos or mistakes. If you are
+              looking for a specific ORCID record make sure the ORCID iD - the
+              16-digit number at the end of the URL - is right.A
+              correctly-formatted ORCID iD URL looks like this:
+              https://orcid.org/1234-5678-9101-1121
             </p>
           </div>
           <div class="if-you">
@@ -62,6 +64,42 @@ <h2 class="orc-font-heading-small" i18n="@@record.notFound">
             ORCID iD
           </a>
         </div>
+        <div class="search">
+          <a
+            class="underline orc-font-body-small"
+            i18n="@@record.headBackToMain"
+            (click)="goto('/')"
+          >
+            Head back to the main ORCID homepage
+          </a>
+        </div>
+        <div class="search">
+          <a
+            class="underline orc-font-body-small"
+            i18n="@@record.findOutMoreAboutOrcid"
+            href="https://info.orcid.org/"
+          >
+            Find out more about ORCID on our information site
+          </a>
+        </div>
+        <div class="search">
+          <a
+            class="underline orc-font-body-small"
+            i18n="@@record.signinToOricd"
+            (click)="goto('/login')"
+          >
+            Sign in to ORCID and manage your record
+          </a>
+        </div>
+        <div class="search">
+          <a
+            class="underline orc-font-body-small"
+            i18n="@@record.registerForAnOrcid"
+            (click)="goto('/register')"
+          >
+            Register for an ORCID record
+          </a>
+        </div>
       </div>
     </div>
   </div>

src/app/record/components/not-found/not-found.component.scss → src/app/page-not-found-404/not-found/not-found.component.scss

@@ -17,6 +17,7 @@ img {
 
 h2 {
   margin-bottom: 32px;
+  text-align: center;
 }
 
 .if-you {
@@ -29,3 +30,7 @@ h2 {
 .search {
   margin-top: 16px;
 }
+
+.orc-font-body-large {
+  font-weight: 700;
+}

src/app/record/components/not-found/not-found.component.spec.ts → src/app/page-not-found-404/not-found/not-found.component.spec.ts

@@ -3,15 +3,16 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { NotFoundComponent } from './not-found.component'
 import { HttpClientTestingModule } from '@angular/common/http/testing'
 import { RouterTestingModule } from '@angular/router/testing'
-import { WINDOW_PROVIDERS } from '../../../cdk/window'
-import { PlatformInfoService } from '../../../cdk/platform-info'
-import { ErrorHandlerService } from '../../../core/error-handler/error-handler.service'
-import { SnackbarService } from '../../../cdk/snackbar/snackbar.service'
+
 import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'
 import { Overlay } from '@angular/cdk/overlay'
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { SnackbarService } from 'src/app/cdk/snackbar/snackbar.service'
+import { WINDOW_PROVIDERS } from 'src/app/cdk/window'
+import { ErrorHandlerService } from 'src/app/core/error-handler/error-handler.service'
 
 describe('NotFoundComponent', () => {
   let component: NotFoundComponent

src/app/record/components/not-found/not-found.component.ts → src/app/page-not-found-404/not-found/not-found.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
-import { PlatformInfo, PlatformInfoService } from '../../../cdk/platform-info'
 import { takeUntil } from 'rxjs/operators'
 import { Subject } from 'rxjs'
 import { Router } from '@angular/router'
 import { Title } from '@angular/platform-browser'
+import { PlatformInfo, PlatformInfoService } from 'src/app/cdk/platform-info'
 
 @Component({
   selector: 'app-not-found',

src/app/page-not-found-404/page-not-found-404-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PageNotFoundComponent,
+  },
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PageNotFound404RoutingModule {}

src/app/page-not-found-404/page-not-found-404.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+import { PageNotFound404RoutingModule } from './page-not-found-404-routing.module'
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component'
+import { NotFoundComponent } from './not-found/not-found.component'
+
+@NgModule({
+  declarations: [PageNotFoundComponent, NotFoundComponent],
+  imports: [CommonModule, PageNotFound404RoutingModule],
+  exports: [NotFoundComponent],
+})
+export class PageNotFound404Module {}

src/app/page-not-found-404/page-not-found/page-not-found.component.html

@@ -0,0 +1,5 @@
+<main id="main">
+  <div class="container">
+    <app-not-found></app-not-found>
+  </div>
+</main>

src/app/page-not-found-404/page-not-found/page-not-found.component.scss

@@ -0,0 +1,3 @@
+:host {
+  width: 100%;
+}

src/app/page-not-found-404/page-not-found/page-not-found.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { PageNotFoundComponent } from './page-not-found.component'
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent
+  let fixture: ComponentFixture<PageNotFoundComponent>
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [PageNotFoundComponent],
+    })
+    fixture = TestBed.createComponent(PageNotFoundComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+})

src/app/page-not-found-404/page-not-found/page-not-found.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.scss'],
+})
+export class PageNotFoundComponent {}