Improve user/alias creation forms

- Prefill domain part in forms (e.g. input + @domain.com)
- Use native <dialog> element for modals
- Show error messages instead of alert()
- Cleaner input group styling

frontend/src/routes/domains/[name]/aliases/+page.svelte

@@ -9,8 +9,10 @@
 
   let aliases = $state<Alias[]>([]);
   let loading = $state(true);
-  let showModal = $state(false);
+  let dialogEl = $state<HTMLDialogElement | null>(null);
-  let newAlias = $state({ source: '', destination: '' });
+  let sourceLocalPart = $state('');
+  let newAlias = $state({ destination: '' });
+  let createError = $state('');
   let domainName = $state('');
 
   async function loadAliases(name: string) {
@@ -30,7 +32,20 @@
     }
   }
 
+  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`, {
@@ -39,17 +54,17 @@
           'Content-Type': 'application/json',
           Authorization: `Bearer ${token}`
         },
-        body: JSON.stringify(newAlias)
+        body: JSON.stringify({ source, destination: newAlias.destination })
       });
       if (res.ok) {
-        showModal = false;
+        closeModal();
-        newAlias = { source: '', destination: '' };
         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 @@
 <div class="header">
   <a href="/domains/{domainName}" class="back">← Back to {domainName}</a>
   <h2>Aliases</h2>
-  <button onclick={() => showModal = true}>Add Alias</button>
+  <button onclick={openModal}>Add Alias</button>
 </div>
 
 {#if loading}
@@ -110,26 +125,29 @@
   </table>
 {/if}
 
-{#if showModal}
+<dialog bind:this={dialogEl}>
-  <button class="modal-backdrop" onclick={() => showModal = false} aria-label="Close modal"></button>
+  <h3>Add Alias</h3>
-  <div class="modal">
+  <form onsubmit={(e) => { e.preventDefault(); createAlias(); }}>
-    <h3>Add Alias</h3>
+    <label class="email-input">
-    <form onsubmit={(e) => { e.preventDefault(); createAlias(); }}>
+      <span class="label-text">Source (alias address):</span>
-      <label>
+      <div class="input-group">
-        Source (alias address):
+        <input type="text" bind:value={sourceLocalPart} placeholder="alias-name" required />
-        <input type="text" bind:value={newAlias.source} placeholder="info@{domainName}" required />
+        <span class="domain-suffix">@{domainName}</span>
-      </label>
-      <label>
-        Destination (forward to):
-        <input type="text" bind:value={newAlias.destination} placeholder="user@example.org" required />
-      </label>
-      <div class="actions">
-        <button type="button" onclick={() => showModal = false}>Cancel</button>
-        <button type="submit">Create</button>
       </div>
-    </form>
+    </label>
-  </div>
+    <label>
-{/if}
+      Destination (forward to):
+      <input type="text" bind:value={newAlias.destination} placeholder="user@example.org" required />
+    </label>
+    {#if createError}
+      <p class="error">{createError}</p>
+    {/if}
+    <div class="actions">
+      <button type="button" class="secondary" onclick={closeModal}>Cancel</button>
+      <button type="submit">Create</button>
+    </div>
+  </form>
+</dialog>
 
 <style>
   .header {
@@ -183,53 +201,80 @@
     color: white;
   }
 
+  button.secondary {
+    background: #95a5a6;
+  }
+
   button.danger {
     background: #e74c3c;
   }
 
-  .modal-backdrop {
+  dialog {
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.5);
-    border: none;
-    cursor: pointer;
-    z-index: 100;
-  }
-
-  .modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: white;
     padding: 2rem;
     border-radius: 8px;
-    min-width: 400px;
+    border: none;
-    z-index: 101;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
   }
 
-  .modal h3 {
+  dialog::backdrop {
-    margin-top: 0;
+    background: rgba(0,0,0,0.5);
   }
 
-  .modal form {
+  dialog h3 {
+    margin: 0 0 1rem 0;
+  }
+
+  dialog form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
 
-  .modal label {
+  dialog label {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
 
-  .modal input {
+  dialog input {
     padding: 0.5rem;
     border: 1px solid #ddd;
     border-radius: 4px;
   }
 
+  .email-input .label-text {
+    font-weight: normal;
+  }
+
+  .input-group {
+    display: flex;
+    align-items: center;
+  }
+
+  .input-group input {
+    flex: 1;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .domain-suffix {
+    padding: 0.5rem 0.75rem;
+    background: #f0f0f0;
+    border: 1px solid #ddd;
+    border-left: none;
+    border-radius: 0 4px 4px 0;
+    color: #666;
+    white-space: nowrap;
+  }
+
+  dialog .error {
+    color: #e74c3c;
+    background: #fdecea;
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin: 0;
+  }
+
   .actions {
     display: flex;
     gap: 1rem;

frontend/src/routes/domains/[name]/users/+page.svelte

@@ -11,8 +11,10 @@
 
   let users = $state<User[]>([]);
   let loading = $state(true);
-  let showModal = $state(false);
+  let dialogEl = $state<HTMLDialogElement | null>(null);
-  let newUser = $state({ email: '', password: '', quota: 0 });
+  let localPart = $state('');
+  let newUser = $state({ password: '', quota: 0 });
+  let createError = $state('');
   let domainName = $state('');
 
   async function loadUsers(name: string) {
@@ -32,7 +34,20 @@
     }
   }
 
+  function openModal() {
+    createError = '';
+    localPart = '';
+    newUser = { password: '', quota: 0 };
+    dialogEl?.showModal();
+  }
+
+  function closeModal() {
+    dialogEl?.close();
+  }
+
   async function createUser() {
+    createError = '';
+    const email = `${localPart}@${domainName}`;
     try {
       const token = localStorage.getItem('token');
       const res = await fetch(`/api/domains/${encodeURIComponent(domainName)}/users`, {
@@ -41,17 +56,17 @@
           'Content-Type': 'application/json',
           Authorization: `Bearer ${token}`
         },
-        body: JSON.stringify(newUser)
+        body: JSON.stringify({ email, password: newUser.password, quota: newUser.quota })
       });
       if (res.ok) {
-        showModal = false;
+        closeModal();
-        newUser = { email: '', password: '', quota: 0 };
         await loadUsers(domainName);
       } else {
         const error = await res.json();
-        alert(error.error || 'Failed to create user');
+        createError = error.error || 'Failed to create user';
       }
     } catch (e) {
+      createError = 'Failed to create user';
       console.error('Failed to create user:', e);
     }
   }
@@ -90,7 +105,7 @@
 <div class="header">
   <a href="/domains/{domainName}" class="back">← Back to {domainName}</a>
   <h2>Users</h2>
-  <button onclick={() => showModal = true}>Add User</button>
+  <button onclick={openModal}>Add User</button>
 </div>
 
 {#if loading}
@@ -122,30 +137,33 @@
   </table>
 {/if}
 
-{#if showModal}
+<dialog bind:this={dialogEl}>
-  <button class="modal-backdrop" onclick={() => showModal = false} aria-label="Close modal"></button>
+  <h3>Add User</h3>
-  <div class="modal">
+  <form onsubmit={(e) => { e.preventDefault(); createUser(); }}>
-    <h3>Add User</h3>
+    <label class="email-input">
-    <form onsubmit={(e) => { e.preventDefault(); createUser(); }}>
+      <span class="label-text">Email:</span>
-      <label>
+      <div class="input-group">
-        Email:
+        <input type="text" bind:value={localPart} placeholder="username" required />
-        <input type="email" bind:value={newUser.email} placeholder="user@{domainName}" required />
+        <span class="domain-suffix">@{domainName}</span>
-      </label>
-      <label>
-        Password:
-        <input type="password" bind:value={newUser.password} required />
-      </label>
-      <label>
-        Quota (bytes, 0 = default):
-        <input type="number" bind:value={newUser.quota} min="0" />
-      </label>
-      <div class="actions">
-        <button type="button" onclick={() => showModal = false}>Cancel</button>
-        <button type="submit">Create</button>
       </div>
-    </form>
+    </label>
-  </div>
+    <label>
-{/if}
+      Password:
+      <input type="password" bind:value={newUser.password} required />
+    </label>
+    <label>
+      Quota (bytes, 0 = default):
+      <input type="number" bind:value={newUser.quota} min="0" />
+    </label>
+    {#if createError}
+      <p class="error">{createError}</p>
+    {/if}
+    <div class="actions">
+      <button type="button" class="secondary" onclick={closeModal}>Cancel</button>
+      <button type="submit">Create</button>
+    </div>
+  </form>
+</dialog>
 
 <style>
   .header {
@@ -199,53 +217,80 @@
     color: white;
   }
 
+  button.secondary {
+    background: #95a5a6;
+  }
+
   button.danger {
     background: #e74c3c;
   }
 
-  .modal-backdrop {
+  dialog {
-    position: fixed;
-    inset: 0;
-    background: rgba(0,0,0,0.5);
-    border: none;
-    cursor: pointer;
-    z-index: 100;
-  }
-
-  .modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: white;
     padding: 2rem;
     border-radius: 8px;
-    min-width: 400px;
+    border: none;
-    z-index: 101;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
   }
 
-  .modal h3 {
+  dialog::backdrop {
-    margin-top: 0;
+    background: rgba(0,0,0,0.5);
   }
 
-  .modal form {
+  dialog h3 {
+    margin: 0 0 1rem 0;
+  }
+
+  dialog form {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
 
-  .modal label {
+  dialog label {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
 
-  .modal input {
+  dialog input {
     padding: 0.5rem;
     border: 1px solid #ddd;
     border-radius: 4px;
   }
 
+  .email-input .label-text {
+    font-weight: normal;
+  }
+
+  .input-group {
+    display: flex;
+    align-items: center;
+  }
+
+  .input-group input {
+    flex: 1;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .domain-suffix {
+    padding: 0.5rem 0.75rem;
+    background: #f0f0f0;
+    border: 1px solid #ddd;
+    border-left: none;
+    border-radius: 0 4px 4px 0;
+    color: #666;
+    white-space: nowrap;
+  }
+
+  dialog .error {
+    color: #e74c3c;
+    background: #fdecea;
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin: 0;
+  }
+
   .actions {
     display: flex;
     gap: 1rem;