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:
parent
5c3e4ce7d8
commit
c692fe436f
2 changed files with 192 additions and 102 deletions
|
|
@ -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,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 @@
|
|||
<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;
|
||||
|
|
|
|||
|
|
@ -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,26 +34,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
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`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
headers: {
|
||||
'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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue