added forgot password changes

lib/core/src/lib/core.module.ts

@@ -66,6 +66,7 @@ import { AppConfigService } from './app-config/app-config.service';
 import { StorageService } from './common/services/storage.service';
 import { AlfrescoApiLoaderService, createAlfrescoApiInstance } from './api-factories/alfresco-api-v2-loader.service';
 import { AlfrescoApiServiceWithAngularBasedHttpClient } from './api-factories/alfresco-api-service-with-angular-based-http-client';
+import { ForgotPasswordModule } from './forgot-password/forgot-password.module';
 
 interface Config {
     readonly useAngularBasedHttpClientInAlfrescoJs: boolean;
@@ -96,6 +97,7 @@ const defaultConfig: Config = { useAngularBasedHttpClientInAlfrescoJs: false };
         CommentsModule,
         CommentListModule,
         LoginModule,
+        ForgotPasswordModule,
         LanguageMenuModule,
         InfoDrawerModule,
         DataTableModule,
@@ -135,6 +137,7 @@ const defaultConfig: Config = { useAngularBasedHttpClientInAlfrescoJs: false };
         CommentsModule,
         CommentListModule,
         LoginModule,
+        ForgotPasswordModule,
         LanguageMenuModule,
         InfoDrawerModule,
         DataTableModule,

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

@@ -0,0 +1,46 @@
+<div class="app-dialog">
+    <div class="adf-recover-password">
+
+        <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>
+
+        <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">
+                    {{ 'RECOVER-PASSWORD.MESSAGES.ENTER-USERNAME' | translate }}
+                </label>
+
+                <input class="app-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>

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

@@ -0,0 +1,87 @@
+.app-dialog {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.app-mat-dialog-title {
+    font-style: normal;
+    font-weight: 400;
+    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;
+    margin-top: 10px !important;
+}
+
+.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);
+}
+
+.close-button {
+    float: right;
+    top: -24px;
+    right: -24px;
+}

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

@@ -0,0 +1,53 @@
+/*
+ * 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 { 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';
+
+@Component({
+    selector: 'app-forgot-password',
+    templateUrl: './forgot-password.component.html',
+    styleUrls: ['./forgot-password.component.scss']
+})
+export class ForgotPasswordComponent implements OnInit {
+    private peopleApi: PeopleApi;
+    forgotPasswordForm: FormGroup;
+    isSaveInProgress: boolean = false;
+    passwordResetStatus: boolean = false;
+
+    constructor(
+        private apiService: AlfrescoApiService,
+        private formBuilder: FormBuilder) { }
+
+    ngOnInit(): void {
+        this.forgotPasswordForm = this.formBuilder.group({
+            userName: ['', [Validators.required]]
+        });
+    }
+
+    get peopleApiInstance() {
+        return (
+            this.peopleApi ||
+            (this.peopleApi = new PeopleApi(this.apiService.getInstance()))
+        );
+    }
+
+    sendInstructions() {
+        this.isSaveInProgress = true;
+        this.passwordResetStatus = true;
+
+        this.peopleApiInstance.requestPasswordReset(
+            this.forgotPasswordForm.controls.userName.value, { 'client': 'adw' } as ClientBody);
+    }
+
+    isButtonDisabled(): boolean {
+        return this.forgotPasswordForm.invalid || this.isSaveInProgress;
+    }
+}

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

@@ -0,0 +1,33 @@
+/*
+ * 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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+import { MaterialModule } from '../material.module';
+import { ForgotPasswordComponent } from './forgot-password.component';
+
+@NgModule({
+    imports: [
+        RouterModule,
+        MaterialModule,
+        FormsModule,
+        ReactiveFormsModule,
+        CommonModule,
+        TranslateModule
+    ],
+    declarations: [
+        ForgotPasswordComponent
+    ],
+    exports: [
+        ForgotPasswordComponent
+    ]
+})
+export class ForgotPasswordModule { }

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

@@ -310,12 +310,32 @@
       "HELP": "NEED HELP?",
       "REGISTER": "REGISTER"
     },
+    "FORGOT-PASSWORD": {
+      "FORGOT-PASSWORD": "Forgot Password?"
+    },
     "DIALOG": {
       "CANCEL": "Cancel",
       "CHOOSE": "Choose",
       "LOGIN": "Sign in"
     }
   },
+  "RCOVER-PASSWORD": {
+    "RECOVER-PASSWORD": "Recover Password",
+    "MESSAGES": {
+      "USERNAME-REQUIRED": "Required",
+      "FILLER": "Don't worry, happens to the best of us.",
+      "ENTER-USERNAME": "Enter username for your account",
+      "INVALID-USERNAME": "You've entered an invalid username",
+      "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"
+    },
+    "BUTTONS": {
+      "SEND-INSTRUCTIONS": "Send Instructions",
+      "CLOSE": "Close"
+    }
+  },
   "ADF-DATATABLE": {
     "EMPTY": {
       "HEADER": "This list is empty",

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

@@ -168,6 +168,13 @@
                                         {{ 'LOGIN.LABEL.REMEMBER' | translate }}
                                 </mat-checkbox>
                             </div>
+                            <div class="adf-login-action">
+                                <div id="adf-login-action" class="adf-login-action adf-full-width">
+                                    <a class="adf-login-forgot-password-link" (click)="forgotPassword()">
+                                        {{ 'LOGIN.FORGOT-PASSWORD.FORGOT-PASSWORD' | translate }}
+                                    </a>
+                                </div>
+                            </div>
                         </div>
                         <div *ngIf="implicitFlow">
                             <button

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

@@ -237,6 +237,11 @@
         opacity: 0.87;
     }
 
+    .adf-login-forgot-password-link {
+        cursor: pointer;
+        align-items: center;
+    }
+
     .adf-login__field {
         display: block;
         margin-left: auto;
@@ -253,3 +258,14 @@
         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,6 +37,8 @@ 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 {
@@ -138,7 +140,8 @@ export class LoginComponent implements OnInit, OnDestroy {
         private userPreferences: UserPreferencesService,
         private route: ActivatedRoute,
         private sanitizer: DomSanitizer,
-        private alfrescoApiService: AlfrescoApiService
+        private alfrescoApiService: AlfrescoApiService,
+        private dialog: MatDialog
     ) {
     }
 
@@ -188,6 +191,17 @@ export class LoginComponent implements OnInit, OnDestroy {
         this.onSubmit(this.form.value);
     }
 
+    forgotPassword() {
+        this.dialog.open(ForgotPasswordComponent, {
+            width: '371px',
+            data: {
+                title: 'Recover'
+            },
+            backdropClass: 'forgot-password-backdrop-background',
+            panelClass: 'forgot-password-dialog-box'
+        });
+    }
+
     redirectToImplicitLogin() {
         this.alfrescoApiService.getInstance().oauth2Auth.implicitLogin();
     }

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

@@ -96,6 +96,12 @@
         --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-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),
 
         // spacing
         --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing')