Commit 4658957e authored by Emily Jensen's avatar Emily Jensen

Rearranged component to match newer conventions

parent 6587b0e6
Pipeline #38564373 failed with stage
in 4 minutes and 46 seconds
......@@ -291,14 +291,30 @@ export const getConfirmErrorMessage = createSelector(
fromConfirmEmail.getErrorMessage
);
export const selectChangePasswordState = createSelector(
export const selectChangePasswordForm = createSelector(
selectAccountState,
(state: IAccountState) => state.changePassword
);
export const getChangePasswordForm = createSelector(
selectChangePasswordState,
export const changePassword = createSelector(
selectChangePasswordForm,
fromChangePassword.getForm
);
export const changePasswordHasStarted = createSelector(
selectChangePasswordForm,
fromChangePassword.getHasStarted
);
export const changePasswordHasFinished = createSelector(
selectChangePasswordForm,
fromChangePassword.getHasFinished
);
export const selectChangePasswordNewBackupCode = createSelector(
selectChangePasswordForm,
fromChangePassword.getNewBackupCode
);
export const changePasswordErrorMessage = createSelector(
selectChangePasswordForm,
fromChangePassword.getErrorMessage
);
export const selectDeleteAccountState = createSelector(
selectAccountState,
......
import { Action } from "@ngrx/store";
export enum ChangePasswordActionTypes {
SUBMIT_FORM = "[Change Password] Submit",
SUBMIT_FORM_SUCCESS = "[Change Password] Submit Success",
SUBMIT_FORM_FAILURE = "[Change Password] Submit Failure",
RESET_FORM = "[Change Password] Reset"
}
export class SubmitForm implements Action {
readonly type = ChangePasswordActionTypes.SUBMIT_FORM;
}
export class SubmitFormSuccess implements Action {
readonly type = ChangePasswordActionTypes.SUBMIT_FORM_SUCCESS;
constructor(public payload: string) {}
}
export class SubmitFormFailure implements Action {
readonly type = ChangePasswordActionTypes.SUBMIT_FORM_FAILURE;
constructor(public payload: string[]) {}
}
export class ResetForm implements Action {
readonly type = ChangePasswordActionTypes.RESET_FORM;
}
export type ChangePasswordActionsUnion =
| SubmitForm
| SubmitFormSuccess
| SubmitFormFailure
| ResetForm;
import { Component, EventEmitter, Input, Output } from "@angular/core";
import { Component, EventEmitter, Input, Output, OnDestroy } from "@angular/core";
import { flyInOut } from "../../app.animations";
import { IChangePasswordForm } from "./change-password.reducer";
import { FormGroupState } from "ngrx-forms";
......@@ -9,7 +9,7 @@ import { FormGroupState } from "ngrx-forms";
templateUrl: "./change-password.component.html",
animations: [flyInOut]
})
export class ChangePasswordComponent {
export class ChangePasswordComponent implements OnDestroy {
@Input()
form: FormGroupState<IChangePasswordForm>;
@Input()
......@@ -26,10 +26,16 @@ export class ChangePasswordComponent {
toggleConfirm = new EventEmitter();
@Output()
onForgotPassword = new EventEmitter();
@Output()
reset = new EventEmitter();
onSubmit() {
if (this.form.isValid) {
this.changePassword.emit();
}
}
ngOnDestroy() {
this.reset.emit();
}
}
import { take } from "rxjs/operators";
import { Component } from "@angular/core";
import { Store, select } from "@ngrx/store";
// import { selectChangePasswordNewBackupCode } from "../account.reducer";
import { SubmitForm, ResetForm, SubmitFormSuccess, SubmitFormFailure } from "./change-password.actions";
import * as fromRoot from "../../app.reducers";
import * as fromAccount from "../account.reducer";
import * as fromChangePassword from "./change-password.reducer";
......@@ -14,21 +15,25 @@ import { SetValueAction } from "ngrx-forms";
template: `
<change-password
[form]="form$ | async"
[hasStarted]="hasStarted"
[hasFinished]="hasFinished"
[hasStarted]="hasStarted$ | async"
[hasFinished]="hasFinished$ | async"
[nonFieldErrors]="nonFieldErrors"
[backupCode]="backupCode"
(changePassword)="changePassword()"
(toggleConfirm)="toggleConfirm()"
(reset)="reset()"
(onForgotPassword)="onForgotPassword()">
</change-password>
`
})
export class ChangePasswordContainer {
form$ = this.store.pipe(select(fromAccount.getChangePasswordForm));
hasStarted = false;
hasFinished = false;
form$ = this.store.pipe(select(fromAccount.changePassword));
hasStarted$ = this.store.pipe(select(fromAccount.changePasswordHasStarted));
hasFinished$ = this.store.pipe(select(fromAccount.changePasswordHasFinished));
errorMessage$ = this.store.select(fromAccount.changePasswordErrorMessage);
// backupCode: string;
showConfirm: boolean;
nonFieldErrors: string[];
clickMessage = "";
backupCode = "CBVDCH4G23MJ46FXJBR8GDX4WKBF97VR";
......@@ -37,6 +42,11 @@ export class ChangePasswordContainer {
private store: Store<fromRoot.IState>,
private userService: UserService
) {
// this.store
// .select(selectChangePasswordNewBackupCode)
// .subscribe(
// backupCode => (backupCode ? (this.backupCode = backupCode) : null)
// );
this.form$.subscribe(
form => (this.showConfirm = form.controls.showConfirm.value)
);
......@@ -61,10 +71,14 @@ export class ChangePasswordContainer {
}
}
reset() {
this.store.dispatch(new ResetForm());
console.log("BOOM");
}
changePassword() {
this.form$.pipe(take(1)).subscribe(form => {
this.hasStarted = true;
this.hasFinished = false;
this.store.dispatch(new SubmitForm());
this.nonFieldErrors = [];
setTimeout(() => {
this.userService
......@@ -73,28 +87,29 @@ export class ChangePasswordContainer {
form.controls.newPassword.value
)
.then(() => {
this.hasStarted = false;
this.hasFinished = true;
this.store.dispatch(new SubmitFormSuccess(this.backupCode));
// this.store.dispatch(new LogoutAction());
// setTimeout(() => (this.hasFinished = false), 5000);
})
.catch(err => {
this.hasStarted = false;
// console.error(err);
if (err.res && err.res.status === 400) {
if (err.res.error.old_password) {
this.nonFieldErrors = this.nonFieldErrors.concat(
"Current password is not correct."
);
this.store.dispatch(new SubmitFormFailure(["Current password is not correct"]));
} else {
this.nonFieldErrors = this.nonFieldErrors.concat(
"Unknown error. Password was not reset."
);
this.store.dispatch(new SubmitFormFailure(["Unknown error. Password was not reset."]));
}
} else {
this.nonFieldErrors = this.nonFieldErrors.concat(
"Unknown error."
);
this.store.dispatch(new SubmitFormFailure(["Unknown error."]));
}
});
}, 200);
......
......@@ -7,8 +7,9 @@ import {
updateGroup
} from "ngrx-forms";
import { oldPasswordValidators, passwordValidators } from "../constants";
import { Action } from "@ngrx/store";
import { equalTo, required } from "ngrx-forms/validation";
import { ChangePasswordActionTypes, ChangePasswordActionsUnion } from "./change-password.actions";
import { IBaseFormState } from "~/app/utils/interfaces";
export const FORM_ID = "Change Password Form";
......@@ -19,8 +20,10 @@ export interface IChangePasswordForm {
showConfirm: boolean;
}
export interface IChangePasswordState {
export interface IChangePasswordState extends IBaseFormState {
form: FormGroupState<IChangePasswordForm>;
errorMessage: string[] | null;
newBackupCode: string | null;
}
export function notEqualTo<T>(comparand: T) {
......@@ -68,7 +71,11 @@ const initialFormState = validateAndUpdateFormState(
);
export const initialState = {
form: initialFormState
form: initialFormState,
hasFinished: false,
hasStarted: false,
newBackupCode: null,
errorMessage: null,
};
const formReducer = createFormStateReducerWithUpdate<IChangePasswordForm>(
......@@ -77,14 +84,48 @@ const formReducer = createFormStateReducerWithUpdate<IChangePasswordForm>(
export function reducer(
state = initialState,
action: Action
action: ChangePasswordActionsUnion
): IChangePasswordState {
const form = formReducer(state.form, action);
if (form !== state.form) {
state = { ...state, form };
state = { ...state, form };
switch (action.type) {
case ChangePasswordActionTypes.SUBMIT_FORM:
return {
...state,
hasStarted: true,
hasFinished: false,
errorMessage: null,
newBackupCode: null
};
case ChangePasswordActionTypes.SUBMIT_FORM_SUCCESS:
return {
...state,
hasFinished: true,
newBackupCode: action.payload,
errorMessage: null,
hasStarted: false
};
case ChangePasswordActionTypes.SUBMIT_FORM_FAILURE:
return {
...state,
errorMessage: action.payload,
hasFinished: false,
hasStarted: false,
newBackupCode: null
};
case ChangePasswordActionTypes.RESET_FORM:
return initialState;
}
return state;
}
export const getForm = (state: IChangePasswordState) => state.form;
export const getErrorMessage = (state: IChangePasswordState) => state.errorMessage;
export const getHasStarted = (state: IChangePasswordState) => state.hasStarted;
export const getHasFinished = (state: IChangePasswordState) => state.hasFinished;
export const getNewBackupCode = (state: IChangePasswordState) => state.newBackupCode;
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