i18n placeholder support. 2fa options selection.

src/app/accounts/two-factor-options.component.html

@@ -0,0 +1,28 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body">
+                <div class="box">
+                    <div class="box-header">
+                        {{'twoStepOptions' | i18n}}
+                    </div>
+                    <div class="box-content">
+                        <a href="#" appStopClick *ngFor="let p of providers" class="box-content-row"
+                           (click)="choose(p)">
+                            <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="img-right">
+                            <span class="text">{{p.name}}</span>
+                            <span class="detail">{{p.description}}</span>
+                        </a>
+                        <a href="#" appStopClick class="box-content-row" (click)="recover()">
+                            <span class="text">{{'recoveryCodeTitle' | i18n}}</span>
+                            <span class="detail">{{'recoveryCodeDesc' | i18n}}</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/accounts/two-factor-options.component.ts

@@ -0,0 +1,70 @@
+import * as template from './two-factor-options.component.html';
+
+import {
+    Component,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+} from '@angular/core';
+
+import { Router } from '@angular/router';
+
+import { Angulartics2 } from 'angulartics2';
+import { ToasterService } from 'angular2-toaster';
+
+import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
+
+import { AuthService } from 'jslib/abstractions/auth.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import { TwoFactorProviders } from 'jslib/services/auth.service';
+
+@Component({
+    selector: 'app-two-factor-options',
+    template: template,
+})
+export class TwoFactorOptionsComponent implements OnInit {
+    @Output() onProviderSelected = new EventEmitter<TwoFactorProviderType>();
+    @Output() onRecoverSelected = new EventEmitter();
+
+    providers: any[] = [];
+
+    constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
+        private toasterService: ToasterService, private i18nService: I18nService,
+        private platformUtilsService: PlatformUtilsService) { }
+
+    ngOnInit() {
+        if (this.authService.twoFactorProviders.has(TwoFactorProviderType.Authenticator)) {
+            this.providers.push(TwoFactorProviders[TwoFactorProviderType.Authenticator]);
+        }
+
+        if (this.authService.twoFactorProviders.has(TwoFactorProviderType.Yubikey)) {
+            this.providers.push(TwoFactorProviders[TwoFactorProviderType.Yubikey]);
+        }
+
+        if (this.authService.twoFactorProviders.has(TwoFactorProviderType.Duo)) {
+            this.providers.push(TwoFactorProviders[TwoFactorProviderType.Duo]);
+        }
+
+        if (this.authService.twoFactorProviders.has(TwoFactorProviderType.U2f) &&
+            this.platformUtilsService.supportsU2f(window)) {
+            this.providers.push(TwoFactorProviders[TwoFactorProviderType.U2f]);
+        }
+
+        if (this.authService.twoFactorProviders.has(TwoFactorProviderType.Email)) {
+            this.providers.push(TwoFactorProviders[TwoFactorProviderType.Email]);
+        }
+    }
+
+    choose(p: any) {
+        this.onProviderSelected.emit(p.type);
+    }
+
+    recover() {
+        this.analytics.eventTrack.next({ action: 'Selected Recover' });
+        this.platformUtilsService.launchUri('https://help.bitwarden.com/article/lost-two-step-device/');
+        this.onRecoverSelected.emit();
+    }
+}

src/app/accounts/two-factor.component.html

@@ -2,7 +2,9 @@
     <div class="content">
         <h1>{{title}}</h1>
         <p *ngIf="selectedProviderType === providerType.Authenticator">{{'enterVerificationCodeApp' | i18n}}</p>
-        <p *ngIf="selectedProviderType === providerType.Email">{{'enterVerificationCodeEmail' | i18n}}</p>
+        <p *ngIf="selectedProviderType === providerType.Email">
+            {{'enterVerificationCodeEmail' | i18n : twoFactorEmail}}
+        </p>
         <div class="box last"
              *ngIf="selectedProviderType === providerType.Email || selectedProviderType === providerType.Authenticator">
             <div class="box-content">
@@ -43,7 +45,7 @@
                 </div>
             </div>
         </ng-container>
-        <div class="box last" *ngIf="selectedProviderType === null">
+        <div class="box last" *ngIf="!selectedProviderType">
             <div class="box-content">
                 <div class="box-content-row">
                     <p>{{'noTwoStepProviders' | i18n}}</p>
@@ -52,7 +54,8 @@
             </div>
         </div>
         <div class="buttons">
