feat: auth flow

js/src/features/auth/code-step.tsx

@@ -0,0 +1,69 @@
+import { type FormEvent, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { H3, Muted } from "@/components/ui/typography";
+import { useAuthStore } from "@/stores/auth-store";
+
+interface CodeStepProps {
+  email: string;
+  onBack: () => void;
+}
+
+export function CodeStep({ email, onBack }: CodeStepProps) {
+  const [code, setCode] = useState("");
+  const isSigningIn = useAuthStore((s) => s.isSigningIn);
+  const error = useAuthStore((s) => s.error);
+  const signIn = useAuthStore((s) => s.signIn);
+  const clearError = useAuthStore((s) => s.clearError);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await signIn(email, code);
+    } catch {
+      // Error is set in the store
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <H3>Check your email</H3>
+        <Muted>
+          We sent a code to <strong className="text-foreground">{email}</strong>.
+        </Muted>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="code">Code</Label>
+        <Input
+          id="code"
+          type="text"
+          inputMode="numeric"
+          placeholder="Enter code"
+          value={code}
+          onChange={(e) => {
+            setCode(e.target.value);
+            if (error) clearError();
+          }}
+          required
+          autoFocus
+        />
+      </div>
+
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+
+      <div className="flex flex-col gap-2">
+        <Button type="submit" disabled={isSigningIn || !code}>
+          {isSigningIn ? "Signing in..." : "Sign in"}
+        </Button>
+        <Button type="button" variant="ghost" onClick={onBack}>
+          Back
+        </Button>
+      </div>
+    </form>
+  );
+}

js/src/features/auth/email-step.tsx

@@ -0,0 +1,61 @@
+import { type FormEvent, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { H3, Muted } from "@/components/ui/typography";
+import { useAuthStore } from "@/stores/auth-store";
+
+interface EmailStepProps {
+  onCodeSent: (email: string) => void;
+}
+
+export function EmailStep({ onCodeSent }: EmailStepProps) {
+  const [email, setEmail] = useState("");
+  const isRequestingCode = useAuthStore((s) => s.isRequestingCode);
+  const error = useAuthStore((s) => s.error);
+  const requestCode = useAuthStore((s) => s.requestCode);
+  const clearError = useAuthStore((s) => s.clearError);
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      await requestCode(email);
+      onCodeSent(email);
+    } catch {
+      // Error is set in the store
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <H3>Sign in</H3>
+        <Muted>Enter your email to receive a sign-in code.</Muted>
+      </div>
+
+      <div className="flex flex-col gap-1.5">
+        <Label htmlFor="email">Email</Label>
+        <Input
+          id="email"
+          type="email"
+          placeholder="[email protected]"
+          value={email}
+          onChange={(e) => {
+            setEmail(e.target.value);
+            if (error) clearError();
+          }}
+          required
+          autoFocus
+        />
+      </div>
+
+      {error && (
+        <p className="text-sm text-destructive">{error}</p>
+      )}
+
+      <Button type="submit" disabled={isRequestingCode || !email}>
+        {isRequestingCode ? "Sending..." : "Continue"}
+      </Button>
+    </form>
+  );
+}

js/src/features/auth/login-page.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { EmailStep } from "./email-step";
+import { CodeStep } from "./code-step";
+
+type Step = "email" | "code";
+
+export function LoginPage() {
+  const [step, setStep] = useState<Step>("email");
+  const [email, setEmail] = useState("");
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        {step === "email" ? (
+          <EmailStep
+            onCodeSent={(submittedEmail) => {
+              setEmail(submittedEmail);
+              setStep("code");
+            }}
+          />
+        ) : (
+          <CodeStep
+            email={email}
+            onBack={() => setStep("email")}
+          />
+        )}
+      </div>
+    </div>
+  );
+}