Show validation errors in domain creation form
Frontend now displays backend error messages when domain creation fails.
This commit is contained in:
parent
9dab3bc12c
commit
a8aaa08d29
1 changed files with 19 additions and 2 deletions
|
|
@ -18,6 +18,7 @@
|
||||||
let loading = $state(true);
|
let loading = $state(true);
|
||||||
let showModal = $state(false);
|
let showModal = $state(false);
|
||||||
let newDomain = $state({ name: '' });
|
let newDomain = $state({ name: '' });
|
||||||
|
let createError = $state('');
|
||||||
|
|
||||||
async function fetchWithAuth(url: string) {
|
async function fetchWithAuth(url: string) {
|
||||||
const token = localStorage.getItem('token');
|
const token = localStorage.getItem('token');
|
||||||
|
|
@ -48,18 +49,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
async function createDomain() {
|
async function createDomain() {
|
||||||
|
createError = '';
|
||||||
try {
|
try {
|
||||||
const res = await fetch('/api/domains', {
|
const res = await fetch('/api/domains', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem('token')}` },
|
headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${localStorage.getItem('token')}` },
|
||||||
body: JSON.stringify(newDomain)
|
body: JSON.stringify(newDomain)
|
||||||
});
|
});
|
||||||
|
const data = await res.json();
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
showModal = false;
|
showModal = false;
|
||||||
newDomain = { name: '' };
|
newDomain = { name: '' };
|
||||||
await loadData();
|
await loadData();
|
||||||
|
} else {
|
||||||
|
createError = data.error || 'Failed to create domain';
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
createError = 'Failed to create domain';
|
||||||
console.error('Failed to create domain:', e);
|
console.error('Failed to create domain:', e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -134,7 +140,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if showModal}
|
{#if showModal}
|
||||||
<button class="modal-backdrop" onclick={() => showModal = false} aria-label="Close modal"></button>
|
<button class="modal-backdrop" onclick={() => { showModal = false; createError = ''; }} aria-label="Close modal"></button>
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<h3>Add Domain</h3>
|
<h3>Add Domain</h3>
|
||||||
<form onsubmit={(e) => { e.preventDefault(); createDomain(); }}>
|
<form onsubmit={(e) => { e.preventDefault(); createDomain(); }}>
|
||||||
|
|
@ -142,8 +148,11 @@
|
||||||
Domain name:
|
Domain name:
|
||||||
<input type="text" bind:value={newDomain.name} placeholder="example.org" required />
|
<input type="text" bind:value={newDomain.name} placeholder="example.org" required />
|
||||||
</label>
|
</label>
|
||||||
|
{#if createError}
|
||||||
|
<p class="error">{createError}</p>
|
||||||
|
{/if}
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button type="button" onclick={() => showModal = false}>Cancel</button>
|
<button type="button" onclick={() => { showModal = false; createError = ''; }}>Cancel</button>
|
||||||
<button type="submit">Create</button>
|
<button type="submit">Create</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -274,6 +283,14 @@
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.modal .error {
|
||||||
|
color: #e74c3c;
|
||||||
|
background: #fdecea;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.actions {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue