email 2fa setup

src/app/app.module.ts

@@ -44,6 +44,7 @@ import { PurgeVaultComponent } from './settings/purge-vault.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component';
 import { TwoFactorDuoComponent } from './settings/two-factor-duo.component';
+import { TwoFactorEmailComponent } from './settings/two-factor-email.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
 import { TwoFactorYubiKeyComponent } from './settings/two-factor-yubikey.component';
 
@@ -149,6 +150,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         TwoFactorAuthenticatorComponent,
         TwoFactorComponent,
         TwoFactorDuoComponent,
+        TwoFactorEmailComponent,
         TwoFactorOptionsComponent,
         TwoFactorYubiKeyComponent,
         TwoFactorSetupComponent,
@@ -171,6 +173,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         ShareComponent,
         TwoFactorAuthenticatorComponent,
         TwoFactorDuoComponent,
+        TwoFactorEmailComponent,
         TwoFactorOptionsComponent,
         TwoFactorYubiKeyComponent,
     ],

src/app/settings/two-factor-email.component.html

@@ -0,0 +1,72 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">
+                    {{'twoStepLogin' | i18n}}
+                    <small>{{'emailTitle' | i18n}}</small>
+                </h2>
+                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <form #authForm (ngSubmit)="auth()" [appApiAction]="authPromise" ngNativeValidate *ngIf="!authed">
+                <div class="modal-body">
+                    <p>{{'twoStepLoginAuthDesc' | i18n}}</p>
+                    <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                    <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
+                        appAutoFocus>
+                </div>
+                <div class="modal-footer">
+                    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="authForm.loading">
+                        <i class="fa fa-spinner fa-spin"></i>
+                        <span>{{'continue' | i18n}}</span>
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+                </div>
+            </form>
+            <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
+                <div class="modal-body">
+                    <ng-container *ngIf="enabled">
+                        <app-callout type="success" title="{{'enabled' | i18n}}" icon="fa-check-circle">
+                            {{'twoStepLoginProviderEnabled' | i18n}}
+                        </app-callout>
+                        <strong>{{'email' | i18n}}:</strong> {{email}}
+                    </ng-container>
+                    <ng-container *ngIf="!enabled">
+                        <p class="d-flex">
+                            <span class="mr-3">{{'twoFactorEmailDesc' | i18n}}</span>
+                            <img src="../../images/two-factor/1.png" class="float-right ml-auto" alt="">
+                        </p>
+                        <div class="form-group">
+                            <label for="email">1. {{'twoFactorEmailEnterEmail' | i18n}}</label>
+                            <input id="email" type="text" name="Email" class="form-control" [(ngModel)]="email" required>
+                        </div>
+                        <div class="mb-3 d-flex">
+                            <button #sendBtn type="button" class="btn btn-outline-primary btn-sm btn-submit align-self-start" appBlurClick (click)="sendEmail()"
+                                [appApiAction]="emailPromise" [disabled]="sendBtn.loading">
+                                <i class="fa fa-spinner fa-spin"></i>
+                                <span>{{'sendEmail' | i18n}}</span>
+                            </button>
+                            <span class="text-success ml-3" *ngIf="sentEmail">
+                                {{'verificationCodeEmailSent' | i18n : sentEmail}}
+                            </span>
+                        </div>
+                        <div class="form-group">
+                            <label for="token">2. {{'twoFactorEmailEnterCode' | i18n}}</label>
+                            <input id="token" type="text" name="Token" class="form-control" [(ngModel)]="token" required appInputVerbatim>
+                        </div>
+                    </ng-container>
+                </div>
+                <div class="modal-footer">
+                    <button appBlurClick type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+                        <i class="fa fa-spinner fa-spin"></i>
+                        <span *ngIf="!enabled">{{'save' | i18n}}</span>
+                        <span *ngIf="enabled">{{'disable' | i18n}}</span>
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

src/app/settings/two-factor-email.component.ts

