From a59eb8dec7dc1e7cd0db48162bafa2df79ed7606 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Bispo?= Date: Tue, 19 Dec 2023 19:02:19 +0000 Subject: [PATCH] [PM-4048] Update DeleteAccountComponent on Desktop (#6846) * [PM-4048] Use dialog service instead of modal service. Change UI file to use bit-Dialog. Remove from app module into standalone. * [PM-4048] Update app.module imports * [PM-4048] Fix form. * PM-4048 - Delete Account tweak - remove unncessary delete header per discussion with product * PM-4048 - Per CL migration guide, * PM-4048 - (1) Remove button module import from dialog module exports (2) Add CL imports to desktop app module for delete acct dialog comp (3) Update delete acct dialog comp to use bitSubmit * PM-4048 - Remove deprecated data-dismiss as bitDialogClose replaced it in terms of functionality. * PM-4048 - Desktop Delete Acct - update loading button logic to latest CL standards (thanks Will!) * PM-4048 - Must manually show errors to get "User Verification failed" message when user inputs incorrect MP. * PM-4048 - desktop - delete-account.component.html - per PR feedback, remove non-tailwind classes and address missing bitFormButton * PM-4048 - DeleteAccountComponent - per PR feedback, import DialogService using proper import alias. * PM-4048 - delete-account.component.html - per PR feedback, remove no longer needed #form * PM-4048 - delete-account.component.html - remove missed non-tailwind class * PM-4048 - DeleteAccountComponent - per PR feedback, remove try catch as it is unnecessary as the bitSubmit handles errors * add bespoke border to fix color contrast issue * convert delete-account.component and user-verification.component to standalone; revert app module CL imports * run prettier * run prettier again --------- Co-authored-by: Jared Snider <116684653+JaredSnider-Bitwarden@users.noreply.github.com> Co-authored-by: Jared Snider Co-authored-by: William Martin --- apps/desktop/src/app/app.component.ts | 2 +- apps/desktop/src/app/app.module.ts | 14 ++-- .../components/user-verification.component.ts | 7 +- .../src/auth/delete-account.component.html | 69 ++++++++----------- .../src/auth/delete-account.component.ts | 54 ++++++++++----- 5 files changed, 80 insertions(+), 66 deletions(-) diff --git a/apps/desktop/src/app/app.component.ts b/apps/desktop/src/app/app.component.ts index 39a5c185fd..f5d3ec09bb 100644 --- a/apps/desktop/src/app/app.component.ts +++ b/apps/desktop/src/app/app.component.ts @@ -252,7 +252,7 @@ export class AppComponent implements OnInit, OnDestroy { break; } case "deleteAccount": - this.modalService.open(DeleteAccountComponent, { replaceTopModal: true }); + DeleteAccountComponent.open(this.dialogService); break; case "openPasswordHistory": await this.openModal( diff --git a/apps/desktop/src/app/app.module.ts b/apps/desktop/src/app/app.module.ts index 3436e98c99..d57256aac8 100644 --- a/apps/desktop/src/app/app.module.ts +++ b/apps/desktop/src/app/app.module.ts @@ -3,11 +3,11 @@ import "zone.js"; // Register the locales for the application import "../platform/app/locales"; -import { DialogModule } from "@angular/cdk/dialog"; import { NgModule } from "@angular/core"; import { ColorPasswordCountPipe } from "@bitwarden/angular/pipes/color-password-count.pipe"; import { ColorPasswordPipe } from "@bitwarden/angular/pipes/color-password.pipe"; +import { DialogModule } from "@bitwarden/components"; import { AccessibilityCookieComponent } from "../auth/accessibility-cookie.component"; import { SetPinComponent } from "../auth/components/set-pin.component"; @@ -55,7 +55,15 @@ import { AddEditComponent as SendAddEditComponent } from "./tools/send/add-edit. import { SendComponent } from "./tools/send/send.component"; @NgModule({ - imports: [SharedModule, DialogModule, AppRoutingModule, VaultFilterModule, LoginModule], + imports: [ + SharedModule, + AppRoutingModule, + VaultFilterModule, + LoginModule, + DialogModule, + DeleteAccountComponent, + UserVerificationComponent, + ], declarations: [ AccessibilityCookieComponent, AccountSwitcherComponent, @@ -67,7 +75,6 @@ import { SendComponent } from "./tools/send/send.component"; CollectionsComponent, ColorPasswordPipe, ColorPasswordCountPipe, - DeleteAccountComponent, EnvironmentComponent, ExportComponent, FolderAddEditComponent, @@ -92,7 +99,6 @@ import { SendComponent } from "./tools/send/send.component"; TwoFactorComponent, TwoFactorOptionsComponent, UpdateTempPasswordComponent, - UserVerificationComponent, VaultComponent, VaultTimeoutInputComponent, ViewComponent, diff --git a/apps/desktop/src/app/components/user-verification.component.ts b/apps/desktop/src/app/components/user-verification.component.ts index 87b514c416..0a0e075e09 100644 --- a/apps/desktop/src/app/components/user-verification.component.ts +++ b/apps/desktop/src/app/components/user-verification.component.ts @@ -1,11 +1,16 @@ import { animate, style, transition, trigger } from "@angular/animations"; +import { CommonModule } from "@angular/common"; import { Component } from "@angular/core"; -import { NG_VALUE_ACCESSOR } from "@angular/forms"; +import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms"; import { UserVerificationComponent as BaseComponent } from "@bitwarden/angular/auth/components/user-verification.component"; +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { FormFieldModule } from "@bitwarden/components"; @Component({ selector: "app-user-verification", + standalone: true, + imports: [CommonModule, JslibModule, ReactiveFormsModule, FormFieldModule, FormsModule], templateUrl: "user-verification.component.html", providers: [ { diff --git a/apps/desktop/src/auth/delete-account.component.html b/apps/desktop/src/auth/delete-account.component.html index 14e96165c4..8639b0f5be 100644 --- a/apps/desktop/src/auth/delete-account.component.html +++ b/apps/desktop/src/auth/delete-account.component.html @@ -1,43 +1,30 @@ -