recover delete request page

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

@@ -0,0 +1,27 @@
+<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">
+                    <p>{{'deleteRecoverDesc' | i18n}}</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>
+                    <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-delete.component.ts

@@ -0,0 +1,36 @@
+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 { I18nService } from 'jslib/abstractions/i18n.service';
+
+import { DeleteRecoverRequest } from 'jslib/models/request/deleteRecoverRequest';
+
+@Component({
+    selector: 'app-recover-delete',
+    templateUrl: 'recover-delete.component.html',
+})
+export class RecoverDeleteComponent {
+    email: string;
+    formPromise: Promise<any>;
+
+    constructor(private router: Router, private apiService: ApiService,
+        private analytics: Angulartics2, private toasterService: ToasterService,
+        private i18nService: I18nService) {
+    }
+
+    async submit() {
+        try {
+            const request = new DeleteRecoverRequest();
+            request.email = this.email.toLowerCase();
+            this.formPromise = this.apiService.postAccountRecoverDelete(request);
+            await this.formPromise;
+            this.analytics.eventTrack.next({ action: 'Started Delete Recovery' });
+            this.toasterService.popAsync('success', null, this.i18nService.t('deleteRecoverEmailSent'));
+            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 { RecoverDeleteComponent } from './accounts/recover-delete.component';
 import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorComponent } from './accounts/two-factor.component';
@@ -77,6 +78,7 @@ const routes: Routes = [
             { path: 'accept-organization', component: AcceptOrganizationComponent },
             { path: 'recover', pathMatch: 'full', redirectTo: 'recover-2fa' },
             { path: 'recover-2fa', component: RecoverTwoFactorComponent, canActivate: [UnauthGuardService] },
+            { path: 'recover-delete', component: RecoverDeleteComponent, 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 { RecoverDeleteComponent } from './accounts/recover-delete.component';
 import { RecoverTwoFactorComponent } from './accounts/recover-two-factor.component';
 import { RegisterComponent } from './accounts/register.component';
 import { TwoFactorOptionsComponent } from './accounts/two-factor-options.component';
@@ -207,6 +208,7 @@ import { SearchPipe } from 'jslib/angular/pipes/search.pipe';
         PremiumComponent,
         ProfileComponent,
         PurgeVaultComponent,
+        RecoverDeleteComponent,
         RecoverTwoFactorComponent,
         RegisterComponent,
         SearchCiphersPipe,

src/locales/en/messages.json

@@ -2134,5 +2134,11 @@
   },
   "learnMore": {
     "message": "Learn more"
+  },
+  "deleteRecoverDesc": {
+    "message": "Enter your email address below to recover and delete your account."
+  },
+  "deleteRecoverEmailSent": {
+    "message": "If your account exists, we've sent you an email with further instructions."
   }
 }