Skip to content
Permalink
Browse files

Add password strength advisor to user registration

(also adjust default theme colors slightly to increase
 legibility/contrast overall)
  • Loading branch information...
bkimminich committed Nov 4, 2019
1 parent 230534f commit c7dc110ee7c67073d5ad85c6eb659cf2954a109f
@@ -11,6 +11,7 @@
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^0.803.14",
"@angular-material-extensions/password-strength": "^4.1.1",
"@angular/animations": "^8.2.12",
"@angular/cdk": "^8.2.3",
"@angular/cli": "^8.3.14",
@@ -122,6 +122,8 @@ import { PhotoWallComponent } from './photo-wall/photo-wall.component'
import { PhotoWallService } from './Services/photo-wall.service'
import { DeluxeUserComponent } from './deluxe-user/deluxe-user.component'
import { AccountingGuard, AdminGuard, DeluxeGuard, LoginGuard } from './app.guard'
import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength'
import { MatSlideToggleModule } from '@angular/material/slide-toggle'

export function HttpLoaderFactory (http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json')
@@ -203,6 +205,7 @@ export function HttpLoaderFactory (http: HttpClient) {
}
),
CookieModule.forRoot(),
MatPasswordStrengthModule.forRoot(),
FlexLayoutModule,
HttpClientModule,
ReactiveFormsModule,
@@ -239,7 +242,8 @@ export function HttpLoaderFactory (http: HttpClient) {
NgMatSearchBarModule,
MatBadgeModule,
MatRadioModule,
MatSnackBarModule
MatSnackBarModule,
MatSlideToggleModule
],
providers: [
{
@@ -52,6 +52,16 @@ <h1 translate>TITLE_CHANGE_PASSWORD</h1>
</mat-error>
</mat-form-field>

<mat-slide-toggle #passwordInfoToggle [color]="passwordStrength.color">{{'SHOW_PASSWORD_ADVICE' | translate}}</mat-slide-toggle>
<mat-password-strength #passwordStrength [password]="password.value"></mat-password-strength>
<mat-password-strength-info *ngIf="passwordInfoToggle.checked" [passwordComponent]="passwordStrength"
[lowerCaseCriteriaMsg]="'LOWER_CASE_CRITERIA_MSG' | translate"
[upperCaseCriteriaMsg]="'UPPER_CASE_CRITERIA_MSG'| translate"
[digitsCriteriaMsg]="'DIGITS_CRITERIA_MSG'| translate"
[specialCharsCriteriaMsg]="'SPECIAL_CHARS_CRITERIA_MSG' | translate"
[minCharsCriteriaMsg]="'MIN_CHARS_CRITERIA_MSG' | translate:{value: 8}">
</mat-password-strength-info>

</div>

<button type="submit" id="changeButton"
@@ -10,6 +10,8 @@ import { MatButtonModule } from '@angular/material/button'
import { MatInputModule } from '@angular/material/input'
import { MatFormFieldModule } from '@angular/material/form-field'
import { MatCardModule } from '@angular/material/card'
import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength'
import { MatSlideToggleModule } from '@angular/material/slide-toggle'
import { of, throwError } from 'rxjs'

describe('ChangePasswordComponent', () => {
@@ -25,13 +27,15 @@ describe('ChangePasswordComponent', () => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
MatPasswordStrengthModule.forRoot(),
ReactiveFormsModule,
HttpClientTestingModule,
BrowserAnimationsModule,
MatCardModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule
MatButtonModule,
MatSlideToggleModule
],
declarations: [ ChangePasswordComponent ],
providers: [ { provide: UserService, useValue: userService } ]
@@ -73,6 +73,16 @@ <h1 translate>TITLE_FORGOT_PASSWORD</h1>
</mat-error>
</mat-form-field>

<mat-slide-toggle #passwordInfoToggle [color]="passwordStrength.color">{{'SHOW_PASSWORD_ADVICE' | translate}}</mat-slide-toggle>
<mat-password-strength #passwordStrength [password]="password.value"></mat-password-strength>
<mat-password-strength-info *ngIf="passwordInfoToggle.checked" [passwordComponent]="passwordStrength"
[lowerCaseCriteriaMsg]="'LOWER_CASE_CRITERIA_MSG' | translate"
[upperCaseCriteriaMsg]="'UPPER_CASE_CRITERIA_MSG'| translate"
[digitsCriteriaMsg]="'DIGITS_CRITERIA_MSG'| translate"
[specialCharsCriteriaMsg]="'SPECIAL_CHARS_CRITERIA_MSG' | translate"
[minCharsCriteriaMsg]="'MIN_CHARS_CRITERIA_MSG' | translate:{value: 8}">
</mat-password-strength-info>

</div>

<button type="submit" id="resetButton"
@@ -14,6 +14,8 @@ import { UserService } from 'src/app/Services/user.service'
import { of, throwError } from 'rxjs'
import { MatTooltipModule } from '@angular/material/tooltip'
import { MatIconModule } from '@angular/material/icon'
import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength'
import { MatSlideToggleModule } from '@angular/material/slide-toggle'

describe('ForgotPasswordComponent', () => {
let component: ForgotPasswordComponent
@@ -32,6 +34,7 @@ describe('ForgotPasswordComponent', () => {
declarations: [ ForgotPasswordComponent ],
imports: [
TranslateModule.forRoot(),
MatPasswordStrengthModule.forRoot(),
HttpClientTestingModule,
ReactiveFormsModule,
BrowserAnimationsModule,
@@ -40,7 +43,8 @@ describe('ForgotPasswordComponent', () => {
MatInputModule,
MatButtonModule,
MatTooltipModule,
MatIconModule
MatIconModule,
MatSlideToggleModule
],
providers: [
{ provide: SecurityQuestionService, useValue: securityQuestionService },
@@ -45,6 +45,16 @@ <h1 translate>TITLE_REGISTRATION</h1>
</mat-error>
</mat-form-field>

<mat-slide-toggle #passwordInfoToggle [color]="passwordStrength.color">{{'SHOW_PASSWORD_ADVICE' | translate}}</mat-slide-toggle>
<mat-password-strength #passwordStrength [password]="password.value"></mat-password-strength>
<mat-password-strength-info *ngIf="passwordInfoToggle.checked" [passwordComponent]="passwordStrength"
[lowerCaseCriteriaMsg]="'LOWER_CASE_CRITERIA_MSG' | translate"
[upperCaseCriteriaMsg]="'UPPER_CASE_CRITERIA_MSG'| translate"
[digitsCriteriaMsg]="'DIGITS_CRITERIA_MSG'| translate"
[specialCharsCriteriaMsg]="'SPECIAL_CHARS_CRITERIA_MSG' | translate"
[minCharsCriteriaMsg]="'MIN_CHARS_CRITERIA_MSG' | translate:{value: 8}">
</mat-password-strength-info>

<div class="security-container">

<mat-form-field color="accent" appearance="outline">
@@ -20,6 +20,8 @@ import { of, throwError } from 'rxjs'
import { MatCheckboxModule } from '@angular/material/checkbox'
import { MatSnackBarModule } from '@angular/material/snack-bar'
import { MatTooltipModule } from '@angular/material/tooltip'
import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength'
import { MatSlideToggleModule } from '@angular/material/slide-toggle'

describe('RegisterComponent', () => {
let component: RegisterComponent
@@ -43,6 +45,7 @@ describe('RegisterComponent', () => {
{ path: 'login', component: LoginComponent }
]),
TranslateModule.forRoot(),
MatPasswordStrengthModule.forRoot(),
HttpClientTestingModule,
ReactiveFormsModule,
BrowserAnimationsModule,
@@ -55,7 +58,8 @@ describe('RegisterComponent', () => {
MatIconModule,
MatSnackBarModule,
MatTooltipModule,
MatIconModule
MatIconModule,
MatSlideToggleModule
],
declarations: [ RegisterComponent, LoginComponent ],
providers: [
@@ -8,6 +8,12 @@
"MANDATORY_PASSWORD": "Please provide a password.",
"LABEL_EMAIL": "Email",
"LABEL_PASSWORD": "Password",
"SHOW_PASSWORD_ADVICE": "Show password advice",
"LOWER_CASE_CRITERIA_MSG" : "contains at least one lower character",
"UPPER_CASE_CRITERIA_MSG" : "contains at least one upper character",
"DIGITS_CRITERIA_MSG" : "contains at least one digit",
"SPECIAL_CHARS_CRITERIA_MSG" : "contains at least one special character",
"MIN_CHARS_CRITERIA_MSG" : "contains at least {{value}} characters",
"BTN_LOGIN": "Log in",
"BTN_GOOGLE_LOGIN": "Log in with Google",
"REMEMBER_ME": "Remember me",
@@ -22,7 +22,7 @@ $blue-lightblue-primary: mat-palette($mat-blue, 700, 400, 800);
$blue-lightblue-accent: mat-palette($mat-light-blue, 700, 600, 800);
$blue-lightblue-theme: mat-light-theme($blue-lightblue-primary, $blue-lightblue-accent);

$bluegrey-lightgreen-primary: mat-palette($mat-blue-grey, 800, 500, 900);
$bluegrey-lightgreen-primary: mat-palette($mat-blue-grey, 600, 500, 900);
$bluegrey-lightgreen-accent: mat-palette($mat-light-green, 700, 300, 800);
$bluegrey-lightgreen-warn: mat-palette($mat-deep-orange);
$bluegrey-lightgreen-theme: mat-dark-theme($bluegrey-lightgreen-primary, $bluegrey-lightgreen-accent, $bluegrey-lightgreen-warn);
@@ -2,7 +2,7 @@ exports.themes = {
'bluegrey-lightgreen': {
bgColor: '#303030',
textColor: '#FFFFFF',
navColor: '#37474f',
navColor: '#546E7A',
primLight: '#424242',
primDark: '#263238'
},

0 comments on commit c7dc110

Please sign in to comment.
You can’t perform that action at this time.