mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-09-10 14:11:42 +00:00
forgot-password-screen
This commit is contained in:
SheenaMalhotra182
@@ -1,55 +1,43 @@
|
||||
<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;">
|
||||
|
||||
<div class="app-dialog-header">
|
||||
<div class="app-mat-dialog-title">
|
||||
{{ 'PASSWORD.RECOVER-PASSWORD' | translate }}
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="aaa-dialog-body" *ngIf="!passwordResetStatus">
|
||||
<p style="font-size: medium;">{{ 'PASSWORD.MESSAGES.FILLER' | translate }}</p>
|
||||
<div class="app-dialog-body" *ngIf="!passwordResetStatus">
|
||||
<p class="app-dialog-filler">{{ 'PASSWORD.MESSAGES.FILLER' | translate }}</p>
|
||||
<form [formGroup]="forgotPasswordForm">
|
||||
<label style="font-weight:bold; font-size:medium;">
|
||||
|
||||
<label class="app-forgot-password-label">
|
||||
{{ '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"
|
||||
<input class="app-forgot-password-field"
|
||||
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>
|
||||
|
||||
<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="aaa-dialog-body" *ngIf="passwordResetStatus">
|
||||
<div class="app-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 class="password-reset-link-message">
|
||||
{{ 'PASSWORD.MESSAGES.RESET-PASSWORD-EMAIL-SENT' | translate }}
|
||||
</p>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,44 +1,80 @@
|
||||
.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-dialog {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.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);
|
||||
.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);
|
||||
}
|
||||
@@ -323,12 +323,12 @@
|
||||
"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."
|
||||
"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"
|
||||
"USERNAME": "Username"
|
||||
},
|
||||
"BUTTONS": {
|
||||
"SEND-INSTRUCTIONS": "Send Instructions"
|
||||
|
||||
@@ -4,6 +4,17 @@
|
||||
@include flex-column;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@@ -194,10 +194,13 @@ export class LoginComponent implements OnInit, OnDestroy {
|
||||
|
||||
forgotPassword() {
|
||||
this.dialog.open(ForgotPasswordComponent, {
|
||||
data: {
|
||||
title: 'Recover',
|
||||
},
|
||||
});
|
||||
width: '371px',
|
||||
data: {
|
||||
title: 'Recover',
|
||||
},
|
||||
backdropClass: 'backdrop-background',
|
||||
panelClass: 'forgot-password-dialog-box'
|
||||
});
|
||||
}
|
||||
|
||||
redirectToImplicitLogin() {
|
||||
|
||||
@@ -105,6 +105,13 @@
|
||||
--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
|
||||
|
||||
Reference in New Issue
Block a user