1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-18 09:13:33 +00:00
Files
browser/libs/angular/src/tools/export/components/export.component.ts
Andreas Coroiu a73525a80c [PM-2135] [BEEEP] Refactor and refresh web user verification components (#5377)
* [PM-2135] feat: create new user-verification module

* [PM-2136] feat: add ability to remove form field bottom margin

(cherry picked from commit 05925ff77ed47f3865c2aecade8271390d9e2fa6)

* [PM-2135] feat: refactor user-verification component

* [PM-2135] feat: refactor user-verification-prompt

* [PM-2135] feat: use form validation in prompt

* [PM-2135] feat: change autofocus target

* [PM-2135] chore: clean up old code

* [PM-2135] feat: allow user verification to show invalid password error

* [PM-2135] feat: hack mark as touched to get error to display

* [PM-2135] chore: move to auth

* [PM-2135] fix: hardcoded dialog buttons

* [PM-2135] feat: add onDestroy handler

* [PM-2135] fix: remove unecessary directive input

* [PM-2135] feat: add password toggle

* [PM-2135] chore: add hack comment

* [PM-2135] chore: move services to auth folder and rename

* [PM-2135] fix: show correct error messages

* [PM-2135] fix: re-add non-existant files to whitelist

I honestly don't know why the linter is complaining about this

* Fix capital letters whitelist

* [PM-2135] chore: remove rows that were mistakenly added during merge from master

* [PM-2135] chore: remove rows that were mistakenly added during merge from master

* [PM-2135] feat: disable built-in browser validations

* Revert "[PM-2135] feat: disable built-in browser validations"

This reverts commit 969f75822a.

---------

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>
2023-06-28 09:02:22 -04:00

220 lines
6.8 KiB
TypeScript

import { Directive, EventEmitter, OnDestroy, OnInit, Output } from "@angular/core";
import { UntypedFormBuilder, Validators } from "@angular/forms";
import { merge, startWith, Subject, takeUntil } from "rxjs";
import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service";
import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
import { PolicyType } from "@bitwarden/common/admin-console/enums";
import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
import { EncryptedExportType, EventType } from "@bitwarden/common/enums";
import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service";
import { FileDownloadService } from "@bitwarden/common/platform/abstractions/file-download/file-download.service";
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";
import { VaultExportServiceAbstraction } from "@bitwarden/exporter/vault-export";
import { DialogServiceAbstraction, SimpleDialogType } from "../../../services/dialog";
@Directive()
export class ExportComponent implements OnInit, OnDestroy {
@Output() onSaved = new EventEmitter();
formPromise: Promise<string>;
private _disabledByPolicy = false;
protected get disabledByPolicy(): boolean {
return this._disabledByPolicy;
}
exportForm = this.formBuilder.group({
format: ["json"],
secret: [""],
filePassword: ["", Validators.required],
confirmFilePassword: ["", Validators.required],
fileEncryptionType: [EncryptedExportType.AccountEncrypted],
});
formatOptions = [
{ name: ".json", value: "json" },
{ name: ".csv", value: "csv" },
{ name: ".json (Encrypted)", value: "encrypted_json" },
];
private destroy$ = new Subject<void>();
constructor(
protected cryptoService: CryptoService,
protected i18nService: I18nService,
protected platformUtilsService: PlatformUtilsService,
protected exportService: VaultExportServiceAbstraction,
protected eventCollectionService: EventCollectionService,
private policyService: PolicyService,
protected win: Window,
private logService: LogService,
private userVerificationService: UserVerificationService,
private formBuilder: UntypedFormBuilder,
protected fileDownloadService: FileDownloadService,
protected dialogService: DialogServiceAbstraction
) {}
async ngOnInit() {
this.policyService
.policyAppliesToActiveUser$(PolicyType.DisablePersonalVaultExport)
.pipe(takeUntil(this.destroy$))
.subscribe((policyAppliesToActiveUser) => {
this._disabledByPolicy = policyAppliesToActiveUser;
if (this.disabledByPolicy) {
this.exportForm.disable();
}
});
merge(
this.exportForm.get("format").valueChanges,
this.exportForm.get("fileEncryptionType").valueChanges
)
.pipe(takeUntil(this.destroy$))
.pipe(startWith(0))
.subscribe(() => this.adjustValidators());
}
ngOnDestroy(): void {
this.destroy$.next();
}
get encryptedFormat() {
return this.format === "encrypted_json";
}
protected async doExport() {
try {
this.formPromise = this.getExportData();
const data = await this.formPromise;
this.downloadFile(data);
this.saved();
await this.collectEvent();
this.exportForm.get("secret").setValue("");
this.exportForm.clearValidators();
} catch (e) {
this.logService.error(e);
}
}
async submit() {
if (this.disabledByPolicy) {
this.platformUtilsService.showToast(
"error",
null,
this.i18nService.t("personalVaultExportPolicyInEffect")
);
return;
}
const acceptedWarning = await this.warningDialog();
if (!acceptedWarning) {
return;
}
const secret = this.exportForm.get("secret").value;
try {
await this.userVerificationService.verifyUser(secret);
} catch (e) {
this.platformUtilsService.showToast("error", this.i18nService.t("errorOccurred"), e.message);
return;
}
this.doExport();
}
async warningDialog() {
if (this.encryptedFormat) {
return await this.dialogService.openSimpleDialog({
title: { key: "confirmVaultExport" },
content:
this.i18nService.t("encExportKeyWarningDesc") +
" " +
this.i18nService.t("encExportAccountWarningDesc"),
acceptButtonText: { key: "exportVault" },
type: SimpleDialogType.WARNING,
});
} else {
return await this.dialogService.openSimpleDialog({
title: { key: "confirmVaultExport" },
content: { key: "exportWarningDesc" },
acceptButtonText: { key: "exportVault" },
type: SimpleDialogType.WARNING,
});
}
}
protected saved() {
this.onSaved.emit();
}
protected getExportData() {
if (
this.format === "encrypted_json" &&
this.fileEncryptionType === EncryptedExportType.FileEncrypted
) {
return this.exportService.getPasswordProtectedExport(this.filePassword);
} else {
return this.exportService.getExport(this.format, null);
}
}
protected getFileName(prefix?: string) {
let extension = this.format;
if (this.format === "encrypted_json") {
if (prefix == null) {
prefix = "encrypted";
} else {
prefix = "encrypted_" + prefix;
}
extension = "json";
}
return this.exportService.getFileName(prefix, extension);
}
protected async collectEvent(): Promise<void> {
await this.eventCollectionService.collect(EventType.User_ClientExportedVault);
}
get format() {
return this.exportForm.get("format").value;
}
get filePassword() {
return this.exportForm.get("filePassword").value;
}
get confirmFilePassword() {
return this.exportForm.get("confirmFilePassword").value;
}
get fileEncryptionType() {
return this.exportForm.get("fileEncryptionType").value;
}
adjustValidators() {
this.exportForm.get("confirmFilePassword").reset();
this.exportForm.get("filePassword").reset();
if (this.encryptedFormat && this.fileEncryptionType == EncryptedExportType.FileEncrypted) {
this.exportForm.controls.filePassword.enable();
this.exportForm.controls.confirmFilePassword.enable();
} else {
this.exportForm.controls.filePassword.disable();
this.exportForm.controls.confirmFilePassword.disable();
}
}
private downloadFile(csv: string): void {
const fileName = this.getFileName();
this.fileDownloadService.download({
fileName: fileName,
blobData: csv,
blobOptions: { type: "text/plain" },
});
}
}