Forgot Password

lib/core/login/components/login.component.html

@@ -92,6 +92,8 @@
                                     data-automation-id="login-button" [disabled]="!form.valid"
                                     [attr.aria-label]="'LOGIN.BUTTON.LOGIN' | translate">
 
+                                    
+
                                 <span *ngIf="actualLoginStep === LoginSteps.Landing" class="adf-login-button-label">{{ 'LOGIN.BUTTON.LOGIN' | translate }}</span>
 
                                 <div *ngIf="actualLoginStep === LoginSteps.Checking"
@@ -117,6 +119,12 @@
                                               (change)="rememberMe = !rememberMe">{{ 'LOGIN.LABEL.REMEMBER' | translate }}
                                 </mat-checkbox>
                             </div>
+                            <div class="adf-login-action" *ngIf="forgotPasswordStatus">
+                                <div id="adf-login-action" class="adf-login-action adf-full-width">
+                                    <!-- <a [routerLink]=" '/recover-password' ">Forgot Password?</a> -->
+                                    <a style="cursor: pointer;" (click)="forgotPassword()">Forgot Password?</a>
+                                </div>
+                            </div>
                         </div>
 
                         <div *ngIf="implicitFlow">
@@ -129,6 +137,7 @@
                             </button>
                         </div>
 
+
                     </mat-card-content>
 
                     <mat-card-actions *ngIf="footerTemplate || showLoginActions">

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

@@ -38,6 +38,8 @@ import { OauthConfigModel } from '../../models/oauth-config.model';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { RecoverPasswordDialogService } from './recover-password-dialog.service';
+import { RecoverPasswordComponent } from './recover-password/recover-password.component';
 
 // eslint-disable-next-line no-shadow
 enum LoginSteps {
@@ -121,6 +123,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     actualLoginStep: any = LoginSteps.Landing;
     LoginSteps = LoginSteps;
     rememberMe: boolean = true;
+    forgotPasswordStatus: boolean = true;
     formError: { [id: string]: string };
     minLength: number = 2;
     footerTemplate: TemplateRef<any>;
@@ -140,7 +143,8 @@ export class LoginComponent implements OnInit, OnDestroy {
         private userPreferences: UserPreferencesService,
         private route: ActivatedRoute,
         private sanitizer: DomSanitizer,
-        private alfrescoApiService: AlfrescoApiService
+        private alfrescoApiService: AlfrescoApiService,
+        private dialogService: RecoverPasswordDialogService
     ) {
     }
 
@@ -190,6 +194,21 @@ export class LoginComponent implements OnInit, OnDestroy {
         this.onSubmit(this.form.value);
     }
 
+    forgotPassword(){
+        this.dialogService
+  .showDialog(RecoverPasswordComponent, {
+      data: {
+          title: 'Recover'
+      }
+  })
+  .afterClosed()
+//   .subscribe((result) => {
+//       if (result) {
+        
+//       }
+//   });
+    }
+
     redirectToImplicitLogin() {
         this.alfrescoApiService.getInstance().oauth2Auth.implicitLogin();
     }
@@ -413,4 +432,6 @@ export class LoginComponent implements OnInit, OnDestroy {
         this.isError = false;
         this.initFormError();
     }
+
+    
 }

lib/core/login/components/recover-password-dialog.service.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Injectable, TemplateRef } from '@angular/core';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { ComponentType } from '@angular/cdk/portal';
+
+@Injectable({ providedIn: 'root' })
+export class RecoverPasswordDialogService {
+    constructor(private dialog: MatDialog) { }
+
+    showDialog<T>(dialog: ComponentType<T> | TemplateRef<T>, options = {}): MatDialogRef<T, boolean> {
+        return this.dialog.open<T>(dialog, {
+            height: '35%',
+            minWidth: '30%',
+            ...options
+        });
+    }
+}

lib/core/login/components/recover-password/recover-password.component.html

