diff --git a/lib/core/src/lib/core.module.ts b/lib/core/src/lib/core.module.ts index fdf14d1062..1aee7c1e8f 100644 --- a/lib/core/src/lib/core.module.ts +++ b/lib/core/src/lib/core.module.ts @@ -63,6 +63,7 @@ import { RichTextEditorModule } from './rich-text-editor/rich-text-editor.module import { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { AuthenticationService } from './auth/services/authentication.service'; import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar'; +import { ForgotPasswordModule } from './forgot-password/forgot-password.module'; @NgModule({ imports: [ @@ -88,6 +89,7 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar'; CommentsModule, LoginModule, LanguageMenuModule, + ForgotPasswordModule, InfoDrawerModule, DataTableModule, ButtonsMenuModule, @@ -127,6 +129,7 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar'; FormBaseModule, CommentsModule, LoginModule, + ForgotPasswordModule, LanguageMenuModule, InfoDrawerModule, DataTableModule, diff --git a/lib/core/src/lib/forgot-password/forgot-password.component.html b/lib/core/src/lib/forgot-password/forgot-password.component.html new file mode 100644 index 0000000000..fea4959335 --- /dev/null +++ b/lib/core/src/lib/forgot-password/forgot-password.component.html @@ -0,0 +1,43 @@ +
+
+ +
+
+ {{ 'PASSWORD.RECOVER-PASSWORD' | translate }} +
+
+
+ +
+

{{ 'PASSWORD.MESSAGES.FILLER' | translate }}

+
+ + + + + + + +
+
+ +
+
+

+ {{ 'PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }} +

+
+
+ +
+
diff --git a/lib/core/src/lib/forgot-password/forgot-password.component.scss b/lib/core/src/lib/forgot-password/forgot-password.component.scss new file mode 100644 index 0000000000..03555ac710 --- /dev/null +++ b/lib/core/src/lib/forgot-password/forgot-password.component.scss @@ -0,0 +1,80 @@ +.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; +} + +.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); +} \ No newline at end of file diff --git a/lib/core/src/lib/forgot-password/forgot-password.component.ts b/lib/core/src/lib/forgot-password/forgot-password.component.ts new file mode 100644 index 0000000000..4640192de6 --- /dev/null +++ b/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; + } +} diff --git a/lib/core/src/lib/forgot-password/forgot-password.module.ts b/lib/core/src/lib/forgot-password/forgot-password.module.ts new file mode 100644 index 0000000000..9cce8786cd --- /dev/null +++ b/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 { } diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json index 8248370194..52ef14046a 100644 --- a/lib/core/src/lib/i18n/en.json +++ b/lib/core/src/lib/i18n/en.json @@ -286,12 +286,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 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" + } + }, "ADF-DATATABLE": { "EMPTY": { "HEADER": "This list is empty", diff --git a/lib/core/src/lib/login/components/login.component.html b/lib/core/src/lib/login/components/login.component.html index 18144998b7..aee538f79c 100644 --- a/lib/core/src/lib/login/components/login.component.html +++ b/lib/core/src/lib/login/components/login.component.html @@ -168,6 +168,13 @@ {{ 'LOGIN.LABEL.REMEMBER' | translate }} +
+
+ + {{ 'LOGIN.FORGOT-PASSWORD.FORGOT-PASSWORD' | translate }} + +
+