diff --git a/apps/desktop/src/app/accounts/delete-account.component.html b/apps/desktop/src/app/accounts/delete-account.component.html new file mode 100644 index 00000000000..1371cee162f --- /dev/null +++ b/apps/desktop/src/app/accounts/delete-account.component.html @@ -0,0 +1,38 @@ + diff --git a/apps/desktop/src/app/accounts/delete-account.component.ts b/apps/desktop/src/app/accounts/delete-account.component.ts new file mode 100644 index 00000000000..c708ba57416 --- /dev/null +++ b/apps/desktop/src/app/accounts/delete-account.component.ts @@ -0,0 +1,48 @@ +import { Component } from "@angular/core"; +import { FormBuilder } from "@angular/forms"; + +import { AccountService } from "@bitwarden/common/abstractions/account/account.service.abstraction"; +import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; +import { LogService } from "@bitwarden/common/abstractions/log.service"; +import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; + +import { Verification } from "../../../../../libs/common/src/types/verification"; + +@Component({ + selector: "app-delete-account", + templateUrl: "delete-account.component.html", +}) +export class DeleteAccountComponent { + formPromise: Promise; + + deleteForm = this.formBuilder.group({ + verification: undefined as Verification | undefined, + }); + + constructor( + private i18nService: I18nService, + private platformUtilsService: PlatformUtilsService, + private formBuilder: FormBuilder, + private accountService: AccountService, + private logService: LogService + ) {} + + get secret() { + return this.deleteForm.get("verification")?.value?.secret; + } + + async submit() { + try { + const verification = this.deleteForm.get("verification").value; + this.formPromise = this.accountService.delete(verification); + await this.formPromise; + this.platformUtilsService.showToast( + "success", + this.i18nService.t("accountDeleted"), + this.i18nService.t("accountDeletedDesc") + ); + } catch (e) { + this.logService.error(e); + } + } +} diff --git a/apps/desktop/src/app/accounts/settings.component.html b/apps/desktop/src/app/accounts/settings.component.html index e9b509e6be8..f775eb9bb44 100644 --- a/apps/desktop/src/app/accounts/settings.component.html +++ b/apps/desktop/src/app/accounts/settings.component.html @@ -108,6 +108,14 @@ + +
+ + + {{ "deleteAccountDesc" | i18n }} + {{ "deleteAccount" | i18n }} + +
diff --git a/apps/desktop/src/app/accounts/settings.component.ts b/apps/desktop/src/app/accounts/settings.component.ts index 6d5f46fe032..94f49c07f8d 100644 --- a/apps/desktop/src/app/accounts/settings.component.ts +++ b/apps/desktop/src/app/accounts/settings.component.ts @@ -18,6 +18,8 @@ import { isWindowsStore } from "@bitwarden/electron/utils"; import { SetPinComponent } from "../components/set-pin.component"; +import { DeleteAccountComponent } from "./delete-account.component"; + @Component({ selector: "app-settings", templateUrl: "settings.component.html", @@ -437,4 +439,8 @@ export class SettingsComponent implements OnInit { this.enableBrowserIntegrationFingerprint ); } + + async openDeleteAccount() { + this.modalService.open(DeleteAccountComponent, { replaceTopModal: true }); + } } diff --git a/apps/desktop/src/app/app.component.ts b/apps/desktop/src/app/app.component.ts index 41d1a626017..ebcc86847a9 100644 --- a/apps/desktop/src/app/app.component.ts +++ b/apps/desktop/src/app/app.component.ts @@ -40,6 +40,7 @@ import { CipherType } from "@bitwarden/common/enums/cipherType"; import { MenuUpdateRequest } from "../main/menu/menu.updater"; +import { DeleteAccountComponent } from "./accounts/delete-account.component"; import { PremiumComponent } from "./accounts/premium.component"; import { SettingsComponent } from "./accounts/settings.component"; import { ExportComponent } from "./vault/export.component"; @@ -153,9 +154,7 @@ export class AppComponent implements OnInit { this.systemService.cancelProcessReload(); break; case "loggedOut": - if (this.modal != null) { - this.modal.close(); - } + this.modalService.closeAll(); this.notificationsService.updateConnection(); this.updateAppMenu(); await this.systemService.clearPendingClipboard(); @@ -180,9 +179,7 @@ export class AppComponent implements OnInit { } break; case "locked": - if (this.modal != null) { - this.modal.close(); - } + this.modalService.closeAll(); if ( message.userId == null || message.userId === (await this.stateService.getUserId()) @@ -223,6 +220,9 @@ export class AppComponent implements OnInit { } break; } + case "deleteAccount": + this.modalService.open(DeleteAccountComponent, { replaceTopModal: true }); + break; case "openPasswordHistory": await this.openModal( PasswordGeneratorHistoryComponent, @@ -368,9 +368,7 @@ export class AppComponent implements OnInit { } async openExportVault() { - if (this.modal != null) { - this.modal.close(); - } + this.modalService.closeAll(); const [modal, childComponent] = await this.modalService.openViewRef( ExportComponent, @@ -388,9 +386,7 @@ export class AppComponent implements OnInit { } async addFolder() { - if (this.modal != null) { - this.modal.close(); - } + this.modalService.closeAll(); const [modal, childComponent] = await this.modalService.openViewRef( FolderAddEditComponent, @@ -410,9 +406,7 @@ export class AppComponent implements OnInit { } async openGenerator() { - if (this.modal != null) { - this.modal.close(); - } + this.modalService.closeAll(); [this.modal] = await this.modalService.openViewRef( GeneratorComponent, @@ -542,9 +536,7 @@ export class AppComponent implements OnInit { } private async openModal(type: Type, ref: ViewContainerRef) { - if (this.modal != null) { - this.modal.close(); - } + this.modalService.closeAll(); [this.modal] = await this.modalService.openViewRef(type, ref); diff --git a/apps/desktop/src/app/app.module.ts b/apps/desktop/src/app/app.module.ts index 23e44d85a2a..a7e46b711ab 100644 --- a/apps/desktop/src/app/app.module.ts +++ b/apps/desktop/src/app/app.module.ts @@ -57,6 +57,7 @@ import localeZhTw from "@angular/common/locales/zh-Hant"; import { NgModule } from "@angular/core"; import { AccessibilityCookieComponent } from "./accounts/accessibility-cookie.component"; +import { DeleteAccountComponent } from "./accounts/delete-account.component"; import { EnvironmentComponent } from "./accounts/environment.component"; import { HintComponent } from "./accounts/hint.component"; import { LockComponent } from "./accounts/lock.component"; @@ -165,6 +166,7 @@ registerLocaleData(localeZhTw, "zh-TW"); AttachmentsComponent, CiphersComponent, CollectionsComponent, + DeleteAccountComponent, EnvironmentComponent, ExportComponent, FolderAddEditComponent, diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index 53fcb31879d..170ddb72145 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/apps/desktop/src/locales/en/messages.json @@ -1393,6 +1393,21 @@ "lockWithMasterPassOnRestart": { "message": "Lock with master password on restart" }, + "deleteAccount": { + "message": "Delete account" + }, + "deleteAccountDesc": { + "message": "Proceed below to delete your account and all vault data." + }, + "deleteAccountWarning": { + "message": "Deleting your account is permanent. It cannot be undone." + }, + "accountDeleted": { + "message": "Account deleted" + }, + "accountDeletedDesc": { + "message": "Your account has been closed and all associated data has been deleted." + }, "preferences": { "message": "Preferences" }, @@ -1975,5 +1990,5 @@ }, "cardBrandMir": { "message": "Mir" - } + } } diff --git a/apps/desktop/src/main/menu/menu.account.ts b/apps/desktop/src/main/menu/menu.account.ts index ef85f7462f6..b7c4b1f693f 100644 --- a/apps/desktop/src/main/menu/menu.account.ts +++ b/apps/desktop/src/main/menu/menu.account.ts @@ -19,6 +19,8 @@ export class AccountMenu implements IMenubarMenu { this.changeMasterPassword, this.twoStepLogin, this.fingerprintPhrase, + this.separator, + this.deleteAccount, ]; } @@ -105,6 +107,19 @@ export class AccountMenu implements IMenubarMenu { }; } + private get deleteAccount(): MenuItemConstructorOptions { + return { + label: this.localize("deleteAccount"), + id: "deleteAccount", + click: () => this.sendMessage("deleteAccount"), + enabled: !this._isLocked, + }; + } + + private get separator(): MenuItemConstructorOptions { + return { type: "separator" }; + } + private localize(s: string) { return this._i18nService.t(s); } diff --git a/apps/desktop/src/scss/box.scss b/apps/desktop/src/scss/box.scss index 4f05b873b64..aa11b408a42 100644 --- a/apps/desktop/src/scss/box.scss +++ b/apps/desktop/src/scss/box.scss @@ -102,6 +102,10 @@ color: themed("mutedColor"); } } + + &.last { + margin-bottom: 15px; + } } .box-content-row { diff --git a/apps/desktop/src/scss/misc.scss b/apps/desktop/src/scss/misc.scss index 7982129316c..5e5e341b30f 100644 --- a/apps/desktop/src/scss/misc.scss +++ b/apps/desktop/src/scss/misc.scss @@ -336,6 +336,25 @@ form, @include themify($themes) { color: themed("mutedColor"); } + + a { + @extend .btn; + @extend .link; + + padding: 0; + font-size: inherit; + font-weight: bold; + + @include themify($themes) { + color: themed("mutedColor"); + } + + &:hover { + @include themify($themes) { + color: darken(themed("mutedColor"), 6%); + } + } + } } } diff --git a/apps/desktop/src/scss/pages.scss b/apps/desktop/src/scss/pages.scss index c3626c40c8d..6c839826ea9 100644 --- a/apps/desktop/src/scss/pages.scss +++ b/apps/desktop/src/scss/pages.scss @@ -71,10 +71,6 @@ .box { margin-bottom: 20px; - - &.last { - margin-bottom: 15px; - } } .buttons { diff --git a/apps/web/src/app/settings/delete-account.component.html b/apps/web/src/app/settings/delete-account.component.html index 6d53b4170f8..77b9df007bc 100644 --- a/apps/web/src/app/settings/delete-account.component.html +++ b/apps/web/src/app/settings/delete-account.component.html @@ -6,6 +6,7 @@ (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate + [formGroup]="deleteForm" >
@@ -21,7 +22,7 @@

{{ "deleteAccountDesc" | i18n }}

{{ "deleteAccountWarning" | i18n }} - +
diff --git a/apps/web/src/app/settings/delete-account.component.ts b/apps/web/src/app/settings/delete-account.component.ts index 8e953a9605e..db58f27b814 100644 --- a/apps/web/src/app/settings/delete-account.component.ts +++ b/apps/web/src/app/settings/delete-account.component.ts @@ -1,11 +1,10 @@ import { Component } from "@angular/core"; +import { FormBuilder } from "@angular/forms"; -import { ApiService } from "@bitwarden/common/abstractions/api.service"; +import { AccountService } from "@bitwarden/common/abstractions/account/account.service.abstraction"; import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; import { LogService } from "@bitwarden/common/abstractions/log.service"; -import { MessagingService } from "@bitwarden/common/abstractions/messaging.service"; import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service"; -import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification.service"; import { Verification } from "@bitwarden/common/types/verification"; @Component({ @@ -13,30 +12,30 @@ import { Verification } from "@bitwarden/common/types/verification"; templateUrl: "delete-account.component.html", }) export class DeleteAccountComponent { - masterPassword: Verification; - formPromise: Promise; + formPromise: Promise; + + deleteForm = this.formBuilder.group({ + verification: undefined as Verification | undefined, + }); constructor( - private apiService: ApiService, private i18nService: I18nService, private platformUtilsService: PlatformUtilsService, - private userVerificationService: UserVerificationService, - private messagingService: MessagingService, + private formBuilder: FormBuilder, + private accountService: AccountService, private logService: LogService ) {} async submit() { try { - this.formPromise = this.userVerificationService - .buildRequest(this.masterPassword) - .then((request) => this.apiService.deleteAccount(request)); + const verification = this.deleteForm.get("verification").value; + this.formPromise = this.accountService.delete(verification); await this.formPromise; this.platformUtilsService.showToast( "success", this.i18nService.t("accountDeleted"), this.i18nService.t("accountDeletedDesc") ); - this.messagingService.send("logout"); } catch (e) { this.logService.error(e); } diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 873cd53e745..71f3bd7b8f6 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -1088,7 +1088,7 @@ "message": "Account Deleted" }, "accountDeletedDesc": { - "message": "Your Bitwarden account and vault data were permanently deleted." + "message": "Your account has been closed and all associated data has been deleted." }, "myAccount": { "message": "My Account" diff --git a/libs/angular/src/components/user-verification.component.ts b/libs/angular/src/components/user-verification.component.ts index dbef0686d5c..2a486db01a7 100644 --- a/libs/angular/src/components/user-verification.component.ts +++ b/libs/angular/src/components/user-verification.component.ts @@ -5,6 +5,7 @@ import { ControlValueAccessor, UntypedFormControl, NG_VALUE_ACCESSOR } from "@an import { KeyConnectorService } from "@bitwarden/common/abstractions/keyConnector.service"; import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification.service"; import { VerificationType } from "@bitwarden/common/enums/verificationType"; +import { Utils } from "@bitwarden/common/misc/utils"; import { Verification } from "@bitwarden/common/types/verification"; /** @@ -90,7 +91,7 @@ export class UserVerificationComponent implements ControlValueAccessor, OnInit { this.onChange({ type: this.usesKeyConnector ? VerificationType.OTP : VerificationType.MasterPassword, - secret: secret, + secret: Utils.isNullOrWhitespace(secret) ? null : secret, }); } } diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts index e90acd075e7..419dfab6050 100644 --- a/libs/angular/src/services/jslib-services.module.ts +++ b/libs/angular/src/services/jslib-services.module.ts @@ -3,6 +3,8 @@ import { InjectionToken, Injector, LOCALE_ID, NgModule } from "@angular/core"; import { ThemingService } from "@bitwarden/angular/services/theming/theming.service"; import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction"; import { AbstractEncryptService } from "@bitwarden/common/abstractions/abstractEncrypt.service"; +import { AccountApiService as AccountApiServiceAbstraction } from "@bitwarden/common/abstractions/account/account-api.service.abstraction"; +import { AccountService as AccountServiceAbstraction } from "@bitwarden/common/abstractions/account/account.service.abstraction"; import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service"; import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/abstractions/appId.service"; import { AuditService as AuditServiceAbstraction } from "@bitwarden/common/abstractions/audit.service"; @@ -49,6 +51,8 @@ import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from "@bitwarde import { StateFactory } from "@bitwarden/common/factories/stateFactory"; import { Account } from "@bitwarden/common/models/domain/account"; import { GlobalState } from "@bitwarden/common/models/domain/globalState"; +import { AccountApiService } from "@bitwarden/common/services/account/account-api.service"; +import { AccountService } from "@bitwarden/common/services/account/account.service"; import { ApiService } from "@bitwarden/common/services/api.service"; import { AppIdService } from "@bitwarden/common/services/appId.service"; import { AuditService } from "@bitwarden/common/services/audit.service"; @@ -234,6 +238,21 @@ export const LOG_MAC_FAILURES = new InjectionToken("LOG_MAC_FAILURES"); useClass: FolderApiService, deps: [FolderServiceAbstraction, ApiServiceAbstraction], }, + { + provide: AccountApiServiceAbstraction, + useClass: AccountApiService, + deps: [ApiServiceAbstraction], + }, + { + provide: AccountServiceAbstraction, + useClass: AccountService, + deps: [ + AccountApiServiceAbstraction, + UserVerificationServiceAbstraction, + MessagingServiceAbstraction, + LogService, + ], + }, { provide: LogService, useFactory: () => new ConsoleLogService(false) }, { provide: CollectionServiceAbstraction, diff --git a/libs/angular/src/services/modal.service.ts b/libs/angular/src/services/modal.service.ts index aecc84c64a0..348e3f88c3d 100644 --- a/libs/angular/src/services/modal.service.ts +++ b/libs/angular/src/services/modal.service.ts @@ -17,7 +17,8 @@ import { ModalRef } from "../components/modal/modal.ref"; export class ModalConfig { data?: D; - allowMultipleModals = false; + allowMultipleModals?: boolean; + replaceTopModal?: boolean; } @Injectable() @@ -63,13 +64,18 @@ export class ModalService { return [modalRef, modalComponentRef.instance.componentRef.instance]; } - open(componentType: Type, config?: ModalConfig) { - if (!(config?.allowMultipleModals ?? false) && this.modalCount > 0) { + open(componentType: Type, config: ModalConfig = {}) { + const { replaceTopModal = false, allowMultipleModals = false } = config; + + if (this.modalCount > 0 && replaceTopModal) { + this.topModal.instance.close(); + } + + if (this.modalCount > 0 && !allowMultipleModals) { return; } - // eslint-disable-next-line - const [modalRef, _] = this.openInternal(componentType, config, true); + const [modalRef] = this.openInternal(componentType, config, true); return modalRef; } @@ -89,6 +95,10 @@ export class ModalService { return this.componentFactoryResolver.resolveComponentFactory(componentType); } + closeAll(): void { + this.modalList.forEach((modal) => modal.instance.close()); + } + protected openInternal( componentType: Type, config?: ModalConfig, diff --git a/libs/common/src/abstractions/account/account-api.service.abstraction.ts b/libs/common/src/abstractions/account/account-api.service.abstraction.ts new file mode 100644 index 00000000000..c8f382e4ca7 --- /dev/null +++ b/libs/common/src/abstractions/account/account-api.service.abstraction.ts @@ -0,0 +1,5 @@ +import { SecretVerificationRequest } from "@bitwarden/common/models/request/secretVerificationRequest"; + +export abstract class AccountApiService { + abstract deleteAccount(request: SecretVerificationRequest): Promise; +} diff --git a/libs/common/src/abstractions/account/account.service.abstraction.ts b/libs/common/src/abstractions/account/account.service.abstraction.ts new file mode 100644 index 00000000000..d87f9349a1e --- /dev/null +++ b/libs/common/src/abstractions/account/account.service.abstraction.ts @@ -0,0 +1,5 @@ +import { Verification } from "../../types/verification"; + +export abstract class AccountService { + abstract delete(verification: Verification): Promise; +} diff --git a/libs/common/src/abstractions/api.service.ts b/libs/common/src/abstractions/api.service.ts index 8bab03aec5c..0fad466b95f 100644 --- a/libs/common/src/abstractions/api.service.ts +++ b/libs/common/src/abstractions/api.service.ts @@ -209,7 +209,6 @@ export abstract class ApiService { setPassword: (request: SetPasswordRequest) => Promise; postSetKeyConnectorKey: (request: SetKeyConnectorKeyRequest) => Promise; postSecurityStamp: (request: SecretVerificationRequest) => Promise; - deleteAccount: (request: SecretVerificationRequest) => Promise; getAccountRevisionDate: () => Promise; postPasswordHint: (request: PasswordHintRequest) => Promise; postRegister: (request: RegisterRequest) => Promise; diff --git a/libs/common/src/services/account/account-api.service.ts b/libs/common/src/services/account/account-api.service.ts new file mode 100644 index 00000000000..fe4789d4b10 --- /dev/null +++ b/libs/common/src/services/account/account-api.service.ts @@ -0,0 +1,11 @@ +import { AccountApiService as AccountApiServiceAbstraction } from "@bitwarden/common/abstractions/account/account-api.service.abstraction"; +import { ApiService } from "@bitwarden/common/abstractions/api.service"; +import { SecretVerificationRequest } from "@bitwarden/common/models/request/secretVerificationRequest"; + +export class AccountApiService implements AccountApiServiceAbstraction { + constructor(private apiService: ApiService) {} + + deleteAccount(request: SecretVerificationRequest): Promise { + return this.apiService.send("DELETE", "/accounts", request, true, false); + } +} diff --git a/libs/common/src/services/account/account.service.ts b/libs/common/src/services/account/account.service.ts new file mode 100644 index 00000000000..0870003414b --- /dev/null +++ b/libs/common/src/services/account/account.service.ts @@ -0,0 +1,27 @@ +import { AccountApiService } from "@bitwarden/common/abstractions/account/account-api.service.abstraction"; +import { LogService } from "@bitwarden/common/abstractions/log.service"; +import { MessagingService } from "@bitwarden/common/abstractions/messaging.service"; +import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification.service"; + +import { AccountService as AccountServiceAbstraction } from "../../abstractions/account/account.service.abstraction"; +import { Verification } from "../../types/verification"; + +export class AccountService implements AccountServiceAbstraction { + constructor( + private accountApiService: AccountApiService, + private userVerificationService: UserVerificationService, + private messagingService: MessagingService, + private logService: LogService + ) {} + + async delete(verification: Verification): Promise { + try { + const verificationRequest = await this.userVerificationService.buildRequest(verification); + await this.accountApiService.deleteAccount(verificationRequest); + this.messagingService.send("logout"); + } catch (e) { + this.logService.error(e); + throw e; + } + } +} diff --git a/libs/common/src/services/api.service.ts b/libs/common/src/services/api.service.ts index dcc396cfd2b..ff6a4ca1145 100644 --- a/libs/common/src/services/api.service.ts +++ b/libs/common/src/services/api.service.ts @@ -350,10 +350,6 @@ export class ApiService implements ApiServiceAbstraction { return this.send("POST", "/accounts/security-stamp", request, true, false); } - deleteAccount(request: SecretVerificationRequest): Promise { - return this.send("DELETE", "/accounts", request, true, false); - } - async getAccountRevisionDate(): Promise { const r = await this.send("GET", "/accounts/revision-date", null, true, true); return r as number;