);
}
// small mail glyph for the email-code card
function MailGlyph() {
return (
);
}
const primaryBtn = (enabled) => ({
width: '100%', height: 48, borderRadius: 12, border: 'none', cursor: enabled ? 'pointer' : 'not-allowed',
background: enabled ? 'var(--si-primary)' : 'rgba(23,20,15,0.07)', color: enabled ? '#fff' : 'var(--si-faint)',
fontFamily: MONO, fontSize: 13, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', transition: 'background .15s',
});
/* ====================== SIGN-IN FLOW (A1 → A2 → A3) ================== */
function SignIn({ employees, onSignup, onComplete, onMustChange }) {
const [step, setStep] = useState('id'); // id | password | code
const [idInput, setIdInput] = useState('');
const [pw, setPw] = useState(''); const [showPw, setShowPw] = useState(false);
const [code, setCode] = useState('');
const [err, setErr] = useState(''); const [busy, setBusy] = useState(false);
const [verifying, setVerifying] = useState(false); const [note, setNote] = useState('');
const [resetEmail, setResetEmail] = useState(''); const [newPw, setNewPw] = useState('');
/* HOW LONG UNTIL ANOTHER CODE MAY BE ASKED FOR.
The server allows one every two minutes and answers 429 with
`retryAfter` when it is too soon. Counting it down here is not
decoration: without it the button looks broken, which is exactly
what makes somebody press it again.
`sending` is a separate latch from `busy` because it has to be set
BEFORE the await. React state does not update synchronously, so
`disabled` alone loses the race against a double-click — the second
press lands while the first render is still pending. A ref cannot. */
const [cool, setCool] = useState(0);
const sending = useRef(false);
useEffect(() => {
if (cool <= 0) return;
const t = setTimeout(() => setCool(c => c - 1), 1000);
return () => clearTimeout(t);
}, [cool]);
const startCooldown = (secs) => setCool(Math.max(1, Math.round(secs || 120)));
const dir = (employees || []).filter(e => e.active !== false);
// recognise the typed ID against the local directory (by code, then name)
const resolve = (raw) => { const q = (raw || '').trim().toLowerCase(); return dir.find(e => (e.code || '').toLowerCase() === q) || dir.find(e => e.name.toLowerCase() === q) || null; };
const known = useMemo(() => resolve(idInput), [idInput, dir]);
/* EXAMPLES ARE ONLY EVER THIS DESK'S PEOPLE.
A browser that has never signed in here carries the rehearsal desk's
five, and offering those to a returning customer showed them two
strangers' staff IDs and told them to pick one. Somebody who runs
their own shop signs in with their email address, which looks
nothing like `j.masri`. If we do not know this desk's people yet, we
say what the field wants instead of guessing. */
const ours = dir.filter(e => !e.demo);
const owner = ours.find(e => e.role === 'Owner') || ours[0];
const rep = ours.find(e => e.role !== 'Owner' && e !== owner) || ours[1];
const examples = [owner, rep].filter(Boolean).slice(0, 2);
// captured across the login call so the code step can complete
const authRef = useRef({ rec: null, srvPlan: null, srvUser: null });
const goPassword = () => { if (idInput.trim().length < 3) { setErr('Enter your CurrencyDesk ID.'); return; } setErr(''); setStep('password'); };
const SRV2OS = { administrator: 'Owner', branch_manager: 'Manager', supervisor: 'Senior teller', compliance_officer: 'Manager', teller: 'Cashier', auditor: 'Trainee' };
const adopt = (u, rec) => rec || { id: 'e_' + Date.now(), code: u.id, name: u.name || u.id, role: SRV2OS[u.role] || 'Cashier', active: true, branches: [], home: null, _adopted: true };
/* The prototype remains useful as a file/localhost demo, but a deployed
desk must never look signed in when its API is unavailable. In the live
product the server session is the identity, not browser state. */
const offlineDemoAllowed = () => {
const host = (window.location && window.location.hostname || '').toLowerCase();
return window.location.protocol === 'file:' || host === 'localhost' || host === '127.0.0.1' || host === '[::1]' || host.endsWith('.local');
};
// Step 1: prove the password. The server emails a code (email identities)
// and we advance to the keypad; users with no email sign in immediately.
async function submitPassword(e) {
e && e.preventDefault();
if (pw.length < 4) { setErr('Enter your password.'); return; }
// set before the first await, or a double-click gets through
if (sending.current) return;
sending.current = true;
let rec = known;
const staffId = rec ? (rec.code || rec.name) : idInput.trim().toLowerCase();
setBusy(true); setErr('Checking… (first sign-in of the day can take ~30s while the server wakes)');
try {
const res = await fetch('/api/auth/login/start', {
method: 'POST', headers: { 'content-type': 'application/json' }, credentials: 'same-origin',
body: JSON.stringify({ staffId, password: pw }),
});
if (res && res.status === 401) { sending.current = false; setBusy(false); setErr('That password doesn’t match this ID. Try again — or reset it below.'); return; }
if (res && res.status === 429) {
const d = await res.json().catch(() => null);
sending.current = false; setBusy(false);
startCooldown(d && d.retryAfter);
setErr((d && d.detail) || 'A code went out moments ago — check your email.');
return;
}
if (res && !res.ok) { sending.current = false; setBusy(false); setErr('Sign-in service error (' + res.status + ') — try again in a moment.'); return; }
const data = await res.json().catch(() => null);
const u = (data && data.user) || null;
const srvPlan = (u && u.plan) || null;
if (!rec && u) rec = adopt(u, null);
sending.current = false; setBusy(false); setErr('');
if (u && u.mustChangePassword) { onMustChange(rec, { current: pw }, srvPlan, u); return; }
authRef.current = { rec, srvPlan, srvUser: u, staffId, tenantId: (u && u.tenantId) || undefined, maskedEmail: data && data.maskedEmail };
if (data && data.needsCode === false) { onComplete(rec, srvPlan, u); return; } // password-only (no email on file)
setCode(''); setStep('code'); startCooldown(120);
} catch (_) {
// A static local prototype can still demonstrate the flow. A deployed
// desk must fail closed and wait for the authentication service.
sending.current = false; setBusy(false);
if (!offlineDemoAllowed()) {
setErr('The sign-in service is unavailable. Check your connection and try again.');
return;
}
if (!rec) { setErr('No staff record for that ID — pick one from the examples.'); return; }
authRef.current = { rec, srvPlan: null, srvUser: null, staffId, demo: true };
setCode(''); setStep('code');
}
}
/* ---- forgot password ------------------------------------------
Nobody could get back in on their own. This screen said "the owner
can reset it" to the owner, so the only path was a phone call to
CurrencyDesk and a temporary password read down the line. */
async function askForReset(e) {
e && e.preventDefault();
const addr = (resetEmail || idInput).trim().toLowerCase();
if (addr.indexOf('@') < 0) { setErr('Enter the email address you sign in with.'); return; }
if (sending.current || cool > 0) return;
sending.current = true;
setBusy(true); setErr('');
try {
const res = await fetch('/api/auth/forgot', {
method: 'POST', headers: { 'content-type': 'application/json' }, credentials: 'same-origin',
body: JSON.stringify({ email: addr }),
});
sending.current = false; setBusy(false);
if (res.status === 429) {
const d = await res.json().catch(() => null);
startCooldown(d && d.retryAfter);
setErr((d && d.detail) || 'Too many requests — wait a few minutes.');
return;
}
startCooldown(120);
/* Deliberately the same words whether or not that address has an
account. The server says nothing either, and a screen that said
"no account here" would undo the point of that. */
setResetEmail(addr); setCode(''); setNewPw(''); setStep('reset');
} catch (_) { sending.current = false; setBusy(false); setErr('The sign-in service is unavailable. Try again in a moment.'); }
}
async function submitReset(e) {
e && e.preventDefault();
if (code.length < 6) { setErr('Enter the 6-digit code from your email.'); return; }
if (newPw.length < 8) { setErr('Pick a password of at least 8 characters.'); return; }
if (sending.current) return;
sending.current = true;
setBusy(true); setErr('');
try {
const res = await fetch('/api/auth/reset', {
method: 'POST', headers: { 'content-type': 'application/json' }, credentials: 'same-origin',
body: JSON.stringify({ email: resetEmail, code, newPassword: newPw }),
});
const data = await res.json().catch(() => null);
sending.current = false; setBusy(false);
if (!res.ok) { setErr((data && data.detail) || 'That code is not right, or it has expired.'); return; }
/* Straight back to signing in, with the address filled in. The
reset signed every device out — including any this browser had —
so proving the new password is both the next step and the proof
it took. */
setIdInput(resetEmail); setPw(''); setCode(''); setNewPw('');
setStep('password');
setNote('Password changed. Sign in with the new one.');
setErr('');
} catch (_) { sending.current = false; setBusy(false); setErr('Network error — try again.'); }
}
// Step 2: the emailed code grants the session.
async function verifyCode(codeVal) {
const a = authRef.current;
setVerifying(true); setErr('');
if (a.demo || !a.staffId) { setTimeout(() => onComplete(a.rec, a.srvPlan, a.srvUser), 900); return; } // offline demo
try {
const res = await fetch('/api/auth/login/verify', {
method: 'POST', headers: { 'content-type': 'application/json' }, credentials: 'same-origin',
body: JSON.stringify({ staffId: a.staffId, tenantId: a.tenantId, code: codeVal }),
});
const data = await res.json().catch(() => null);
if (!res.ok) { setVerifying(false); setCode(''); setErr((data && data.detail) || 'That code isn’t right — check your email.'); return; }
const u = (data && data.user) || a.srvUser;
onComplete(a.rec, (u && u.plan) || a.srvPlan, u);
} catch (_) { setVerifying(false); setErr('Network error — try again.'); }
}
async function resendCode() {
const a = authRef.current;
if (!a.staffId || a.demo) { setCode(''); return; }
if (sending.current || cool > 0) return; // the latch, before any await
sending.current = true;
setNote('Sending a new code…');
try {
const res = await fetch('/api/auth/login/start', { method: 'POST', headers: { 'content-type': 'application/json' }, credentials: 'same-origin', body: JSON.stringify({ staffId: a.staffId, password: pw }) });
const d = await res.json().catch(() => null);
if (res.status === 429) { startCooldown(d && d.retryAfter); setNote((d && d.detail) || 'A code went out moments ago.'); return; }
setNote('A new code is on its way.'); setCode(''); startCooldown(120);
} catch (_) { setNote('Couldn’t resend — try again.'); }
finally { sending.current = false; }
}
const pushDigit = (d) => {
if (verifying || code.length >= 6) return;
const next = (code + d).slice(0, 6);
setCode(next);
if (next.length === 6) verifyCode(next);
};
const backDigit = () => { if (!verifying) setCode(code.slice(0, -1)); };
const maskedEmail = (() => {
if (authRef.current.maskedEmail) return authRef.current.maskedEmail;
const em = (authRef.current.srvUser && authRef.current.srvUser.id) || (known && known.email) || '';
if (em.indexOf('@') < 0) return 'your email on file';
const [u, d] = em.split('@'); return (u[0] || '') + '••••@' + d;
})();
// ---- shells --------------------------------------------------------
const card = (children, width = 404) => (
{children}
);
const shell = (children) => (
CURRENCYDESKOS
{children}
);
// ---- A1 · CurrencyDesk ID -----------------------------------------
if (step === 'id') return shell(card());
// ---- A2 · Password -------------------------------------------------
if (step === 'password') {
const first = firstOf(known ? known.name : '');
return shell(card());
}
// ---- B1 · Can't get in — ask for a reset code ---------------------
if (step === 'forgot') {
return shell(card());
}
// ---- B2 · The code, and a new password ----------------------------
if (step === 'reset') {
return shell(card());
}
// ---- A3 · Email code (keypad) -------------------------------------
return shell(card(
Check your email
A fresh 6-digit code just went to {maskedEmail}.
{[0, 1, 2, 3, 4, 5].map(i => {
const filled = i < code.length, active = i === code.length && !verifying;
return
{filled ? '•' : ''}
;
})}
{err ? err.toUpperCase() : verifying ? 'VERIFYING…' : 'TAP THE CODE IN BELOW'}