authenticator setup

jslib

@@ -1 +1 @@
-Subproject commit 3cc759791e12b7692fc2d2b4be1a2b010eee1c8e
+Subproject commit ec505b8c5508e4c8f6191c946b042a804c73c501

src/app/app.module.ts

@@ -42,6 +42,7 @@ import { OptionsComponent } from './settings/options.component';
 import { ProfileComponent } from './settings/profile.component';
 import { PurgeVaultComponent } from './settings/purge-vault.component';
 import { SettingsComponent } from './settings/settings.component';
+import { TwoFactorAuthenticatorComponent } from './settings/two-factor-authenticator.component';
 import { TwoFactorSetupComponent } from './settings/two-factor-setup.component';
 
 import { ExportComponent } from './tools/export.component';
@@ -143,6 +144,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         StopPropDirective,
         ToolsComponent,
         TrueFalseValueDirective,
+        TwoFactorAuthenticatorComponent,
         TwoFactorComponent,
         TwoFactorOptionsComponent,
         TwoFactorSetupComponent,
@@ -163,6 +165,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         PasswordGeneratorHistoryComponent,
         PurgeVaultComponent,
         ShareComponent,
+        TwoFactorAuthenticatorComponent,
         TwoFactorOptionsComponent,
     ],
     providers: [],

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

@@ -0,0 +1,83 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">
+                    {{'twoStepLogin' | i18n}}
+                    <small>{{'authenticatorAppTitle' | 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">
+                        <p>{{'twoStepAuthenticatorDesc' | i18n}}</p>
+                        <p>
+                            <strong>1. {{'twoStepAuthenticatorDownloadApp' | i18n}}</strong>
+                        </p>
+                    </ng-container>
+                    <ng-container *ngIf="enabled">
+                        <app-callout type="success" title="{{'enabled' | i18n}}" icon="fa-check-circle">
+                            <p>{{'twoStepLoginProviderEnabled' | i18n}}</p>
+                            {{'twoStepAuthenticatorReaddDesc' | i18n}}
+                        </app-callout>
+                        <p>{{'twoStepAuthenticatorNeedApp' | i18n}}</p>
+                    </ng-container>
+                    <ul class="fa-ul">
+                        <li>
+                            <i class="fa-li fa fa-apple"></i>{{'iosDevices' | i18n}}:
+                            <a href="https://itunes.apple.com/us/app/authy/id494168017?mt=8" target="_blank" rel="noopener">Authy</a>
+                        </li>
+                        <li>
+                            <i class="fa-li fa fa-android"></i>{{'androidDevices' | i18n}}:
+                            <a href="https://play.google.com/store/apps/details?id=com.authy.authy" target="_blank" rel="noopener">Authy</a>
+                        </li>
+                        <li>
+                            <i class="fa-li fa fa-windows"></i>{{'windowsDevices' | i18n}}:
+                            <a href="https://www.microsoft.com/p/authenticator/9wzdncrfj3rj" target="_blank" rel="noopener">Microsoft Authenticator</a>
+                        </li>
+                    </ul>
+                    <p>{{'twoStepAuthenticatorAppsRecommended' | i18n}}</p>
+                    <p *ngIf="!enabled">
+                        <strong>2. {{'twoStepAuthenticatorScanCode' | i18n}}</strong>
+                    </p>
+                    <hr *ngIf="enabled">
+                    <p class="text-center" [ngClass]="{'mb-0': enabled}">
+                        <img [src]="qr" width="160" height="160" alt="">
+                        <br>
+                        <code title="{{'key' | i18n}}">{{key}}</code>
+                    </p>
+                    <ng-container *ngIf="!enabled">
+                        <label for="token">3. {{'twoStepAuthenticatorEnterCode' | i18n}}</label>
+                        <input id="token" type="text" name="Token" class="form-control" [(ngModel)]="token" required>
+                    </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-authenticator.component.ts

@@ -0,0 +1,116 @@
+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 { UpdateTwoFactorAuthenticatorRequest } from 'jslib/models/request/updateTwoFactorAuthenticatorRequest';
+import { TwoFactorAuthenticatorResponse } from 'jslib/models/response/twoFactorAuthenticatorResponse';
+
+import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
+
+@Component({
+    selector: 'app-two-factor-authenticator',
+    templateUrl: 'two-factor-authenticator.component.html',
+})
+export class TwoFactorAuthenticatorComponent {
+    @Output() onUpdated = new EventEmitter<boolean>();
+
+    enabled = false;
+    authed = false;
+    key: string;
+    qr: string;
+    token: string;
+    masterPassword: string;
+
+    authPromise: Promise<any>;
+    formPromise: Promise<any>;
+
+    private masterPasswordHash: string;
+
+    constructor(private apiService: ApiService, private i18nService: I18nService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private cryptoService: CryptoService, private userService: UserService,
+        private platformUtilsService: PlatformUtilsService) { }
+
+    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.getTwoFactorAuthenticator(request);
+            const response = await this.authPromise;
+            this.authed = true;
+            await this.processResponse(response);
+        } catch { }
+    }
+
+    async submit() {
+        if (this.enabled) {
+            this.disable();
+        } else {
+            this.enable();
+        }
+    }
+
+    private async enable() {
+        const request = new UpdateTwoFactorAuthenticatorRequest();
+        request.masterPasswordHash = this.masterPasswordHash;
+        request.token = this.token;
+        request.key = this.key;
+        try {
+            this.formPromise = this.apiService.putTwoFactorAuthenticator(request);
+            const response = await this.formPromise;
+            await this.processResponse(response);
+            this.analytics.eventTrack.next({ action: 'Enabled Two-step Authenticator' });
+            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.Authenticator;
+            this.formPromise = this.apiService.putTwoFactorDisable(request);
+            await this.formPromise;
+            this.enabled = false;
+            this.analytics.eventTrack.next({ action: 'Disabled Two-step Authenticator' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepDisabled'));
+            this.onUpdated.emit(false);
+        } catch { }
+    }
+
+    private async processResponse(response: TwoFactorAuthenticatorResponse) {
+        this.token = null;
+        this.enabled = response.enabled;
+        this.key = response.key;
+        this.qr = 'https://chart.googleapis.com/chart?chs=160x160&chld=L|0&cht=qr&chl=otpauth://totp/' +
+            'Bitwarden:' + encodeURIComponent(await this.userService.getEmail()) +
+            '%3Fsecret=' + encodeURIComponent(this.key) +
+            '%26issuer=Bitwarden';
+    }
+}

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

@@ -27,9 +27,16 @@
             {{p.description}}
         </div>
         <div class="ml-auto">
-            <button type="button" class="btn btn-outline-secondary btn-sm" [disabled]="!premium && p.premium">
+            <button type="button" class="btn btn-outline-secondary btn-sm" [disabled]="!premium && p.premium" (click)="manage(p.type)">
                 {{'manage' | i18n}}
             </button>
         </div>
     </li>
 </ul>
+
+<ng-template #authenticatorTemplate></ng-template>
+<ng-template #recoveryTemplate></ng-template>
+<ng-template #duoTemplate></ng-template>
+<ng-template #emailTemplate></ng-template>
+<ng-template #yubikeyTemplate></ng-template>
+<ng-template #u2fTemplate></ng-template>

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

@@ -1,31 +1,42 @@
 import {
     Component,
+    ComponentFactoryResolver,
     OnInit,
+    Type,
+    ViewChild,
+    ViewContainerRef,
 } from '@angular/core';
 
-import { ToasterService } from 'angular2-toaster';
-import { Angulartics2 } from 'angulartics2';
-
 import { ApiService } from 'jslib/abstractions/api.service';
-import { I18nService } from 'jslib/abstractions/i18n.service';
 import { TokenService } from 'jslib/abstractions/token.service';
 
 import { TwoFactorProviders } from 'jslib/services/auth.service';
 
 import { TwoFactorProviderType } from 'jslib/enums/twoFactorProviderType';
 
+import { ModalComponent } from '../modal.component';
+
+import { TwoFactorAuthenticatorComponent } from './two-factor-authenticator.component';
+
 @Component({
     selector: 'app-two-factor-setup',
     templateUrl: 'two-factor-setup.component.html',
 })
 export class TwoFactorSetupComponent implements OnInit {
+    @ViewChild('recoveryTemplate', { read: ViewContainerRef }) recoveryModalRef: ViewContainerRef;
+    @ViewChild('authenticatorTemplate', { read: ViewContainerRef }) authenticatorModalRef: ViewContainerRef;
+    @ViewChild('yubikeyTemplate', { read: ViewContainerRef }) yubikeyModalRef: ViewContainerRef;
+    @ViewChild('u2fTemplate', { read: ViewContainerRef }) u2fModalRef: ViewContainerRef;
+    @ViewChild('duoTemplate', { read: ViewContainerRef }) duoModalRef: ViewContainerRef;
+
     providers: any[] = [];
     premium: boolean;
     loading = true;
 
-    constructor(private apiService: ApiService, private i18nService: I18nService,
-        private analytics: Angulartics2, private toasterService: ToasterService,
-        private tokenService: TokenService) { }
+    private modal: ModalComponent = null;
+
+    constructor(private apiService: ApiService, private tokenService: TokenService,
+        private componentFactoryResolver: ComponentFactoryResolver) { }
 
     async ngOnInit() {
         this.premium = this.tokenService.getPremium();
@@ -66,4 +77,43 @@ export class TwoFactorSetupComponent implements OnInit {
         });
         this.loading = false;
     }
+
+    manage(type: TwoFactorProviderType) {
+        switch (type) {
+            case TwoFactorProviderType.Authenticator:
+                const component = this.openModal(this.authenticatorModalRef, TwoFactorAuthenticatorComponent);
+                component.onUpdated.subscribe((enabled: boolean) => {
+                    this.updateStatus(enabled, TwoFactorProviderType.Authenticator)
+                });
+                break;
+            default:
+                break;
+        }
+    }
+
+    private openModal<T>(ref: ViewContainerRef, type: Type<T>): T {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = ref.createComponent(factory).instance;
+        const childComponent = this.modal.show<T>(type, ref);
+
+        this.modal.onClosed.subscribe(() => {
+            this.modal = null;
+        });
+        return childComponent;
+    }
+
+    private updateStatus(enabled: boolean, type: TwoFactorProviderType) {
+        if (!enabled && this.modal != null) {
+            this.modal.close();
+        }
+        this.providers.forEach((p) => {
+            if (p.type === type) {
+                p.enabled = enabled;
+            }
+        });
+    }
 }

src/locales/en/messages.json

@@ -978,5 +978,53 @@
   },
   "manage": {
     "message": "Manage"
+  },
+  "disable": {
+    "message": "Disable"
+  },
+  "twoStepLoginProviderEnabled": {
+    "message": "This two-step login provider is enabled on your account."
+  },
+  "twoStepLoginAuthDesc": {
+    "message": "Enter your master password to modify two-step login settings."
+  },
+  "twoStepAuthenticatorDesc": {
+    "message": "Follow these steps to set up two-step login with an authenticator app:"
+  },
+  "twoStepAuthenticatorDownloadApp": {
+    "message": "Download a two-step authenticator app"
+  },
+  "twoStepAuthenticatorNeedApp": {
+    "message": "Need a two-step authenticator app? Download one of the following"
+  },
+  "iosDevices": {
+    "message": "iOS devices"
+  },
+  "androidDevices": {
+    "message": "Android devices"
+  },
+  "windowsDevices": {
+    "message": "Windows devices"
+  },
+  "twoStepAuthenticatorAppsRecommended": {
+    "message": "These apps are recommended, however, other authenticator apps will also work."
+  },
+  "twoStepAuthenticatorScanCode": {
+    "message": "Scan this QR code with your authenticator app"
+  },
+  "key": {
+    "message": "Key"
+  },
+  "twoStepAuthenticatorEnterCode": {
+    "message": "Enter the resulting 6 digit verification code from the app"
+  },
+  "twoStepAuthenticatorReaddDesc": {
+    "message": "In case you need to add it to another device, below is the QR code (or key) required by your authenticator app."
+  },
+  "twoStepDisableDesc": {
+    "message": "Are you sure you want to disable this two-step login provider?"
+  },
+  "twoStepDisabled": {
+    "message": "Two-step login provider disabled."
   }
 }