Function LoginPage

apps/host-selfhost/web/login.tsx:19–132

()

// redeeming an invite — either the full /join/<code> link, or by entering the
// code here ("Have an invite code?"), which forwards to the same join page.
export const LoginPage = () => {
  // Where to go after sign-in. The gate renders this page IN PLACE of the
  // requested route without navigating, so the live location is what carries a
  // deep link (`/connect/linear`) across sign-in — see `postLoginTarget`.
  const postLogin = postLoginTarget(window.location);
  const [mode, setMode] = useState<"signin" | "code">("signin");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [code, setCode] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const signIn = async (event: FormEvent) => {
    event.preventDefault();
    setBusy(true);
    setError(null);
    const result = await authClient.signIn.email({ email, password });
    if (result.error) {
      setBusy(false);
      setError(result.error.message ?? "Sign in failed");
      return;
    }
    window.location.href = postLogin;
  };

  const redeem = (event: FormEvent) => {
    event.preventDefault();
    const trimmed = code.trim();
    if (!trimmed) return;
    // Forward to the join page, which collects name/email/password and redeems.
    window.location.href = `/join/${encodeURIComponent(trimmed)}`;
  };

  return (
    <AuthLayout>
      <div className="w-full max-w-sm space-y-4 rounded-xl border border-border bg-card p-6 shadow-sm">
        <div className="space-y-1">
          <h1 className="text-xl font-semibold tracking-tight text-foreground">
            {mode === "signin" ? "Sign in" : "Join this instance"}
          </h1>
          <p className="text-sm text-muted-foreground">
            {mode === "signin"
              ? "Welcome back. Use your instance account."
              : "Enter the invite code you were given."}
          </p>
        </div>

        {mode === "signin" ? (
          <form onSubmit={signIn} className="space-y-4">
            <div className="space-y-1.5">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="you@example.com"
                value={email}
                onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
                autoComplete="email"