...
 
Commits (2)
......@@ -12,6 +12,7 @@ import * as fromResetPassword from "./reset-password/reset-password.reducer";
import * as fromResetPasswordVerify from "./reset-password/reset-password-verify/reset-password-verify.reducer";
import * as fromSetPassword from "./reset-password/set-password/set-password.reducer";
import * as fromManageBackupCode from "./manage-backup-code/manage-backup-code.reducer";
import * as fromManageMfa from "./manage-mfa/manage-mfa.reducer";
import * as fromRoot from "../app.reducers";
export interface IAccountState {
......@@ -24,6 +25,7 @@ export interface IAccountState {
resetPasswordVerify: fromResetPasswordVerify.IResetPasswordVerifyState;
manageBackupCode: fromManageBackupCode.IState;
setPassword: fromSetPassword.ISetPasswordState;
enableMfa: fromManageMfa.IEnbleMfaState;
}
export const initialState: IAccountState = {
......@@ -35,7 +37,8 @@ export const initialState: IAccountState = {
resetPassword: fromResetPassword.initialState,
resetPasswordVerify: fromResetPasswordVerify.initialState,
manageBackupCode: fromManageBackupCode.initialState,
setPassword: fromSetPassword.initialState
setPassword: fromSetPassword.initialState,
enableMfa: fromManageMfa.initialState
};
export const reducers: ActionReducerMap<IAccountState> = {
......@@ -47,7 +50,8 @@ export const reducers: ActionReducerMap<IAccountState> = {
resetPassword: fromResetPassword.reducer,
resetPasswordVerify: fromResetPasswordVerify.reducer,
setPassword: fromSetPassword.reducer,
manageBackupCode: fromManageBackupCode.reducer
manageBackupCode: fromManageBackupCode.reducer,
enableMfa: fromManageMfa.reducer
};
export interface IState extends fromRoot.IState {
......@@ -296,3 +300,20 @@ export const getSetPasswordBackupCode = createSelector(
selectSetPasswordState,
fromSetPassword.getBackupCode
);
export const selectManageMfaState = createSelector(
selectAccountState,
(state: IAccountState) => state.enableMfa
);
export const getEnableMfaForm = createSelector(
selectManageMfaState,
fromManageMfa.getForm
);
export const getMfaEnabled = createSelector(
selectManageMfaState,
fromManageMfa.getMfaEnabled
);
export const getMfaErrorMessage = createSelector(
selectManageMfaState,
fromManageMfa.getErrorMessage
);
......@@ -4,9 +4,7 @@ export enum ManageMfaActionTypes {
ENABLE_MFA = "[ENABLE MFA] Enable",
ENABLE_MFA_SUCCESS = "[ENABLE MFA] Enable Success",
ENABLE_MFA_FAILURE = "[ENABLE MFA] Enable Failure",
DISABLE_MFA = "[DISABLE MFA] Disable",
DISABLE_MFA_SUCCESS = "[DISABLE MFA] Disable Success",
DISABLE_MFA_FAILURE = "[DISABLE MFA] Disable Failure"
RESET_FORM = "[Reset] = Reset Form"
}
export class EnableMfa implements Action {
......@@ -19,24 +17,16 @@ export class EnableMfaSuccess implements Action {
export class EnableMfaFailure implements Action {
readonly type = ManageMfaActionTypes.ENABLE_MFA_FAILURE;
}
export class DisableMfa implements Action {
readonly type = ManageMfaActionTypes.DISABLE_MFA;
}
export class DisableMfaSuccess implements Action {
readonly type = ManageMfaActionTypes.DISABLE_MFA_SUCCESS;
constructor(public payload: string[]) {}
}
export class DisableMfaFailure implements Action {
readonly type = ManageMfaActionTypes.DISABLE_MFA_FAILURE;
export class ResetForm implements Action {
readonly type = ManageMfaActionTypes.RESET_FORM;
}
export type ManageMfaActions =
| EnableMfa
| EnableMfaSuccess
| EnableMfaFailure
| DisableMfa
| DisableMfaSuccess
| DisableMfaFailure;
| ResetForm;
......@@ -25,10 +25,10 @@
<div *ngIf="mfaEnabled" class="register-step__feedback">
<div class="u-margin-b-15">
Two factor authentication is currently enabled on your account.
Two-factor authentication is currently enabled on your account.
</div>
<div class="u-margin-b-15">
If you no longer wish to have an extra layer of security, enter your
If you no longer wish to use two-factor authentication, enter your
current password to disable your account.
</div>
</div>
......@@ -42,7 +42,7 @@
<input type="password" class="form-field__input" />
</div>
<button class="button button--primary" (click)="disableMfa()">
Disable Two-factor Authentication
Disable Two-Factor Authentication
</button>
</div>
</form>
......@@ -110,9 +110,13 @@
<div>
<img style="margin-left: -14px" [src]="qrCode" />
</div>
<div>
<a [href]="uri">{{ uri | splitMfaLink }}</a>
<div class="code-spacing">
<a [href]="uri">
{{ uri | splitMfaLink }}
</a>
</div>
<div class="manage-backup-code__actions">
<button class="button button--primary" (click)="nextStep()">
Next
......@@ -134,13 +138,13 @@
<div class="form-field form-field--large">
<div class="register-step__feedback">
<span class="register-step__feedback__static-element">
Enter the six digit code generated in your authenticator app and
submit this form to enable two factor authentication.
Enter the six digit code generated in your authenticator app, and
submit this form to enable two-factor authentication.
</span>
</div>
</div>
<button class="button button--primary" (click)="onSubmit()">
Enable Two-factor Authentication
Enable Two-Factor Authentication
</button>
</div>
</div>
......
.code-spacing {
margin-bottom: 15px;
margin-top: -10px;
}
\ No newline at end of file
......@@ -4,6 +4,7 @@ import { Component, Input, Output, EventEmitter } from "@angular/core";
selector: "app-manage-mfa",
templateUrl: "./manage-mfa.component.html",
styleUrls: [
"./manage-mfa.component.scss",
"../manage-backup-code/manage-backup-code.component.scss",
"../account.component.scss",
"../../../styles/_utility.scss"
......
......@@ -2,31 +2,74 @@ import {
FormGroupState,
validate,
updateGroup,
createFormGroupState
createFormGroupState,
createFormStateReducerWithUpdate
} from "ngrx-forms";
import { required } from "ngrx-forms/validation";
import { IBaseFormState } from "~/app/utils/interfaces";
import { ManageMfaActions, ManageMfaActionTypes } from "./manage-mfa.actions";
export const FORM_ID = "Enable MFA Form";
export interface IEnableMfaForm {
verificationCode: string;
verificationCode: string | null;
}
export interface IState extends IBaseFormState {
enableForm: FormGroupState<IEnableMfaForm>;
export interface IEnbleMfaState {
form: FormGroupState<IEnableMfaForm>;
mfaEnabled: boolean;
errorMessage: string[] | null;
mfaEnabled: boolean | null;
}
const validateAndUpdateFormState = updateGroup<IEnableMfaForm>({
verificationCode: validate(required)
});
export const mfaEnabled = (state: IState) => state.mfaEnabled;
export const initialFormState = validateAndUpdateFormState(
createFormGroupState<IEnableMfaForm>(FORM_ID, {
verificationCode: ""
})
);
export const initialState: IEnbleMfaState = {
form: initialFormState,
errorMessage: null,
mfaEnabled: false
};
export const formReducer = createFormStateReducerWithUpdate<IEnableMfaForm>(
validateAndUpdateFormState
);
export function reducer(
state = initialState,
action: ManageMfaActions
): IEnbleMfaState {
const form = formReducer(state.form, action);
state = { ...state, form };
switch (action.type) {
case ManageMfaActionTypes.ENABLE_MFA:
return {
...state
};
case ManageMfaActionTypes.ENABLE_MFA_SUCCESS:
return {
...state,
mfaEnabled: true
};
case ManageMfaActionTypes.ENABLE_MFA_FAILURE:
return {
...state,
errorMessage: action.payload
};
case ManageMfaActionTypes.RESET_FORM:
return initialState;
}
return state;
}
export const getForm = (state: IEnbleMfaState) => state.form;
export const getMfaEnabled = (state: IEnbleMfaState) => state.mfaEnabled;
export const getErrorMessage = (state: IEnbleMfaState) => state.errorMessage;