diff --git a/apps/browser/src/autofill/popup/settings/excluded-domains.component.html b/apps/browser/src/autofill/popup/settings/excluded-domains.component.html index e3b6bf5f802..92abef3730c 100644 --- a/apps/browser/src/autofill/popup/settings/excluded-domains.component.html +++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.html @@ -14,46 +14,52 @@

{{ "domainsTitle" | i18n }}

- {{ excludedDomainsState?.length || 0 }} + {{ + excludedDomainsState.length + domainForms.value.length + }}
- - - + +
{{ domain }}
+
+ +
+
+ - - {{ - "websiteItemLabel" | i18n: i + 1 - }} + + {{ "websiteItemLabel" | i18n: i + fieldsEditThreshold + 1 }} -
{{ domain }}
-
- - - - + +
+ +
diff --git a/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts b/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts index 7d429bfe4f0..0447d8076c2 100644 --- a/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts +++ b/apps/browser/src/autofill/popup/settings/excluded-domains.component.ts @@ -7,7 +7,13 @@ import { AfterViewInit, ViewChildren, } from "@angular/core"; -import { FormsModule } from "@angular/forms"; +import { + FormsModule, + ReactiveFormsModule, + FormBuilder, + FormGroup, + FormArray, +} from "@angular/forms"; import { RouterModule } from "@angular/router"; import { Subject, takeUntil } from "rxjs"; @@ -45,6 +51,7 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co CommonModule, FormFieldModule, FormsModule, + ReactiveFormsModule, IconButtonModule, ItemModule, JslibModule, @@ -68,6 +75,11 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy { isLoading = false; excludedDomainsState: string[] = []; storedExcludedDomains: string[] = []; + + protected domainListForm = new FormGroup({ + domains: this.formBuilder.array([]), + }); + // How many fields should be non-editable before editable fields fieldsEditThreshold: number = 0; @@ -77,10 +89,15 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy { private domainSettingsService: DomainSettingsService, private i18nService: I18nService, private toastService: ToastService, + private formBuilder: FormBuilder, ) { this.accountSwitcherEnabled = enableAccountSwitching(); } + get domainForms() { + return this.domainListForm.get("domains") as FormArray; + } + async ngAfterViewInit() { this.domainSettingsService.neverDomains$ .pipe(takeUntil(this.destroy$)) @@ -117,8 +134,7 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy { } async addNewDomain() { - // add empty field to the Domains list interface - this.excludedDomainsState.push(""); + this.domainForms.push(this.formBuilder.control(null)); await this.fieldChange(); } @@ -148,7 +164,11 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy { this.isLoading = true; const newExcludedDomainsSaveState: NeverDomains = {}; - const uniqueExcludedDomains = new Set(this.excludedDomainsState); + + const uniqueExcludedDomains = new Set([ + ...this.excludedDomainsState, + ...this.domainForms.value, + ]); for (const uri of uniqueExcludedDomains) { if (uri && uri !== "") { @@ -194,13 +214,14 @@ export class ExcludedDomainsComponent implements AfterViewInit, OnDestroy { title: "", variant: "success", }); + + this.domainForms.clear(); } catch { this.toastService.showToast({ message: this.i18nService.t("unexpectedError"), title: "", variant: "error", }); - // Don't reset via `handleStateUpdate` to preserve input values this.isLoading = false; }