feat: add auth pages

app/components/login.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { useNavigate, Form, Link } from "react-router";
+import { authClient } from "~/lib/auth-client";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+
+export default function Login() {
+  const navigate = useNavigate();
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    setError(null);
+    setPending(true);
+
+    const formData = new FormData(event.currentTarget);
+
+    const { error } = await authClient.signIn.email({
+      email: String(formData.get("email")),
+      password: String(formData.get("password")),
+    });
+
+    setPending(false);
+
+    if (error) {
+      setError(error.message ?? "Could not log in.");
+      return;
+    }
+
+    navigate("/");
+  }
+
+  return (
+    <main className="flex h-screen w-full items-center justify-center">
+      <div className="w-full max-w-sm space-y-4">
+        <div className="flex flex-col">
+          <span className="text-2xl font-semibold">Log in</span>
+          <span className="text-sm text-muted-foreground">
+            Continue to Coppie.
+          </span>
+        </div>
+
+        <Form onSubmit={onSubmit} className="space-y-4">
+          <Input name="email" type="email" placeholder="Email" required />
+
+          <Input
+            name="password"
+            type="password"
+            placeholder="Password"
+            required
+          />
+
+          {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+          <Button type="submit" disabled={pending} className="w-full">
+            {pending ? "Logging in..." : "Log in"}
+          </Button>
+        </Form>
+
+        <p className="text-sm">
+          No account?{" "}
+          <Link to="/signup" className="underline">
+            Sign up
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

app/components/signup.tsx

@@ -0,0 +1,76 @@
+import { Form, Link, redirect, useNavigate } from "react-router";
+import { useState } from "react";
+import { auth } from "../../lib/auth";
+import { authClient } from "~/lib/auth-client";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+
+export default function Signup() {
+  const navigate = useNavigate();
+  const [error, setError] = useState<string | null>(null);
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    setError(null);
+    setPending(true);
+
+    const formData = new FormData(event.currentTarget);
+
+    const { error } = await authClient.signUp.email({
+      name: String(formData.get("name")),
+      email: String(formData.get("email")),
+      password: String(formData.get("password")),
+    });
+
+    setPending(false);
+
+    if (error) {
+      setError(error.message ?? "Could not create account.");
+      return;
+    }
+
+    navigate("/");
+  }
+
+  return (
+    <main className="flex h-screen w-full items-center justify-center">
+      <div className="w-full max-w-sm space-y-4">
+        <div className="flex flex-col">
+          <span className="text-2xl font-semibold">Sign up</span>
+          <span className="text-sm text-muted-foreground">
+            Create your Coppie account.
+          </span>
+        </div>
+
+        <Form onSubmit={onSubmit} className="space-y-4">
+          <Input name="name" type="text" placeholder="Name" required />
+
+          <Input name="email" type="email" placeholder="Email" required />
+
+          <Input
+            name="password"
+            type="password"
+            placeholder="Password"
+            required
+            minLength={8}
+          />
+
+          {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+          <Button type="submit" disabled={pending} className="w-full">
+            {pending ? "Creating account..." : "Create account"}
+          </Button>
+        </Form>
+
+        <p className="text-sm">
+          Already have an account?{" "}
+          <Link to="/login" className="underline">
+            Log in
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

app/components/ui/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-10 w-full min-w-0 border border-transparent border-b-input bg-transparent px-0 py-1 text-base transition-[color,border-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive md:text-sm dark:aria-invalid:border-b-destructive/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };