change email verification in the side bar

src/app/cdk/side-bar/side-bar/side-bar.component.html

@@ -37,7 +37,6 @@
       [isPublicRecord]="isPublicRecord"
       [elements]="userRecord?.emails?.emails"
       [editModalComponent]="modalEmailComponent"
-      [customControls]="isPublicRecord && emailDomainsTogglz && !loadingTogglz"
       [email]="true"
       [type]="'side-bar'"
       class="side-bar"
@@ -75,9 +74,18 @@
             isPublicRecord ? '' : email.verified ? email.visibility : 'PRIVATE'
           "
           [isPublicRecord]="isPublicRecord"
-          >{{ email.value }}</app-panel-element
-        ></app-panel-data
-      >
+          >{{ email.value }}
+          <app-panel-element-source
+            [isLastItem]="last"
+            *ngIf="emailsOpenState"
+            [name]="email.sourceName || email.source"
+            [date]="email.createdDate | monthDayYearDateToString"
+            [assertion]="
+              email.assertionOriginName || email.assertionOriginOrcid
+            "
+          >
+          </app-panel-element-source></app-panel-element
+      ></app-panel-data>
 
       <!-- NEW EMAIL PANEL (TOGGLZ ON) -->
       <!-- EMAIL PANEL PUBLIC VIEW -->
@@ -97,28 +105,53 @@
           emailDomainsTogglz &&
           !loadingTogglz
         "
-        [ngClass]="{
-          'double-app-panel-data':
-            userRecord?.emails?.emailDomains &&
-            userRecord?.emails?.emailDomains?.length > 0
-        }"
       >
         <h4 header i18n="@@side-bar.verifiedEmailAddresses">
           Verified email addresses
         </h4>
         <app-panel-element
-          *ngFor="let entry of userRecord?.emails?.emails; let last = last"
+          *ngFor="let email of userRecord?.emails?.emails; let last = last"
           [separator]="!last"
           class="public-email-or-domain"
           [ngClass]="{
             'last-public-email-or-domain': last,
           }"
-          ><div class="row">
-            <mat-icon class="verification-icon">check_circle</mat-icon>
-            <div>
-              <span class="row orc-font-body-small"> {{ entry.value }}</span>
+          ><ng-container>
+            <div class="row">
+              <mat-icon
+                *ngIf="email.professionalEmail"
+                class="verification-icon"
+                >check_circle</mat-icon
+              >
+              <mat-icon
+                *ngIf="!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>
+                <span class="row orc-font-body-small"> {{ email.value }}</span>
+              </div>
             </div>
-          </div>
+            <app-panel-element-source
+              class="orc-font-small-print email-domain-source"
+              *ngIf="emailsOpenState"
+              [name]="
+                email.professionalEmail
+                  ? orcidEmailValidation
+                  : email.sourceName
+              "
+              [isEmailOrDomain]="true"
+              [date]="email.verificationDate | monthDayYearDateToString"
+              [isLastItem]="true"
+            >
+            </app-panel-element-source>
+          </ng-container>
         </app-panel-element>
       </app-panel-data>
 
@@ -136,18 +169,29 @@ <h4 header i18n="@@side-bar.verifiedEmailDomains">
         </h4>
         <app-panel-element
           *ngFor="
-            let entry of userRecord?.emails?.emailDomains;
+            let domain of userRecord?.emails?.emailDomains;
             let last = last
           "
           [separator]="!last"
           class="public-email-or-domain"
           [ngClass]="{ 'last-public-email-or-domain': last }"
-          ><div class="row">
-            <mat-icon class="verification-icon">check_circle</mat-icon>
-            <div>
-              <span class="row orc-font-body-small"> {{ entry.value }}</span>
+          ><ng-container
+            ><div class="row">
+              <mat-icon class="verification-icon">check_circle</mat-icon>
+              <div>
+                <span class="row orc-font-body-small"> {{ domain.value }}</span>
+              </div>
             </div>
