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
This commit is contained in:
Christoph Haas 2026-03-23 00:00:42 +01:00
parent 5c3e4ce7d8
commit c692fe436f
2 changed files with 192 additions and 102 deletions

View file

@ -9,8 +9,10 @@
let aliases = $state<Alias[]>([]);
let loading = $state(true);
let showModal = $state(false);
let newAlias = $state({ source: '', destination: '' });
let dialogEl = $state<HTMLDialogElement | null>(null);
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;
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 @@
<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}
<button class="modal-backdrop" onclick={() => showModal = false} aria-label="Close modal"></button>
<div class="modal">
<h3>Add Alias</h3>
<form onsubmit={(e) => { e.preventDefault(); createAlias(); }}>
<label>
Source (alias address):
<input type="text" bind:value={newAlias.source} placeholder="info@{domainName}" required />
</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>
<dialog bind:this={dialogEl}>
<h3>Add Alias</h3>
<form onsubmit={(e) => { e.preventDefault(); createAlias(); }}>
<label class="email-input">
<span class="label-text">Source (alias address):</span>
<div class="input-group">
<input type="text" bind:value={sourceLocalPart} placeholder="alias-name" required />
<span class="domain-suffix">@{domainName}</span>
</div>
</form>
</div>
{/if}
</label>
<label>
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 {
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;
dialog {
padding: 2rem;
border-radius: 8px;
min-width: 400px;
z-index: 101;
border: none;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.modal h3 {
margin-top: 0;
dialog::backdrop {
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;

View file

@ -11,8 +11,10 @@
let users = $state<User[]>([]);
let loading = $state(true);
let showModal = $state(false);
let newUser = $state({ email: '', password: '', quota: 0 });
let dialogEl = $state<HTMLDialogElement | null>(null);
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;
newUser = { email: '', password: '', quota: 0 };
closeModal();
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}
<button class="modal-backdrop" onclick={() => showModal = false} aria-label="Close modal"></button>
<div class="modal">
<h3>Add User</h3>
<form onsubmit={(e) => { e.preventDefault(); createUser(); }}>
<label>
Email:
<input type="email" bind:value={newUser.email} placeholder="user@{domainName}" required />
</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>
<dialog bind:this={dialogEl}>
<h3>Add User</h3>
<form onsubmit={(e) => { e.preventDefault(); createUser(); }}>
<label class="email-input">
<span class="label-text">Email:</span>
<div class="input-group">
<input type="text" bind:value={localPart} placeholder="username" required />
<span class="domain-suffix">@{domainName}</span>
</div>
</form>
</div>
{/if}
</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>
{#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 {
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;
dialog {
padding: 2rem;
border-radius: 8px;
min-width: 400px;
z-index: 101;
border: none;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.modal h3 {
margin-top: 0;
dialog::backdrop {
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;