ACA-4611 Committed the backend changes

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

@@ -30,6 +30,7 @@ import { DataTableModule } from './datatable/datatable.module';
 import { InfoDrawerModule } from './info-drawer/info-drawer.module';
 import { LanguageMenuModule } from './language-menu/language-menu.module';
 import { LoginModule } from './login/login.module';
+import { ForgotPasswordModule } from './forgot-password/forgot-password.module';
 import { PaginationModule } from './pagination/pagination.module';
 import { HostSettingsModule } from './settings/host-settings.module';
 import { ToolbarModule } from './toolbar/toolbar.module';
@@ -92,6 +93,7 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
         FormBaseModule,
         CommentsModule,
         LoginModule,
+        ForgotPasswordModule,
         LanguageMenuModule,
         InfoDrawerModule,
         DataColumnModule,
@@ -134,6 +136,7 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
         FormBaseModule,
         CommentsModule,
         LoginModule,
+        ForgotPasswordModule,
         LanguageMenuModule,
         InfoDrawerModule,
         DataColumnModule,

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

@@ -0,0 +1,55 @@
+<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;">
+                {{ 'PASSWORD.RECOVER-PASSWORD' | translate }}
+            </div>
+            <hr>
+        </div>
+
+        <div class="aaa-dialog-body" *ngIf="!passwordResetStatus">
+            <p style="font-size: medium;">{{ 'PASSWORD.MESSAGES.FILLER' | translate }}</p>
+            <form [formGroup]="forgotPasswordForm">
+                <label style="font-weight:bold; font-size:medium;">
+                    {{ 'PASSWORD.MESSAGES.ENTER-USERNAME' | translate }}
+                </label>
+                <br>
+
+                <mat-form-field appearance="fill" style="padding-top:5px; width:100%;">
+                    <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()" id="send-instructions-btn"
+                        [attr.aria-label]="'PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate"
+                        [disabled]="isButtonDisabled()" class="adf-login-button" 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="passwordResetSuccessful">
+                <p style="font-size:medium;">
+                    <a style="color: blue; text-decoration:underline; cursor:pointer;">
+                        {{ 'PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }}
+                    </a>
+                </p>
+            </div>
+            <br>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,44 @@
+.app {
+    &-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 {
+    background: var(--theme-blue-text-background);
+    border: 1px solid var(--theme-blue-border-color);
+    font-size: var(--theme-button-font-size);
+}

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

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

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

@@ -0,0 +1,54 @@
+/*
+ * 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;
+        console.log("Sending Email to user ", this.forgotPasswordForm.controls.userName.value);
+
+        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

@@ -309,12 +309,31 @@
       "HELP": "NEED HELP?",
       "REGISTER": "REGISTER"
     },
+    "FORGOT-PASSWORD": {
+      "FORGOT-PASSWORD": "Forgot Password?"
+    },
     "DIALOG": {
       "CANCEL": "Cancel",
       "CHOOSE": "Choose",
       "LOGIN": "Sign in"
     }
   },
+  "PASSWORD": {
+    "RECOVER-PASSWORD": "Recover Password",
+    "MESSAGES": {
+      "USERNAME-REQUIRED": "Required",
+      "FILLER": "Don't worry, happens to the best of us.",
+      "ENTER-USERNAME": "Enter Username of your account",
+      "INVALID-USERNAME": "You've entered an invalid Email ID",
+      "RESET-PASSWORD-EMAIL-SENT": "An email has been sent to your registered Email ID. Please click this link when get it."
+    },
+    "PLACEHOLDERS": {
+      "USERNAME": "USERNAME"
+    },
+    "BUTTONS": {
+      "SEND-INSTRUCTIONS": "Send Instructions"
+    }
+  },
   "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 style="cursor:pointer;" (click)="forgotPassword()">
+                                        {{ 'LOGIN.FORGOT-PASSWORD.FORGOT-PASSWORD' | translate }}
+                                    </a>
+                                </div>
+                            </div>
                         </div>
                         <div *ngIf="implicitFlow">
                             <button

lib/core/src/lib/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 { ForgotPasswordComponent } from '../../forgot-password/forgot-password.component';
+import { MatDialog } from '@angular/material/dialog';
 
 // eslint-disable-next-line no-shadow
 enum LoginSteps {
@@ -140,9 +142,9 @@ export class LoginComponent implements OnInit, OnDestroy {
         private userPreferences: UserPreferencesService,
         private route: ActivatedRoute,
         private sanitizer: DomSanitizer,
-        private alfrescoApiService: AlfrescoApiService
+        private alfrescoApiService: AlfrescoApiService,
-    ) {
+        private dialog: MatDialog
-    }
+    ) {}
 
     ngOnInit() {
         this.initFormError();
@@ -190,6 +192,14 @@ export class LoginComponent implements OnInit, OnDestroy {
         this.onSubmit(this.form.value);
     }
 
+    forgotPassword() {
+        this.dialog.open(ForgotPasswordComponent, {
+                data: {
+                    title: 'Recover',
+                },
+            });
+    }
+
     redirectToImplicitLogin() {
         this.alfrescoApiService.getInstance().oauth2Auth.implicitLogin();
     }