Add alert message to developer tools window

src/app/developer-tools/components/terms-of-use/terms-of-use.component.html

@@ -132,6 +132,25 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.additionalResources">
   </ng-container>
 </p>
 
+<app-alert-message *ngIf="!hasVerifiedEmailAddress">
+  <strong class="orc-font-body" i18n="@@developerTools.noVerifiedEmailAddresses"
+    >No verified email addresses found</strong
+  >
+
+  <p class="orc-font-body-small">
+    <ng-container i18n="@@developerTools.youMustHaveAtLeastOneVerifiedEmail"
+      >You must have at least one verified email address in your ORCID account
+      to register for your Public API credentials. Manage your email addresses
+      in the</ng-container
+    >
+    <a
+      (click)="openEmailModal()"
+      i18n="@@developerTools.emailsAndDomainsSection"
+      >Emails and domains section of your ORCID record</a
+    >.
+  </p>
+</app-alert-message>
+
 <div class="info" *ngIf="!checked && dirty">
   <div class="col">
     <mat-icon class="large-material-icon outline">warning</mat-icon>

src/app/developer-tools/components/terms-of-use/terms-of-use.component.scss

@@ -45,3 +45,14 @@ h2 {
 .mat-button-wrap-text {
   margin-bottom: 32px;
 }
+
+app-alert-message {
+  line-height: 21px;
+  margin-top: 16px;
+  a {
+    text-decoration: underline;
+  }
+  p {
+    margin-bottom: 0;
+  }
+}

src/app/developer-tools/components/terms-of-use/terms-of-use.component.spec.ts

@@ -7,6 +7,8 @@ import { RecordService } from 'src/app/core/record/record.service'
 import { of } from 'rxjs'
 
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
+import { MatLegacyDialog } from '@angular/material/legacy-dialog'
+import { useAnimation } from '@angular/animations'
 
 describe('TermsOfUseComponent', () => {
   let component: TermsOfUseComponent
@@ -19,6 +21,7 @@ describe('TermsOfUseComponent', () => {
         { provide: DeveloperToolsService, useValue: {} },
         { provide: PlatformInfoService, useValue: {} },
         { provide: RecordService, useValue: { getRecord: () => of() } },
+        { provide: MatLegacyDialog, useValue: {} },
       ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents()

src/app/developer-tools/components/terms-of-use/terms-of-use.component.ts

@@ -9,9 +9,11 @@ import {
   ViewChild,
 } from '@angular/core'
 import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox'
+import { MatLegacyDialog } from '@angular/material/legacy-dialog'
 import { Subject } from 'rxjs'
 import { takeUntil } from 'rxjs/operators'
 import { PlatformInfoService } from 'src/app/cdk/platform-info'
+import { ModalEmailComponent } from 'src/app/cdk/side-bar/modals/modal-email/modal-email.component'
 import { DeveloperToolsService } from 'src/app/core/developer-tools/developer-tools.service'
 import { RecordService } from 'src/app/core/record/record.service'
 
@@ -31,10 +33,12 @@ export class TermsOfUseComponent implements OnInit, OnDestroy {
   @Output() developerToolsEnable = new EventEmitter<boolean>()
   $destroy = new Subject<boolean>()
   emailAlreadyVerified: boolean
+  hasVerifiedEmailAddress: boolean
 
   constructor(
     private developerToolsService: DeveloperToolsService,
     private _record: RecordService,
+    private _dialog: MatLegacyDialog,
     private _changeDetectorRef: ChangeDetectorRef
   ) {}
   ngOnDestroy(): void {
@@ -50,13 +54,27 @@ export class TermsOfUseComponent implements OnInit, OnDestroy {
         const primaryEmail = userRecord?.emails?.emails?.filter(
           (email) => email.primary
         )[0]
+        this.hasVerifiedEmailAddress = userRecord.emails.emails.some(
+          (email) => email.verified
+        )
         if (primaryEmail?.verified) {
           this.emailAlreadyVerified = true
           this._changeDetectorRef.detectChanges()
         }
       })
   }
 
+  openEmailModal() {
+    return this._dialog
+      .open(ModalEmailComponent, {
+        width: '850px',
+        maxWidth: '99%',
+        // data: this.userRecord,
+        // ariaLabel: getAriaLabel(this.editModalComponent, this.type),
+      })
+      .afterClosed()
+  }
+
   registerForPublicApi() {
     this.dirty = true
     if (!this.checked) {

src/app/developer-tools/developer-tools.module.ts

@@ -22,6 +22,7 @@ import { ModalModule } from '../cdk/modal/modal.module'
 import { A11yLinkModule } from '../cdk/a11y-link/a11y-link.module'
 import { TopBarVerificationEmailModule } from '../cdk/top-bar-verification-email/top-bar-verification-email.module'
 import { DeveloperToolsComponent } from './pages/developer-tools/developer-tools.component'
+import { AlertMessageModule } from '../cdk/alert-message/alert-message.module'
 
 @NgModule({
   declarations: [
@@ -49,6 +50,7 @@ import { DeveloperToolsComponent } from './pages/developer-tools/developer-tools
     ModalModule,
     A11yLinkModule,
     TopBarVerificationEmailModule,
+    AlertMessageModule,
   ],
 })
 export class DeveloperToolsModule {}

src/locale/properties/developer-tools/developer-tools.en.properties

@@ -82,3 +82,6 @@ developerTools.publicClientApplicationsAreGranted2=If you need access to an ORCI
 developerTools.memberApi=Member API
 developerTools.mayBeMoreAppropriate=is available to ORCID member organizations.
 developerTools.byRegisteringForPublicApi=By “non-commercial” we mean that you may not charge any re-use fees for the Public API, and you may not make use of the Public API in connection with any revenue-generating product or service.
+developerTools.noVerifiedEmailAddresses=No verified email addresses found
+developerTools.youMustHaveAtLeastOneVerifiedEmail=You must have at least one verified email address in your ORCID account to register for your Public API credentials. Manage your email addresses in the
+developerTools.emailsAndDomainsSection=Emails and domains section of your ORCID record