Simple Blog — Categories & Authentication

MiniBlog

:root { --bg: #f6f8fa; --card: #fff; --accent: #2b6cb0; --muted: #6b7280; --danger: #e53e3e; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: #111827; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { width: 92%; max-width: 980px; margin: 0 auto; } header { background: var(--card); border-bottom: 1px solid #e6edf3; position: sticky; top: 0; z-index: 5; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; } .logo { margin: 0; font-size: 1.25rem; color: var(--accent); } nav a { text-decoration: none; color: inherit; padding: 0.45rem 0.6rem; border-radius: 6px; display: inline-block; } nav a.active { background: rgba(43,108,176,0.08); color: var(--accent); } .nav-right { display: flex; align-items: center; gap: 0.5rem; } .btn { background: var(--accent); color: white; border: none; padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer; } .btn.secondary { background: transparent; color: var(--accent); border: 1px solid rgba(43,108,176,0.12); } main { padding: 2rem 0; } h2 { margin-top: 0; } .card { background: var(--card); border-radius: 8px; padding: 1rem; box-shadow: 0 1px 0 rgba(16,24,40,0.02); border: 1px solid #eef3f7; } .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } .flex { display: flex; gap: 1rem; align-items: center; } form label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; } input[type="text"], input[type="password"], textarea { width: 100%; padding: 0.6rem; margin-top: 0.3rem; border-radius: 6px; border: 1px solid #dbe6ef; background: #fff; font-size: 0.95rem; } textarea { min-height: 120px; resize: vertical; } .muted { color: var(--muted); font-size: 0.9rem; } .list { list-style: none; margin: 0; padding: 0; } .list-item { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 0.75rem; border-radius: 6px; border: 1px solid #f1f5f9; margin-bottom: 0.6rem; background: #fff; } .list-item .meta { color: var(--muted); font-size: 0.9rem; } .item-actions button { margin-left: 0.4rem; } .error { color: var(--danger); margin-top: 0.5rem; } footer { padding: 1rem 0; margin-top: 2rem; color: var(--muted); font-size: 0.9rem; } .modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2,6,23,0.45); } .modal-content { width: 100%; max-width: 420px; background: var(--card); padding: 1rem; border-radius: 8px; position: relative; } .close-btn { position: absolute; top: 8px; right: 10px; border: none; background: transparent; font-size: 1.25rem; cursor: pointer; } .actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.85rem; } .link-btn { background: none; border: none; color: var(--accent); cursor: pointer; text-decoration: underline; padding: 0; } @media (min-width: 640px) { .grid { grid-template-columns: 1fr 320px; } } export function nowIso() { return new Date().toISOString(); } export function el(tag, attrs = {}, ...children) { const node = document.createElement(tag); Object.entries(attrs).forEach(([k, v]) => { if (k === 'class') node.className = v; else if (k.startsWith('data-')) node.setAttribute(k, v); else if (k === 'html') node.innerHTML = v; else node[k] = v; }); children.flat().forEach(c => { if (c === null || c === undefined) return; node.append(typeof c === 'string' ? document.createTextNode(c) : c); }); return node; } export function uid() { return Date.now().toString(36) + Math.random().toString(36).slice(2, 9); } export async function sha256Hex(str) { const buf = new TextEncoder().encode(str); const hash = await crypto.subtle.digest('SHA-256', buf); const hex = Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, '0')).join(''); return hex; } import { sha256Hex } from './utils.js'; const USERS_KEY = 'mb_users'; const SESSION_KEY = 'mb_session'; function loadUsers() { try { return JSON.parse(localStorage.getItem(USERS_KEY) || '[]'); } catch (e) { return []; } } function saveUsers(users) { localStorage.setItem(USERS_KEY, JSON.stringify(users)); } export async function register(username, password) { const users = loadUsers(); username = username.trim().toLowerCase(); if (!username || !password) throw new Error('Invalid credentials'); if (users.some(u => u.username === username)) { throw new Error('Username already exists'); } const pwHash = await sha256Hex(password); const user = { id: Date.now().toString(36), username, passwordHash: pwHash, createdAt: new Date().toISOString() }; users.push(user); saveUsers(users); // auto-login sessionStorage.setItem(SESSION_KEY, JSON.stringify({ id: user.id, username: user.username })); return { id: user.id, username: user.username }; } export async function login(username, password) { const users = loadUsers(); username = username.trim().toLowerCase(); const user = users.find(u => u.username === username); if (!user) throw new Error('User not found'); const pwHash = await sha256Hex(password); if (pwHash !== user.passwordHash) throw new Error('Incorrect password'); sessionStorage.setItem(SESSION_KEY, JSON.stringify({ id: user.id, username: user.username })); return { id: user.id, username: user.username }; } export function logout() { sessionStorage.removeItem(SESSION_KEY); } export function currentUser() { try { return JSON.parse(sessionStorage.getItem(SESSION_KEY)); } catch (e) { return null; } } import { nowIso, uid } from './utils.js'; const CATEGORIES_KEY = 'mb_categories'; const MESSAGES_KEY = 'mb_messages'; function load(key, fallback = []) { try { return JSON.parse(localStorage.getItem(key) || '[]'); } catch (e) { return fallback; } } function save(key, data) { localStorage.setItem(key, JSON.stringify(data)); } export function getCategories() { return load(CATEGORIES_KEY); } export function createCategory({ name, description }) { if (!name || !name.trim()) throw new Error('Name required'); const categories = load(CATEGORIES_KEY); const newCat = { id: uid(), name: name.trim(), description: (description || '').trim(), createdAt: nowIso(), updatedAt: nowIso() }; categories.unshift(newCat); save(CATEGORIES_KEY, categories); return newCat; } export function updateCategory(id, { name, description }) { const categories = load(CATEGORIES_KEY); const idx = categories.findIndex(c => c.id === id); if (idx === -1) throw new Error('Category not found'); categories[idx].name = name.trim(); categories[idx].description = (description || '').trim(); categories[idx].updatedAt = nowIso(); save(CATEGORIES_KEY, categories); return categories[idx]; } export function deleteCategory(id) { let categories = load(CATEGORIES_KEY); const before = categories.length; categories = categories.filter(c => c.id !== id); if (categories.length === before) throw new Error('Category not found'); save(CATEGORIES_KEY, categories); return true; } export function getMessages() { return load(MESSAGES_KEY); } export function sendMessage({ name, email, body }) { if (!name || !email || !body) throw new Error('All fields are required'); const msgs = load(MESSAGES_KEY); msgs.unshift({ id: uid(), name: name.trim(), email: email.trim(), body: body.trim(), createdAt: nowIso() }); save(MESSAGES_KEY, msgs); return true; } import { el } from '../utils.js'; import { currentUser, logout } from '../auth.js'; export function renderNav(onNavigate, openAuthModal) { const nav = el('div', { class: 'nav-right' }); const links = [ { href: '#/', label: 'Home' }, { href: '#/about', label: 'About' }, { href: '#/contact', label: 'Contact' }, { href: '#/categories', label: 'Categories' } ]; const navLeft = el('div'); links.forEach(l => { const a = el('a', { href: l.href }, l.label); a.addEventListener('click', (e) => { e.preventDefault(); onNavigate(l.href.replace('#', '')); }); navLeft.append(a); }); nav.append(navLeft); const user = currentUser(); const userWrap = el('div'); if (user) { const nameP = el('span', {}, `Hi, ${user.username}`); const btnLogout = el('button', { class: 'btn secondary' }, 'Logout'); btnLogout.addEventListener('click', () => { logout(); // simple reload to refresh UI window.location.hash = '#/'; window.location.reload(); }); userWrap.append(nameP, btnLogout); } else { const btn = el('button', { class: 'btn' }, 'Login / Register'); btn.addEventListener('click', openAuthModal); userWrap.append(btn); } nav.append(userWrap); // highlight active link here when hash changes function setActive() { const anchors = navLeft.querySelectorAll('a'); const path = location.hash.replace('#', '') || '/'; anchors.forEach(a => { const href = a.getAttribute('href').replace('#', ''); a.classList.toggle('active', href === path); }); } setActive(); window.addEventListener('hashchange', setActive); return nav; } import { el } from '../utils.js'; import { getCategories } from '../api.js'; export function renderHome() { const wrap = el('div', { class: 'grid' }); const left = el('div'); left.append( el('div', { class: 'card' }, el('h2', {}, 'Welcome to MiniBlog'), el('p', { class: 'muted' }, 'A small demo blog admin powered by the browser. Use the Categories page to manage blog categories (create, edit, delete).'), el('p', {}, 'This app uses localStorage for data and sessionStorage for short-lived sessions.') ), el('div', { class: 'card' }, el('h3', {}, 'Quick Links'), el('ul', {}, el('li', {}, el('a', { href: '#/categories' }, 'Manage Categories')), el('li', {}, el('a', { href: '#/contact' }, 'Contact Page')) ) ) ); const right = el('div'); const cats = getCategories(); right.append( el('div', { class: 'card' }, el('h3', {}, 'Categories'), cats.length === 0 ? el('p', { class: 'muted' }, 'No categories yet. Create some on the Categories page.') : el('ul', { class: 'list' }, cats.slice(0, 6).map(c => el('li', { class: 'list-item' }, el('div', {}, el('strong', {}, c.name), el('div', { class: 'meta' }, c.description || '') ), el('div', { class: 'meta' }, new Date(c.createdAt).toLocaleString()) ) )) ) ); wrap.append(left, right); return wrap; } import { el } from '../utils.js'; export function renderAbout() { const wrap = el('div', {}, el('div', { class: 'card' }, el('h2', {}, 'About MiniBlog'), el('p', {}, 'This is a tiny single-page demo blog admin interface built for demonstration.'), el('p', { class: 'muted' }, 'It features a simple authentication flow (register/login) stored locally, and allows authenticated users to create, edit and delete blog categories.') ) ); return wrap; } import { el } from '../utils.js'; import { sendMessage } from '../api.js'; export function renderContact() { const wrap = el('div', {}, el('div', { class: 'card' }, el('h2', {}, 'Contact Us'), el('form', { id: 'contact-form' }, el('label', {}, 'Name', el('input', { type: 'text', name: 'name', required: true }) ), el('label', {}, 'Email', el('input', { type: 'text', name: 'email', required: true }) ), el('label', {}, 'Message', el('textarea', { name: 'body', required: true }) ), el('div', { class: 'actions' }, el('button', { type: 'submit', class: 'btn' }, 'Send Message') ), el('div', { id: 'contact-feedback', class: 'muted' }) ) ) ); const form = wrap.querySelector('#contact-form'); const feedback = wrap.querySelector('#contact-feedback'); form.addEventListener('submit', (e) => { e.preventDefault(); const fd = new FormData(form); try { sendMessage({ name: fd.get('name'), email: fd.get('email'), body: fd.get('body') }); feedback.textContent = 'Message sent. Thank you!'; form.reset(); } catch (err) { feedback.textContent = err.message || 'Failed to send message'; } }); return wrap; } import { el } from '../utils.js'; import { getCategories, createCategory, updateCategory, deleteCategory } from '../api.js'; import { currentUser } from '../auth.js'; function buildList(onEdit, onDelete) { const list = el('ul', { class: 'list' }); const cats = getCategories(); if (cats.length === 0) { list.append(el('p', { class: 'muted' }, 'No categories yet.')); return list; } cats.forEach(c => { const item = el('li', { class: 'list-item' }, el('div', {}, el('strong', {}, c.name), el('div', { class: 'meta' }, c.description || '') ), el('div', { class: 'item-actions' }, el('span', { class: 'meta' }, new Date(c.updatedAt || c.createdAt).toLocaleString()), el('button', { class: 'btn secondary' }, 'Edit'), el('button', { class: 'btn' }, 'Delete') ) ); const [btnEdit, btnDelete] = item.querySelectorAll('button'); btnEdit.addEventListener('click', () => onEdit(c)); btnDelete.addEventListener('click', () => onDelete(c)); list.append(item); }); return list; } export function renderCategories(openAuthModal) { const wrap = el('div', { class: 'grid' }); const left = el('div'); left.append( el('div', { class: 'card' }, el('h2', {}, 'Categories'), el('p', { class: 'muted' }, 'Create and manage blog categories. You must be logged in to create, edit or delete categories.') ), el('div', { id: 'categories-list-wrap' }) ); const right = el('div'); const user = currentUser(); const controls = el('div', { class: 'card' }); if (!user) { controls.append( el('p', {}, 'You are not logged in.'), el('div', { class: 'actions' }, el('button', { class: 'btn' }, 'Login / Register') ) ); controls.querySelector('button').addEventListener('click', openAuthModal); } else { const form = el('form', { id: 'category-form' }, el('h3', {}, 'Create Category'), el('label', {}, 'Name', el('input', { type: 'text', name: 'name', required: true })), el('label', {}, 'Description', el('input', { type: 'text', name: 'description' })), el('div', { class: 'actions' }, el('button', { type: 'submit', class: 'btn' }, 'Create') ), el('div', { id: 'cat-feedback', class: 'muted' }) ); controls.append(form); form.addEventListener('submit', (e) => { e.preventDefault(); const fd = new FormData(form); try { createCategory({ name: fd.get('name'), description: fd.get('description') }); form.reset(); renderList(); } catch (err) { controls.querySelector('#cat-feedback').textContent = err.message || 'Failed'; } }); } right.append(controls); wrap.append(left, right); function renderList() { const container = left.querySelector('#categories-list-wrap'); container.innerHTML = ''; const list = buildList(handleEdit, handleDelete); container.append(list); } function handleEdit(cat) { const name = prompt('Category name', cat.name); if (name === null) return; // cancelled const desc = prompt('Description', cat.description || '') || ''; try { updateCategory(cat.id, { name, description: desc }); renderList(); } catch (err) { alert(err.message || 'Update failed'); } } function handleDelete(cat) { if (!confirm(`Delete category "${cat.name}"? This cannot be undone.`)) return; try { deleteCategory(cat.id); renderList(); } catch (err) { alert(err.message || 'Delete failed'); } } renderList(); return wrap; } import { el, nowIso } from './utils.js'; import { renderNav } from './components/nav.js'; import { renderHome } from './pages/home.js'; import { renderAbout } from './pages/about.js'; import { renderContact } from './pages/contact.js'; import { renderCategories } from './pages/categories.js'; import { currentUser, login, register } from './auth.js'; const main = document.getElementById('main'); const navRoot = document.getElementById('main-nav'); document.getElementById('yr').textContent = new Date().getFullYear(); function mountNav() { navRoot.innerHTML = ''; const nav = renderNav(navigateTo, openAuthModal); navRoot.append(nav); } mountNav(); function openAuthModal() { // build modal from template in index.html const tpl = document.getElementById('login-template'); const node = tpl.content.cloneNode(true); document.body.append(node); const modal = document.getElementById('auth-modal'); const form = modal.querySelector('#auth-form'); const title = modal.querySelector('#auth-title'); const toggle = modal.querySelector('#toggle-mode'); const close = modal.querySelector('#auth-close'); const feedback = modal.querySelector('#auth-error'); let mode = 'login'; function setMode(m) { mode = m; title.textContent = mode === 'login' ? 'Login' : 'Register'; toggle.textContent = mode === 'login' ? 'Switch to Register' : 'Switch to Login'; feedback.textContent = ''; } setMode('login'); toggle.addEventListener('click', () => setMode(mode === 'login' ? 'register' : 'login')); close.addEventListener('click', () => modal.remove()); form.addEventListener('submit', async (e) => { e.preventDefault(); feedback.textContent = ''; const fd = new FormData(form); const username = fd.get('username'); const password = fd.get('password'); try { if (mode === 'login') { await login(username, password); } else { await register(username, password); } modal.remove(); // refresh nav and current view mountNav(); // Re-render current route to reflect auth changes renderRoute(getRoute()); } catch (err) { feedback.textContent = err.message || 'Auth failed'; } }); } function getRoute() { const path = location.hash.replace('#', '') || '/'; return path; } function navigateTo(path) { if (!path.startsWith('/')) path = '/' + path; location.hash = path; } function renderRoute(route) { main.innerHTML = ''; let node; if (route === '/' || route === '') { node = renderHome(); } else if (route.startsWith('/about')) { node = renderAbout(); } else if (route.startsWith('/contact')) { node = renderContact(); } else if (route.startsWith('/categories')) { node = renderCategories(openAuthModal); } else { node = el('div', {}, el('div', { class: 'card' }, el('h2', {}, 'Not Found'), el('p', {}, 'Page not found.') ) ); } main.append(node); } // initial route renderRoute(getRoute()); window.addEventListener('hashchange', () => { renderRoute(getRoute()); // ensure nav update mountNav(); }); // friendly keyboard shortcut: "L" to open auth modal window.addEventListener('keydown', (e) => { if (e.key.toLowerCase() === 'l' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); openAuthModal(); } });