From 3b090898177bcad79451252e66d2320cc529620a Mon Sep 17 00:00:00 2001 From: jtricerolph Date: Tue, 14 Jul 2026 12:07:11 +0000 Subject: [PATCH] =?UTF-8?q?Sync=20shared=20components=20=E2=80=94=20sideba?= =?UTF-8?q?r=20scrollbar,=20Layout,=20AuthGate=20updates?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/components/AuthGate.js | 114 +++++++++++++++++++++++ frontend/src/components/AuthGate.tsx | 15 +-- frontend/src/components/NoticeBoard.js | 123 +++++++++++++++++++++++++ 3 files changed, 246 insertions(+), 6 deletions(-) create mode 100644 frontend/src/components/AuthGate.js create mode 100644 frontend/src/components/NoticeBoard.js diff --git a/frontend/src/components/AuthGate.js b/frontend/src/components/AuthGate.js new file mode 100644 index 0000000..86b47fa --- /dev/null +++ b/frontend/src/components/AuthGate.js @@ -0,0 +1,114 @@ +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { useEffect, useRef, useState } from 'react'; +function getInactivityMs() { + if (window.matchMedia('(display-mode: standalone)').matches) + return undefined; + const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('hnf_inactivity_mins=')); + if (!c) + return undefined; + const mins = parseInt(c.split('=')[1]); + return isNaN(mins) || mins <= 0 ? undefined : mins * 60 * 1000; +} +export function AuthGate({ children }) { + const [state, setState] = useState('checking'); + const [user, setUser] = useState(null); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); + const [loading, setLoading] = useState(false); + const timerRef = useRef(null); + useEffect(() => { + fetch('/api/auth/verify?app=noticeboard', { credentials: 'include' }) + .then(async (r) => { + if (r.ok) { + const data = await r.json(); + setUser(data); + setState('authed'); + } + else { + setState('login'); + } + }) + .catch(() => setState('login')); + }, []); + useEffect(() => { + const ms = getInactivityMs(); + if (state !== 'authed' || !ms) + return; + async function forceLogout() { + await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => { }); + setUser(null); + setState('login'); + } + function reset() { + if (timerRef.current) + clearTimeout(timerRef.current); + timerRef.current = setTimeout(forceLogout, ms); + } + const events = ['mousemove', 'keydown', 'click', 'touchstart']; + events.forEach(e => window.addEventListener(e, reset, { passive: true })); + reset(); + return () => { + if (timerRef.current) + clearTimeout(timerRef.current); + events.forEach(e => window.removeEventListener(e, reset)); + }; + }, [state]); + async function login(e) { + e.preventDefault(); + setLoading(true); + setError(''); + try { + const res = await fetch('/api/auth/login', { + method: 'POST', + credentials: 'include', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email, password }), + }); + if (!res.ok) { + setError('Invalid email or password'); + return; + } + const verify = await fetch('/api/auth/verify?app=noticeboard', { credentials: 'include' }); + if (verify.ok) { + const data = await verify.json(); + setUser(data); + setState('authed'); + } + else { + setError("You don't have access to this app."); + } + } + catch { + setError('Connection error — please try again'); + } + finally { + setLoading(false); + } + } + if (state === 'checking') { + return (_jsx("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100dvh' }, children: _jsx("div", { style: { color: 'var(--text-muted)' }, children: "Loading\u2026" }) })); + } + if (state === 'login') { + return (_jsx("div", { style: { + display: 'flex', flexDirection: 'column', alignItems: 'center', + justifyContent: 'center', height: '100dvh', padding: '1.5rem', + background: 'var(--navy-dark)', + }, children: _jsxs("div", { style: { + background: 'var(--navy)', borderRadius: 'var(--radius)', + padding: '2rem', width: '100%', maxWidth: '360px', + border: '1px solid var(--surface-2)', + }, children: [_jsx("h1", { style: { fontSize: '1.4rem', marginBottom: '0.25rem', color: 'var(--gold)' }, children: "Noticeboard" }), _jsx("p", { style: { color: 'var(--text-muted)', fontSize: '0.875rem', marginBottom: '1.5rem' }, children: import.meta.env.VITE_HOTEL_NAME }), _jsxs("form", { onSubmit: login, style: { display: 'flex', flexDirection: 'column', gap: '0.75rem' }, children: [_jsx("input", { type: "email", value: email, onChange: e => setEmail(e.target.value), placeholder: "Email", required: true, autoComplete: "email", style: inputStyle }), _jsx("input", { type: "password", value: password, onChange: e => setPassword(e.target.value), placeholder: "Password", required: true, autoComplete: "current-password", style: inputStyle }), error && _jsx("p", { style: { color: 'var(--danger)', fontSize: '0.875rem' }, children: error }), _jsx("button", { type: "submit", disabled: loading, style: btnStyle, children: loading ? 'Signing in…' : 'Sign in' })] })] }) })); + } + return _jsx(_Fragment, { children: children(user) }); +} +const inputStyle = { + background: 'var(--navy-dark)', border: '1px solid var(--surface-2)', + borderRadius: '6px', color: 'var(--text)', padding: '0.625rem 0.75rem', + fontSize: '1rem', width: '100%', outline: 'none', +}; +const btnStyle = { + background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none', + borderRadius: '6px', padding: '0.625rem', fontSize: '1rem', + fontWeight: 600, marginTop: '0.25rem', +}; diff --git a/frontend/src/components/AuthGate.tsx b/frontend/src/components/AuthGate.tsx index 0df2e33..07037be 100644 --- a/frontend/src/components/AuthGate.tsx +++ b/frontend/src/components/AuthGate.tsx @@ -1,9 +1,11 @@ import { useEffect, useRef, useState } from 'react' -const SHARED_TIMEOUT_MS = 10 * 60 * 1000 - -function isSharedDevice() { - return document.cookie.split(';').some(c => c.trim() === 'hnf_shared_device=1') +function getInactivityMs(): number | undefined { + if (window.matchMedia('(display-mode: standalone)').matches) return undefined + const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('hnf_inactivity_mins=')) + if (!c) return undefined + const mins = parseInt(c.split('=')[1]) + return isNaN(mins) || mins <= 0 ? undefined : mins * 60 * 1000 } @@ -41,7 +43,8 @@ export function AuthGate({ children }: Props) { }, []) useEffect(() => { - if (state !== 'authed' || !isSharedDevice()) return + const ms = getInactivityMs() + if (state !== 'authed' || !ms) return async function forceLogout() { await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {}) @@ -51,7 +54,7 @@ export function AuthGate({ children }: Props) { function reset() { if (timerRef.current) clearTimeout(timerRef.current) - timerRef.current = setTimeout(forceLogout, SHARED_TIMEOUT_MS) + timerRef.current = setTimeout(forceLogout, ms) } const events = ['mousemove', 'keydown', 'click', 'touchstart'] as const diff --git a/frontend/src/components/NoticeBoard.js b/frontend/src/components/NoticeBoard.js new file mode 100644 index 0000000..b44f8b9 --- /dev/null +++ b/frontend/src/components/NoticeBoard.js @@ -0,0 +1,123 @@ +import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime"; +import { useEffect, useReducer, useState } from 'react'; +import { Pin, PinOff, Trash2, Plus, X } from 'lucide-react'; +const CATEGORIES = [ + { value: 'all', label: 'All' }, + { value: 'general', label: 'General' }, + { value: 'kitchen', label: 'Kitchen' }, + { value: 'housekeeping', label: 'Housekeeping' }, + { value: 'management', label: 'Management' }, +]; +export function NoticeBoard({ user }) { + const [notices, setNotices] = useState([]); + const [category, setCategory] = useState('all'); + const [showForm, setShowForm] = useState(false); + const [, forceRefresh] = useReducer(x => x + 1, 0); + useEffect(() => { + const params = category !== 'all' ? `?category=${category}` : ''; + fetch(`/notices/api/notices${params}`, { credentials: 'include' }) + .then(r => r.json()) + .then(setNotices); + }, [category, forceRefresh]); + async function togglePin(id) { + await fetch(`/notices/api/notices/${id}/pin`, { method: 'PATCH', credentials: 'include' }); + forceRefresh(); + } + async function deleteNotice(id) { + if (!confirm('Delete this notice?')) + return; + await fetch(`/notices/api/notices/${id}`, { method: 'DELETE', credentials: 'include' }); + forceRefresh(); + } + return (_jsxs("div", { style: { maxWidth: '720px', margin: '0 auto', padding: '1.5rem 1rem' }, children: [_jsxs("header", { style: { + display: 'flex', alignItems: 'center', justifyContent: 'space-between', + marginBottom: '1.25rem', + }, children: [_jsxs("div", { children: [_jsx("h1", { style: { fontSize: '1.15rem', fontWeight: 700, color: 'var(--text-dark)' }, children: "Noticeboard" }), _jsx("p", { style: { fontSize: '0.75rem', color: 'var(--text-mid)', marginTop: '0.1rem' }, children: user.name })] }), user.is_admin && (_jsx("button", { onClick: () => setShowForm(v => !v), style: { + background: showForm ? 'var(--card-bg)' : 'var(--gold)', + color: showForm ? 'var(--text-mid)' : 'var(--navy)', + border: showForm ? '1px solid var(--card-border)' : 'none', + borderRadius: '7px', padding: '0.45rem 0.9rem', + fontSize: '0.82rem', fontWeight: 600, + display: 'flex', alignItems: 'center', gap: '0.4rem', + }, children: showForm ? _jsxs(_Fragment, { children: [_jsx(X, { size: 14, strokeWidth: 2 }), " Cancel"] }) : _jsxs(_Fragment, { children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), " Post"] }) }))] }), showForm && user.is_admin && (_jsx(PostForm, { onPosted: () => { setShowForm(false); forceRefresh(); } })), _jsx("div", { style: { display: 'flex', gap: '0.4rem', marginBottom: '1.25rem', flexWrap: 'wrap' }, children: CATEGORIES.map(c => (_jsx("button", { onClick: () => setCategory(c.value), style: { + background: category === c.value ? 'var(--navy)' : 'var(--card-bg)', + color: category === c.value ? 'var(--gold)' : 'var(--text-mid)', + border: `1px solid ${category === c.value ? 'var(--navy)' : 'var(--card-border)'}`, + borderRadius: '20px', padding: '0.3rem 0.875rem', + fontSize: '0.78rem', fontWeight: 500, + }, children: c.label }, c.value))) }), notices.length === 0 && (_jsx("p", { style: { color: 'var(--text-mid)', textAlign: 'center', padding: '3rem 0', fontSize: '0.9rem' }, children: "No notices yet." })), _jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: '0.75rem' }, children: notices.map(n => (_jsx("div", { style: { + background: 'var(--card-bg)', + borderRadius: 'var(--radius)', + padding: '1rem 1.125rem', + border: `1px solid ${n.pinned ? 'var(--gold)' : 'var(--card-border)'}`, + borderLeft: `3px solid ${n.pinned ? 'var(--gold)' : 'var(--card-border)'}`, + boxShadow: 'var(--shadow-sm)', + }, children: _jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: '0.5rem' }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4rem', marginBottom: '0.4rem' }, children: [n.pinned && (_jsx("span", { style: { + fontSize: '0.65rem', background: 'var(--gold)', color: 'var(--navy)', + borderRadius: '4px', padding: '0.1rem 0.4rem', fontWeight: 700, + letterSpacing: '0.04em', + }, children: "PINNED" })), _jsx("span", { style: { + fontSize: '0.65rem', background: 'var(--body-bg)', color: 'var(--text-mid)', + borderRadius: '4px', padding: '0.1rem 0.4rem', + textTransform: 'uppercase', letterSpacing: '0.04em', + border: '1px solid var(--card-border)', + }, children: n.category })] }), _jsx("h2", { style: { fontSize: '0.95rem', fontWeight: 600, color: 'var(--text-dark)', marginBottom: '0.35rem' }, children: n.title }), _jsx("p", { style: { color: 'var(--text-mid)', fontSize: '0.875rem', lineHeight: 1.5, whiteSpace: 'pre-wrap' }, children: n.body }), _jsxs("p", { style: { color: 'var(--text-mid)', fontSize: '0.72rem', marginTop: '0.75rem' }, children: [n.author_name, " \u00B7 ", new Date(n.created_at).toLocaleDateString('en-GB', { + day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' + }), n.expires_at && ` · expires ${new Date(n.expires_at).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}`] })] }), user.is_admin && (_jsxs("div", { style: { display: 'flex', gap: '0.35rem', flexShrink: 0 }, children: [_jsx("button", { onClick: () => togglePin(n.id), title: n.pinned ? 'Unpin' : 'Pin', style: iconBtn, children: n.pinned + ? _jsx(PinOff, { size: 15, strokeWidth: 1.75 }) + : _jsx(Pin, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { onClick: () => deleteNotice(n.id), title: "Delete", style: { ...iconBtn, color: 'var(--danger)' }, children: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }) })] }))] }) }, n.id))) })] })); +} +function PostForm({ onPosted }) { + const [title, setTitle] = useState(''); + const [body, setBody] = useState(''); + const [category, setCategory] = useState('general'); + const [pinned, setPinned] = useState(false); + const [expires, setExpires] = useState(''); + const [submitting, setSubmitting] = useState(false); + const [error, setError] = useState(''); + async function submit(e) { + e.preventDefault(); + setSubmitting(true); + setError(''); + try { + const res = await fetch('/notices/api/notices', { + method: 'POST', + credentials: 'include', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ title, body, category, pinned, expires_at: expires || null }), + }); + if (res.ok) + onPosted(); + else + setError('Failed to post notice'); + } + catch { + setError('Connection error'); + } + finally { + setSubmitting(false); + } + } + return (_jsxs("form", { onSubmit: submit, style: { + background: 'var(--card-bg)', borderRadius: 'var(--radius)', + padding: '1.25rem', marginBottom: '1.25rem', + border: '1px solid var(--gold)', + boxShadow: 'var(--shadow-md)', + display: 'flex', flexDirection: 'column', gap: '0.75rem', + }, children: [_jsx("h2", { style: { fontSize: '0.875rem', fontWeight: 600, color: 'var(--text-dark)' }, children: "New Notice" }), _jsx("input", { value: title, onChange: e => setTitle(e.target.value), placeholder: "Title", required: true, style: inputStyle }), _jsx("textarea", { value: body, onChange: e => setBody(e.target.value), placeholder: "Notice content\u2026", required: true, rows: 4, style: { ...inputStyle, resize: 'vertical', lineHeight: 1.5 } }), _jsxs("div", { style: { display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }, children: [_jsx("select", { value: category, onChange: e => setCategory(e.target.value), style: { ...inputStyle, flex: 1 }, children: CATEGORIES.filter(c => c.value !== 'all').map(c => (_jsx("option", { value: c.value, children: c.label }, c.value))) }), _jsx("input", { type: "date", value: expires, onChange: e => setExpires(e.target.value), style: { ...inputStyle, flex: 1 }, title: "Expires (optional)" })] }), _jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.875rem', + cursor: 'pointer', color: 'var(--text-dark)' }, children: [_jsx("input", { type: "checkbox", checked: pinned, onChange: e => setPinned(e.target.checked) }), "Pin to top"] }), error && _jsx("p", { style: { color: 'var(--danger)', fontSize: '0.875rem' }, children: error }), _jsx("button", { type: "submit", disabled: submitting, style: submitBtn, children: submitting ? 'Posting…' : 'Post notice' })] })); +} +const inputStyle = { + background: 'var(--body-bg)', border: '1px solid var(--card-border)', + borderRadius: '7px', color: 'var(--text-dark)', padding: '0.6rem 0.75rem', + fontSize: '0.9rem', width: '100%', outline: 'none', +}; +const iconBtn = { + background: 'var(--body-bg)', border: '1px solid var(--card-border)', + borderRadius: '6px', padding: '0.3rem', color: 'var(--text-mid)', + display: 'flex', alignItems: 'center', justifyContent: 'center', +}; +const submitBtn = { + background: 'var(--gold)', color: 'var(--navy)', border: 'none', + borderRadius: '7px', padding: '0.625rem', fontSize: '0.9rem', fontWeight: 600, +};