Sync shared components — sidebar scrollbar, Layout, AuthGate updates
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
e0ff800c6b
commit
2c0180ce9a
5 changed files with 163 additions and 7 deletions
109
frontend/src/components/AuthGate.js
Normal file
109
frontend/src/components/AuthGate.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
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;
|
||||
}
|
||||
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(--hk-green)', color: '#fff', border: 'none',
|
||||
borderRadius: '6px', padding: '0.625rem', fontSize: '1rem',
|
||||
fontWeight: 600, marginTop: '0.25rem', width: '100%',
|
||||
};
|
||||
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=hk-planner', { credentials: 'include' })
|
||||
.then(async (r) => {
|
||||
if (r.ok) {
|
||||
setUser(await r.json());
|
||||
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=hk-planner', { credentials: 'include' });
|
||||
if (verify.ok) {
|
||||
setUser(await verify.json());
|
||||
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: '#74c69d' }, children: "HK Planner" }), _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: '#f87171', 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) });
|
||||
}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
import { useEffect, useRef, useState } from 'react'
|
||||
import type { User } from '../types'
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -42,7 +44,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(() => {})
|
||||
|
|
@ -52,7 +55,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
|
||||
|
|
|
|||
29
frontend/src/components/Layout.js
Normal file
29
frontend/src/components/Layout.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { CalendarClock, Settings, LogOut } from 'lucide-react';
|
||||
import { can } from '../types';
|
||||
export function Layout({ user, children }) {
|
||||
async function logout() {
|
||||
await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
|
||||
window.location.href = '/';
|
||||
}
|
||||
return (_jsxs("div", { style: { display: 'flex', height: '100dvh', overflow: 'hidden' }, children: [_jsxs("nav", { style: {
|
||||
width: '200px', flexShrink: 0, background: 'var(--navy)',
|
||||
display: 'flex', flexDirection: 'column', padding: '1rem 0',
|
||||
borderRight: '1px solid var(--surface-2)',
|
||||
}, children: [_jsxs("div", { style: { padding: '0 1rem 1rem', borderBottom: '1px solid var(--surface-2)' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem' }, children: [_jsx(CalendarClock, { size: 20, strokeWidth: 1.75, color: "#74c69d" }), _jsx("span", { style: { color: '#74c69d', fontWeight: 700, fontSize: '0.95rem' }, children: "HK Planner" })] }), _jsx("p", { style: { color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }, children: user.name })] }), _jsxs("div", { className: "nav-scroll", style: { flex: 1, padding: '0.5rem 0', overflowY: 'auto' }, children: [_jsx(NavItem, { to: "/planner", icon: CalendarClock, label: "Planner" }), can(user, 'settings') && _jsx(NavItem, { to: "/settings", icon: Settings, label: "Settings" })] }), _jsx("div", { style: { padding: '0.75rem 1rem', borderTop: '1px solid var(--surface-2)' }, children: _jsxs("button", { onClick: logout, style: {
|
||||
display: 'flex', alignItems: 'center', gap: '0.5rem',
|
||||
background: 'none', border: 'none', color: 'var(--text-muted)',
|
||||
fontSize: '0.875rem', padding: '0.375rem 0', width: '100%', cursor: 'pointer',
|
||||
}, children: [_jsx(LogOut, { size: 14, strokeWidth: 1.75 }), "Sign out"] }) })] }), _jsx("main", { style: { flex: 1, overflow: 'auto', background: 'var(--body-bg)' }, children: children })] }));
|
||||
}
|
||||
function NavItem({ to, icon: Icon, label }) {
|
||||
return (_jsxs(NavLink, { to: to, style: ({ isActive }) => ({
|
||||
display: 'flex', alignItems: 'center', gap: '0.625rem',
|
||||
padding: '0.625rem 1rem', textDecoration: 'none',
|
||||
color: isActive ? '#74c69d' : 'var(--text)',
|
||||
background: isActive ? 'var(--surface)' : 'transparent',
|
||||
borderLeft: isActive ? '2px solid #74c69d' : '2px solid transparent',
|
||||
fontSize: '0.875rem', transition: 'background 0.15s',
|
||||
}), children: [_jsx(Icon, { size: 15, strokeWidth: 1.75 }), label] }));
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@ export function Layout({ user, children }: Props) {
|
|||
<p style={{ color: 'var(--text-muted)', fontSize: '0.72rem', marginTop: '0.2rem' }}>{user.name}</p>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, padding: '0.5rem 0', overflowY: 'auto' }}>
|
||||
<div className="nav-scroll" style={{ flex: 1, padding: '0.5rem 0', overflowY: 'auto' }}>
|
||||
<NavItem to="/planner" icon={CalendarClock} label="Planner" />
|
||||
{can(user, 'settings') && <NavItem to="/settings" icon={Settings} label="Settings" />}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -153,3 +153,18 @@ input, textarea, select { font-family: inherit; }
|
|||
border: 1px solid var(--card-border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Sidebar scrollbar */
|
||||
.nav-scroll::-webkit-scrollbar,
|
||||
.sidebar::-webkit-scrollbar,
|
||||
.sidebar-nav::-webkit-scrollbar { width: 4px; }
|
||||
.nav-scroll::-webkit-scrollbar-track,
|
||||
.sidebar::-webkit-scrollbar-track,
|
||||
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
|
||||
.nav-scroll::-webkit-scrollbar-thumb,
|
||||
.sidebar::-webkit-scrollbar-thumb,
|
||||
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.35); border-radius: 2px; }
|
||||
.nav-scroll::-webkit-scrollbar-thumb:hover,
|
||||
.sidebar::-webkit-scrollbar-thumb:hover,
|
||||
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,0.65); }
|
||||
.nav-scroll, .sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(201,168,76,0.35) transparent; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue