1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00

PM-4960 Migrate Verify Recover Delete Component (#9171)

* PM-4960 Migrate Verify Recover Delete Component

* PM-4960 Minor fix

* PM-4960 Addressed review comments
This commit is contained in:
KiruthigaManivannan 2024-06-19 20:48:31 +05:30 committed by GitHub
parent a427ec371a
commit dfd4479a9c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 41 additions and 61 deletions

View File

@ -1,34 +1,16 @@
<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 btn-submit"
[disabled]="form.loading"
>
<span>{{ "deleteAccount" | i18n }}</span>
<i
class="bwi bwi-spinner bwi-spin"
title="{{ 'loading' | i18n }}"
aria-hidden="true"
></i>
</button>
<a routerLink="/login" class="btn btn-outline-secondary btn-block ml-2 mt-0">
{{ "cancel" | i18n }}
</a>
</div>
</div>
</div>
</div>
<form [bitSubmit]="submit" [formGroup]="formGroup">
<app-callout type="warning">{{ "deleteAccountWarning" | i18n }}</app-callout>
<p bitTypography="body1" class="tw-text-center">
<strong>{{ email }}</strong>
</p>
<p bitTypography="body1">{{ "deleteRecoverConfirmDesc" | i18n }}</p>
<hr />
<div class="tw-flex tw-gap-2">
<button type="submit" bitButton bitFormButton buttonType="danger" [block]="true">
{{ "deleteAccount" | i18n }}
</button>
<a bitButton buttonType="secondary" routerLink="/login" [block]="true">
{{ "cancel" | i18n }}
</a>
</div>
</form>

View File

@ -1,11 +1,11 @@
import { Component, OnInit } from "@angular/core";
import { FormGroup } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { first } from "rxjs/operators";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { VerifyDeleteRecoverRequest } from "@bitwarden/common/models/request/verify-delete-recover.request";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@Component({
@ -15,10 +15,10 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class VerifyRecoverDeleteComponent implements OnInit {
email: string;
formPromise: Promise<any>;
private userId: string;
private token: string;
protected formGroup = new FormGroup({});
constructor(
private router: Router,
@ -26,7 +26,6 @@ export class VerifyRecoverDeleteComponent implements OnInit {
private platformUtilsService: PlatformUtilsService,
private i18nService: I18nService,
private route: ActivatedRoute,
private logService: LogService,
) {}
ngOnInit() {
@ -37,28 +36,19 @@ export class VerifyRecoverDeleteComponent implements OnInit {
this.token = qParams.token;
this.email = qParams.email;
} else {
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate(["/"]);
await this.router.navigate(["/"]);
}
});
}
async submit() {
try {
const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
this.formPromise = this.apiService.postAccountRecoverDeleteToken(request);
await this.formPromise;
this.platformUtilsService.showToast(
"success",
this.i18nService.t("accountDeleted"),
this.i18nService.t("accountDeletedDesc"),
);
// FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.router.navigate(["/"]);
} catch (e) {
this.logService.error(e);
}
}
submit = async () => {
const request = new VerifyDeleteRecoverRequest(this.userId, this.token);
await this.apiService.postAccountRecoverDeleteToken(request);
this.platformUtilsService.showToast(
"success",
this.i18nService.t("accountDeleted"),
this.i18nService.t("accountDeletedDesc"),
);
await this.router.navigate(["/"]);
};
}

View File

@ -136,12 +136,6 @@ const routes: Routes = [
data: { titleId: "acceptFamilySponsorship", doNotSaveUrl: false } satisfies DataProperties,
},
{ path: "recover", pathMatch: "full", redirectTo: "recover-2fa" },
{
path: "verify-recover-delete",
component: VerifyRecoverDeleteComponent,
canActivate: [UnauthGuard],
data: { titleId: "deleteAccount" } satisfies DataProperties,
},
{
path: "verify-recover-delete-org",
component: VerifyRecoverDeleteOrgComponent,
@ -330,6 +324,20 @@ const routes: Routes = [
},
],
},
{
path: "verify-recover-delete",
canActivate: [unauthGuardFn()],
children: [
{
path: "",
component: VerifyRecoverDeleteComponent,
data: {
pageTitle: "deleteAccount",
titleId: "deleteAccount",
} satisfies DataProperties & AnonLayoutWrapperData,
},
],
},
{
path: "remove-password",
component: RemovePasswordComponent,