hotel-manage-stack/noticeboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sync shared components — sidebar scrollbar, Layout, AuthGate updates

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-14 12:07:11 +00:00
parent 0200775030
commit 3b09089817
3 changed files with 246 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

114
frontend/src/components/AuthGate.js Normal file
View file

@ -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',
};

15
frontend/src/components/AuthGate.tsx
View file

@ -1,9 +1,11 @@
import { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
const SHARED_TIMEOUT_MS = 10 * 60 * 1000 function getInactivityMs(): number | undefined {
if (window.matchMedia('(display-mode: standalone)').matches) return undefined
function isSharedDevice() { const c = document.cookie.split(';').map(s => s.trim()).find(s => s.startsWith('hnf_inactivity_mins='))
return document.cookie.split(';').some(c => c.trim() === 'hnf_shared_device=1') 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(() => { useEffect(() => {
if (state !== 'authed' || !isSharedDevice()) return const ms = getInactivityMs()
if (state !== 'authed' || !ms) return
async function forceLogout() { async function forceLogout() {
await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {}) await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {})
@ -51,7 +54,7 @@ export function AuthGate({ children }: Props) {
function reset() { function reset() {
if (timerRef.current) clearTimeout(timerRef.current) 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 const events = ['mousemove', 'keydown', 'click', 'touchstart'] as const

123
frontend/src/components/NoticeBoard.js Normal file
View file

@ -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,
};