...
 
Commits (6)
......@@ -10,16 +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"
>
<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">
......
......@@ -51,6 +51,7 @@ import { DeleteEffects } from "./delete/delete.effects";
import { AccountRoutingModule } from "./account-routing.module";
import { ManageMfaContainer } from "./manage-mfa/manage-mfa.container";
import { ManageMfaComponent } from "./manage-mfa/manage-mfa.component";
import { SplitMfaLinkPipe } from "./manage-mfa/split-mfa-link.pipe";
export const COMPONENTS = [
RegisterComponent,
......@@ -78,7 +79,8 @@ export const COMPONENTS = [
ForgotLearnMoreContainer,
ForgotLearnMoreComponent,
ManageMfaContainer,
ManageMfaComponent
ManageMfaComponent,
SplitMfaLinkPipe
];
export const SERVICES = [BackupCodePdfService, UserService, ConfirmEmailGuard];
......
import { Action } from "@ngrx/store";
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"
}
export class EnableMfa implements Action {
readonly type = ManageMfaActionTypes.ENABLE_MFA;
}
export class EnableMfaSuccess implements Action {
readonly type = ManageMfaActionTypes.ENABLE_MFA_SUCCESS;
}
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;
}
export class DisableMfaFailure implements Action {
readonly type = ManageMfaActionTypes.DISABLE_MFA_FAILURE;
}
export type ManageMfaActions =
| EnableMfa
| EnableMfaSuccess
| EnableMfaFailure
| DisableMfa
| DisableMfaSuccess
| DisableMfaFailure;
......@@ -69,7 +69,7 @@
target="_blank"
link="https://authy.com/download/"
>Authy</app-text-link
>,
>,&nbsp;
<app-text-link
isExternal="true"
target="_blank"
......@@ -105,13 +105,13 @@
<div *ngIf="stepDownloadApp === 2">
<div class="text--large text--no-bottom-margin u-margin-t-20">
Scan the qr code in your authenticator app or enter the code below.
Scan the QR code in your authenticator app or enter the code below.
</div>
<div>
<img style="margin-left: -14px" [src]="qrCode" />
</div>
<div>
<a [href]="uri">{{ uri }}</a>
<a [href]="uri">{{ uri | splitMfaLink }}</a>
</div>
<div class="manage-backup-code__actions">
<button class="button button--primary" (click)="nextStep()">
......
......@@ -13,20 +13,15 @@ export class ManageMfaComponent {
@Input() uri: string;
@Input() qrCode: string;
@Input() mfaEnabled: boolean;
stepDownloadApp = 0;
@Output() generateMfa = new EventEmitter();
splitUriBefore: string[];
splitUriAfter: string[];
uriOutput: string;
stepDownloadApp = 0;
nextStep() {
this.stepDownloadApp++;
if (this.stepDownloadApp === 2) {
this.generateMfa.emit();
this.splitUriBefore = this.uri.split("secret=", 2);
this.splitUriAfter = this.splitUriBefore[1].split("&issuer", 2);
this.uriOutput = this.splitUriAfter[0];
}
}
......
import {
FormGroupState,
validate,
updateGroup,
createFormGroupState
} from "ngrx-forms";
import { required } from "ngrx-forms/validation";
import { IBaseFormState } from "~/app/utils/interfaces";
export const FORM_ID = "Enable MFA Form";
export interface IEnableMfaForm {
verificationCode: string;
}
export interface IState extends IBaseFormState {
enableForm: FormGroupState<IEnableMfaForm>;
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: ""
})
);
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "splitMfaLink"
})
export class SplitMfaLinkPipe implements PipeTransform {
transform(uri: string, args?: any): string {
const splitUriBefore = uri.split("secret=", 2);
const splitUriAfter = splitUriBefore[1].split("&issuer", 2);
return splitUriAfter[0];
}
}
This diff is collapsed.
......@@ -23,6 +23,9 @@ storiesOf("Shared", module)
declarations: []
})
)
.add("Marketing Frame", () => ({
template: `<app-marketing-frame></app-marketing-frame>`
}))
.add("Text Link", () => {
const defaultCaretState = "right";
const caretStates = {
......