Commit 70311328 authored by David Burke's avatar David Burke

Breaking apart common change password component code

parent 1892ec56
Pipeline #32354990 failed with stage
in 2 minutes and 19 seconds
......@@ -21,7 +21,7 @@
"compodoc": "./node_modules/.bin/compodoc -p tsconfig.json",
"compodoc-serve": "./node_modules/.bin/compodoc -p tsconfig.json -s",
"compodoc-gitlab": "./node_modules/.bin/compodoc -p tsconfig.json -d public/",
"storybook": "start-storybook -p 6006",
"storybook": "start-storybook -p 6006 -s ./src",
"prettier": "find src/ -type f -name \"*.ts\" | xargs ./node_modules/.bin/prettier --write",
"build-storybook": "build-storybook"
},
......
......@@ -29,62 +29,14 @@
</li>
</ul>
<div class="form-field form-field--large">
<label for="password" class="form-field__label">New Password</label>
<input type="{{ form.controls.showConfirm.value ? 'password' : 'text' }}"
[ngrxFormControlState]="form.controls.newPassword"
class="form-field__input form-field__input--one-action"
[class.form-field__input--invalid]="form.errors._newPassword && form.isSubmitted"
name="password"
autocomplete="off"
/>
<div class="form-field__actions">
<button type="button"
tabindex="-1"
(click)="toggleConfirm.emit()"
class="form-field__action">
<div class="button__icon button__icon--no-text" [inlineSVG]="form.controls.showConfirm.value ? '../assets/svg/eye.svg' : '../assets/svg/eye-slash.svg'"></div>
</button>
</div>
</div>
<ul *ngIf="form.errors._newPassword && form.isSubmitted" class="form-field__error-list">
<li *ngIf="form.errors._newPassword.required" class="form-field__error">
You must have a password!
</li>
<li *ngIf="form.errors._newPassword.minLength" class="form-field__error">
Password must be at least {{ form.errors._newPassword.minLength.minLength }} characters long.
</li>
<li *ngIf="form.errors._newPassword.hasUniqueChars" class="form-field__error">
Password must have more than 5 unique characters.
</li>
<li *ngIf="form.errors._newPassword.notNumeric" class="form-field__error">
Password must not be only numbers.
</li>
<li *ngIf="form.errors._newPassword.notEqualTo" class="form-field__error">
New password is the same as the old password.
</li>
</ul>
<div class="form-field form-field--large" *ngIf="form.controls.showConfirm.value">
<label for="password" class="form-field__label">Confirm Password</label>
<input type="password"
[ngrxFormControlState]="form.controls.newPasswordConfirm"
class="form-field__input"
[class.form-field__input--invalid]="form.errors._newPasswordConfirm && form.isSubmitted"
name="passwordConfirm"
/>
</div>
<ul *ngIf="form.errors._newPasswordConfirm && form.isSubmitted" class="form-field__error-list">
<li *ngIf="form.errors._newPasswordConfirm.required && form.controls.showConfirm.value" class="form-field__error">
Confirm your password by entering it again here, or click the
eye icon to visually inspect your new password.
</li>
<li *ngIf="form.errors._newPasswordConfirm.equalTo && form.controls.showConfirm.value" class="form-field__error">
Passwords don't match.
</li>
</ul>
<app-password-input
[showConfirm]="form.controls.showConfirm"
[newPassword]="form.controls.newPassword"
[newPasswordConfirm]="form.controls.newPasswordConfirm"
[errors]="form.errors"
[isSubmitted]="form.isSubmitted"
(toggleConfirm)="toggleConfirm.emit()"
></app-password-input>
<div class="change-password__actions">
......
......@@ -10,12 +10,18 @@ import { FormGroupState } from "ngrx-forms";
animations: [flyInOut]
})
export class ChangePasswordComponent {
@Input() form: FormGroupState<IChangePasswordForm>;
@Input() hasStarted: boolean;
@Input() hasFinished: boolean;
@Input() nonFieldErrors: string[];
@Output() changePassword = new EventEmitter();
@Output() toggleConfirm = new EventEmitter();
@Input()
form: FormGroupState<IChangePasswordForm>;
@Input()
hasStarted: boolean;
@Input()
hasFinished: boolean;
@Input()
nonFieldErrors: string[];
@Output()
changePassword = new EventEmitter();
@Output()
toggleConfirm = new EventEmitter();
onSubmit() {
if (this.form.isValid) {
......
......@@ -67,7 +67,7 @@ const initialFormState = validateAndUpdateFormState(
})
);
const initialState = {
export const initialState = {
form: initialFormState
};
......
<div class="form-field form-field--large">
<label for="password" class="form-field__label">New Password</label>
<input type="{{ showConfirm.value ? 'password' : 'text' }}"
[ngrxFormControlState]="newPassword"
class="form-field__input form-field__input--one-action"
[class.form-field__input--invalid]="errors._newPassword && isSubmitted"
name="password"
autocomplete="off"
/>
<div class="form-field__actions">
<button type="button"
tabindex="-1"
(click)="toggleConfirm.emit()"
class="form-field__action">
<div class="button__icon button__icon--no-text" [inlineSVG]="showConfirm.value ? '../assets/svg/eye.svg' : '../assets/svg/eye-slash.svg'"></div>
</button>
</div>
</div>
<ul *ngIf="errors._newPassword && isSubmitted" class="form-field__error-list">
<li *ngIf="errors._newPassword.required" class="form-field__error">
You must have a password!
</li>
<li *ngIf="errors._newPassword.minLength" class="form-field__error">
Password must be at least {{ errors._newPassword.minLength.minLength }} characters long.
</li>
<li *ngIf="errors._newPassword.hasUniqueChars" class="form-field__error">
Password must have more than 5 unique characters.
</li>
<li *ngIf="errors._newPassword.notNumeric" class="form-field__error">
Password must not be only numbers.
</li>
<li *ngIf="errors._newPassword.notEqualTo" class="form-field__error">
New password is the same as the old password.
</li>
</ul>
<div class="form-field form-field--large" *ngIf="showConfirm.value">
<label for="password" class="form-field__label">Confirm Password</label>
<input type="password"
[ngrxFormControlState]="newPasswordConfirm"
class="form-field__input"
[class.form-field__input--invalid]="errors._newPasswordConfirm && isSubmitted"
name="passwordConfirm"
/>
</div>
<ul *ngIf="errors._newPasswordConfirm && isSubmitted" class="form-field__error-list">
<li *ngIf="errors._newPasswordConfirm.required && showConfirm.value" class="form-field__error">
Confirm your password by entering it again here, or click the
eye icon to visually inspect your new password.
</li>
<li *ngIf="errors._newPasswordConfirm.equalTo && showConfirm.value" class="form-field__error">
Passwords don't match.
</li>
</ul>
\ No newline at end of file
import {
Component,
ChangeDetectionStrategy,
Input,
Output,
EventEmitter
} from "@angular/core";
import { AbstractControlState, ValidationErrors } from "ngrx-forms";
@Component({
selector: "app-password-input",
templateUrl: "./password-input.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class PasswordInputComponent {
@Input()
showConfirm: AbstractControlState<boolean>;
@Input()
newPassword: AbstractControlState<string>;
@Input()
newPasswordConfirm: AbstractControlState<string>;
@Input()
errors: ValidationErrors;
@Input()
isSubmitted: boolean;
@Output()
toggleConfirm = new EventEmitter();
constructor() {}
}
import { Component, ChangeDetectionStrategy } from "@angular/core";
@Component({
selector: "app-set-password",
templateUrl: "./set-password.component.html",
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SetPasswordComponent {
constructor() {}
}
......@@ -40,11 +40,13 @@ import { ForgotPasswordEffects } from "./forgot-password/forgot-password.effects
import { ResetPasswordVerifyComponent } from "./forgot-password/reset-password-verify/reset-password-verify.component";
import { ResetPasswordVerifyContainer } from "./forgot-password/reset-password-verify/reset-password-verify.container";
import { ResetPasswordVerifyEffects } from "./forgot-password/reset-password-verify/reset-password-verify.effects";
import { PasswordInputComponent } from "./change-password/password-input/password-input.component";
export const COMPONENTS = [
AccountComponent,
ChangePasswordComponent,
ChangePasswordContainer,
PasswordInputComponent,
ConfirmEmailComponent,
ConfirmEmailContainer,
DeleteContainer,
......
import { InlineSVGModule } from "ng-inline-svg";
import { HttpClientModule } from "@angular/common/http";
import { storiesOf, moduleMetadata } from "@storybook/angular";
import { boolean, withKnobs } from "@storybook/addon-knobs/angular";
import { boolean, withKnobs } from "@storybook/addon-knobs";
import { StoreModule } from "@ngrx/store";
import { NgrxFormsModule } from "ngrx-forms";
......@@ -13,7 +13,10 @@ import { SharedModule } from "../app/shared";
import { ProgressIndicatorModule } from "../app/progress-indicator";
import * as fromForgotPassword from "../app/account/forgot-password/forgot-password.reducer";
import * as fromLogin from "../app/account/login/login.reducer";
import * as fromChangePassword from "../app/account/change-password/change-password.reducer";
import { RouterTestingModule } from "@angular/router/testing";
import { ChangePasswordComponent } from "../app/account/change-password";
import { PasswordInputComponent } from "../app/account/change-password/password-input/password-input.component";
storiesOf("Account", module)
.addDecorator(withKnobs)
......@@ -28,7 +31,7 @@ storiesOf("Account", module)
ProgressIndicatorModule,
StoreModule.forRoot({})
],
declarations: [MarketingFrameComponent]
declarations: [MarketingFrameComponent, PasswordInputComponent]
})
)
.add("Backup Code", () => ({
......@@ -52,4 +55,20 @@ storiesOf("Account", module)
props: {
form: fromLogin.initialState.form
}
}))
.add("Change Password", () => ({
component: ChangePasswordComponent,
props: {
form: fromChangePassword.initialState.form
}
}))
.add("Password Input", () => ({
component: PasswordInputComponent,
props: {
showConfirm: fromChangePassword.initialState.form.controls.showConfirm,
newPassword: fromChangePassword.initialState.form.controls.newPassword,
newPasswordConfirm:
fromChangePassword.initialState.form.controls.newPasswordConfirm,
errors: fromChangePassword.initialState.form.errors
}
}));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment