added admin control panel

2026-03-25 12:08:55 +01:00
parent 2da31a2474
commit 311392bffa
7 changed files with 538 additions and 14 deletions
--- a/frontend/src/pages/admin/settings.astro
+++ b/frontend/src/pages/admin/settings.astro
@@ -0,0 +1,120 @@
+---
+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>