From d100af0402c23f7810f2e58edf1981355b98652b Mon Sep 17 00:00:00 2001
From: nfebe <fenn25.fn@gmail.com>
Date: Fri, 17 Jul 2026 00:03:11 +0100
Subject: [PATCH] feat(ui): Add routing-only hostnames to the domain form

A domain can now carry hostnames that route to the deployment but are never
issued a certificate, for a hostname whose TLS is terminated by an external
proxy such as Cloudflare. They are entered separately from ordinary aliases,
which continue to request certificates, so the two cases are not confused.
---
 src/components/DomainFormModal.test.ts | 59 ++++++++++++++++++++++++++
 src/components/DomainFormModal.vue     | 38 +++++++++++++++++
 src/types/index.ts                     |  1 +
 3 files changed, 98 insertions(+)
 create mode 100644 src/components/DomainFormModal.test.ts

diff --git a/src/components/DomainFormModal.test.ts b/src/components/DomainFormModal.test.ts
new file mode 100644
index 0000000..a4b8287
--- /dev/null
+++ b/src/components/DomainFormModal.test.ts
@@ -0,0 +1,59 @@
+import { describe, it, expect, afterEach } from "vitest";
+import { mount, type VueWrapper } from "@vue/test-utils";
+import DomainFormModal from "./DomainFormModal.vue";
+import type { DomainConfig } from "@/types";
+
+let wrapper: VueWrapper;
+
+const mountModal = (domain?: DomainConfig) => {
+  wrapper = mount(DomainFormModal, {
+    attachTo: document.body,
+    props: {
+      visible: true,
+      domain: domain ?? null,
+      services: [],
+      deploymentName: "shop",
+    },
+  });
+  return wrapper;
+};
+
+afterEach(() => {
+  wrapper?.unmount();
+  document.body.innerHTML = "";
+});
+
+describe("DomainFormModal routing-only hostnames", () => {
+  it("hydrates existing routing-only hostnames into their own inputs", () => {
+    mountModal({
+      id: "d1",
+      service: "web",
+      container_port: 80,
+      domain: "api.example.com",
+      ssl: { enabled: true, auto_cert: true },
+      route_only_aliases: ["dashboard.example.com"],
+    });
+
+    const inputs = Array.from(document.querySelectorAll<HTMLInputElement>("input")).map((i) => i.value);
+    expect(inputs).toContain("dashboard.example.com");
+  });
+
+  it("emits routing-only hostnames separately from certificate-bearing aliases", async () => {
+    const wrapper = mountModal({
+      id: "d1",
+      service: "web",
+      container_port: 80,
+      domain: "api.example.com",
+      ssl: { enabled: true, auto_cert: true },
+      aliases: ["www.example.com"],
+      route_only_aliases: ["dashboard.example.com"],
+    });
+
+    document.querySelector<HTMLButtonElement>(".btn-primary")?.click();
+    await wrapper.vm.$nextTick();
+
+    const saved = wrapper.emitted("save")?.[0]?.[0] as DomainConfig;
+    expect(saved.aliases).toEqual(["www.example.com"]);
+    expect(saved.route_only_aliases).toEqual(["dashboard.example.com"]);
+  });
+});
diff --git a/src/components/DomainFormModal.vue b/src/components/DomainFormModal.vue
index bcce9f5..db5c897 100644
--- a/src/components/DomainFormModal.vue
+++ b/src/components/DomainFormModal.vue
@@ -89,6 +89,31 @@
               </div>
               <span class="hint">Additional domain names that should also resolve here</span>
             </div>
+
+            <div class="form-group">
+              <label>Routing-only hostnames</label>
+              <div class="aliases-input">
+                <div v-for="(alias, index) in form.route_only_aliases" :key="index" class="alias-item">
+                  <input
+                    v-model="form.route_only_aliases[index]"
+                    type="text"
+                    class="form-input"
+                    placeholder="dashboard.example.com"
+                  />
+                  <button type="button" class="remove-btn" @click="removeRouteOnly(index)">
+                    <i class="pi pi-times" />
+                  </button>
+                </div>
+                <button type="button" class="btn btn-sm btn-secondary" @click="addRouteOnly">
+                  <i class="pi pi-plus" />
+                  Add hostname
+                </button>
+              </div>
+              <span class="hint">
+                Routed here but never issued a certificate, for a hostname whose TLS is terminated by an external proxy
+                (e.g. Cloudflare). It shares this domain's certificate over the proxy's SNI.
+              </span>
+            </div>
           </form>
 
           <div class="modal-footer">
@@ -129,6 +154,7 @@ const form = ref<{
   strip_prefix: boolean;
   ssl: { enabled: boolean; auto_cert: boolean };
   aliases: string[];
+  route_only_aliases: string[];
 }>({
   domain: "",
   service: "",
@@ -137,6 +163,7 @@ const form = ref<{
   strip_prefix: false,
   ssl: { enabled: false, auto_cert: false },
   aliases: [],
+  route_only_aliases: [],
 });
 
 watch(
@@ -155,6 +182,7 @@ watch(
             auto_cert: props.domain.ssl?.auto_cert || false,
           },
           aliases: [...(props.domain.aliases || [])],
+          route_only_aliases: [...(props.domain.route_only_aliases || [])],
         };
       } else {
         form.value = {
@@ -165,6 +193,7 @@ watch(
           strip_prefix: false,
           ssl: { enabled: false, auto_cert: false },
           aliases: [],
+          route_only_aliases: [],
         };
       }
     }
@@ -184,6 +213,14 @@ function removeAlias(index: number) {
   form.value.aliases.splice(index, 1);
 }
 
+function addRouteOnly() {
+  form.value.route_only_aliases.push("");
+}
+
+function removeRouteOnly(index: number) {
+  form.value.route_only_aliases.splice(index, 1);
+}
+
 function handleSubmit() {
   if (!isValid.value) return;
 
@@ -196,6 +233,7 @@ function handleSubmit() {
     strip_prefix: form.value.strip_prefix || undefined,
     ssl: form.value.ssl,
     aliases: form.value.aliases.filter((a) => a.trim() !== ""),
+    route_only_aliases: form.value.route_only_aliases.filter((a) => a.trim() !== ""),
   };
 
   emit("save", domainData);
diff --git a/src/types/index.ts b/src/types/index.ts
index 2893eae..5859fc9 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -61,6 +61,7 @@ export interface DomainConfig {
   strip_prefix?: boolean;
   ssl: SSLConfig;
   aliases?: string[];
+  route_only_aliases?: string[];
 }
 
 export interface QuickAction {