Commit 2321a776 authored by David Burke's avatar David Burke

Show errors when verify mfa code fails. Hide link to manage MFA to keep

it a beta feature
parent 61198274
Pipeline #63157698 passed with stage
in 6 minutes and 38 seconds
......@@ -10,13 +10,13 @@
</h3>
</li>
<li class="account__list-item">
<!-- <li class="account__list-item">
<h3 class="account__item-heading">
<app-text-link [link]="['./manage-mfa']" caret="right">
Manage Two-Factor Authentication
</app-text-link>
</h3>
</li>
</li> -->
<li class="account__list-item">
<h3 class="account__item-heading">
......
......@@ -134,8 +134,14 @@
</app-form-label>
<div *ngIf="step === 3">
<app-text-field
[isFormSubmitted]="form.isSubmitted"
[ngrxFormControl]="form.controls.verificationCode"
></app-text-field>
<ul *ngIf="errors" class="form-field__error-list">
<li *ngFor="let error of errors" class="form-field__error">
{{ error }}
</li>
</ul>
<div class="form-field form-field--large">
<div class="register-step__feedback">
<span class="register-step__feedback__static-element">
......
......@@ -19,6 +19,7 @@ export class ManageMfaComponent {
private _uri: string;
@Input() step: ActivateMFAStep;
@Input() form: FormGroupState<IEnableMfaForm>;
@Input() errors: string[] | null;
@Input()
set uri(value: string) {
this._uri = value;
......
......@@ -5,7 +5,8 @@ import { EnableMfa, ForwardStep, ActivateMfa } from "./manage-mfa.actions";
import {
getMfaProvisioningURI,
getMfaStep,
getEnableMfaForm
getEnableMfaForm,
getMfaErrorMessage
} from "../account.reducer";
@Component({
......@@ -14,6 +15,7 @@ import {
[uri]="uri$ | async"
[step]="step$ | async"
[form]="form$ | async"
[errors]="errors$ | async"
(forwardStep)="forwardStep()"
(generateMfa)="generateMfa()"
(verifyMfa)="activateMfa()"
......@@ -24,6 +26,7 @@ export class ManageMfaContainer {
uri$ = this.store.pipe(select(getMfaProvisioningURI));
step$ = this.store.pipe(select(getMfaStep));
form$ = this.store.pipe(select(getEnableMfaForm));
errors$ = this.store.pipe(select(getMfaErrorMessage));
constructor(private store: Store<IState>) {}
forwardStep() {
......
......@@ -35,7 +35,7 @@ export class ManageMFAEffects {
this.store.pipe(select(getMfaId))
),
exhaustMap(([action, form, id]) => {
if (form.value.verificationCode && id) {
if (form.isValid && form.value.verificationCode && id) {
return this.service.activateMfa(form.value.verificationCode, id).pipe(
map(resp => new ActivateMfaSuccess()),
catchError(resp => of(new ActivateMfaFailure()))
......
......@@ -5,7 +5,7 @@ import {
createFormGroupState,
createFormStateReducerWithUpdate
} from "ngrx-forms";
import { required } from "ngrx-forms/validation";
import { required, minLength } from "ngrx-forms/validation";
import { ManageMfaActions, ManageMfaActionTypes } from "./manage-mfa.actions";
import { ActivateMFAStep, IGeneratedMFA } from "./manage-mfa.interfaces";
......@@ -23,7 +23,7 @@ export interface IEnbleMfaState {
}
const validateAndUpdateFormState = updateGroup<IEnableMfaForm>({
verificationCode: validate(required)
verificationCode: validate(required, minLength(6))
});
export const initialFormState = validateAndUpdateFormState(
......@@ -63,6 +63,7 @@ export function reducer(
return {
...state,
generatedMFA: action.payload,
errorMessage: null,
mfaEnabled: true
};
......@@ -72,6 +73,18 @@ export function reducer(
errorMessage: action.payload
};
case ManageMfaActionTypes.ACTIVATE_MFA_SUCCESS:
return {
...state,
errorMessage: null
};
case ManageMfaActionTypes.ACTIVATE_MFA_FAILURE:
return {
...state,
errorMessage: ["Unable to verify code."]
};
case ManageMfaActionTypes.RESET_FORM:
return initialState;
}
......
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