noticeboard/frontend/src/components/AuthGate.js

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