-          </div>
+            <app-panel-element-source
+              class="orc-font-small-print email-domain-source"
+              *ngIf="emailsOpenState"
+              [name]="orcidEmailValidation"
+              [isEmailOrDomain]="true"
+              [date]="domain.createdDate | monthDayYearDateToString"
+              [isLastItem]="true"
+            >
+            </app-panel-element-source>
+          </ng-container>
         </app-panel-element>
       </app-panel-data>
       <!-- EMAIL PANEL MY ORCID -->

src/app/cdk/side-bar/side-bar/side-bar.component.scss

@@ -47,6 +47,11 @@ hr {
   min-width: 24px;
   font-size: 24px;
   margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  img {
+    width: 20px;
+  }
 }
 
 .last-public-email-or-domain {
@@ -69,6 +74,6 @@ hr {
   padding-bottom: 0;
 }
 
-.double-app-panel-data {
-  padding-bottom: 8px;
+.email-domain-source {
+  margin-left: 32px;
 }

src/app/cdk/side-bar/side-bar/side-bar.component.ts

@@ -44,6 +44,8 @@ export class SideBarComponent implements OnInit, OnDestroy {
   labelManageYourKeyword = $localize`:"@@record.labelManageYourKeyword:Manage your keywords`
   labelManageYourCountries = $localize`:"@@record.labelManageYourCountries:Manage your countries`
   labelManageYourPersonalIds = $localize`:"@@record.labelManageYourPersonalIds:Manage your personalIds`
+  selfAssertedSource = $localize`:@@record.selfAssertedSource:Self-asserted source`
+  orcidEmailValidation = $localize`:@@side-bar.orcidEmailValidation:ORCID email validation`
 
   $destroy: Subject<boolean> = new Subject<boolean>()
 

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

@@ -18,6 +18,7 @@ import { environment } from 'src/environments/environment'
 
 import { ErrorHandlerService } from '../error-handler/error-handler.service'
 import { RecordPublicSideBarService } from '../record-public-side-bar/record-public-side-bar.service'
+import { setProfessionalEmails } from '../utils'
 
 @Injectable({
   providedIn: 'root',
@@ -59,16 +60,10 @@ export class RecordEmailsService {
       .pipe(
         retry(3),
         catchError((error) => this._errorHandler.handleError(error)),
-        catchError((error) => of({ emails: [] })),
+        catchError(() => 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
-              }
-            })
-          })
+          value = setProfessionalEmails(value)
           return value
         }),
         tap((value) => {

src/app/core/record-public-side-bar/record-public-side-bar.service.ts

@@ -9,6 +9,7 @@ import {
 } from 'src/app/types/record.local'
 import { environment } from 'src/environments/environment'
 import { ErrorHandlerService } from '../error-handler/error-handler.service'
+import { setProfessionalEmails } from '../utils'
 
 @Injectable({
   providedIn: 'root',
@@ -54,8 +55,11 @@ export class RecordPublicSideBarService {
         .pipe(
           retry(3),
           catchError((error) => this._errorHandler.handleError(error)),
-          catchError((error) => of({} as SideBarPublicUserRecord)),
-          tap((value) => this.$SideBarPublicUserRecordSubject.next(value))
+          catchError(() => of({} as SideBarPublicUserRecord)),
+          tap((record) => {
+            record.emails = setProfessionalEmails(record.emails)
+            this.$SideBarPublicUserRecordSubject.next(record)
+          })
         )
     } else {
       of({})

src/app/core/utils.ts

@@ -0,0 +1,14 @@
+import { EmailsEndpoint } from '../types'
+
+export const setProfessionalEmails = (
+  emails: EmailsEndpoint
+): EmailsEndpoint => {
+  emails.emailDomains.forEach((domain) => {
+    emails.emails.forEach((email) => {
+      if (email.value.includes(domain.value)) {
+        email.professionalEmail = true
+      }
+    })
+  })
+  return emails
+}