@@ -0,0 +1,87 @@
+
+
+<div class="aaa-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 ;">Recover Password</div>
+            <hr>
+        </div>
+       
+        <div #DialogBodyContainer class="aaa-dialog-body" *ngIf="passwordResetStatus != true ">
+    
+            <p style="font-size: medium;">Don't Worry, happens to the best of us.</p>
+    
+            <!-- <mat-card class="apa-form-field-editor-card">
+                <mat-card-title>Recover</mat-card-title>
+            
+                <ng-container >
+                    <mat-card-content >
+                                   
+                    </mat-card-content>
+            
+                    
+                </ng-container>
+            </mat-card> -->
+    
+            <form [formGroup]="recoverPasswordForm" >
+                <label style="font-weight: bold;font-size:medium;">Enter Email Address on you account</label><br>
+                <!-- <input  data-automation-id="security-control-name-input-text" placeholder="Email Address" formControlName="emailId" required> -->
+               
+                 <mat-form-field  >
+                   
+                     <input
+                        data-automation-id="security-control-name-input-text" placeholder="Email Address"
+                        matInput width="100%"
+                        formControlName="emailId"
+                        required> 
+    
+                        <mat-error *ngIf="recoverPasswordForm.controls.emailId?.hasError('required')">Field Required*</mat-error>
+                        <mat-error
+                        *ngIf="recoverPasswordForm.controls.emailId.errors?.pattern && recoverPasswordForm.controls.emailId?.touched ">
+                        Enter Valid Email Address</mat-error>
+
+                    
+                </mat-form-field> <br>
+    
+                <br>
+                <button width="100%" class="aaa-full-width" style="border: 1px solid #1F74DB; background-color: #1F74DB; color:white; font-size: medium;font-weight: bold;"
+                mat-button
+                id="saveButton"
+                color="primary"
+                [disabled]="isSaveDisabled() || recoverPasswordForm.controls.emailId.value == '' || recoverPasswordForm.controls.emailId.errors?.pattern"
+                (click)="sendInstructions()">
+                Send Instructions
+            </button><br>
+               
+              
+               
+            </form>  
+            
+           
+        </div>
+        <!-- <div class="aaa-dialog-footer">
+           
+        
+            <button class="btn btn-info">NEEEEWWWW</button>
+            <button mat-button color="primary">Primary</button>
+        </div> -->
+
+        <div #DialogBodyContainer class="aaa-dialog-body" *ngIf="passwordResetStatus == true ">
+            <div class="passwordResetSuccessful" *ngIf="passwordResetStatus == true ">
+                <p style="font-size: medium;">
+                    <a style="color: blue; text-decoration:underline; cursor: pointer;">An email has been sent to your registered Email ID. Please click this link when get it.</a>
+                </p>
+            </div>
+            <br>
+        </div>
+    </div>
+
+    
+ 
+</div>
+
+
+<!-- <adf-card-view
+    [properties]="properties"
+    [editable]="false">
+</adf-card-view> -->

lib/core/login/components/recover-password/recover-password.component.scss

@@ -0,0 +1,48 @@
+.aaa {
+    &-dialog {
+        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%;
+        }
+    }
+}
+
+
+.aaa-dialog{
+    width: 100%;
+    height: 100%;
+}
+
+// mat-dialog-container{
+//    border: 1px solid black; 
+//    border-radius: 50px;
+// }

lib/core/login/components/recover-password/recover-password.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RecoverPasswordComponent } from './recover-password.component';
+
+describe('RecoverPasswordComponent', () => {
+  let component: RecoverPasswordComponent;
+  let fixture: ComponentFixture<RecoverPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RecoverPasswordComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RecoverPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

lib/core/login/components/recover-password/recover-password.component.ts

@@ -0,0 +1,86 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+//import { AlfrescoApiService, AppConfigService, AuthenticationService, CardViewArrayItemModel, CardViewBoolItemModel, CardViewDateItemModel, CardViewDatetimeItemModel, CardViewFloatItemModel, CardViewIntItemModel, CardViewKeyValuePairsItemModel, CardViewMapItemModel, CardViewSelectItemModel, CardViewTextItemModel, LogService, TranslationService, UserPreferencesService } from '@alfresco/adf-core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+//import { MatDialogRef } from '@angular/material/dialog';
+// import { FormBuilder } from '@angular/forms';
+// import { DomSanitizer } from '@angular/platform-browser';
+// import { ActivatedRoute, Router } from '@angular/router';
+// import { of } from 'rxjs';
+
+@Component({
+  selector: 'aaa-recover-password',
+  templateUrl: './recover-password.component.html',
+  styleUrls: ['./recover-password.component.scss']
+})
+export class RecoverPasswordComponent implements OnInit{
+
+    recoverPasswordForm: FormGroup;
+    saveInProgress : boolean = false;
+    passwordResetStatus : boolean = false;
+    properties = [{label: 'My Label', value: 'My value'}];
+    
+  
+    @ViewChild('DialogBodyContainer') dialogBodyContainer: ElementRef;
+
+   
+
+    constructor(private formBuilder: FormBuilder,
+                //private matDialogRef: MatDialogRef<RecoverPasswordComponent>,
+                //@Inject(MAT_DIALOG_DATA) private data: any
+               ) { }
+
+    
+
+    ngOnInit(): void {
+        
+        this.recoverPasswordForm = this.formBuilder.group({
+            emailId:['',[Validators.required, Validators.pattern('^[a-zA-Z0-9+_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9.-]{2,}$')]]
+        })
+    }
+
+   
+
+    sendInstructions() {
+        this.saveInProgress = true;
+        console.log("Sending Email to ", this.recoverPasswordForm.controls.emailId.value);
+        this.passwordResetStatus = true;
+        //this.matDialogRef.close();
+    }
+
+   
+
+    isSaveDisabled(): boolean {
+        return !this.recoverPasswordForm.valid || this.saveInProgress;
+    }
+
+  
+   
+
+  
+
+}

lib/core/login/login.module.ts

@@ -27,6 +27,7 @@ import { LoginFooterDirective } from './directives/login-footer.directive';
 import { LoginHeaderDirective } from './directives/login-header.directive';
 import { LoginDialogComponent } from './components/login-dialog.component';
 import { LoginDialogPanelComponent } from './components/login-dialog-panel.component';
+import { RecoverPasswordComponent } from './components/recover-password/recover-password.component';
 
 @NgModule({
     imports: [
@@ -42,7 +43,8 @@ import { LoginDialogPanelComponent } from './components/login-dialog-panel.compo
         LoginFooterDirective,
         LoginHeaderDirective,
         LoginDialogComponent,
-        LoginDialogPanelComponent
+        LoginDialogPanelComponent,
+        RecoverPasswordComponent
     ],
     exports: [
         LoginComponent,