121 lines
4.9 KiB
Plaintext
121 lines
4.9 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
---
|
|
|
|
<Layout title="Site Settings">
|
|
<div class="glass p-12 mb-12" id="settings-content" style="display: none;">
|
|
<header class="mb-12 border-b border-white/5 pb-12">
|
|
<a href="/admin" class="text-blue hover:text-sky transition-colors mb-8 inline-flex items-center gap-2 group">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:-translate-x-1"><path d="m15 18-6-6 6-6"/></svg>
|
|
Back to Dashboard
|
|
</a>
|
|
<h1 class="text-4xl font-extrabold text-mauve mt-4">
|
|
Site Settings
|
|
</h1>
|
|
</header>
|
|
|
|
<form id="settings-form" class="space-y-6">
|
|
<div id="alert" class="hidden p-4 rounded-lg mb-6"></div>
|
|
|
|
<div>
|
|
<label for="title" class="block text-sm font-medium text-subtext1 mb-2">Blog Title</label>
|
|
<input
|
|
type="text"
|
|
id="title"
|
|
required
|
|
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="favicon" class="block text-sm font-medium text-subtext1 mb-2">Favicon URL</label>
|
|
<input
|
|
type="text"
|
|
id="favicon"
|
|
required
|
|
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="theme" class="block text-sm font-medium text-subtext1 mb-2">Theme</label>
|
|
<input
|
|
type="text"
|
|
id="theme"
|
|
required
|
|
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="bg-blue text-crust font-bold py-3 px-8 rounded-lg hover:bg-sky transition-colors"
|
|
>
|
|
Save Settings
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const token = localStorage.getItem('admin_token');
|
|
if (!token) {
|
|
window.location.href = '/admin/login';
|
|
} else {
|
|
document.getElementById('settings-content')!.style.display = 'block';
|
|
loadSettings();
|
|
}
|
|
|
|
async function loadSettings() {
|
|
try {
|
|
const res = await fetch('/api/config');
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
(document.getElementById('title') as HTMLInputElement).value = data.title || '';
|
|
(document.getElementById('favicon') as HTMLInputElement).value = data.favicon || '';
|
|
(document.getElementById('theme') as HTMLInputElement).value = data.theme || '';
|
|
}
|
|
} catch (e) {
|
|
showAlert('Failed to load settings.', 'error');
|
|
}
|
|
}
|
|
|
|
document.getElementById('settings-form')?.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const payload = {
|
|
title: (document.getElementById('title') as HTMLInputElement).value,
|
|
favicon: (document.getElementById('favicon') as HTMLInputElement).value,
|
|
theme: (document.getElementById('theme') as HTMLInputElement).value,
|
|
};
|
|
|
|
try {
|
|
const res = await fetch('/api/config', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (res.ok) {
|
|
showAlert('Settings saved successfully!', 'success');
|
|
} else {
|
|
const err = await res.json();
|
|
showAlert(`Error: ${err.error}`, 'error');
|
|
}
|
|
} catch (e) {
|
|
showAlert('Failed to save settings.', 'error');
|
|
}
|
|
});
|
|
|
|
function showAlert(msg: string, type: 'success' | 'error') {
|
|
const alertEl = document.getElementById('alert');
|
|
if (alertEl) {
|
|
alertEl.textContent = msg;
|
|
alertEl.className = `p-4 rounded-lg mb-6 ${type === 'success' ? 'bg-green/20 text-green border border-green/30' : 'bg-red/20 text-red border border-red/30'}`;
|
|
alertEl.classList.remove('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
</Layout>
|