Wildcard origins + auth host configured per origin row (⋮ menu, 🔑 indicator)

2026-09-07 00:53:33 +00:00
parent 7a9953f703
commit dcfb497cf2
7 changed files with 217 additions and 69 deletions
@@ -484,14 +484,15 @@ function createRealm() {
    origins: [],
    originValidation: [],
    wellKnownCheck: null,
-    authHostValidation: null,
  })
 }

 function openRealm(realm) {
  // One combined list for editing: in-domain sites and related origins,
-  // classified by hostname. Strip https:// scheme for editing.
-  const origins = [...(realm.origins || []), ...(realm.related_origins || [])]
+  // classified by hostname. The default is always shown explicitly as the
+  // '*.rp_id' wildcard entry. Strip https:// scheme for editing.
+  const stored = realm.origins || []
+  const origins = [...(stored.length ? stored : ['*.' + realm.rp_id]), ...(realm.related_origins || [])]
    .map(o => o.replace(/^https:\/\//, ''))
  openDialog('realm-edit', {
    isNew: false,
@@ -501,7 +502,6 @@ function openRealm(realm) {
    origins,
    originValidation: origins.map(() => null),
    wellKnownCheck: null,
-    authHostValidation: null,
  })
 }

@@ -945,13 +945,19 @@ async function submitDialog() {
      const auth_host = d.auth_host?.trim() || ''
      // The combined origins list is split by hostname: entries on the
      // rp-id domain form the in-domain allow-list, entries elsewhere are
-      // related origins (ROR). Bare hostnames are sent as-is; the backend
+      // related origins (ROR). Wildcards ('*.app.example.com') classify by
+      // their base domain. Bare hostnames are sent as-is; the backend
      // normalizes them with https://.
      const origins = []
      const related_origins = []
      for (const o of (d.origins || []).map(o => o.trim()).filter(o => o)) {
        let hn = null
-        try { hn = new URL(o.startsWith('http') ? o : 'https://' + o).hostname } catch { continue }
+        if (o.startsWith('*.')) {
+          hn = o.slice(2).replace(/\.+$/, '')
+        } else {
+          try { hn = new URL(o.startsWith('http') ? o : 'https://' + o).hostname } catch { continue }
+        }
+        if (!hn) continue
        if (hn === rp_id || hn.endsWith('.' + rp_id)) origins.push(o)
        else related_origins.push(o)
      }
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import Modal from '@/components/Modal.vue'
 import NameEditForm from '@/components/NameEditForm.vue'
 import { useAuthStore } from '@/stores/auth'
@@ -20,9 +20,6 @@ const realmRpId = computed(() => props.dialog?.data?.rp_id || '')

 // Initialize validation properties
 if (props.dialog?.data && props.dialog.type === 'realm-edit') {
-  if (!('authHostValidation' in props.dialog.data)) {
-    props.dialog.data.authHostValidation = null
-  }
  if (!('originValidation' in props.dialog.data)) {
    props.dialog.data.originValidation = (props.dialog.data.origins || []).map(() => null)
  }
@@ -31,14 +28,13 @@ if (props.dialog?.data && props.dialog.type === 'realm-edit') {
  }
 }

-// Block submit on hard errors: malformed entries, auth-host outside the
-// rp-id domain, or validation still in flight. Connectivity and rp-id
-// mismatch results are warnings only (entries may be hosted elsewhere, or
-// a new domain whose DNS is not routed to this instance yet).
+// Block submit on hard errors: malformed entries or validation still in
+// flight. Connectivity and rp-id mismatch results are warnings only
+// (entries may be hosted elsewhere, or a new domain whose DNS is not
+// routed to this instance yet).
 const isValidationInvalid = computed(() => {
  if (props.dialog?.type !== 'realm-edit') return false
  const d = props.dialog.data
-  if (d.authHostValidation === 'invalid-domain' || d.authHostValidation === 'validating') return true
  const bad = v => v === 'invalid' || v === 'validating'
  if (d.originValidation?.some(bad)) return true
  if (d.isNew && !isWellFormedDomain(d.rp_id || '')) return true
@@ -117,6 +113,10 @@ function isWellFormedDomain(value) {

 function originHostname(origin) {
  if (!origin.trim()) return null
+  if (origin.trim().startsWith('*.')) {
+    const base = origin.trim().slice(2).replace(/\.+$/, '')
+    return isWellFormedDomain(base) ? base : null
+  }
  try {
    const url = origin.startsWith('http') ? new URL(origin) : new URL('https://' + origin)
    return url.hostname || null
@@ -162,10 +162,15 @@ async function validateOriginConnectivity(i) {
 function validateOrigin(i) {
  const d = props.dialog?.data
  if (!d) return
-  if (!originHostname(d.origins[i])) {
+  const value = d.origins[i]
+  if (!originHostname(value)) {
    d.originValidation[i] = 'invalid'
    return
  }
+  if (value.trim().startsWith('*.')) {
+    d.originValidation[i] = null // wildcards have no concrete site to probe
+    return
+  }
  validateOriginConnectivity(i)
 }

@@ -198,44 +203,77 @@ async function testWellKnown() {
 }
 watch(() => relatedEntries.value.map(asHttpsOrigin).join('|'), testWellKnown, { immediate: true })

-async function validateAuthHostConnectivity(authHost) {
+// Seed the default wildcard entry for a new domain once its rp-id is known,
+// so the list always shows what is allowed ('*.example.com' = the domain and
+// all its subdomains). Removing the last in-domain entry is blocked in the
+// row menu, so the list never becomes empty afterwards.
+watch(realmRpId, rp => {
  const d = props.dialog?.data
-  if (!d) return
-
-  d.authHostValidation = 'validating'
-  try {
-    const cleanAuthHost = authHost.replace(/\/+$/, '')
-    const testUrl = cleanAuthHost.startsWith('http') ? cleanAuthHost : 'https://' + cleanAuthHost
-    const response = await fetch(testUrl + '/auth/api/settings', {
-      method: 'GET',
-      headers: { 'Accept': 'application/json' }
-    })
-    if (d.auth_host !== authHost) return // auth_host changed while validating
-    if (response.ok) {
-      const data = await response.json()
-      d.authHostValidation = (data.rp_id && data.rp_id === realmRpId.value) ? 'valid' : 'mismatch'
-    } else {
-      d.authHostValidation = 'unreachable'
-    }
-  } catch (e) {
-    if (d.auth_host === authHost) {
-      d.authHostValidation = 'unreachable'
-    }
+  if (props.dialog?.type !== 'realm-edit' || !d?.isNew) return
+  if (!d.origins.length && isWellFormedDomain(rp)) {
+    d.origins.push('*.' + rp)
+    d.originValidation.push(null)
  }
+})
+
+// --- Row menu: auth host assignment and entry removal ---
+
+const openMenu = ref(null)
+
+// Host[:port] of an entry or the auth_host value, for comparison.
+function hostWithPort(value) {
+  if (!value?.trim()) return null
+  if (value.trim().startsWith('*.')) return null
+  try { return new URL(value.startsWith('http') ? value : 'https://' + value).host } catch { return null }
 }

-function validateAuthHost() {
+function isAuthHostEntry(origin) {
  const d = props.dialog?.data
-  if (!d || !d.auth_host?.trim()) {
-    if (d) d.authHostValidation = null // Allow empty
-    return
-  }
+  const host = hostWithPort(origin)
+  return !!(host && d?.auth_host && host === hostWithPort(d.auth_host))
+}

-  if (isWithinDomain(d.auth_host, realmRpId.value)) {
-    validateAuthHostConnectivity(d.auth_host)
-  } else {
-    d.authHostValidation = 'invalid-domain'
+function setAuthHost(i) {
+  const d = props.dialog?.data
+  if (!d) return
+  let entry = d.origins[i].trim()
+  if (entry.startsWith('*.')) {
+    // A wildcard cannot be the auth host — create a concrete auth.<base> entry
+    entry = 'auth.' + entry.slice(2)
+    if (!d.origins.some(o => hostWithPort(o) === entry)) {
+      d.origins.push(entry)
+      d.originValidation.push(null)
+      validateOrigin(d.origins.length - 1)
+    }
  }
+  d.auth_host = hostWithPort(entry) || entry
+  openMenu.value = null
+}
+
+function clearAuthHost() {
+  const d = props.dialog?.data
+  if (d) d.auth_host = ''
+  openMenu.value = null
+}
+
+const inDomainCount = computed(() =>
+  (props.dialog?.data?.origins || []).filter(o => originHostname(o) && !isRelatedEntry(o)).length
+)
+
+function canRemoveOrigin(i) {
+  const o = props.dialog?.data?.origins[i]
+  if (o === undefined) return false
+  // Never empty the in-domain list — that would silently mean the wildcard
+  // default on the server; keep at least one in-domain entry visible
+  return isRelatedEntry(o) || !originHostname(o) || inDomainCount.value > 1
+}
+
+function onRemoveOrigin(i) {
+  const d = props.dialog?.data
+  if (!d || !canRemoveOrigin(i)) return
+  if (isAuthHostEntry(d.origins[i])) d.auth_host = ''
+  removeOrigin(i)
+  openMenu.value = null
 }
 </script>

@@ -321,15 +359,6 @@ function validateAuthHost() {
          <label>Display Name (rp-name)
            <input v-model="dialog.data.rp_name" :placeholder="dialog.data.rp_id" />
          </label>
-          <label>Dedicated Authentication Site (auth-host)
-            <input v-model="dialog.data.auth_host" @input="validateAuthHost()" :class="{ 'input-error': dialog.data.authHostValidation === 'invalid-domain' }" />
-          </label>
-          <p v-if="dialog.data.authHostValidation === 'validating'" class="small muted">Validating...</p>
-          <p v-else-if="dialog.data.authHostValidation === 'valid'" class="small muted">Valid</p>
-          <p v-else-if="dialog.data.authHostValidation === 'invalid-domain'" class="small muted">Must be {{ dialog.data.rp_id }} or a subdomain of it.</p>
-          <p v-else-if="dialog.data.authHostValidation === 'unreachable'" class="small muted">Well-formed but unreachable — make sure it is routed to this instance.</p>
-          <p v-else-if="dialog.data.authHostValidation === 'mismatch'" class="small muted">Reachable, but does not serve this domain.</p>
-          <p v-else class="small muted">Optional. Moves the account and admin interface to this one hostname. Sign-in works on every site regardless.</p>

          <div class="origin-label">
            Allowed Origins
@@ -344,14 +373,24 @@ function validateAuthHost() {
                class="origin-input"
                :class="{ 'input-error': dialog.data.originValidation[i] === 'invalid' }"
              />
-              <span v-if="isRelatedEntry(dialog.data.origins[i])" class="ror-tag" title="Related origin (WebAuthn ROR) — shares this domain's passkeys">related</span>
-              <button type="button" class="icon-btn delete-icon" @click="removeOrigin(i)" aria-label="Remove origin" title="Remove origin">❌</button>
+              <span v-if="isAuthHostEntry(dialog.data.origins[i])" class="key-badge" title="Authentication site — the account and admin interface live here">🔑</span>
+              <span v-else-if="isRelatedEntry(dialog.data.origins[i])" class="ror-tag" title="Related origin (WebAuthn ROR) — shares this domain's passkeys">related</span>
+              <div class="row-menu">
+                <button type="button" class="icon-btn" @click.stop="openMenu = openMenu === i ? null : i" aria-label="Origin actions" title="Actions">⋮</button>
+                <div v-if="openMenu === i" class="row-menu-popup">
+                  <button v-if="isAuthHostEntry(dialog.data.origins[i])" type="button" @click="clearAuthHost()">Remove auth host</button>
+                  <button v-else-if="!isRelatedEntry(dialog.data.origins[i]) && originHostname(dialog.data.origins[i])" type="button" @click="setAuthHost(i)">Set as auth host</button>
+                  <button type="button" @click="onRemoveOrigin(i)" :disabled="!canRemoveOrigin(i)">Remove entry</button>
+                </div>
+              </div>
            </div>
            <p v-if="dialog.data.originValidation.some(v => v === 'unreachable')" class="small muted">Some sites are unreachable — make sure they are routed to this instance.</p>
            <p v-else-if="dialog.data.originValidation.some(v => v === 'mismatch')" class="small muted">Some sites are reachable but do not serve this domain.</p>
          </div>
-          <p v-if="!dialog.data.origins.length" class="small muted">All of <strong>{{ dialog.data.rp_id }}</strong> and its subdomains may sign in (default). Add entries to restrict sign-in to specific sites, or to share this domain's passkeys with another domain name.</p>
-          <p v-else class="small muted">Only the listed sites may sign in with this domain's passkeys. Entries on other domain names become related origins (WebAuthn ROR).</p>
+          <p class="small muted">
+            Only the listed sites may sign in with this domain's passkeys — <strong>*.{{ dialog.data.rp_id }}</strong> means the domain and all its subdomains.
+            Entries on other domain names become related origins (WebAuthn ROR). The 🔑 site hosts the account and admin interface (set via ⋮).
+          </p>

          <template v-if="relatedEntries.length">
            <p v-if="relatedEntries.length > 5" class="small error">Browsers support at most 5 related origins — {{ relatedEntries.length }} listed, extras will not work.</p>
@@ -423,6 +462,12 @@ function validateAuthHost() {
 .origin-input { flex: 1; min-width: 8rem; font-family: var(--font-mono, monospace); }
 .origin-row .delete-icon { flex-shrink: 0; }
 .origin-add-btn { font-size: 1.2rem; }
+.key-badge { flex-shrink: 0; }
+.row-menu { position: relative; flex-shrink: 0; }
+.row-menu-popup { position: absolute; right: 0; top: 100%; z-index: 10; display: flex; flex-direction: column; min-width: 9rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border, #ccc); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
+.row-menu-popup button { text-align: left; padding: var(--space-xs) var(--space-sm); background: none; border: none; cursor: pointer; white-space: nowrap; }
+.row-menu-popup button:hover:not(:disabled) { background: var(--color-bg-soft, rgba(127,127,127,0.12)); }
+.row-menu-popup button:disabled { opacity: 0.5; cursor: default; }
 .ror-tag { flex-shrink: 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); border: 1px solid var(--color-border, currentColor); border-radius: 3px; padding: 0 0.3rem; }
 .wellknown-doc { display: flex; align-items: flex-start; gap: var(--space-xs); }
 .wellknown-doc pre { flex: 1; margin: 0; padding: var(--space-xs) var(--space-sm); font-size: 0.8rem; background: var(--color-bg-soft, rgba(127,127,127,0.08)); border-radius: 4px; overflow-x: auto; }
@@ -42,6 +42,7 @@ function domainDisplay(domain) {
 // replaces the default "*.rp_id" wildcard; related domains (ROR) are always
 // listed individually — they cannot use wildcards.
 function originHost(origin) {
+  if (origin.startsWith('*.')) return origin
  try { return new URL(origin).host } catch { return origin }
 }
 function allowedOrigins(realm) {