refactor
This commit is contained in:
@@ -1,150 +1,131 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import AdminLayout from '../../layouts/AdminLayout.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>
|
||||
<p class="text-subtext1 mt-2">Configure how your blog looks and feels globally.</p>
|
||||
</header>
|
||||
<AdminLayout title="Site Settings">
|
||||
<p slot="header-subtitle" class="text-subtext1 mt-2 text-sm md:text-base">Configure how your blog looks and feels globally.</p>
|
||||
|
||||
<form id="settings-form" class="space-y-8">
|
||||
<div id="alert" class="hidden p-4 rounded-lg mb-6"></div>
|
||||
<form id="settings-form" class="space-y-8">
|
||||
<div id="alert" class="hidden p-4 rounded-lg mb-6"></div>
|
||||
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-lavender border-l-4 border-lavender pl-4">General Identity</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-subtext1 mb-2">Blog Title (Nav)</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="subtitle" class="block text-sm font-medium text-subtext1 mb-2">Nav Subtitle</label>
|
||||
<input type="text" id="subtitle" 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="welcome_title" class="block text-sm font-medium text-subtext1 mb-2">Welcome Title (Frontpage)</label>
|
||||
<input type="text" id="welcome_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="welcome_subtitle" class="block text-sm font-medium text-subtext1 mb-2">Welcome Subtitle</label>
|
||||
<input type="text" id="welcome_subtitle" 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>
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-lavender border-l-4 border-lavender pl-4">General Identity</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="title" class="block text-sm font-medium text-subtext1 mb-2">Blog Title (Nav)</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" />
|
||||
<p class="text-[10px] text-subtext0 mt-1">URL to the icon shown in browser tabs.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-blue border-l-4 border-blue pl-4">Appearance</h2>
|
||||
<div>
|
||||
<label for="theme" class="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label>
|
||||
<select id="theme" class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors">
|
||||
<option value="mocha">Mocha (Dark, High Contrast)</option>
|
||||
<option value="macchiato">Macchiato (Dark, Medium Contrast)</option>
|
||||
<option value="frappe">Frappe (Dark, Low Contrast)</option>
|
||||
<option value="latte">Latte (Light Mode)</option>
|
||||
</select>
|
||||
<p class="text-[10px] text-subtext0 mt-1">Select a predefined Catppuccin color palette.</p>
|
||||
<label for="subtitle" class="block text-sm font-medium text-subtext1 mb-2">Nav Subtitle</label>
|
||||
<input type="text" id="subtitle" 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="custom_css" class="block text-sm font-medium text-subtext1 mb-2">Custom CSS</label>
|
||||
<textarea id="custom_css" rows="4" class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono text-xs" placeholder="body { ... }"></textarea>
|
||||
<p class="text-[10px] text-subtext0 mt-1">Inject custom CSS styles globally.</p>
|
||||
<label for="welcome_title" class="block text-sm font-medium text-subtext1 mb-2">Welcome Title (Frontpage)</label>
|
||||
<input type="text" id="welcome_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>
|
||||
</section>
|
||||
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2>
|
||||
<div>
|
||||
<label for="footer" class="block text-sm font-medium text-subtext1 mb-2">Footer Text</label>
|
||||
<input type="text" id="footer" 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" />
|
||||
<label for="welcome_subtitle" class="block text-sm font-medium text-subtext1 mb-2">Welcome Subtitle</label>
|
||||
<input type="text" id="welcome_subtitle" 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>
|
||||
</section>
|
||||
</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" />
|
||||
<p class="text-[10px] text-subtext0 mt-1">URL to the icon shown in browser tabs.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button type="submit" class="w-full md:w-auto bg-mauve text-crust font-bold py-4 px-12 rounded-lg hover:bg-pink transition-all transform hover:scale-[1.02] active:scale-[0.98]">
|
||||
Save Site Configuration
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-blue border-l-4 border-blue pl-4">Appearance</h2>
|
||||
<div>
|
||||
<label for="theme" class="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label>
|
||||
<select id="theme" class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors">
|
||||
<option value="mocha">Mocha (Dark, High Contrast)</option>
|
||||
<option value="macchiato">Macchiato (Dark, Medium Contrast)</option>
|
||||
<option value="frappe">Frappe (Dark, Low Contrast)</option>
|
||||
<option value="latte">Latte (Light Mode)</option>
|
||||
</select>
|
||||
<p class="text-[10px] text-subtext0 mt-1">Select a predefined Catppuccin color palette.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label for="custom_css" class="block text-sm font-medium text-subtext1 mb-2">Custom CSS</label>
|
||||
<textarea id="custom_css" rows="4" class="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono text-xs" placeholder="body { ... }"></textarea>
|
||||
<p class="text-[10px] text-subtext0 mt-1">Inject custom CSS styles globally.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="space-y-6">
|
||||
<h2 class="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2>
|
||||
<div>
|
||||
<label for="footer" class="block text-sm font-medium text-subtext1 mb-2">Footer Text</label>
|
||||
<input type="text" id="footer" 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>
|
||||
</section>
|
||||
|
||||
<button type="submit" class="w-full md:w-auto bg-mauve text-crust font-bold py-4 px-12 rounded-lg hover:bg-pink transition-all transform hover:scale-[1.02] active:scale-[0.98]">
|
||||
Save Site Configuration
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
const token = localStorage.getItem('admin_token');
|
||||
if (!token) {
|
||||
window.location.href = '/admin/login';
|
||||
} else {
|
||||
document.getElementById('settings-content')!.style.display = 'block';
|
||||
import { showAlert } from '../../components/ui/Alert';
|
||||
|
||||
document.addEventListener('admin-auth-ready', (e: any) => {
|
||||
const token = e.detail.token;
|
||||
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('subtitle') as HTMLInputElement).value = data.subtitle || '';
|
||||
(document.getElementById('footer') as HTMLInputElement).value = data.footer || '';
|
||||
(document.getElementById('favicon') as HTMLInputElement).value = data.favicon || '';
|
||||
(document.getElementById('theme') as HTMLSelectElement).value = data.theme || 'mocha';
|
||||
(document.getElementById('custom_css') as HTMLTextAreaElement).value = data.custom_css || '';
|
||||
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('subtitle') as HTMLInputElement).value = data.subtitle || '';
|
||||
(document.getElementById('welcome_title') as HTMLInputElement).value = data.welcome_title || '';
|
||||
(document.getElementById('welcome_subtitle') as HTMLInputElement).value = data.welcome_subtitle || '';
|
||||
(document.getElementById('footer') as HTMLInputElement).value = data.footer || '';
|
||||
(document.getElementById('favicon') as HTMLInputElement).value = data.favicon || '';
|
||||
(document.getElementById('theme') as HTMLSelectElement).value = data.theme || 'mocha';
|
||||
(document.getElementById('custom_css') as HTMLTextAreaElement).value = data.custom_css || '';
|
||||
}
|
||||
} catch (err) {
|
||||
showAlert('Failed to load settings from server.', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Failed to load settings from server.', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('settings-form')?.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const payload = {
|
||||
title: (document.getElementById('title') as HTMLInputElement).value,
|
||||
subtitle: (document.getElementById('subtitle') as HTMLInputElement).value,
|
||||
footer: (document.getElementById('footer') as HTMLInputElement).value,
|
||||
favicon: (document.getElementById('favicon') as HTMLInputElement).value,
|
||||
theme: (document.getElementById('theme') as HTMLSelectElement).value,
|
||||
custom_css: (document.getElementById('custom_css') as HTMLTextAreaElement).value,
|
||||
};
|
||||
document.getElementById('settings-form')?.addEventListener('submit', async (ev) => {
|
||||
ev.preventDefault();
|
||||
const payload = {
|
||||
title: (document.getElementById('title') as HTMLInputElement).value,
|
||||
subtitle: (document.getElementById('subtitle') as HTMLInputElement).value,
|
||||
welcome_title: (document.getElementById('welcome_title') as HTMLInputElement).value,
|
||||
welcome_subtitle: (document.getElementById('welcome_subtitle') as HTMLInputElement).value,
|
||||
footer: (document.getElementById('footer') as HTMLInputElement).value,
|
||||
favicon: (document.getElementById('favicon') as HTMLInputElement).value,
|
||||
theme: (document.getElementById('theme') as HTMLSelectElement).value,
|
||||
custom_css: (document.getElementById('custom_css') as HTMLTextAreaElement).value,
|
||||
};
|
||||
|
||||
try {
|
||||
// Now using relative path which will be proxied
|
||||
const res = await fetch('/api/config', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
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! Refresh to see changes.', 'success');
|
||||
} else {
|
||||
const err = await res.json();
|
||||
showAlert(`Error: ${err.error}`, 'error');
|
||||
if (res.ok) {
|
||||
showAlert('Settings saved successfully! Refresh to see changes.', 'success');
|
||||
} else {
|
||||
const err = await res.json();
|
||||
showAlert(`Error: ${err.error}`, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showAlert('Failed to save settings. Please check your connection.', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Failed to save settings. Please check your connection.', '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');
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
</AdminLayout>
|
||||
|
||||
Reference in New Issue
Block a user