Commit 1811f434 authored by David Burke's avatar David Burke

Created set password storybook

parent 247c9e1f
Pipeline #32918989 failed with stage
in 5 minutes and 32 seconds
......@@ -21,6 +21,7 @@ import * as fromDeleteAccount from "./delete/delete.reducer";
import * as fromErrorReporting from "./error-reporting/error-reporting.reducer";
import * as fromForgotPassword from "./forgot-password/forgot-password.reducer";
import * as fromResetPasswordVerify from "./forgot-password/reset-password-verify/reset-password-verify.reducer";
import * as fromSetPassword from "./forgot-password/set-password/set-password.reducer";
import {
ResetPasswordVerifyActionTypes,
ResetPasswordVerifyActionsUnion
......@@ -103,6 +104,7 @@ export interface IAccountState {
errorReporting: fromErrorReporting.IState;
forgotPassword: fromForgotPassword.IForgotPasswordState;
resetPasswordVerify: fromResetPasswordVerify.IResetPasswordVerifyState;
setPassword: fromSetPassword.ISetPasswordState;
}
export const reducers: ActionReducerMap<IAccountState> = {
......@@ -114,7 +116,8 @@ export const reducers: ActionReducerMap<IAccountState> = {
deleteAccount: fromDeleteAccount.reducer,
errorReporting: fromErrorReporting.reducer,
forgotPassword: fromForgotPassword.reducer,
resetPasswordVerify: fromResetPasswordVerify.reducer
resetPasswordVerify: fromResetPasswordVerify.reducer,
setPassword: fromSetPassword.reducer
};
export const selectAccountState = createFeatureSelector<IAccountState>(
......@@ -335,3 +338,16 @@ export const getResetPasswordVerifyEmailAndCode = createSelector(
selectResetPasswordVerifyState,
fromResetPasswordVerify.getEmailAndCode
);
export const selectSetPasswordState = createSelector(
selectAccountState,
(state: IAccountState) => state.setPassword
);
export const getSetPasswordForm = createSelector(
selectSetPasswordState,
fromSetPassword.getForm
);
export const getSetPasswordHasStarted = createSelector(
selectSetPasswordState,
fromSetPassword.getHasStarted
);
import { Action } from "@ngrx/store";
export enum SetPasswordActionTypes {
SET_PASSWORD = "[Set Password] Set Password",
SET_PASSWORD_SUCCESS = "[Set Password] Set Password Success",
SET_PASSWORLD_FAILURE = "[Set Password] Set Password Failure"
}
export class SetPassword implements Action {
readonly type = SetPasswordActionTypes.SET_PASSWORD;
}
export class SetPasswordSuccess implements Action {
readonly type = SetPasswordActionTypes.SET_PASSWORD_SUCCESS;
}
export class SetPasswordFailure implements Action {
readonly type = SetPasswordActionTypes.SET_PASSWORLD_FAILURE;
}
export type SetPasswordActionsUnion =
| SetPassword
| SetPasswordSuccess
| SetPasswordFailure;
<p>
set-password works!
</p>
<app-marketing-frame>
<div class="account-column__inner account-column__inner--right">
<div class="account-column__right-heading">
<h1 class="heading-medium">Reset&nbsp;Password</h1>
<div class="account-column__link">
<a class="text-link text-link--caret text-link--large" id="btn-signin" [routerLink]="['/login']">
Remembered? Log&nbsp;in
</a>
</div>
</div>
<p>Your backup code works! Almost done! Now enter your new password.</p>
<form [ngrxFormState]="form" class="auth-form__form">
<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>
<button
id="setPasswordSubmit"
class="button button--large button--green"
[disabled]="hasStarted"
type="submit">
Set Password
</button>
</form>
</div>
</app-marketing-frame>
import { Component, ChangeDetectionStrategy } from "@angular/core";
import {
Component,
ChangeDetectionStrategy,
Input,
Output,
EventEmitter
} from "@angular/core";
import { FormGroupState } from "ngrx-forms";
import { ISetPasswordForm } from "./set-password.reducer";
@Component({
selector: "app-set-password",
......@@ -6,5 +14,18 @@ import { Component, ChangeDetectionStrategy } from "@angular/core";
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SetPasswordComponent {
constructor() {}
@Input()
form: FormGroupState<ISetPasswordForm>;
@Input()
hasStarted: boolean;
@Output()
setPassword = new EventEmitter();
@Output()
toggleConfirm = new EventEmitter();
onSubmit() {
if (this.form.isValid) {
this.setPassword.emit();
}
}
}
import { Component, ChangeDetectionStrategy } from "@angular/core";
import * as fromAccount from "../../account.reducer";
import { Store } from "@ngrx/store";
import { SetPassword } from "./set-password.actions";
@Component({
template: `
<app-set-password
[form]="form$ | async"
></app-set-password>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SetPasswordContainer {
form$ = this.store.select(fromAccount.getSetPasswordForm);
hasStarted$ = this.store.select(fromAccount.getSetPasswordHasStarted);
constructor(private store: Store<fromAccount.IAuthState>) {}
setPassword() {
this.store.dispatch(new SetPassword());
}
}
import {
createFormGroupState,
createFormStateReducerWithUpdate,
FormGroupState,
validate,
updateGroup
} from "ngrx-forms";
import { passwordValidators } from "../../constants";
import { equalTo, required } from "ngrx-forms/validation";
import {
SetPasswordActionsUnion,
SetPasswordActionTypes
} from "./set-password.actions";
export const FORM_ID = "(Reset) Set Password Form";
export interface ISetPasswordForm {
newPassword: string;
newPasswordConfirm: string;
showConfirm: boolean;
}
export interface ISetPasswordState {
form: FormGroupState<ISetPasswordForm>;
hasStarted: boolean;
}
export const validateAndUpdateFormState = updateGroup<ISetPasswordForm>({
newPassword: (newPassword, form) => {
return validate(newPassword, [...passwordValidators]);
},
newPasswordConfirm: (passwordConfirm, form) => {
if (form.controls.showConfirm.value) {
return validate(
passwordConfirm,
required,
equalTo(form.value.newPassword)
);
}
return validate(passwordConfirm, []);
}
});
const initialFormState = validateAndUpdateFormState(
createFormGroupState<ISetPasswordForm>(FORM_ID, {
newPassword: "",
newPasswordConfirm: "",
showConfirm: true
})
);
export const initialState: ISetPasswordState = {
form: initialFormState,
hasStarted: false
};
const formReducer = createFormStateReducerWithUpdate<ISetPasswordForm>(
validateAndUpdateFormState
);
export function reducer(
state = initialState,
action: SetPasswordActionsUnion
): ISetPasswordState {
const form = formReducer(state.form, action);
if (form !== state.form) {
state = { ...state, form };
}
switch (action.type) {
case SetPasswordActionTypes.SET_PASSWORD:
return {
...state,
hasStarted: true
};
case SetPasswordActionTypes.SET_PASSWORLD_FAILURE:
return {
...state,
hasStarted: false
};
}
return state;
}
export const getForm = (state: ISetPasswordState) => state.form;
export const getHasStarted = (state: ISetPasswordState) => state.hasStarted;
......@@ -14,9 +14,11 @@ 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 * as fromSetPassword from "../app/account/forgot-password/set-password/set-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";
import { SetPasswordComponent } from "../app/account/forgot-password/set-password/set-password.component";
storiesOf("Account", module)
.addDecorator(withKnobs)
......@@ -71,4 +73,10 @@ storiesOf("Account", module)
fromChangePassword.initialState.form.controls.newPasswordConfirm,
errors: fromChangePassword.initialState.form.errors
}
}))
.add("Set Password", () => ({
component: SetPasswordComponent,
props: {
form: fromSetPassword.initialState.form
}
}));
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