Commit 610ea513 authored by Emily Jensen's avatar Emily Jensen

Design concept for enabling and disabling mfa

parent c446e318
Pipeline #60231644 passed with stage
in 12 minutes and 19 seconds
<p>
<a [href]="uri">{{ uri }}</a>
<img [src]="qrCode" />
<button (click)="generateMfa.emit()">Generate MFA</button>
</p>
<div class="account l-container-narrow u-margin-tb-50">
<app-text-link
class="heading-back-link"
caret="left"
[routerLink]="['/account']"
>Account Management</app-text-link
>
<h2 class="heading-main heading-main--pad-bottom">
Two-Factor Authentication
</h2>
<div *ngIf="!mfaEnabled" class="register-step__feedback">
<div class="u-margin-b-15">
Make your account more secure by requiring a code after you log in.
</div>
<div class="u-margin-b-20">
If you ever lose access to your codes, you can recover your account with
your
<app-text-link [link]="['/account/change-backup-code']"
>backup code</app-text-link
>.
</div>
</div>
<div *ngIf="mfaEnabled" class="register-step__feedback">
<div class="u-margin-b-15">
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
current password to disable your account.
</div>
</div>
<form *ngIf="mfaEnabled" (sumbit)="disableMfa()">
<div class="form-field form-field--large">
<app-form-label [isLarge]="true">
Password
</app-form-label>
<div class="form-field form-field--large">
<input type="password" class="form-field__input" />
</div>
<button class="button button--primary" (click)="disableMfa()">
Disable Two-factor Authentication
</button>
</div>
</form>
<form *ngIf="!mfaEnabled" (submit)="onSubmit()">
<div *ngIf="stepDownloadApp === 0" class="manage-backup-code__actions">
<button class="button button--primary" (click)="nextStep()">
Get Started
</button>
</div>
<div class="form-field form-field--large">
<app-form-label
[isLarge]="true"
[isComplete]="stepDownloadApp > 1"
[isInactive]="stepDownloadApp < 1"
>
Download Authenticator App
</app-form-label>
<div *ngIf="stepDownloadApp === 1">
<div class="text--large u-margin-tb-20">
Download
<app-text-link
isExternal="true"
target="_blank"
link="https://authy.com/download/"
>Authy</app-text-link
>,
<app-text-link
isExternal="true"
target="_blank"
link="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US"
>Google Authenticator</app-text-link
>, or
<app-text-link
isExternal="true"
target="_blank"
link="https://www.microsoft.com/en-us/p/microsoft-authenticator/9nblgggzmcj6?activetab=pivot:overviewtab"
>Windows Authenticator</app-text-link
>
on you mobile device.
</div>
<div class="text--large text--less-bottom-margin">
Once you have the app running, proceed to the next step.
</div>
<div class="manage-backup-code__actions">
<button class="button button--primary" (click)="nextStep()">
Next
</button>
</div>
</div>
</div>
<div class="form-field form-field--large">
<app-form-label
[isLarge]="true"
[isComplete]="stepDownloadApp > 2"
[isInactive]="stepDownloadApp < 2"
>
Scan QR Code
</app-form-label>
<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.
</div>
<div>
<img style="margin-left: -14px" [src]="qrCode" />
</div>
<div>
<a [href]="uri">{{ uri }}</a>
</div>
<div class="manage-backup-code__actions">
<button class="button button--primary" (click)="nextStep()">
Next
</button>
</div>
</div>
</div>
<div class="form-field form-field--large">
<app-form-label
[isLarge]="true"
[isComplete]="stepDownloadApp > 3"
[isInactive]="stepDownloadApp < 3"
[class.u-margin-b-20]="stepDownloadApp === 3"
>
Enter Code
</app-form-label>
<div *ngIf="stepDownloadApp === 3">
<input type="email" class="form-field__input" />
<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.
</span>
</div>
</div>
<button class="button button--primary" (click)="onSubmit()">
Enable Two-factor Authentication
</button>
</div>
</div>
</form>
</div>
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter } from "@angular/core";
@Component({
selector: 'app-manage-mfa',
templateUrl: './manage-mfa.component.html',
styleUrls: ['./manage-mfa.component.css']
selector: "app-manage-mfa",
templateUrl: "./manage-mfa.component.html",
styleUrls: [
"../manage-backup-code/manage-backup-code.component.scss",
"../account.component.scss",
"../../../styles/_utility.scss"
]
})
export class ManageMfaComponent {
@Input() uri: string;
@Input() qrCode: string;
@Input() mfaEnabled: boolean;
stepDownloadApp = 0;
@Output() generateMfa = new EventEmitter();
splitUriBefore: string[];
splitUriAfter: string[];
uriOutput: string;
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];
}
}
onSubmit() {
console.log("form submitted");
this.stepDownloadApp++;
this.mfaEnabled = true;
}
disableMfa() {
this.mfaEnabled = false;
console.log("mfa has been disabled");
}
}
import { Component } from '@angular/core';
import { Component } from "@angular/core";
import * as QRCode from "qrcode";
import { UserService } from '../user';
import { UserService } from "../user";
@Component({
template: `
<app-manage-mfa
[uri]="uri"
[qrCode]="qrCode"
(generateMfa)="generateMfa()"
></app-manage-mfa>
`,
<app-manage-mfa
[uri]="uri"
[qrCode]="qrCode"
(generateMfa)="generateMfa()"
></app-manage-mfa>
`
})
export class ManageMfaContainer {
uri: string;
qrCode: string;
constructor(private service: UserService) { }
constructor(private service: UserService) {}
generateMfa() {
this.service.generateMfa().toPromise().then(resp => {
this.uri = resp.provisioning_uri;
QRCode.toDataURL(this.uri).then(dataUrl => this.qrCode = dataUrl);
});
this.service
.generateMfa()
.toPromise()
.then(resp => {
this.uri = resp.provisioning_uri;
QRCode.toDataURL(this.uri).then(dataUrl => (this.qrCode = dataUrl));
});
}
}
......@@ -2,7 +2,7 @@ import { InlineSVGModule } from "ng-inline-svg";
import { HttpClientModule } from "@angular/common/http";
import { storiesOf, moduleMetadata } from "@storybook/angular";
import { action } from "@storybook/addon-actions";
import { boolean, select, withKnobs } from "@storybook/addon-knobs";
import { boolean, select, number, withKnobs } from "@storybook/addon-knobs";
import { StoreModule } from "@ngrx/store";
import { NgrxFormsModule } from "ngrx-forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
......@@ -249,6 +249,8 @@ storiesOf("Account", module)
.add("Multi Factor Auth", () => ({
component: ManageMfaComponent,
props: {
stepDownloadApp: number("step", 0),
mfaEnabled: boolean("Two Factor Enabled", false),
uri:
"otpauth://totp/Passit:test%40example.com?secret=JE4ZRQPUIWJV6APW&issuer=Passit",
qrCode:
......
......@@ -8,4 +8,8 @@
&--less-bottom-margin {
margin-bottom: 20px;
}
&--no-bottom-margin {
margin-bottom: 0;
}
}
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