inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

implemented forgot password screens

Browse Source
This commit is contained in:
SheenaMalhotra182
2023-01-06 17:48:54 +05:30
committed by Mohinish Sah
parent 198c230086
commit 96a7feb38a
10 changed files with 275 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/core.module.ts
+3
View File
@@ -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,
lib/core/src/lib/forgot-password/forgot-password.component.html
+43
View File
@@ -0,0 +1,43 @@
<div class="app-dialog">
<div class="resettingPassword">
<div class="app-dialog-header">
<div class="app-mat-dialog-title">
{{ 'PASSWORD.RECOVER-PASSWORD' | translate }}
</div>
<hr>
</div>
<div class="app-dialog-body" *ngIf="!passwordResetStatus">
<p class="app-dialog-filler">{{ 'PASSWORD.MESSAGES.FILLER' | translate }}</p>
<form [formGroup]="forgotPasswordForm">
<label class="app-forgot-password-label">
{{ 'PASSWORD.MESSAGES.ENTER-USERNAME' | translate }}
</label>
<input class="app-forgot-password-field"
placeholder="{{ 'PASSWORD.PLACEHOLDERS.USERNAME' | translate }}"
formControlName="userName"
required>
<button type="button" (click)="sendInstructions()" class="send-instructions-button"
[attr.aria-label]="'PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate"
[disabled]="isButtonDisabled()" mat-raised-button color="primary">
{{ 'PASSWORD.BUTTONS.SEND-INSTRUCTIONS' | translate }}
</button>
</form>
</div>
<div class="app-dialog-body" *ngIf="passwordResetStatus">
<div class="passwordResetSuccessful">
<p class="password-reset-link-message">
{{ 'PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }}
</p>
</div>
</div>
</div>
</div>
lib/core/src/lib/forgot-password/forgot-password.component.scss
+80
View File
@@ -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);
}
lib/core/src/lib/forgot-password/forgot-password.component.ts
+53
View File
@@ -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
+33
View File
@@ -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
+19
View File
@@ -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",
lib/core/src/lib/login/components/login.component.html
+7
View File
@@ -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="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
+16
View File
@@ -4,6 +4,22 @@
@include flex-column;
}
.forgot-password-link {
cursor: pointer;
align-items: center;
}
.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;
}
.adf-login-content {
background-size: cover;
background-position: center;
lib/core/src/lib/login/components/login.component.ts
+15 -1
View File
@@ -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: 'backdrop-background',
panelClass: 'forgot-password-dialog-box'
});
}
redirectToImplicitLogin() {
this.alfrescoApiService.getInstance().oauth2Auth.implicitLogin();
}
lib/core/src/lib/styles/_index.scss
+6
View File
@@ -105,6 +105,12 @@
--theme-colors-mat-grey: mat.get-color-from-palette(mat.$grey-palette, A200),
--theme-colors-mat-grey-dark: mat.get-color-from-palette(mat.$grey-palette, A400),
--theme-colors-mag-grey-light: 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),
);
// propagates SCSS variables into the CSS variables scope