added admin control panel
This commit is contained in:
182
frontend/src/pages/admin/editor.astro
Normal file
182
frontend/src/pages/admin/editor.astro
Normal file
@@ -0,0 +1,182 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="Post Editor">
|
||||
<div class="glass p-12 mb-12" id="editor-content" style="display: none;">
|
||||
<header class="mb-12 border-b border-white/5 pb-12 flex justify-between items-center">
|
||||
<div>
|
||||
<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">
|
||||
Write Post
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="save-btn"
|
||||
class="bg-mauve text-crust font-bold py-3 px-8 rounded-lg hover:bg-pink transition-colors"
|
||||
>
|
||||
Save Post
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div id="alert" class="hidden p-4 rounded-lg mb-6"></div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<label for="slug" class="block text-sm font-medium text-subtext1 mb-2">Slug (e.g., my-first-post)</label>
|
||||
<input
|
||||
type="text"
|
||||
id="slug"
|
||||
required
|
||||
placeholder="my-awesome-post"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex justify-between items-end mb-2">
|
||||
<label for="content" class="block text-sm font-medium text-subtext1">Markdown Content</label>
|
||||
|
||||
<div>
|
||||
<input type="file" id="file-upload" class="hidden" accept="image/*" />
|
||||
<label
|
||||
for="file-upload"
|
||||
class="cursor-pointer text-sm bg-surface0 hover:bg-surface1 text-blue px-4 py-2 rounded border border-surface1 transition-colors inline-flex items-center gap-2"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
|
||||
Upload Image
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
id="content"
|
||||
required
|
||||
rows="20"
|
||||
placeholder="# Hello World Write your markdown here..."
|
||||
class="w-full bg-crust border border-surface1 rounded-lg px-4 py-4 text-text focus:outline-none focus:border-mauve transition-colors font-mono resize-y leading-relaxed"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const token = localStorage.getItem('admin_token');
|
||||
if (!token) {
|
||||
window.location.href = '/admin/login';
|
||||
} else {
|
||||
document.getElementById('editor-content')!.style.display = 'block';
|
||||
}
|
||||
|
||||
const slugInput = document.getElementById('slug') as HTMLInputElement;
|
||||
const contentInput = document.getElementById('content') as HTMLTextAreaElement;
|
||||
const fileInput = document.getElementById('file-upload') as HTMLInputElement;
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
|
||||
// Allow pre-filling if editing an existing post
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const editSlug = urlParams.get('edit');
|
||||
if (editSlug) {
|
||||
slugInput.value = editSlug;
|
||||
fetch(`/api/posts/${editSlug}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (data.content) {
|
||||
contentInput.value = data.content;
|
||||
}
|
||||
})
|
||||
.catch(() => showAlert('Failed to load post for editing.', 'error'));
|
||||
}
|
||||
|
||||
// Handle File Upload
|
||||
fileInput?.addEventListener('change', async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/upload', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: formData
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
const markdownImage = `\n\n`;
|
||||
|
||||
// Insert at cursor position
|
||||
const startPos = contentInput.selectionStart;
|
||||
const endPos = contentInput.selectionEnd;
|
||||
contentInput.value = contentInput.value.substring(0, startPos)
|
||||
+ markdownImage
|
||||
+ contentInput.value.substring(endPos, contentInput.value.length);
|
||||
|
||||
showAlert('Image uploaded and inserted!', 'success');
|
||||
} else {
|
||||
const err = await res.json();
|
||||
showAlert(`Upload failed: ${err.error}`, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Failed to upload file.', 'error');
|
||||
}
|
||||
|
||||
// Reset input so the same file can be selected again
|
||||
fileInput.value = '';
|
||||
});
|
||||
|
||||
// Handle Save
|
||||
saveBtn?.addEventListener('click', async () => {
|
||||
const payload = {
|
||||
slug: slugInput.value,
|
||||
content: contentInput.value
|
||||
};
|
||||
|
||||
if (!payload.slug || !payload.content) {
|
||||
showAlert('Slug and content are required.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/posts', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
showAlert('Post saved successfully!', 'success');
|
||||
} else {
|
||||
const err = await res.json();
|
||||
showAlert(`Error: ${err.error}`, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
showAlert('Failed to save post.', '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');
|
||||
|
||||
setTimeout(() => {
|
||||
alertEl.classList.add('hidden');
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user