diff --git a/apps/browser/src/autofill/popup/settings/blocked-domains.component.html b/apps/browser/src/autofill/popup/settings/blocked-domains.component.html
index d4b58eb89e3..302b14247e9 100644
--- a/apps/browser/src/autofill/popup/settings/blocked-domains.component.html
+++ b/apps/browser/src/autofill/popup/settings/blocked-domains.component.html
@@ -20,46 +20,50 @@
{{ "domainsTitle" | i18n }}
- {{ blockedDomainsState?.length || 0 }}
+ {{
+ blockedDomainsState.length + domainForms.value.length
+ }}
-
-
-
+
+ {{ domain }}
+
+
+
+
-
+
+
+
+
diff --git a/apps/browser/src/autofill/popup/settings/blocked-domains.component.ts b/apps/browser/src/autofill/popup/settings/blocked-domains.component.ts
index 461f62da6dc..16e4b6f6751 100644
--- a/apps/browser/src/autofill/popup/settings/blocked-domains.component.ts
+++ b/apps/browser/src/autofill/popup/settings/blocked-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";
@@ -44,6 +50,7 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
CommonModule,
FormFieldModule,
FormsModule,
+ ReactiveFormsModule,
IconButtonModule,
ItemModule,
JslibModule,
@@ -66,6 +73,11 @@ export class BlockedDomainsComponent implements AfterViewInit, OnDestroy {
isLoading = false;
blockedDomainsState: string[] = [];
storedBlockedDomains: string[] = [];
+
+ protected domainListForm = new FormGroup({
+ domains: this.formBuilder.array([]),
+ });
+
// How many fields should be non-editable before editable fields
fieldsEditThreshold: number = 0;
@@ -75,8 +87,13 @@ export class BlockedDomainsComponent implements AfterViewInit, OnDestroy {
private domainSettingsService: DomainSettingsService,
private i18nService: I18nService,
private toastService: ToastService,
+ private formBuilder: FormBuilder,
) {}
+ get domainForms() {
+ return this.domainListForm.get("domains") as FormArray;
+ }
+
async ngAfterViewInit() {
this.domainSettingsService.blockedInteractionsUris$
.pipe(takeUntil(this.destroy$))
@@ -113,8 +130,7 @@ export class BlockedDomainsComponent implements AfterViewInit, OnDestroy {
}
async addNewDomain() {
- // add empty field to the Domains list interface
- this.blockedDomainsState.push("");
+ this.domainForms.push(this.formBuilder.control(null));
await this.fieldChange();
}
@@ -144,7 +160,8 @@ export class BlockedDomainsComponent implements AfterViewInit, OnDestroy {
this.isLoading = true;
const newBlockedDomainsSaveState: NeverDomains = {};
- const uniqueBlockedDomains = new Set(this.blockedDomainsState);
+
+ const uniqueBlockedDomains = new Set([...this.blockedDomainsState, ...this.domainForms.value]);
for (const uri of uniqueBlockedDomains) {
if (uri && uri !== "") {
@@ -152,7 +169,7 @@ export class BlockedDomainsComponent implements AfterViewInit, OnDestroy {
if (!validatedHost) {
this.toastService.showToast({
- message: this.i18nService.t("excludedDomainsInvalidDomain", uri),
+ message: this.i18nService.t("blockedDomainsInvalidDomain", uri),
title: "",
variant: "error",
});
@@ -190,13 +207,14 @@ export class BlockedDomainsComponent 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;
}