From 0c5da2bd46d9292ecad947985ade8d7823fd964e Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Tue, 22 Sep 2026 15:10:48 +0100
Subject: [PATCH 1/4] feat(access): Configure visitor email verification for
 domains

Operators can protect a domain or path from the domain form, choose who may sign in, and select the email delivery target and session length.
---
 src/components/DomainFormModal.test.ts | 31 ++++++++
 src/components/DomainFormModal.vue     | 97 +++++++++++++++++++++++++-
 src/types/index.ts                     |  9 +++
 3 files changed, 136 insertions(+), 1 deletion(-)

diff --git a/src/components/DomainFormModal.test.ts b/src/components/DomainFormModal.test.ts
index e36c1d8..4098b77 100644
--- a/src/components/DomainFormModal.test.ts
+++ b/src/components/DomainFormModal.test.ts
@@ -76,3 +76,34 @@ describe("DomainFormModal static caching", () => {
     expect(saved.static_cache).toBe(true);
   });
 });
+
+describe("DomainFormModal visitor access", () => {
+  it("preserves an email allowlist and session settings", async () => {
+    const wrapper = mountModal({
+      id: "d1",
+      service: "web",
+      container_port: 80,
+      domain: "private.example.com",
+      ssl: { enabled: true, auto_cert: true },
+      access: {
+        enabled: true,
+        mode: "allowlist",
+        allowed_emails: ["person@example.com"],
+        email_target_id: "smtp-primary",
+        session_hours: 48,
+      },
+    });
+
+    document.querySelector<HTMLButtonElement>(".btn-primary")?.click();
+    await wrapper.vm.$nextTick();
+
+    const saved = wrapper.emitted("save")?.[0]?.[0] as DomainConfig;
+    expect(saved.access).toEqual({
+      enabled: true,
+      mode: "allowlist",
+      allowed_emails: ["person@example.com"],
+      email_target_id: "smtp-primary",
+      session_hours: 48,
+    });
+  });
+});
diff --git a/src/components/DomainFormModal.vue b/src/components/DomainFormModal.vue
index 78e4a4a..bea697d 100644
--- a/src/components/DomainFormModal.vue
+++ b/src/components/DomainFormModal.vue
@@ -84,6 +84,48 @@
               </span>
             </div>
 
+            <div class="form-section">
+              <h4>Visitor Access</h4>
+
+              <div class="form-group checkbox-group">
+                <label class="checkbox-label">
+                  <input v-model="form.access.enabled" type="checkbox" />
+                  <span>Require email verification</span>
+                </label>
+                <span class="hint">Protects this domain and path without changing the application.</span>
+              </div>
+
+              <template v-if="form.access.enabled">
+                <BaseField label="Who can sign in">
+                  <BaseSelect v-model="form.access.mode">
+                    <option value="allowlist">Only listed email addresses</option>
+                    <option value="any_verified">Anyone with a verified email</option>
+                  </BaseSelect>
+                </BaseField>
+
+                <BaseField
+                  v-if="form.access.mode === 'allowlist'"
+                  label="Allowed email addresses"
+                  hint="Enter one email address per line."
+                >
+                  <BaseTextarea v-model="form.access.allowed_emails" :rows="4" placeholder="person@example.com" />
+                </BaseField>
+
+                <BaseField label="Email delivery target" hint="FlatRun sends sign-in links through this SMTP target.">
+                  <BaseSelect v-model="form.access.email_target_id" required>
+                    <option value="" disabled>Select an email target</option>
+                    <option v-for="target in emailTargets" :key="target.id" :value="target.id">
+                      {{ target.name }}
+                    </option>
+                  </BaseSelect>
+                </BaseField>
+
+                <BaseField label="Session length" hint="Hours before a visitor must verify again.">
+                  <BaseInput v-model.number="form.access.session_hours" type="number" min="1" max="720" />
+                </BaseField>
+              </template>
+            </div>
+
             <div class="form-group">
               <label>Domain Aliases</label>
               <div class="aliases-input">
@@ -143,6 +185,11 @@
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import type { DomainConfig, Service } from "@/types";
+import { notificationsApi, type NotificationTarget } from "@/services/api";
+import BaseField from "@/components/base/BaseField.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
+import BaseTextarea from "@/components/base/BaseTextarea.vue";
 
 const props = defineProps<{
   visible: boolean;
@@ -167,6 +214,13 @@ const form = ref<{
   aliases: string[];
   route_only_aliases: string[];
   static_cache: boolean;
+  access: {
+    enabled: boolean;
+    mode: "allowlist" | "any_verified";
+    allowed_emails: string;
+    email_target_id: string;
+    session_hours: number;
+  };
 }>({
   domain: "",
   service: "",
@@ -177,12 +231,16 @@ const form = ref<{
   aliases: [],
   route_only_aliases: [],
   static_cache: false,
+  access: { enabled: false, mode: "allowlist", allowed_emails: "", email_target_id: "", session_hours: 24 },
 });
 
+const emailTargets = ref<NotificationTarget[]>([]);
+
 watch(
   () => props.visible,
   (visible) => {
     if (visible) {
+      void loadEmailTargets();
       if (props.domain) {
         form.value = {
           domain: props.domain.domain || "",
@@ -197,6 +255,13 @@ watch(
           aliases: [...(props.domain.aliases || [])],
           route_only_aliases: [...(props.domain.route_only_aliases || [])],
           static_cache: props.domain.static_cache || false,
+          access: {
+            enabled: props.domain.access?.enabled || false,
+            mode: props.domain.access?.mode || "allowlist",
+            allowed_emails: (props.domain.access?.allowed_emails || []).join("\n"),
+            email_target_id: props.domain.access?.email_target_id || "",
+            session_hours: props.domain.access?.session_hours || 24,
+          },
         };
       } else {
         form.value = {
@@ -209,6 +274,7 @@ watch(
           aliases: [],
           route_only_aliases: [],
           static_cache: false,
+          access: { enabled: false, mode: "allowlist", allowed_emails: "", email_target_id: "", session_hours: 24 },
         };
       }
     }
@@ -217,9 +283,29 @@ watch(
 );
 
 const isValid = computed(() => {
-  return form.value.domain.trim() !== "";
+  if (form.value.domain.trim() === "") return false;
+  if (!form.value.access.enabled) return true;
+  if (!form.value.access.email_target_id) return false;
+  if (form.value.access.mode === "allowlist") return accessEmails().length > 0;
+  return true;
 });
 
+async function loadEmailTargets() {
+  try {
+    const response = await notificationsApi.getTargets();
+    emailTargets.value = response.data.targets.filter((target) => target.enabled && target.kind === "email");
+  } catch {
+    emailTargets.value = [];
+  }
+}
+
+function accessEmails() {
+  return form.value.access.allowed_emails
+    .split(/[\n,]/)
+    .map((email) => email.trim())
+    .filter(Boolean);
+}
+
 function addAlias() {
   form.value.aliases.push("");
 }
@@ -250,6 +336,15 @@ function handleSubmit() {
     aliases: form.value.aliases.filter((a) => a.trim() !== ""),
     route_only_aliases: form.value.route_only_aliases.filter((a) => a.trim() !== ""),
     static_cache: form.value.static_cache || undefined,
+    access: form.value.access.enabled
+      ? {
+          enabled: true,
+          mode: form.value.access.mode,
+          allowed_emails: form.value.access.mode === "allowlist" ? accessEmails() : undefined,
+          email_target_id: form.value.access.email_target_id,
+          session_hours: form.value.access.session_hours || 24,
+        }
+      : undefined,
   };
 
   emit("save", domainData);
diff --git a/src/types/index.ts b/src/types/index.ts
index 7436ce5..5b5c502 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -64,6 +64,15 @@ export interface DomainConfig {
   aliases?: string[];
   route_only_aliases?: string[];
   static_cache?: boolean;
+  access?: DomainAccessConfig;
+}
+
+export interface DomainAccessConfig {
+  enabled: boolean;
+  mode: "allowlist" | "any_verified";
+  allowed_emails?: string[];
+  email_target_id: string;
+  session_hours?: number;
 }
 
 export interface QuickAction {

From d37824bc85db3216a12ee4b46aca106473c29c94 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Tue, 22 Sep 2026 15:34:16 +0100
Subject: [PATCH 2/4] fix(access): Show email targets to deployment editors

Editors can choose an enabled email target for a protected domain using their deployment access, without needing notification administration rights.
---
 src/components/DomainFormModal.test.ts | 33 ++++++++++++++++++++++++--
 src/components/DomainFormModal.vue     |  6 ++---
 src/services/api.ts                    |  4 ++++
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src/components/DomainFormModal.test.ts b/src/components/DomainFormModal.test.ts
index 4098b77..a0f602e 100644
--- a/src/components/DomainFormModal.test.ts
+++ b/src/components/DomainFormModal.test.ts
@@ -1,7 +1,16 @@
-import { describe, it, expect, afterEach } from "vitest";
-import { mount, type VueWrapper } from "@vue/test-utils";
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { flushPromises, mount, type VueWrapper } from "@vue/test-utils";
 import DomainFormModal from "./DomainFormModal.vue";
 import type { DomainConfig } from "@/types";
+import { notificationsApi } from "@/services/api";
+
+vi.mock("@/services/api", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/services/api")>();
+  return {
+    ...actual,
+    notificationsApi: { ...actual.notificationsApi, getAccessEmailTargets: vi.fn() },
+  };
+});
 
 let wrapper: VueWrapper;
 
@@ -21,6 +30,7 @@ const mountModal = (domain?: DomainConfig) => {
 afterEach(() => {
   wrapper?.unmount();
   document.body.innerHTML = "";
+  vi.mocked(notificationsApi.getAccessEmailTargets).mockReset();
 });
 
 describe("DomainFormModal routing-only hostnames", () => {
@@ -78,6 +88,25 @@ describe("DomainFormModal static caching", () => {
 });
 
 describe("DomainFormModal visitor access", () => {
+  it("loads the deployment's permitted email targets", async () => {
+    vi.mocked(notificationsApi.getAccessEmailTargets).mockResolvedValue({
+      data: { targets: [{ id: "smtp-primary", name: "Primary mail" }] },
+    } as Awaited<ReturnType<typeof notificationsApi.getAccessEmailTargets>>);
+    const wrapper = mountModal();
+    await flushPromises();
+    expect(notificationsApi.getAccessEmailTargets).toHaveBeenCalledWith("shop");
+    const accessToggle = Array.from(document.querySelectorAll("label")).find((label) =>
+      label.textContent?.includes("Require email verification"),
+    );
+    if (!accessToggle) throw new Error("Access toggle missing");
+    const input = accessToggle.querySelector<HTMLInputElement>("input");
+    if (!input) throw new Error("Access input missing");
+    input.checked = true;
+    input.dispatchEvent(new Event("change", { bubbles: true }));
+    await wrapper.vm.$nextTick();
+    expect(document.body.textContent).toContain("Primary mail");
+  });
+
   it("preserves an email allowlist and session settings", async () => {
     const wrapper = mountModal({
       id: "d1",
diff --git a/src/components/DomainFormModal.vue b/src/components/DomainFormModal.vue
index bea697d..7b5e93c 100644
--- a/src/components/DomainFormModal.vue
+++ b/src/components/DomainFormModal.vue
@@ -234,7 +234,7 @@ const form = ref<{
   access: { enabled: false, mode: "allowlist", allowed_emails: "", email_target_id: "", session_hours: 24 },
 });
 
-const emailTargets = ref<NotificationTarget[]>([]);
+const emailTargets = ref<Pick<NotificationTarget, "id" | "name">[]>([]);
 
 watch(
   () => props.visible,
@@ -292,8 +292,8 @@ const isValid = computed(() => {
 
 async function loadEmailTargets() {
   try {
-    const response = await notificationsApi.getTargets();
-    emailTargets.value = response.data.targets.filter((target) => target.enabled && target.kind === "email");
+    const response = await notificationsApi.getAccessEmailTargets(props.deploymentName);
+    emailTargets.value = response.data.targets;
   } catch {
     emailTargets.value = [];
   }
diff --git a/src/services/api.ts b/src/services/api.ts
index 45a02fb..bbe2756 100755
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -597,6 +597,10 @@ export interface NotificationIncident {
 }
 
 export const notificationsApi = {
+  getAccessEmailTargets: (deployment: string) =>
+    apiClient.get<{ targets: Pick<NotificationTarget, "id" | "name">[] }>(
+      `/deployments/${encodeURIComponent(deployment)}/access/email-targets`,
+    ),
   getTargets: () => apiClient.get<{ targets: NotificationTarget[] }>("/notifications/targets"),
   getAlertTargetOptions: () =>
     apiClient.get<{ targets: Pick<NotificationTarget, "id" | "name">[] }>("/alerts/target-options"),

From fa5dbe28f593295d7475d45d820c4a26739df214 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Wed, 23 Sep 2026 14:37:39 +0100
Subject: [PATCH 3/4] fix(access): Address domain form review findings

Visitor access settings now reject invalid session lengths and normalize saved emails.

Email targets remain usable when the selector response omits its target list.
---
 src/components/DomainFormModal.test.ts | 42 +++++++++++++++++++++++---
 src/components/DomainFormModal.vue     |  7 +++--
 2 files changed, 42 insertions(+), 7 deletions(-)

diff --git a/src/components/DomainFormModal.test.ts b/src/components/DomainFormModal.test.ts
index a0f602e..3845c27 100644
--- a/src/components/DomainFormModal.test.ts
+++ b/src/components/DomainFormModal.test.ts
@@ -49,7 +49,7 @@ describe("DomainFormModal routing-only hostnames", () => {
   });
 
   it("emits routing-only hostnames separately from certificate-bearing aliases", async () => {
-    const wrapper = mountModal({
+    mountModal({
       id: "d1",
       service: "web",
       container_port: 80,
@@ -70,7 +70,7 @@ describe("DomainFormModal routing-only hostnames", () => {
 
 describe("DomainFormModal static caching", () => {
   it("emits the static-cache toggle when enabled on the domain", async () => {
-    const wrapper = mountModal({
+    mountModal({
       id: "d1",
       service: "web",
       container_port: 80,
@@ -92,7 +92,7 @@ describe("DomainFormModal visitor access", () => {
     vi.mocked(notificationsApi.getAccessEmailTargets).mockResolvedValue({
       data: { targets: [{ id: "smtp-primary", name: "Primary mail" }] },
     } as Awaited<ReturnType<typeof notificationsApi.getAccessEmailTargets>>);
-    const wrapper = mountModal();
+    mountModal();
     await flushPromises();
     expect(notificationsApi.getAccessEmailTargets).toHaveBeenCalledWith("shop");
     const accessToggle = Array.from(document.querySelectorAll("label")).find((label) =>
@@ -108,7 +108,7 @@ describe("DomainFormModal visitor access", () => {
   });
 
   it("preserves an email allowlist and session settings", async () => {
-    const wrapper = mountModal({
+    mountModal({
       id: "d1",
       service: "web",
       container_port: 80,
@@ -135,4 +135,38 @@ describe("DomainFormModal visitor access", () => {
       session_hours: 48,
     });
   });
+
+  it("normalizes allowlist emails and rejects invalid session lengths", async () => {
+    mountModal({
+      id: "d1",
+      service: "web",
+      container_port: 80,
+      domain: "private.example.com",
+      ssl: { enabled: true, auto_cert: true },
+      access: {
+        enabled: true,
+        mode: "allowlist",
+        allowed_emails: ["Person@Example.com"],
+        email_target_id: "smtp-primary",
+        session_hours: 721,
+      },
+    });
+
+    document.querySelector<HTMLButtonElement>(".btn-primary")?.click();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted("save")).toBeUndefined();
+
+    const sessionInput = Array.from(document.querySelectorAll<HTMLInputElement>('input[type="number"]')).find(
+      (input) => input.max === "720",
+    );
+    if (!sessionInput) throw new Error("Session input missing");
+    sessionInput.value = "24";
+    sessionInput.dispatchEvent(new Event("input", { bubbles: true }));
+    await wrapper.vm.$nextTick();
+    document.querySelector<HTMLButtonElement>(".btn-primary")?.click();
+    await wrapper.vm.$nextTick();
+
+    const saved = wrapper.emitted("save")?.[0]?.[0] as DomainConfig;
+    expect(saved.access?.allowed_emails).toEqual(["person@example.com"]);
+  });
 });
diff --git a/src/components/DomainFormModal.vue b/src/components/DomainFormModal.vue
index 7b5e93c..815c341 100644
--- a/src/components/DomainFormModal.vue
+++ b/src/components/DomainFormModal.vue
@@ -106,7 +106,7 @@
                 <BaseField
                   v-if="form.access.mode === 'allowlist'"
                   label="Allowed email addresses"
-                  hint="Enter one email address per line."
+                  hint="Enter email addresses on separate lines or separated by commas."
                 >
                   <BaseTextarea v-model="form.access.allowed_emails" :rows="4" placeholder="person@example.com" />
                 </BaseField>
@@ -286,6 +286,7 @@ const isValid = computed(() => {
   if (form.value.domain.trim() === "") return false;
   if (!form.value.access.enabled) return true;
   if (!form.value.access.email_target_id) return false;
+  if (form.value.access.session_hours < 1 || form.value.access.session_hours > 720) return false;
   if (form.value.access.mode === "allowlist") return accessEmails().length > 0;
   return true;
 });
@@ -293,7 +294,7 @@ const isValid = computed(() => {
 async function loadEmailTargets() {
   try {
     const response = await notificationsApi.getAccessEmailTargets(props.deploymentName);
-    emailTargets.value = response.data.targets;
+    emailTargets.value = response.data.targets || [];
   } catch {
     emailTargets.value = [];
   }
@@ -302,7 +303,7 @@ async function loadEmailTargets() {
 function accessEmails() {
   return form.value.access.allowed_emails
     .split(/[\n,]/)
-    .map((email) => email.trim())
+    .map((email) => email.trim().toLowerCase())
     .filter(Boolean);
 }
 

From fe4dbaffa8104bcffce369ac698a16fdf2df1463 Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Wed, 23 Sep 2026 14:47:27 +0100
Subject: [PATCH 4/4] ui(access): Document email domain allowlists

The visitor access form now shows how to allow every verified address on a domain.
---
 src/components/DomainFormModal.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/DomainFormModal.vue b/src/components/DomainFormModal.vue
index 815c341..bfc3ccf 100644
--- a/src/components/DomainFormModal.vue
+++ b/src/components/DomainFormModal.vue
@@ -105,10 +105,14 @@
 
                 <BaseField
                   v-if="form.access.mode === 'allowlist'"
-                  label="Allowed email addresses"
-                  hint="Enter email addresses on separate lines or separated by commas."
+                  label="Allowed emails and domains"
+                  hint="Enter an email or @domain on each line, or separate entries with commas."
                 >
-                  <BaseTextarea v-model="form.access.allowed_emails" :rows="4" placeholder="person@example.com" />
+                  <BaseTextarea
+                    v-model="form.access.allowed_emails"
+                    :rows="4"
+                    placeholder="person@example.com&#10;@flatrun.dev"
+                  />
                 </BaseField>
 
                 <BaseField label="Email delivery target" hint="FlatRun sends sign-in links through this SMTP target.">