/* =========================================================================
Veto · Auth & onboarding (Mercury-inspired pass)
Principles for this flow:
· One context per screen. Personal identity (name, email) is never on the
same screen as "what do you do" questions (role, office).
· Less is more. One question, one decision per screen.
· Every question has a real payoff — the copy says what it does FOR you.
Routes:
/welcome bold hub
/login email → code (returning)
/verify 6-digit code (returning)
/onboarding create an office: name → email → verify → role → office
========================================================================= */
const OFFICE_SUGGESTIONS = ["805 Escrow", "805 Title & Escrow", "Conejo Valley Escrow", "Central Coast Escrow", "Ventura County Escrow", "Westlake Escrow Services"];
/* Gently proper-case a typed name: capitalise the first letter of each word,
leave the rest as typed (so "mcDonald" stays "McDonald"). */
const properCase = (s) => (s || "").replace(/(^|[\s'’-])([a-z])/g, (_, p, c) => p + c.toUpperCase());
/* ============================================================ primitives */
/* Centered shell for the bold marketing-y screens (welcome / login / verify). */
function AuthShell({ children, footer, align = "center" }) {
return (
{children}
{footer && }
);
}
/* In-flow help: setup guides + "message us", opened from the Need help pill. */
const ONB_GUIDES = [
{ id: "office", icon: "building", title: "Setting up your office", blurb: "Name, branches, and reviewers.",
body: "Your office name appears on every receipt the parties see, and it's bound to the record so it can't be faked. You can add branches and invite reviewers now, or later from Settings." },
{ id: "reviews", icon: "shield-check", title: "How a review works", blurb: "Lines, checkpoints, and receipts.",
body: "Every file moves money through review lines — seller proceeds, buyer funding, payoff. Each line is a short list of checkpoints you record against a source. When the last is recorded, Veto issues a signed, source-bound receipt." },
{ id: "2fa", icon: "lock", title: "Why a second factor?", blurb: "Keeping the office locked to you.",
body: "An emailed code only proves someone reached your inbox. A passkey or authenticator ties sign-in to a device you hold, so a leaked email can't open your office. You'll confirm it each time you sign in." },
];
function OnbHelpPanel() {
const [guide, setGuide] = useState(null);
const [sent, setSent] = useState(false);
const g = ONB_GUIDES.find((x) => x.id === guide);
return (
Need a hand?
Setup guides, or a real person — we usually reply in a few minutes.
{mode === "create"
? <>One touch — Touch ID, Face ID, or a hardware key — saves a passkey for {domain}.
: <>Use Touch ID to sign in to {domain}.}
{mode === "create" && (
{benefits.map((b) => (
{b.text}
))}
)}
{onCancel && }
);
}
/* --------------------------------------------------------------- Welcome */
function Welcome() {
return (
Veto records the review. The office decides.}>
For escrow & title offices
The future of escrow money is on the record.
Veto turns every buyer funding, seller proceeds, and payoff demand into a signed, source-bound review record no one can fake.
Create an office
Sign in
Have an invite? Join an existing office
Skip to the demo →
);
}
/* --------------------------------------------------------------- Login */
function Login() {
const [email, setEmail] = useState("");
const valid = /\S+@\S+\.\S+/.test(email);
return (
New to Veto? Create an office.}>
Welcome back.
Enter your work email and we'll send a 6-digit code. No password to remember.
valid && navigate("/verify")} />
navigate("/verify")}>Continue with email
Continue to the demo
);
}
/* --------------------------------------------------------------- Verify (returning) */
function Verify() {
const [phase, setPhase] = useState("code");
const [code, setCode] = useState("");
const [otp, setOtp] = useState("");
if (phase === "code") {
return (
Didn't get it? · Use a different email}>
Check your email.
We sent a code to madeline.lane@805escrow.example.
setPhase("2fa")} />
setPhase("2fa")}>Continue
);
}
return (
Lost your device? }>
One more check.
A code in your inbox isn't proof on its own. Confirm with your passkey, or enter the code from your authenticator app.
or enter your code
navigate("/")} />
);
}
/* ------------------------------------------------------------ Onboarding */
/* Create-an-office flow. Each step is a single context with a clear payoff. */
const ONB_STEPS = ["name", "email", "verify", "secure", "role", "office", "invite"];
const TWOFA_METHODS = [
{ id: "passkey", icon: "lock", title: "Passkey", sub: "Face ID, Touch ID, or a hardware key. Phishing-proof and recommended." },
{ id: "authenticator", icon: "shield-check", title: "Authenticator app", sub: "A rotating 6-digit code from Authy, 1Password, or Google Authenticator." },
];
const ONB_ROLES = [
{ id: "officer", icon: "shield-check", title: "Escrow officer", sub: "Reviews files and signs receipts." },
{ id: "manager", icon: "users", title: "Branch manager", sub: "Oversees second review and the office." },
{ id: "assistant", icon: "file-text", title: "Assistant", sub: "Preps files and gathers evidence. Can't sign." },
];
function Onboarding() {
const [step, setStep] = useState(0);
const [first, setFirst] = useState("");
const [last, setLast] = useState("");
const [email, setEmail] = useState("");
const [code, setCode] = useState("");
const [role, setRole] = useState("officer");
const [office, setOffice] = useState("");
const [invites, setInvites] = useState([]);
const [twofa, setTwofa] = useState("passkey");
const [securePhase, setSecurePhase] = useState("choose");
const [otp, setOtp] = useState("");
const [keyCopied, setKeyCopied] = useState(false);
const [linkCopied, setLinkCopied] = useState(false);
const total = ONB_STEPS.length;
const id = ONB_STEPS[step];
const next = () => setStep((s) => Math.min(s + 1, total - 1));
const back = () => setStep((s) => Math.max(s - 1, 0));
const finish = () => {
try {
localStorage.setItem("veto.setup.office", office || "805 Escrow");
localStorage.setItem("veto.setup.first", first || "Madeline");
localStorage.setItem("veto.setup.role", role);
localStorage.setItem("veto.setup.officeDone", "1");
localStorage.setItem("veto.setup.2fa", twofa);
localStorage.setItem("veto.setup.domain", (email.split("@")[1] || "").trim());
if (invites.length) { localStorage.setItem("veto.setup.invitesDone", "1"); localStorage.setItem("veto.setup.inviteCount", String(invites.length)); }
} catch {}
navigate("/");
};
const rightCtx = first ? `${first}${last ? " " + last : ""}` : Sign in;
const nameOk = first.trim().length > 0;
const emailOk = /\S+@\S+\.\S+/.test(email);
return (
{/* 1 · Your name — personal identity, on its own */}
{id === "name" && (