forgot password design changes

demo-shell/src/app/app.routes.ts

@@ -56,10 +56,12 @@ import { ProcessCloudLayoutComponent } from './components/cloud/process-cloud-la
 import { ServiceTaskListCloudDemoComponent } from './components/cloud/service-task-list-cloud-demo.component';
 import { AspectListSampleComponent } from './components/aspect-list-sample/aspect-list-sample.component';
 import { SearchFilterChipsComponent } from './components/search/search-filter-chips.component';
+import { ForgotPasswordComponent } from 'lib/core/src/lib/forgot-password/forgot-password.component';
 
 export const appRoutes: Routes = [
     { path: 'login', loadChildren: () => import('./components/login/login.module').then(m => m.AppLoginModule) },
     { path: 'logout', component: LogoutComponent },
+    { path: 'forgot-password', component: ForgotPasswordComponent },
     {
         path: 'settings',
         loadChildren: () => import('./components/settings/settings.module').then(m => m.AppSettingsModule)

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

@@ -1,46 +1,71 @@
-<div class="app-dialog">
-    <div class="adf-recover-password">
+<div class="forgot-password-div" *ngIf="!passwordResetStatus">
 
-        <button mat-icon-button class="close-button" [mat-dialog-close]="true"
-            matTooltip="{{ 'RECOVER-PASSWORD.BUTTONS.CLOSE' | translate }}">
-            <mat-icon class="close-icon" color="warn">close</mat-icon>
-        </button>
+    <mat-card>
+  
+      <mat-card-header>
+        <mat-card-title class="forgot-password-title">
+            {{ 'RECOVER-PASSWORD.RECOVER-PASSWORD' | translate }}
+        </mat-card-title>
+  
+      </mat-card-header>
+      <hr>
+  
+      <mat-card-content>
+  
+        <p class="filler">{{ 'RECOVER-PASSWORD.MESSAGES.FILLER' | translate }}</p>
+        <form [formGroup]="forgotPasswordForm">
 
-        <div class="app-dialog-header">
-            <div class="app-mat-dialog-title">
-                {{ 'RECOVER-PASSWORD.RECOVER-PASSWORD' | translate }}
-            </div>
-            <hr>
-        </div>
-
-        <div class="app-dialog-body" *ngIf="!passwordResetStatus">
-            <p class="app-dialog-filler">{{ 'RECOVER-PASSWORD.MESSAGES.FILLER' | translate }}</p>
-            <form [formGroup]="forgotPasswordForm">
-
-                <label class="app-forgot-password-label">
+            <div class="forgot-paassword-form-field">
+                <label class="forgot-password-label">
                     {{ 'RECOVER-PASSWORD.MESSAGES.ENTER-USERNAME' | translate }}
                 </label>
-
-                <input class="app-forgot-password-field"
+    
+                <input class="forgot-password-field"
                     placeholder="{{ 'RECOVER-PASSWORD.PLACEHOLDERS.USERNAME' | translate }}" formControlName="userName"
                     required>
-
-                <button type="button" (click)="sendInstructions()" class="send-instructions-button"
-                    [attr.aria-label]="'RECOVER-PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate"
-                    [disabled]="isButtonDisabled()" mat-raised-button color="primary">
-                    {{ 'RECOVER-PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate }}
-                </button>
-
-            </form>
-        </div>
-
-        <div class="app-dialog-body" *ngIf="passwordResetStatus">
-            <div class="passwordResetSuccessful">
-                <p class="password-reset-link-message">
-                    {{ 'RECOVER-PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }}
-                </p>
             </div>
-        </div>
 
-    </div>
-</div>
+            <button type="button" (click)="sendInstructions()" class="send-instructions-button"
+                [attr.aria-label]="'RECOVER-PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate"
+                [disabled]="isButtonDisabled()" mat-raised-button color="primary">
+                {{ 'RECOVER-PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate }}
+            </button>
+
+            <button mat-button class="close-button" (click)="close()">{{ 'RECOVER-PASSWORD.BUTTONS.CLOSE' | translate }}</button>
+
+
+        </form>
+  
+      </mat-card-content>
+  
+    </mat-card>
+  
+  </div>
+  
+  <div class="forgot-password-div" *ngIf="passwordResetStatus">
+  
+    <mat-card>
+  
+      <mat-card-header>
+        <mat-card-title class="forgot-password-title">
+            {{ 'RECOVER-PASSWORD.RECOVER-PASSWORD' | translate }}
+        </mat-card-title>
+  
+      </mat-card-header>
+      <hr>
+  
+      <mat-card-content>
+        <div>
+          <p class="password-reset-link-message">
+            {{ 'RECOVER-PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }}
+          </p>
+        </div>
+  
+        <button mat-button class="close-button" (click)="close()">{{ 'RECOVER-PASSWORD.BUTTONS.CLOSE' | translate }}</button>
+  
+  
+      </mat-card-content>
+  
+    </mat-card>
+  
+  </div>

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

@@ -1,10 +1,29 @@
-.app-dialog {
-    height: 100%;
+.forgot-password-div {
+    width: 100%;
+    height: 100vh;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    transform: translate(calc(50vw - 50%));
+    border-radius: 12px;
+    background-color: var(--theme-forgot-password-background);
 }
 
-.app-mat-dialog-title {
+mat-card {
+    padding: 24px 24px;
+    width: 371px;
+    //height: 264px;
+}
+
+::ng-deep .mat-card-header-text {
+    margin: 0 !important;
+}
+
+.forgot-password-title {
     font-style: normal;
     font-weight: 400;
     font-size: 20px;
@@ -12,13 +31,14 @@
     letter-spacing: 0.15px;
     color: var(--theme-forgot-password-title-color);
     padding: 2px 0;
+    margin: 0 !important;
 }
 
 hr {
     margin: 12px 0;
 }
 
-.app-dialog-filler {
+.filler {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -33,7 +53,12 @@ hr {
     margin: 0 0 8px 0;
 }
 
-.app-forgot-password-label {
+.forgot-password-form-field {
+    height: 64px;
+    margin-top: 24px;
+}
+
+.forgot-password-label {
     height: 32px;
     padding: 6px 0;
     font-style: normal;
@@ -44,7 +69,7 @@ hr {
     color: var(--theme-forgot-password-title-color);
 }
 
-.app-forgot-password-field {
+.forgot-password-field {
     text-decoration: none;
     height: 32px;
     line-height: 32px;
@@ -69,6 +94,20 @@ hr {
     margin: 24px 0 0 0 !important;
 }
 
+.close-button {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--theme-forgot-password-input-background-color);
+    color: var(--theme-forgot-password-title-color);
+    margin-top: 8px;
+    padding: 4px 12px;
+    height: 32px;
+    border-radius: 6px;
+}
+
 .password-reset-link-message {
     height: 52px;
     padding: 6px 0;
@@ -80,8 +119,11 @@ hr {
     color: var(--theme-forgot-password-title-color);
 }
 
-.close-button {
-    float: right;
-    top: -24px;
-    right: -24px;
-}
+
+
+
+
+
+
+
+

lib/core/src/lib/forgot-password/forgot-password.component.spec.ts

@@ -0,0 +1,116 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { CoreTestingModule } from '../testing/core.testing.module';
+import { ForgotPasswordComponent } from './forgot-password.component';
+
+
+describe('ResetPasswordComponent', () => {
+    let component: ForgotPasswordComponent;
+    let fixture: ComponentFixture<ForgotPasswordComponent>;
+    let router: Router;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [CoreTestingModule],
+            declarations: [ForgotPasswordComponent],
+            providers: []
+        });
+
+        fixture = TestBed.createComponent(ForgotPasswordComponent);
+        component = fixture.componentInstance;
+        component.ngOnInit();
+        router = TestBed.inject(Router);
+    });
+
+    it('should be created', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('send instructions button should be disabled by default', async () => {
+        component.ngOnInit();
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(component.isButtonDisabled).toBeTruthy();
+    });
+
+    it('send instructions button should be disabled if username field is empty', async () => {
+        component.ngOnInit();
+        component.forgotPasswordForm.controls['userName'].setValue('');
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(component.isButtonDisabled).toBeTruthy();
+    });
+
+    it('send instructions button should be enabled when username field is not empty', async () => {
+        component.ngOnInit();
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        component.forgotPasswordForm.controls['userName'].setValue('userABC');
+        spyOn(component, 'isButtonDisabled').and.callThrough();
+        const sendInstructionsBtn = fixture.debugElement.nativeElement.querySelector('.send-instructions-button');
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(component.isButtonDisabled).toHaveBeenCalled();
+        expect(sendInstructionsBtn.disabled).toBeFalsy();
+    });
+
+    it('should send instructions to the email id corresponding to the username when the send instructions button is clicked', async () => {
+        component.ngOnInit();
+        component.forgotPasswordForm.controls['userName'].setValue('userABC');
+        spyOn(component, 'sendInstructions').and.callThrough();
+
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const sendInstructionsBtn = fixture.debugElement.nativeElement.querySelector('.send-instructions-button');
+        sendInstructionsBtn.dispatchEvent(new Event('click'));
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(component.sendInstructions).toHaveBeenCalled();
+    });
+
+    it('should route user back to login page when the close button is clicked', async () => {
+        component.ngOnInit();
+        spyOn(component, 'close').and.callThrough();
+        spyOn(router, 'navigate');
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        const closeBtn = fixture.debugElement.nativeElement.querySelector('.close-button');
+        closeBtn.dispatchEvent(new Event('click'));
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+
+        expect(component.close).toHaveBeenCalled();
+        expect(router.navigate).toHaveBeenCalledWith(['./login']);
+    });
+});

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

@@ -10,9 +10,10 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { PeopleApi, ClientBody } from '@alfresco/js-api';
 import { AlfrescoApiService } from '@alfresco/adf-core';
+import { Router } from '@angular/router';
 
 @Component({
-    selector: 'app-forgot-password',
+    selector: 'adf-forgot-password',
     templateUrl: './forgot-password.component.html',
     styleUrls: ['./forgot-password.component.scss']
 })
@@ -24,9 +25,11 @@ export class ForgotPasswordComponent implements OnInit {
 
     constructor(
         private apiService: AlfrescoApiService,
-        private formBuilder: FormBuilder) { }
+        private formBuilder: FormBuilder,
+        private router: Router) { }
 
     ngOnInit(): void {
+        this.passwordResetStatus = false;
         this.forgotPasswordForm = this.formBuilder.group({
             userName: ['', [Validators.required]]
         });
@@ -50,4 +53,8 @@ export class ForgotPasswordComponent implements OnInit {
     isButtonDisabled(): boolean {
         return this.forgotPasswordForm.invalid || this.isSaveInProgress;
     }
+
+    close() {
+        this.router.navigate(['./login']);
+      }
 }

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

@@ -257,15 +257,4 @@
         border-top: 1px solid rgba(0, 0, 0, 0.1);
         margin-top: 23px;
     }
-}
-
-.forgot-password-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;
-}
+}

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

@@ -37,8 +37,6 @@ import {
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { ForgotPasswordComponent } from '../../forgot-password/forgot-password.component';
-import { MatDialog } from '@angular/material/dialog';
 
 // eslint-disable-next-line no-shadow
 enum LoginSteps {
@@ -140,8 +138,7 @@ export class LoginComponent implements OnInit, OnDestroy {
         private userPreferences: UserPreferencesService,
         private route: ActivatedRoute,
         private sanitizer: DomSanitizer,
-        private alfrescoApiService: AlfrescoApiService,
-        private dialog: MatDialog
+        private alfrescoApiService: AlfrescoApiService
     ) {
     }
 
@@ -192,14 +189,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     }
 
     forgotPassword() {
-        this.dialog.open(ForgotPasswordComponent, {
-            width: '371px',
-            data: {
-                title: 'Recover'
-            },
-            backdropClass: 'forgot-password-backdrop-background',
-            panelClass: 'forgot-password-dialog-box'
-        });
+        this.router.navigate(['./forgot-password']);
     }
 
     redirectToImplicitLogin() {

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

@@ -96,6 +96,7 @@
         --adf-theme-mat-grey-color-a200: mat.get-color-from-palette(mat.$grey-palette, A200),
         --adf-theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400),
         --adf-theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50),
+        --theme-forgot-password-background: #E5E5E5,
         --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),