Fix/9072-sign-in-sign-in-updates (#2174)

* fix: Add missing translation properties * feature: Add new sign in updates behind togglz --------- Co-authored-by: Daniel Palafox <[email protected]>
ORCID · Mar 6, 2024 · e687fb0 · e687fb0
1 parent 19b874a
commit e687fb0
Show file tree

Hide file tree

Showing 28 changed files with 1,230 additions and 218 deletions.
diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.html b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.html
@@ -1,21 +1,84 @@
-<mat-toolbar>
-  <mat-toolbar-row>
-    <div role="alert">
-      <p class="mat-body-2">
-        <ng-container
-          i18n="@@myOrcidAlerts.invalidVerifyUrl"
-          *ngIf="invalidVerifyUrl"
+<ng-container *ngIf="!signInUpdatesV1Togglz">
+  <mat-toolbar>
+    <mat-toolbar-row>
+      <div role="alert">
+        <p class="mat-body-2">
+          <ng-container
+            i18n="@@myOrcidAlerts.invalidVerifyUrl"
+            *ngIf="invalidVerifyUrl"
+          >
+            Your email couldn't be verified, please check the link you used to
+            verify it.
+          </ng-container>
+          <ng-container
+            i18n="@@myOrcidAlerts.emailVerified"
+            *ngIf="emailVerified"
+          >
+            Thank you for verifying your email
+          </ng-container>
+        </p>
+      </div>
+    </mat-toolbar-row>
+  </mat-toolbar>
+</ng-container>
+<ng-container *ngIf="signInUpdatesV1Togglz">
+  <ng-container *ngIf="emailVerified || invalidVerifyUrl">
+    <div
+      [ngClass]="{
+        'verification': emailVerified,
+        'invalid': invalidVerifyUrl
+        }">
+      <div>
+        <mat-icon class="large-material-icon material-symbols-outlined"
+          >
+            <ng-container *ngIf="emailVerified">check_circle</ng-container>
+            <ng-container *ngIf="invalidVerifyUrl">warning</ng-container>
+          </mat-icon
         >
-          Your email couldn't be verified, please check the link you used to
-          verify it.
-        </ng-container>
-        <ng-container
-          i18n="@@myOrcidAlerts.emailVerified"
-          *ngIf="emailVerified"
-        >
-          Thank you for verifying your email
-        </ng-container>
-      </p>
+      </div>
+      <div class="content">
+        <div>
+          <b i18n="@@ngOrcid.signin.almostDone">
+            Almost done!
+          </b>
+        </div>
+        <div>
+          <ng-container
+            i18n="@@ngOrcid.signin.signInToComplete"
+            *ngIf="emailVerified"
+          >
+            Sign in to complete your email verification
+          </ng-container>
+          <ng-container
+            i18n="@@myOrcidAlerts.invalidVerifyUrl"
+            *ngIf="invalidVerifyUrl"
+          >
+            Your email couldn't be verified, please check the link you used to
+            verify it.
+          </ng-container>
+        </div>
+      </div>
     </div>
-  </mat-toolbar-row>
-</mat-toolbar>
+  </ng-container>
+  <ng-container
+      *ngIf="printError && badCredentials"
+    >
+      <div class="invalid">
+        <div>
+          <mat-icon class="large-material-icon material-symbols-outlined"
+            >warning</mat-icon
+          >
+        </div>
+        <div class="content">
+          <div>
+            <b i18n="@@ngOrcid.signin.somethingNotQuiteRight">
+              Something's not quite right...
+            </b>
+          </div>
+          <div i18n="@@ngOrcid.signin.checkYourSignIn">
+            Please check that your sign in details are correct and then try signing in again
+          </div>
+        </div>
+      </div>
+    </ng-container>
+</ng-container>
diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss
@@ -14,3 +14,39 @@ mat-toolbar {
     }
   }
 }
+
+.verification,
+.invalid {
+  .main-paragraph {
+    margin-bottom: 16px;
+  }
+  .content div:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
+  padding: 16px;
+  border: solid 2px;
+  border-radius: 4px;
+  display: flex;
+
+  p {
+    margin: 0;
+  }
+
+  mat-icon,
+  img {
+    margin-right: 16px;
+  }
+
+  mat-form-field,.input-container {
+    width: 100%;
+  }
+
+  mat-form-field {
+    margin-bottom: 8px;
+  }
+}
+
+.invalid,.verification {
+  margin-bottom: 24px;
+}
diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss-theme.scss b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.scss-theme.scss
@@ -1,14 +1,40 @@
+@use '@angular/material' as mat;
 @import 'src/assets/scss/material.orcid-theme.scss';
 
 @mixin my-orcid-alerts-theme($theme) {
   $primary: map-get($theme, primary);
   $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
   .mat-toolbar {
     background: map-get($foreground, 'state-notice-light');
     color: $orcid-dark-primary-text;
   }
+
+  .verification {
+    background-color: mat.get-color-from-palette(
+      $background,
+      brand-primary-lightest
+    );
+    border-color: map-get($foreground, 'brand-primary');
+
+    mat-icon {
+      color: mat.get-color-from-palette(
+        $foreground,
+        'brand-primary'
+      ) !important;
+    }
+  }
+
+  .invalid {
+    background-color: mat.get-color-from-palette($warn, 50);
+    border-color: map-get($foreground, 'state-warning-dark');
+
+    mat-icon {
+      color: map-get($foreground, 'state-warning-dark');
+    }
+  }
 }
 
 @include my-orcid-alerts-theme($orcid-app-theme);
diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.ts b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.component.ts
@@ -11,6 +11,9 @@ import { Component, Input, OnInit } from '@angular/core'
 export class MyOrcidAlertsComponent implements OnInit {
   @Input() emailVerified: boolean
   @Input() invalidVerifyUrl: boolean
+  @Input() signInUpdatesV1Togglz: boolean
+  @Input() printError: boolean
+  @Input() badCredentials: boolean
 
   constructor() {}
 

diff --git a/src/app/cdk/my-orcid-alerts/my-orcid-alerts.module.ts b/src/app/cdk/my-orcid-alerts/my-orcid-alerts.module.ts
@@ -2,10 +2,11 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { MyOrcidAlertsComponent } from './my-orcid-alerts.component'
 import { MatToolbarModule } from '@angular/material/toolbar'
+import { MatIconModule } from '@angular/material/icon'
 
 @NgModule({
   declarations: [MyOrcidAlertsComponent],
-  imports: [CommonModule, MatToolbarModule],
+  imports: [CommonModule, MatToolbarModule, MatIconModule],
   exports: [MyOrcidAlertsComponent],
 })
 export class MyOrcidAlertsModule {}
diff --git a/src/app/cdk/panel/panels/panels.component.ts b/src/app/cdk/panel/panels/panels.component.ts
@@ -81,7 +81,6 @@ export class PanelsComponent implements OnInit {
     private _dialog: MatDialog,
     private _platform: PlatformInfoService,
     private _verificationEmailModalService: VerificationEmailModalService,
-    private _togglz: TogglzService
   ) {}
 
   add(type: string, action?: ADD_EVENT_ACTION) {