diff --git a/apps/desktop/src/vault/app/vault/folder-add-edit.component.ts b/apps/desktop/src/vault/app/vault/folder-add-edit.component.ts
index 9f28a2ea06..d9035ad741 100644
--- a/apps/desktop/src/vault/app/vault/folder-add-edit.component.ts
+++ b/apps/desktop/src/vault/app/vault/folder-add-edit.component.ts
@@ -1,4 +1,5 @@
import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
import { FolderAddEditComponent as BaseFolderAddEditComponent } from "@bitwarden/angular/vault/components/folder-add-edit.component";
@@ -19,7 +20,8 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
logService: LogService,
- dialogService: DialogServiceAbstraction
+ dialogService: DialogServiceAbstraction,
+ formBuilder: FormBuilder
) {
super(
folderService,
@@ -27,7 +29,8 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
i18nService,
platformUtilsService,
logService,
- dialogService
+ dialogService,
+ formBuilder
);
}
}
diff --git a/apps/web/src/app/vault/individual-vault/folder-add-edit.component.html b/apps/web/src/app/vault/individual-vault/folder-add-edit.component.html
index 1718f654d2..b6c9679887 100644
--- a/apps/web/src/app/vault/individual-vault/folder-add-edit.component.html
+++ b/apps/web/src/app/vault/individual-vault/folder-add-edit.component.html
@@ -1,68 +1,32 @@
-
-
-
+
+
+
diff --git a/apps/web/src/app/vault/individual-vault/folder-add-edit.component.ts b/apps/web/src/app/vault/individual-vault/folder-add-edit.component.ts
index 059ad3dbfc..707926c0ea 100644
--- a/apps/web/src/app/vault/individual-vault/folder-add-edit.component.ts
+++ b/apps/web/src/app/vault/individual-vault/folder-add-edit.component.ts
@@ -1,6 +1,8 @@
-import { Component } from "@angular/core";
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { Component, Inject } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
-import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
+import { DialogServiceAbstraction, SimpleDialogType } from "@bitwarden/angular/services/dialog";
import { FolderAddEditComponent as BaseFolderAddEditComponent } from "@bitwarden/angular/vault/components/folder-add-edit.component";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -20,7 +22,10 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
i18nService: I18nService,
platformUtilsService: PlatformUtilsService,
logService: LogService,
- dialogService: DialogServiceAbstraction
+ dialogService: DialogServiceAbstraction,
+ formBuilder: FormBuilder,
+ protected dialogRef: DialogRef
,
+ @Inject(DIALOG_DATA) params: FolderAddEditDialogParams
) {
super(
folderService,
@@ -28,7 +33,81 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
i18nService,
platformUtilsService,
logService,
- dialogService
+ dialogService,
+ formBuilder
);
+ params?.folderId ? (this.folderId = params.folderId) : null;
}
+
+ deleteAndClose = async () => {
+ const confirmed = await this.dialogService.openSimpleDialog({
+ title: { key: "deleteFolder" },
+ content: { key: "deleteFolderConfirmation" },
+ type: SimpleDialogType.WARNING,
+ });
+
+ if (!confirmed) {
+ return;
+ }
+
+ try {
+ this.deletePromise = this.folderApiService.delete(this.folder.id);
+ await this.deletePromise;
+ this.platformUtilsService.showToast("success", null, this.i18nService.t("deletedFolder"));
+ this.onDeletedFolder.emit(this.folder);
+ } catch (e) {
+ this.logService.error(e);
+ }
+
+ this.dialogRef.close(FolderAddEditDialogResult.Deleted);
+ };
+
+ submitAndClose = async () => {
+ this.folder.name = this.formGroup.controls.name.value;
+ if (this.folder.name == null || this.folder.name === "") {
+ this.formGroup.controls.name.markAsTouched();
+ return;
+ }
+
+ try {
+ const folder = await this.folderService.encrypt(this.folder);
+ this.formPromise = this.folderApiService.save(folder);
+ await this.formPromise;
+ this.platformUtilsService.showToast(
+ "success",
+ null,
+ this.i18nService.t(this.editMode ? "editedFolder" : "addedFolder")
+ );
+ this.onSavedFolder.emit(this.folder);
+ this.dialogRef.close(FolderAddEditDialogResult.Saved);
+ } catch (e) {
+ this.logService.error(e);
+ }
+ return;
+ };
+}
+
+export interface FolderAddEditDialogParams {
+ folderId: string;
+}
+
+export enum FolderAddEditDialogResult {
+ Deleted = "deleted",
+ Canceled = "canceled",
+ Saved = "saved",
+}
+
+/**
+ * Strongly typed helper to open a FolderAddEdit dialog
+ * @param dialogService Instance of the dialog service that will be used to open the dialog
+ * @param config Optional configuration for the dialog
+ */
+export function openFolderAddEditDialog(
+ dialogService: DialogServiceAbstraction,
+ config?: DialogConfig
+) {
+ return dialogService.open(
+ FolderAddEditComponent,
+ config
+ );
}
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 7e5366dfd4..fc3f2165cd 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/apps/web/src/app/vault/individual-vault/vault.component.ts
@@ -84,7 +84,7 @@ import {
openBulkShareDialog,
} from "./bulk-action-dialogs/bulk-share-dialog/bulk-share-dialog.component";
import { CollectionsComponent } from "./collections.component";
-import { FolderAddEditComponent } from "./folder-add-edit.component";
+import { FolderAddEditDialogResult, openFolderAddEditDialog } from "./folder-add-edit.component";
import { ShareComponent } from "./share.component";
import { VaultFilterComponent } from "./vault-filter/components/vault-filter.component";
import { VaultFilterService } from "./vault-filter/services/abstractions/vault-filter.service";
@@ -470,40 +470,25 @@ export class VaultComponent implements OnInit, OnDestroy {
}
addFolder = async (): Promise => {
- const [modal] = await this.modalService.openViewRef(
- FolderAddEditComponent,
- this.folderAddEditModalRef,
- (comp) => {
- comp.folderId = null;
- comp.onSavedFolder.pipe(takeUntil(this.destroy$)).subscribe(() => {
- modal.close();
- });
- }
- );
+ openFolderAddEditDialog(this.dialogService);
};
editFolder = async (folder: FolderFilter): Promise => {
- const [modal] = await this.modalService.openViewRef(
- FolderAddEditComponent,
- this.folderAddEditModalRef,
- (comp) => {
- comp.folderId = folder.id;
- comp.onSavedFolder.pipe(takeUntil(this.destroy$)).subscribe(() => {
- modal.close();
- });
- comp.onDeletedFolder.pipe(takeUntil(this.destroy$)).subscribe(() => {
- // Navigate away if we deleted the colletion we were viewing
- if (this.filter.folderId === folder.id) {
- this.router.navigate([], {
- queryParams: { folderId: null },
- queryParamsHandling: "merge",
- replaceUrl: true,
- });
- }
- modal.close();
- });
- }
- );
+ const dialog = openFolderAddEditDialog(this.dialogService, {
+ data: {
+ folderId: folder.id,
+ },
+ });
+
+ const result = await lastValueFrom(dialog.closed);
+
+ if (result === FolderAddEditDialogResult.Deleted) {
+ this.router.navigate([], {
+ queryParams: { folderId: null },
+ queryParamsHandling: "merge",
+ replaceUrl: true,
+ });
+ }
};
filterSearchText(searchText: string) {
diff --git a/libs/angular/src/vault/components/folder-add-edit.component.ts b/libs/angular/src/vault/components/folder-add-edit.component.ts
index aa2ccd3a7c..5e2f956d76 100644
--- a/libs/angular/src/vault/components/folder-add-edit.component.ts
+++ b/libs/angular/src/vault/components/folder-add-edit.component.ts
@@ -1,4 +1,5 @@
import { Directive, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { Validators, FormBuilder } from "@angular/forms";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
@@ -22,13 +23,18 @@ export class FolderAddEditComponent implements OnInit {
deletePromise: Promise;
protected componentName = "";
+ formGroup = this.formBuilder.group({
+ name: ["", [Validators.required]],
+ });
+
constructor(
protected folderService: FolderService,
protected folderApiService: FolderApiServiceAbstraction,
protected i18nService: I18nService,
protected platformUtilsService: PlatformUtilsService,
- private logService: LogService,
- protected dialogService: DialogServiceAbstraction
+ protected logService: LogService,
+ protected dialogService: DialogServiceAbstraction,
+ protected formBuilder: FormBuilder
) {}
async ngOnInit() {
@@ -36,6 +42,7 @@ export class FolderAddEditComponent implements OnInit {
}
async submit(): Promise {
+ this.folder.name = this.formGroup.controls.name.value;
if (this.folder.name == null || this.folder.name === "") {
this.platformUtilsService.showToast(
"error",
@@ -97,5 +104,6 @@ export class FolderAddEditComponent implements OnInit {
} else {
this.title = this.i18nService.t("addFolder");
}
+ this.formGroup.controls.name.setValue(this.folder.name);
}
}