verify recovery delete page

jslib

@@ -1 +1 @@
-Subproject commit 9bc7459eacb55a234da8dd8aa71c059a4cd3e1ee
+Subproject commit 51f041a9596168af0caa5ca94c0c1c6e7568f084

src/app/accounts/verify-recover-delete.component.html

@@ -0,0 +1,26 @@
+<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">{{'deleteAccount' | i18n}}</p>
+            <div class="card">
+                <div class="card-body">
+                    <app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
+                    <p class="text-center">
+                        <strong>{{email}}</strong>
+                    </p>
+                    <p>{{'deleteRecoverConfirmDesc' | i18n}}</p>
+                    <hr>
+                    <div class="d-flex">
+                        <button type="submit" class="btn btn-danger btn-block" [disabled]="form.loading" appBlurClick>
+                            <span [hidden]="form.loading">{{'deleteAccount' | 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/verify-recover-delete.component.ts

@@ -0,0 +1,62 @@
+import {
+    Component,
+    OnInit,
+} from '@angular/core';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
+
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { ApiService } from 'jslib/abstractions/api.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { VerifyDeleteRecoverRequest } from 'jslib/models/request/verifyDeleteRecoverRequest';
+
+@Component({
+    selector: 'app-verify-recover-delete',
+    templateUrl: 'verify-recover-delete.component.html',
+})
+export class VerifyRecoverDeleteComponent implements OnInit {
+    email: string;
+    formPromise: Promise<any>;
+
+    private userId: string;
+    private token: string;
+
+    constructor(private router: Router, private apiService: ApiService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService, private route: ActivatedRoute) {
+    }
+
+    ngOnInit() {
+        let fired = false;
+        this.route.queryParams.subscribe(async (qParams) => {
+            if (fired) {
+                return;
+            }
+            fired = true;
+            if (qParams.userId != null && qParams.token != null && qParams.email != null) {
+                this.userId = qParams.userId;
+                this.token = qParams.token;
+                this.email = qParams.email;
+            } else {
+                this.router.navigate(['/']);
+            }
+        });
+    }
+
+    async submit() {
+        try {
+            const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
+            this.formPromise = this.apiService.postAccountRecoverDeleteToken(request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Recovered Delete' });
+            this.toasterService.popAsync('success', this.i18nService.t('accountDeleted'),
+                this.i18nService.t('accountDeletedDesc'));
+            this.router.navigate(['/']);
+        } catch { }
+    }
+}

src/app/app-routing.module.ts

@@ -17,6 +17,7 @@ import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.compone
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
+import { VerifyRecoverDeleteComponent } from './accounts/verify-recover-delete.component';
 
 import { CollectionsComponent as OrgManageCollectionsComponent } from './organizations/manage/collections.component';
 import { EventsComponent as OrgEventsComponent } from './organizations/manage/events.component';
@@ -75,10 +76,30 @@ const routes: Routes = [
             },
             { path: 'lock', component: LockComponent },
             { path: 'verify-email', component: VerifyEmailTokenComponent },
-            { path: 'accept-organization', component: AcceptOrganizationComponent },
+            {
+                path: 'accept-organization',
+                component: AcceptOrganizationComponent,
+                data: { titleId: 'joinOrganization' },
+            },
             { path: 'recover', pathMatch: 'full', redirectTo: 'recover-2fa' },
-            { path: 'recover-2fa', component: RecoverTwoFactorComponent, canActivate: [UnauthGuardService] },
-            { path: 'recover-delete', component: RecoverDeleteComponent, canActivate: [UnauthGuardService] },
+            {
+                path: 'recover-2fa',
+                component: RecoverTwoFactorComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'recoverAccountTwoStep' },
+            },
+            {
+                path: 'recover-delete',
+                component: RecoverDeleteComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'deleteAccount' },
+            },
+            {
+                path: 'verify-recover-delete',
+                component: VerifyRecoverDeleteComponent,
+                canActivate: [UnauthGuardService],
+                data: { titleId: 'deleteAccount' },
+            },
         ],
     },
     {

src/app/app.module.ts

@@ -35,6 +35,7 @@ import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
 import { VerifyEmailTokenComponent } from './accounts/verify-email-token.component';
+import { VerifyRecoverDeleteComponent } from './accounts/verify-recover-delete.component';
 
 import {
     CollectionAddEditComponent as OrgCollectionAddEditComponent,
@@ -235,6 +236,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
         VaultComponent,
         VerifyEmailComponent,
         VerifyEmailTokenComponent,
+        VerifyRecoverDeleteComponent,
     ],
     entryComponents: [
         AddEditComponent,

src/locales/en/messages.json

@@ -2140,5 +2140,8 @@
   },
   "deleteRecoverEmailSent": {
     "message": "If your account exists, we've sent you an email with further instructions."
+  },
+  "deleteRecoverConfirmDesc": {
+    "message": "You have requested to delete your Bitwarden account. Click the button below to confirm."
   }
 }