forgot-password-screen

lib/core/src/lib/forgot-password/forgot-password.component.html

@@ -1,55 +1,43 @@
 <div class="app-dialog">
     <div class="resettingPassword">
-        <div class="aaa-dialog-header">
+
-            <div class="aaa-mat-dialog-title" mat-dialog-title style="font-weight:bold; font-size:large;">
+        <div class="app-dialog-header">
+            <div class="app-mat-dialog-title">
                 {{ 'PASSWORD.RECOVER-PASSWORD' | translate }}
             </div>
             <hr>
         </div>
 
-        <div class="aaa-dialog-body" *ngIf="!passwordResetStatus">
+        <div class="app-dialog-body" *ngIf="!passwordResetStatus">
-            <p style="font-size: medium;">{{ 'PASSWORD.MESSAGES.FILLER' | translate }}</p>
+            <p class="app-dialog-filler">{{ 'PASSWORD.MESSAGES.FILLER' | translate }}</p>
             <form [formGroup]="forgotPasswordForm">
-                <label style="font-weight:bold; font-size:medium;">
+
+                <label class="app-forgot-password-label">
                     {{ 'PASSWORD.MESSAGES.ENTER-USERNAME' | translate }}
                 </label>
-                <br>
 
-                <mat-form-field appearance="fill" style="padding-top:5px; width:100%;">
+                    <input class="app-forgot-password-field"
-                    <input data-automation-id="security-control-name-input-text"
                         placeholder="{{ 'PASSWORD.PLACEHOLDERS.USERNAME' | translate }}"
-                        matInput width="100%"
+                        
                         formControlName="userName"
                         required>
-                    <mat-error *ngIf="forgotPasswordForm.controls.username?.hasError('required')">
-                        {{ 'PASSWORD.MESSAGES.USERNAME-REQUIRED' | translate }}
-                    </mat-error>
-                </mat-form-field>
-                <br>
                 
-                <div>
+                <button type="button" (click)="sendInstructions()" class="send-instructions-button"
-                    <button type="button" (click)="sendInstructions()" id="send-instructions-btn"
                     [attr.aria-label]="'PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate"
