/* ============================================================
SVLM — Login. Two steps, matching the supplied design: choose a provider
first, then a form only for whoever picks name-and-phone.
The form is name + phone posted to /api/customers/identify, not email and
password — this codebase has no password anywhere in the customer flow, and
no SMS provider since SMS-KUB was cancelled, so neither a password field nor
an OTP step could work.
Apple appears in the list but is marked and disabled: unlike the other three
it has no server-side implementation, and /api/auth/apple/start does not
exist. Making it live needs a paid Apple Developer account, a Services ID and
a .p8 signing key, and a token exchange unlike the others — Apple wants a JWT
client secret signed ES256 and returns the profile inside an id_token. Until
that is built, saying "soon" is the honest state; a button that redirects
into an error teaches people the app is broken.
============================================================ */
const Pau = window.PALETTE;
/* Each provider's own mark. Letters in coloured squares stood in for these before, and a letter
is not recognisable as Facebook or Google at a glance — the mark is why these buttons are
trusted at all, and each brand's guidelines require their own. */
const BRAND_MARKS = {
line: (
),
facebook: (
),
google: (
),
apple: (
),
phone: (
),
};
function AuthScreen({ app, oauthError }) {
/* 'choose' is the provider list; 'form' is the name-and-phone step behind the last button. The
design puts them on separate screens rather than showing a form nobody using LINE will fill. */
const [step, setStep] = React.useState('choose');
const [name, setName] = React.useState('');
const [phone, setPhone] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(oauthError || '');
/* Starts false on purpose. A pre-ticked consent box is not consent under Thai PDPA, so the
sheet below is the gate: it is what someone taps through, not decoration. */
const [agreed, setAgreed] = React.useState(false);
const [gate, setGate] = React.useState(null); // the action waiting on consent
const social = (provider) => { window.location.href = `/api/auth/${provider}/start`; };
/* Every route in — a provider, the form, guest — passes through here, so consent is asked once
and cannot be skipped by choosing a different button. */
const guardedRun = (action) => {
if (agreed) { action(); return; }
setGate(() => action);
};
const submit = async (asGuest = false) => {
setErr('');
if (!asGuest && !name.trim()) { setErr(appT('name_required') || 'Please enter your name'); return; }
if (phone.replace(/\D/g, '').length < 9) { setErr(appT('phone_required') || 'Please enter a valid phone number'); return; }
setBusy(true);
try {
const result = await api('/customers/identify', {
method: 'POST',
body: JSON.stringify({ name: asGuest ? 'Guest' : name.trim(), phone: phone.trim() }),
});
localStorage.setItem('svlm_token', result.token);
localStorage.setItem('svlm_customer', JSON.stringify(result.customer));
app.login({ method: asGuest ? 'guest' : 'phone', name: result.customer.name, phone: result.customer.phone, customer: result.customer });
} catch (e) {
setErr(e.message);
} finally {
setBusy(false);
}
};
/* Full pill, mark on the left, nothing on the right. The chevron that used to sit at the end
said "this opens another screen of ours", which is the opposite of what these do. */
const Pill = ({ mark, label, onClick, primary = false, soon = false }) => (
);
const Consent = () => (
{/* Names what is collected. "Please read the terms" on its own is not a disclosure. */}
{appT('terms_gate_body')
|| 'Please read the Service Agreement and Privacy Policy before continuing. We collect your name, phone number and service address to schedule and carry out your booking.'}
)}
);
/* ---------- step 2: name and phone ---------- */
if (step === 'form') {
return shell(
{appT('signin_phone_title') || 'Sign in with your phone'}