-            <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick>
+            <button type="submit" class="btn primary block" [disabled]="form.loading" appBlurClick
+                    *ngIf="selectedProviderType && selectedProviderType !== providerType.Duo">
                 <span [hidden]="form.loading"><i class="fa fa-sign-in"></i> {{'continue' | i18n}}</span>
                 <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
             </button>
@@ -60,6 +63,11 @@
         </div>
         <div class="sub-options">
             <a href="#" appStopClick (click)="anotherMethod()">{{'useAnotherTwoStepMethod' | i18n}}</a>
+            <a href="#" appStopClick (click)="sendEmail(true)" [appApiAction]="emailPromise"
+               *ngIf="selectedProviderType === providerType.Email">
+                {{'sendVerificationCodeEmailAgain' | i18n}}
+            </a>
         </div>
     </div>
 </form>
+<ng-template #twoFactorOptions></ng-template>

src/app/accounts/two-factor.component.ts

@@ -2,7 +2,10 @@ import * as template from './two-factor.component.html';
 
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
+    ViewChild,
+    ViewContainerRef,
 } from '@angular/core';
 
 import { Router } from '@angular/router';
@@ -10,6 +13,9 @@ import { Router } from '@angular/router';
 import { Angulartics2 } from 'angulartics2';
 import { ToasterService } from 'angular2-toaster';
 
+import { TwoFactorOptionsComponent } from './two-factor-options.component';
+import { ModalComponent } from '../modal.component';
+
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 
 import { TwoFactorEmailRequest } from 'jslib/models/request/twoFactorEmailRequest';
@@ -26,6 +32,8 @@ import { TwoFactorProviders } from 'jslib/services/auth.service';
     template: template,
 })
 export class TwoFactorComponent implements OnInit {
+    @ViewChild('twoFactorOptions', { read: ViewContainerRef }) twoFactorOptionsModal: ViewContainerRef;
+
     token: string = '';
     remember: boolean = false;
     u2fReady: boolean = false;
@@ -35,14 +43,14 @@ export class TwoFactorComponent implements OnInit {
     u2fSupported: boolean = false;
     u2f: any = null;
     title: string = '';
-    useVerificationCode: boolean = false;
     twoFactorEmail: string = null;
     formPromise: Promise<any>;
     emailPromise: Promise<any>;
 
     constructor(private authService: AuthService, private router: Router, private analytics: Angulartics2,
         private toasterService: ToasterService, private i18nService: I18nService, private apiService: ApiService,
-        private platformUtilsService: PlatformUtilsService) {
+        private platformUtilsService: PlatformUtilsService,
+        private componentFactoryResolver: ComponentFactoryResolver) {
         this.u2fSupported = this.platformUtilsService.supportsU2f(window);
     }
 
@@ -58,10 +66,6 @@ export class TwoFactorComponent implements OnInit {
     }
 
     async init() {
-        this.useVerificationCode = this.selectedProviderType === TwoFactorProviderType.Email ||
-            this.selectedProviderType === TwoFactorProviderType.Authenticator ||
-            this.selectedProviderType === TwoFactorProviderType.Yubikey;
-
         if (this.selectedProviderType == null) {
             this.title = this.i18nService.t('loginUnavailable');
             return;
@@ -135,17 +139,36 @@ export class TwoFactorComponent implements OnInit {
             return;
         }
 
+        if (this.emailPromise != null) {
+            return;
+        }
+
         try {
             const request = new TwoFactorEmailRequest(this.authService.email, this.authService.masterPasswordHash);
             this.emailPromise = this.apiService.postTwoFactorEmail(request);
             await this.emailPromise;
             if (doToast) {
-                // TODO toast
+                this.toasterService.popAsync('success', null,
+                    this.i18nService.t('verificationCodeEmailSent', this.twoFactorEmail));
             }
         } catch { }
+
+        this.emailPromise = null;
     }
 
     anotherMethod() {
-        // TODO
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        const modal = this.twoFactorOptionsModal.createComponent(factory).instance;
+        const childComponent = modal.show<TwoFactorOptionsComponent>(TwoFactorOptionsComponent,
+            this.twoFactorOptionsModal);
+
+        childComponent.onProviderSelected.subscribe(async (provider: TwoFactorProviderType) => {
+            modal.close();
+            this.selectedProviderType = provider;
+            await this.init();
+        });
+        childComponent.onRecoverSelected.subscribe(() => {
+            modal.close();
+        });
     }
 }