From c692fe436fb9f1799f0b91e59777625617bf107a Mon Sep 17 00:00:00 2001 From: Christoph Haas Date: Mon, 23 Mar 2026 00:00:42 +0100 Subject: [PATCH] Improve user/alias creation forms - Prefill domain part in forms (e.g. input + @domain.com) - Use native element for modals - Show error messages instead of alert() - Cleaner input group styling --- .../domains/[name]/aliases/+page.svelte | 143 +++++++++++------ .../routes/domains/[name]/users/+page.svelte | 151 ++++++++++++------ 2 files changed, 192 insertions(+), 102 deletions(-) diff --git a/frontend/src/routes/domains/[name]/aliases/+page.svelte b/frontend/src/routes/domains/[name]/aliases/+page.svelte index dd145f0..6fc76b4 100644 --- a/frontend/src/routes/domains/[name]/aliases/+page.svelte +++ b/frontend/src/routes/domains/[name]/aliases/+page.svelte @@ -9,8 +9,10 @@ let aliases = $state([]); let loading = $state(true); - let showModal = $state(false); - let newAlias = $state({ source: '', destination: '' }); + let dialogEl = $state(null); + let sourceLocalPart = $state(''); + let newAlias = $state({ destination: '' }); + let createError = $state(''); let domainName = $state(''); async function loadAliases(name: string) { @@ -30,26 +32,39 @@ } } + function openModal() { + createError = ''; + sourceLocalPart = ''; + newAlias = { destination: '' }; + dialogEl?.showModal(); + } + + function closeModal() { + dialogEl?.close(); + } + async function createAlias() { + createError = ''; + const source = `${sourceLocalPart}@${domainName}`; try { const token = localStorage.getItem('token'); const res = await fetch(`/api/domains/${encodeURIComponent(domainName)}/aliases`, { method: 'POST', - headers: { + headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` }, - body: JSON.stringify(newAlias) + body: JSON.stringify({ source, destination: newAlias.destination }) }); if (res.ok) { - showModal = false; - newAlias = { source: '', destination: '' }; + closeModal(); await loadAliases(domainName); } else { const error = await res.json(); - alert(error.error || 'Failed to create alias'); + createError = error.error || 'Failed to create alias'; } } catch (e) { + createError = 'Failed to create alias'; console.error('Failed to create alias:', e); } } @@ -80,7 +95,7 @@
← Back to {domainName}

Aliases

- +
{#if loading} @@ -110,26 +125,29 @@ {/if} -{#if showModal} - -