email modal verification changes

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

@@ -80,12 +80,26 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
         <div class="email-entry row">
           <div class="row email-input-line" [formGroupName]="email.putCode">
             <mat-icon
+              *ngIf="
+                !email.verified || (email.verified && email.professionalEmail)
+              "
               class="verification-icon"
               [ngClass]="{
               verified: email.verified,
             }"
               >check_circle</mat-icon
             >
+            <mat-icon
+              *ngIf="email.verified && !email.professionalEmail"
+              aria-hidden="false"
+              [attr.aria-label]="selfAssertedSource"
+              [attr.alt]="selfAssertedSource"
+              class="verification-icon"
+              ><img
+                src="./assets/vectors/profile-not-verified.svg"
+                [attr.alt]="selfAssertedSource"
+              />
+            </mat-icon>
             <div class="email-input-container">
               <mat-form-field
                 *ngIf="!showEmailAsVerified(email.putCode)"
@@ -112,11 +126,18 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
                 <strong tabindex="0" class="row orc-font-body-small">
                   {{ emailsForm.value[email.putCode].email }}</strong
                 >
-                <em
-                  class="row orc-font-small-print"
-                  i18n="@@side-bar.verifiedEmail"
-                  >Verified email address</em
+                <app-panel-element-source
+                  class="orc-font-small-print"
+                  [name]="
+                    email.professionalEmail
+                      ? orcidEmailValidation
+                      : email.sourceName
+                  "
+                  [isEmailOrDomain]="true"
+                  [date]="email.verificationDate | monthDayYearDateToString"
+                  [isLastItem]="true"
                 >
+                </app-panel-element-source>
               </div>
             </div>
             <div
@@ -212,7 +233,7 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
               class="orc-font-small-print"
             >
               Please enter a valid email address, for example
-              joe@institution.edu
+              joe&#64;institution.edu
             </mat-error>
 
             <mat-error
@@ -287,11 +308,14 @@ <h2 class="orc-font-body-large" i18n="@@side-bar.emailAddressesUppercase">
               <strong tabindex="0" class="row orc-font-body-small">
                 {{ domain.value }}</strong
               >
-              <em
-                class="row orc-font-small-print"
-                i18n="@@side-bar.verifiedEmailDomain"
-                >Verified email domain</em
+              <app-panel-element-source
+                class="orc-font-small-print"
+                [name]="orcidEmailValidation"
+                [isEmailOrDomain]="true"
+                [date]="domain.createdDate | monthDayYearDateToString"
+                [isLastItem]="true"
               >
+              </app-panel-element-source>
             </div>
             <div class="actions-sub-wrapper domain-visibility">
               <app-visibility-selector

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

@@ -27,10 +27,17 @@ app-alert-message {
 
 .verification-icon {
   height: 40px;
-  width: 32px;
-  font-size: 32px;
+  width: 40px;
+  font-size: 40px;
   margin-right: 16px;
   align-content: center;
+  img {
+    height: 32px;
+    width: 32px;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+  }
 }
 
 mat-form-field {
@@ -45,7 +52,7 @@ mat-form-field {
 
 .actions-wrapper {
   width: 100%;
-  margin-left: 48px;
+  margin-left: 60px;
   margin-right: 255px;
   margin-top: 3px;
   line-height: 21px;
@@ -145,7 +152,6 @@ section[id='Email domains'] {
   strong {
     margin-bottom: 2px;
   }
-  line-height: 21px;
   letter-spacing: 0.25px;
   flex-grow: 1;
 }

src/app/cdk/side-bar/modals/modal-email/modal-email.component.ts

@@ -73,16 +73,18 @@ export class ModalEmailComponent implements OnInit, OnDestroy {
   ariaLabelVisibilityDomainTrustedParty = $localize`:@@side-bar.ariaLabelDomainVisibilityTrustedParties:Set domain visibility to Trusted Parties`
   ariaLabelVisibilityDomainPrivate = $localize`:@@side-bar.ariaLabelDomainVisibilityPrivate:Set domain visibility to Only Me`
   ariaOpenAccountSettings = $localize`:@@side-bar.ariaOpenAccountSettings:Open your ORCID account settings`
+  selfAssertedSource = $localize`:@@record.selfAssertedSource:Self-asserted source`
   deleteTooltip = $localize`:@@side-bar.deleteTooltip:You can't delete the only email address in your account`
   visibilityTooltip = $localize`:@@side-bar.visibilityTooltip:Visibility set to Only me`
+  orcidEmailValidation = $localize`:@@side-bar.orcidEmailValidation:ORCID email validation`
 
   @ViewChildren('emailInput') inputs: QueryList<ElementRef>
   verificationsSend: string[] = []
   $destroy: Subject<boolean> = new Subject<boolean>()
   addedEmailsCount = 0
   emailsForm: UntypedFormGroup = new UntypedFormGroup({})
   emails: AssertionVisibilityString[] = []
-  verifiedDomains = []
+  verifiedDomains: AssertionVisibilityString[] = []
   primaryEmail: AssertionVisibilityString | undefined = undefined
   originalEmailsBackendCopy: AssertionVisibilityString[]
   defaultVisibility: VisibilityStrings = 'PRIVATE'

src/app/core/record-emails/record-emails.service.ts

@@ -62,6 +62,13 @@ export class RecordEmailsService {
         catchError((error) => of({ emails: [] })),
         map((value: EmailsEndpoint) => {
           value.emails.sort(this.sortByEmailCreationDate)
+          value.emailDomains.forEach((domain) => {
+            value.emails.forEach((email) => {
+              if (email.value.includes(domain.value)) {
+                email.professionalEmail = true
+              }
+            })
+          })
           return value
         }),
         tap((value) => {

src/app/types/record.endpoint.ts

@@ -104,8 +104,10 @@ export interface AssertionBase {
   urlName?: string
   sourceName?: string
   content?: string
+  professionalEmail?: boolean
   createdDate?: MonthDayYearDate
   lastModified?: MonthDayYearDate
+  verificationDate?: MonthDayYearDate
   assertionOriginOrcid?: any
   assertionOriginClientId?: any
   assertionOriginName?: any

src/locale/properties/shared/shared.en.properties

@@ -21,6 +21,7 @@ shared.whoCanSeeBio=Control who can see your biography by setting the visibility
 shared.whoCanSeeName=Control who can see your given, family and published names by setting the visibility. The default visibility for your names is
 shared.requiredInformation=Required information
 shared.created=Created:
+shared.verified=Verified:
 shared.delete=Delete
 shared.showMore=Show more
 shared.showLess=Show less

src/locale/properties/side-bar/side-bar.en.properties

@@ -23,6 +23,7 @@ side-bar.verifiedEmailDomain=Verified email domain
 side-bar.whenYouVerifyEmail=When you verify a professional email address we will add the associated domain to your record. You can choose to show an email domain on your public record instead of the full email address.
 side-bar.findOutMoreAboutVerifiedEmailDomains=Find out more about verified email domains
 side-bar.noVerifiedEmailDomains=No verified email domains
+side-bar.orcidEmailValidation=ORCID email validation
 side-bar.inYourOrcidRecord=in your ORCID record.
 side-bar.youNeedToVerify=You need to verify your primary email in order to access all of ORCID’s editing features.
 side-bar.youNeedToVerify2=To verify your email, click the link in the message sent to: