[PM-2067] Update Folder Add-Edit modal to use the Component Library (#5648)

* Add formGroup to base FolderAddEditComponent

* [web] use DialogService to open the modal

* [web] migrate FolderAddEditComponent use component library

* [desktop] use the formGroup in the template

* [browser] use the formGroup in the template

* [browser & desktop] remove disable on form invalid

* [web] Migrate to async actions

* [web] Strengthen typing for FolderAddEdit dialog

* Show form error instead of error toast

* Move browser folder add edit component to vault

* Remove extra template variables

* Remove inner form

* Remove inner form

* Update apps/web/src/app/vault/individual-vault/folder-add-edit.component.html

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

apps/browser/src/popup/app-routing.module.ts

@@ -33,11 +33,11 @@ import { ShareComponent } from "../vault/popup/components/vault/share.component"
 import { VaultFilterComponent } from "../vault/popup/components/vault/vault-filter.component";
 import { VaultItemsComponent } from "../vault/popup/components/vault/vault-items.component";
 import { ViewComponent } from "../vault/popup/components/vault/view.component";
+import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component";
 
 import { DebounceNavigationService } from "./services/debounceNavigationService";
 import { AutofillComponent } from "./settings/autofill.component";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
-import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
 import { FoldersComponent } from "./settings/folders.component";
 import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";

apps/browser/src/popup/app.module.ts

@@ -52,6 +52,7 @@ import { VaultItemsComponent } from "../vault/popup/components/vault/vault-items
 import { VaultSelectComponent } from "../vault/popup/components/vault/vault-select.component";
 import { ViewCustomFieldsComponent } from "../vault/popup/components/vault/view-custom-fields.component";
 import { ViewComponent } from "../vault/popup/components/vault/view.component";
+import { FolderAddEditComponent } from "../vault/popup/settings/folder-add-edit.component";
 
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -63,7 +64,6 @@ import { ServicesModule } from "./services/services.module";
 import { AboutComponent } from "./settings/about.component";
 import { AutofillComponent } from "./settings/autofill.component";
 import { ExcludedDomainsComponent } from "./settings/excluded-domains.component";
-import { FolderAddEditComponent } from "./settings/folder-add-edit.component";
 import { FoldersComponent } from "./settings/folders.component";
 import { HelpAndFeedbackComponent } from "./settings/help-and-feedback.component";
 import { OptionsComponent } from "./settings/options.component";

apps/browser/src/vault/popup/settings/folder-add-edit.component.html

@@ -1,4 +1,4 @@
-<form #form (ngSubmit)="submit()" [appApiAction]="formPromise">
+<form #form (ngSubmit)="submit()" [appApiAction]="formPromise" [formGroup]="formGroup">
   <header>
     <div class="left">
       <button type="button" routerLink="/folders">{{ "cancel" | i18n }}</button>
@@ -18,13 +18,7 @@
       <div class="box-content">
         <div class="box-content-row" appBoxRow>
           <label for="name">{{ "name" | i18n }}</label>
-          <input
-            id="name"
-            type="text"
-            name="Name"
-            [(ngModel)]="folder.name"
-            [appAutofocus]="!editMode"
-          />
+          <input id="name" type="text" formControlName="name" [appAutofocus]="!editMode" />
         </div>
       </div>
     </div>

apps/browser/src/vault/popup/settings/folder-add-edit.component.ts

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -24,7 +25,8 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
     private router: Router,
     private route: ActivatedRoute,
     logService: LogService,
-    dialogService: DialogServiceAbstraction
+    dialogService: DialogServiceAbstraction,
+    formBuilder: FormBuilder
   ) {
     super(
       folderService,
@@ -32,7 +34,8 @@ export class FolderAddEditComponent extends BaseFolderAddEditComponent {
       i18nService,
       platformUtilsService,
       logService,
-      dialogService
+      dialogService,
+      formBuilder
     );
   }