@@ -0,0 +1,126 @@
+import {
+    Component,
+    EventEmitter,
+    Output,
+} from '@angular/core';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { CryptoService } from 'jslib/abstractions/crypto.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { UserService } from 'jslib/abstractions/user.service';
+
+import { PasswordVerificationRequest } from 'jslib/models/request/passwordVerificationRequest';
+import { TwoFactorProviderRequest } from 'jslib/models/request/twoFactorProviderRequest';
+
+import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
+import { UpdateTwoFactorEmailRequest } from 'jslib/models/request/updateTwoFactorEmailRequest';
+import { TwoFactorEmailResponse } from 'jslib/models/response/twoFactorEmailResponse';
+import { TwoFactorEmailRequest } from 'jslib/models/request';
+
+@Component({
+    selector: 'app-two-factor-email',
+    templateUrl: 'two-factor-email.component.html',
+})
+export class TwoFactorEmailComponent {
+    @Output() onUpdated = new EventEmitter<boolean>();
+
+    enabled = false;
+    authed = false;
+    email: string;
+    token: string;
+    masterPassword: string;
+    sentEmail: string;
+
+    authPromise: Promise<any>;
+    formPromise: Promise<any>;
+    emailPromise: Promise<any>;
+
+    private masterPasswordHash: string;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private cryptoService: CryptoService, private platformUtilsService: PlatformUtilsService,
+        private userService: UserService) { }
+
+    async auth() {
+        if (this.masterPassword == null || this.masterPassword === '') {
+            this.toasterService.popAsync('error', this.i18nService.t('errorOccurred'),
+                this.i18nService.t('masterPassRequired'));
+            return;
+        }
+
+        const request = new PasswordVerificationRequest();
+        request.masterPasswordHash = this.masterPasswordHash =
+            await this.cryptoService.hashPassword(this.masterPassword, null);
+        try {
+            this.authPromise = this.apiService.getTwoFactorEmail(request);
+            const response = await this.authPromise;
+            this.authed = true;
+            await this.processResponse(response);
+        } catch { }
+    }
+
+    async submit() {
+        if (this.enabled) {
+            this.disable();
+        } else {
+            this.enable();
+        }
+    }
+
+    async sendEmail() {
+        try {
+            const request = new TwoFactorEmailRequest(this.email, this.masterPasswordHash);
+            this.emailPromise = this.apiService.postTwoFactorEmailSetup(request);
+            await this.emailPromise;
+            this.sentEmail = this.email;
+        } catch { }
+    }
+
+    private async enable() {
+        const request = new UpdateTwoFactorEmailRequest();
+        request.masterPasswordHash = this.masterPasswordHash;
+        request.email = this.email;
+        request.token = this.token;
+        try {
+            this.formPromise = this.apiService.putTwoFactorEmail(request);
+            const response = await this.formPromise;
+            await this.processResponse(response);
+            this.analytics.eventTrack.next({ action: 'Enabled Two-step Email' });
+            this.onUpdated.emit(true);
+        } catch { }
+    }
+
+    private async disable() {
+        const confirmed = await this.platformUtilsService.showDialog(this.i18nService.t('twoStepDisableDesc'),
+            this.i18nService.t('disable'), this.i18nService.t('yes'), this.i18nService.t('no'), 'warning');
+        if (!confirmed) {
+            return;
+        }
+
+        try {
+            const request = new TwoFactorProviderRequest();
+            request.masterPasswordHash = this.masterPasswordHash;
+            request.type = TwoFactorProviderType.Email;
+            this.formPromise = this.apiService.putTwoFactorDisable(request);
+            await this.formPromise;
+            this.enabled = false;
+            this.analytics.eventTrack.next({ action: 'Disabled Two-step Email' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
+            this.onUpdated.emit(false);
+        } catch { }
+    }
+
+    private async processResponse(response: TwoFactorEmailResponse) {
+        this.token = null;
+        this.email = response.email;
+        this.enabled = response.enabled;
+        if (!this.enabled && (this.email == null || this.email === '')) {
+            this.email = await this.userService.getEmail();
+        }
+    }
+}

src/app/settings/two-factor-setup.component.ts

@@ -18,6 +18,7 @@ import { ModalComponent } from '../modal.component';
 
 import { TwoFactorAuthenticatorComponent } from './two-factor-authenticator.component';
 import { TwoFactorDuoComponent } from './two-factor-duo.component';
+import { TwoFactorEmailComponent } from './two-factor-email.component';
 import { TwoFactorYubiKeyComponent } from './two-factor-yubikey.component';
 
 @Component({
@@ -30,6 +31,7 @@ export class TwoFactorSetupComponent implements OnInit {
     @ViewChild('yubikeyTemplate', { read: ViewContainerRef }) yubikeyModalRef: ViewContainerRef;
     @ViewChild('u2fTemplate', { read: ViewContainerRef }) u2fModalRef: ViewContainerRef;
     @ViewChild('duoTemplate', { read: ViewContainerRef }) duoModalRef: ViewContainerRef;
+    @ViewChild('emailTemplate', { read: ViewContainerRef }) emailModalRef: ViewContainerRef;
 
     providers: any[] = [];
     premium: boolean;
@@ -100,6 +102,12 @@ export class TwoFactorSetupComponent implements OnInit {
                     this.updateStatus(enabled, TwoFactorProviderType.Duo);
                 });
                 break;
+            case TwoFactorProviderType.Email:
+                const emailComp = this.openModal(this.emailModalRef, TwoFactorEmailComponent);
+                emailComp.onUpdated.subscribe((enabled: boolean) => {
+                    this.updateStatus(enabled, TwoFactorProviderType.Email);
+                });
+                break;
             default:
                 break;
         }

src/locales/en/messages.json

@@ -1086,5 +1086,17 @@
   },
   "twoFactorDuoApiHostname": {
     "message": "API Hostname"
+  },
+  "twoFactorEmailDesc": {
+    "message": "Follow these steps to set up two-step login with email:"
+  },
+  "twoFactorEmailEnterEmail": {
+    "message": "Enter the email that you wish to receive verification codes"
+  },
+  "twoFactorEmailEnterCode": {
+    "message": "Enter the resulting 6 digit verification code from the email"
+  },
+  "sendEmail": {
+    "message": "Send Email"
   }
 }