-                        [disabled]="isButtonDisabled()" class="adf-login-button" mat-raised-button color="primary"
+                    [disabled]="isButtonDisabled()" mat-raised-button color="primary">
-                        data-automation-id="send-instructions-button" >
-                        <span class="adf-login-button-label">
                         {{ 'PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate }}
-                        </span>
                 </button>
-                </div>
+            
-                <br>
             </form>
         </div>
 
-        <div class="aaa-dialog-body" *ngIf="passwordResetStatus">
+        <div class="app-dialog-body" *ngIf="passwordResetStatus">
             <div class="passwordResetSuccessful">
-                <p style="font-size:medium;">
+                <p class="password-reset-link-message">
-                    <a style="color: blue; text-decoration:underline; cursor:pointer;">
                     {{ 'PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }}
-                    </a>
                 </p>
             </div>
-            <br>
+        </div>
-        </div>
+
     </div>
 </div>

lib/core/src/lib/forgot-password/forgot-password.component.scss

@@ -1,44 +1,80 @@
-.app {
+.app-dialog {
-    &-dialog {
-        width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
-        height: 50%;
-        &-body {
-            flex: 1;
-            overflow-y: auto;
-            padding: 0 15px;
-        }
-        &-footer {
-            display: flex;
-            justify-content: flex-end;
-            align-self: flex-end;
-        }
-    }
-    &-security-controls {
-        &-actions {
-            padding: 15px 10px;
-        }
-        &-toggle-description-text {
-            color: var(--theme-accent-color);
-            font-weight: bold;
-            cursor: pointer;
-        }
-        &-config-type-image-container {
-            display: flex;
-            width: 100%;
-            flex-direction: row;
-            justify-content: center;
-        }
-        &-config-type-image {
-            width: 100%;
-        }
-    }
 }
 
-.app-recover-password-btn {
+.app-mat-dialog-title {
-    background: var(--theme-blue-text-background);
+    font-style: normal;
-    border: 1px solid var(--theme-blue-border-color);
+    font-weight: 400;
-    font-size: var(--theme-button-font-size);
+    font-size: 20px;
+    line-height: 28px;
+    letter-spacing: 0.15px;
+    color: var(--theme-forgot-password-title-color);
+    padding: 2px 0;
+}
+
+hr {
+    margin: 12px 0;
+}
+
+.app-dialog-filler {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 8px 0px;
+    height: 16px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;    
+    letter-spacing: 0.5px;
+    color: var(--theme-forgot-password-label-color);
+    margin: 0 0 8px 0;
+}
+
+.app-forgot-password-label {
+    height: 32px;
+    padding: 6px 0;
+    font-style: normal;
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.15px;
+    color: var(--theme-forgot-password-title-color);
+}
+
+.app-forgot-password-field {
+    text-decoration: none;
+    height: 32px;
+    line-height: 32px;
+    background: var(--theme-forgot-password-input-background-color);
+    border-radius: 6px;
+    width: 100%;
+    border: none !important;
+    outline: none;
+}
+
+.send-instructions-button {
+    width: 100% !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 4px 12px;
+    height: 32px;
+    background: var(--theme-forgot-password-button-background-color);
+    border-radius: 6px;  
+    margin: 24px 0 0 0 !important;
+}
+
+.password-reset-link-message {
+    height: 52px;
+    padding: 6px 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    color: var(--theme-forgot-password-title-color);
 }

lib/core/src/lib/i18n/en.json

@@ -323,12 +323,12 @@
     "MESSAGES": {
       "USERNAME-REQUIRED": "Required",
       "FILLER": "Don't worry, happens to the best of us.",
-      "ENTER-USERNAME": "Enter Username of your account",
+      "ENTER-USERNAME": "Enter username for your account",
-      "INVALID-USERNAME": "You've entered an invalid Email ID",
+      "INVALID-USERNAME": "You've entered an invalid username",
-      "RESET-PASSWORD-EMAIL-SENT": "An email has been sent to your registered Email ID. Please click this link when get it."
+      "RESET-PASSWORD-EMAIL-SENT": "An email has been sent to your registered Email ID. Please click the link when you get it."
     },
     "PLACEHOLDERS": {
-      "USERNAME": "USERNAME"
+      "USERNAME": "Username"
     },
     "BUTTONS": {
       "SEND-INSTRUCTIONS": "Send Instructions"

lib/core/src/lib/login/components/login.component.scss

@@ -4,6 +4,17 @@
     @include flex-column;
 }
 
+.backdrop-background {
+    background-color: #E5E5E5;;
+    opacity: 1 !important;
+}
+
+.forgot-password-dialog-box {   
+    border: 1px solid var(--theme-forgot-password-dialog-border-color) !important;
+    box-shadow: 0px 0px 24px var(--theme-forgot-password-dialog-shadow-color) !important;
+    border-radius: 12px !important;
+}
+
 .adf-login-content {
     background-size: cover;
     background-position: center;

lib/core/src/lib/login/components/login.component.ts

@@ -194,9 +194,12 @@ export class LoginComponent implements OnInit, OnDestroy {
 
     forgotPassword() {
         this.dialog.open(ForgotPasswordComponent, {
+            width: '371px',
             data: {
                 title: 'Recover',
             },
+            backdropClass: 'backdrop-background',
+            panelClass: 'forgot-password-dialog-box' 
         });
     }
 

lib/core/src/lib/styles/_index.scss

@@ -105,6 +105,13 @@
         --theme-colors-mat-grey: mat.get-color-from-palette(mat.$grey-palette, A200),
         --theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400),
         --theme-colors-mag-grey-light: mat.get-color-from-palette(mat.$grey-palette, 50),
+        --theme-forgot-password-title-color: #212121,
+        --theme-forgot-password-label-color: rgba(33, 35, 40, 0.7),
+        --theme-forgot-password-input-background-color: rgba(33, 33, 33, 0.05),
+        --theme-forgot-password-button-background-color: #1F74DB,
+        --theme-forgot-password-dialog-border-color: rgba(33, 33, 33, 0.12),
+        --theme-forgot-password-dialog-shadow-color: rgba(33, 35, 40, 0.06),
+
     );
 
     // propagates SCSS variables into the CSS variables scope