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

added forgot password changes

Browse Source
This commit is contained in:
SheenaMalhotra182
2023-05-04 15:34:26 +05:30
committed by Sheena Malhotra
parent 895d4189f2
commit c5f07c7d79
10 changed files with 286 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
@@ -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
+46
View File
@@ -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
+87
View File
@@ -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
+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
+20
View File
@@ -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
+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="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
+16
View File
@@ -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
+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: 'forgot-password-backdrop-background',
panelClass: 'forgot-password-dialog-box'
});
}
redirectToImplicitLogin() {
this.alfrescoApiService.getInstance().oauth2Auth.implicitLogin();
}
lib/core/src/lib/styles/_index.scss
+6
View File
@@ -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')