Sync shared components — sidebar scrollbar, Layout, AuthGate updates
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
0200775030
commit
3b09089817
3 changed files with 246 additions and 6 deletions
114
frontend/src/components/AuthGate.js
Normal file
114
frontend/src/components/AuthGate.js
Normal 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',
|
||||
};
|
||||
|
|
@ -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
|
||||
|
|
|
|||
123
frontend/src/components/NoticeBoard.js
Normal file
123
frontend/src/components/NoticeBoard.js
Normal 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,
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue