recover 2fa

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

@@ -0,0 +1,39 @@
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" class="container" ngNativeValidate>
+    <div class="row justify-content-md-center mt-5">
+        <div class="col-5">
+            <p class="lead text-center mb-4">{{'recoverAccountTwoStep' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <p>{{'recoverAccountTwoStepDesc' | i18n}}
+                        <a href="https://help.bitwarden.com/article/lost-two-step-device/" target="_blank" rel="noopener">{{'learnMore' | i18n}}</a>
+                    </p>
+                    <div class="form-group">
+                        <label for="email">{{'emailAddress' | i18n}}</label>
+                        <input id="email" class="form-control" type="text" name="Email" [(ngModel)]="email" required appAutofocus inputmode="email"
+                            appInputVerbatim="false">
+                    </div>
+                    <div class="form-group">
+                        <label for="masterPassword">{{'masterPass' | i18n}}</label>
+                        <input id="masterPassword" type="password" name="MasterPassword" class="form-control" [(ngModel)]="masterPassword" required
+                            appInputVerbatim>
+                    </div>
+                    <div class="form-group">
+                        <label for="recoveryCode">{{'recoveryCodeTitle' | i18n}}</label>
+                        <input id="recoveryCode" class="text-monospace form-control" type="text" name="RecoveryCode" [(ngModel)]="recoveryCode" required
+                            appInputVerbatim>
+                    </div>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-primary btn-block" [disabled]="form.loading" appBlurClick>
+                            <span [hidden]="form.loading">{{'submit' | i18n}}</span>
+                            <i class="fa fa-spinner fa-spin" [hidden]="!form.loading"></i>
+                        </button>
+                        <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
+                            {{'cancel' | i18n}}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

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

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+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 { TwoFactorRecoveryRequest } from 'jslib/models/request/twoFactorRecoveryRequest';
+
+@Component({
+    selector: 'app-recover-two-factor',
+    templateUrl: 'recover-two-factor.component.html',
+})
+export class RecoverTwoFactorComponent {
+    email: string;
+    masterPassword: string;
+    recoveryCode: string;
+    formPromise: Promise<any>;
+
+    constructor(private router: Router, private apiService: ApiService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, private cryptoService: CryptoService) {
+    }
+
+    async submit() {
+        try {
+            const request = new TwoFactorRecoveryRequest();
+            request.recoveryCode = this.recoveryCode.replace(/\s/g, '').toLowerCase();
+            request.email = this.email.toLowerCase();
+            const key = await this.cryptoService.makeKey(this.masterPassword, request.email);
+            request.masterPasswordHash = await this.cryptoService.hashPassword(this.masterPassword, key);
+            this.formPromise = this.apiService.postTwoFactorRecover(request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Recovered 2FA' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('twoStepRecoverDisabled'));
+            this.router.navigate(['/']);
+        } catch { }
+    }
+}

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { AcceptOrganizationComponent } from './accounts/accept-organization.comp
 import { HintComponent } from './accounts/hint.component';
 import { LockComponent } from './accounts/lock.component';
 import { LoginComponent } from './accounts/login.component';
+import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
@@ -74,6 +75,8 @@ const routes: Routes = [
             { path: 'lock', component: LockComponent },
             { path: 'verify-email', component: VerifyEmailTokenComponent },
             { path: 'accept-organization', component: AcceptOrganizationComponent },
+            { path: 'recover', pathMatch: 'full', redirectTo: 'recover-2fa' },
+            { path: 'recover-2fa', component: RecoverTwoFactorComponent, canActivate: [UnauthGuardService] },
         ],
     },
     {

src/app/app.module.ts

@@ -29,6 +29,7 @@ import { AcceptOrganizationComponent } from './accounts/accept-organization.comp
 import { HintComponent } from './accounts/hint.component';
 import { LockComponent } from './accounts/lock.component';
 import { LoginComponent } from './accounts/login.component';
+import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
@@ -206,6 +207,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
         PremiumComponent,
         ProfileComponent,
         PurgeVaultComponent,
+        RecoverTwoFactorComponent,
         RegisterComponent,
         SearchCiphersPipe,
         SearchPipe,

src/locales/en/messages.json

@@ -2122,5 +2122,17 @@
   },
   "rememberEmail": {
     "message": "Remember email"
+  },
+  "recoverAccountTwoStepDesc": {
+    "message": "If you cannot access your account through your normal two-step login methods, you can use your two-step login recovery code to disable all two-step providers on your account."
+  },
+  "recoverAccountTwoStep": {
+    "message": "Recover Account Two-Step Login"
+  },
+  "twoStepRecoverDisabled": {
+    "message": "Two-step login has been disabled on your account."
+  },
+  "learnMore": {
+    "message": "Learn more"
   }
 }