Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
2026-04-16 22:47:56 +00:00
parent 411137b170
commit c1cd4f415b
3 changed files with 313 additions and 3 deletions
@@ -0,0 +1,122 @@
+import { createFileRoute, useNavigate, Link } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import { useAuth } from "@/lib/auth";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Scale, Loader2, ShieldCheck } from "lucide-react";
+import { toast } from "sonner";
+
+export const Route = createFileRoute("/login")({
+  component: LoginPage,
+});
+
+function LoginPage() {
+  const { signIn, session, loading } = useAuth();
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!loading && session) navigate({ to: "/" });
+  }, [loading, session, navigate]);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSubmitting(true);
+    const { error } = await signIn(email.trim(), password);
+    setSubmitting(false);
+    if (error) {
+      toast.error("Sign-in failed", { description: error });
+    } else {
+      navigate({ to: "/" });
+    }
+  };
+
+  return (
+    <div className="min-h-screen grid lg:grid-cols-2 bg-background">
+      {/* Brand panel */}
+      <div className="hidden lg:flex flex-col justify-between p-12 bg-sidebar text-sidebar-foreground">
+        <div className="flex items-center gap-3">
+          <div className="h-10 w-10 rounded-md bg-sidebar-primary flex items-center justify-center">
+            <Scale className="h-5 w-5 text-sidebar-primary-foreground" />
+          </div>
+          <div>
+            <div className="font-serif text-xl">Counsel</div>
+            <div className="text-xs uppercase tracking-widest text-sidebar-foreground/60">
+              Law Firm Suite
+            </div>
+          </div>
+        </div>
+
+        <div className="max-w-md">
+          <h2 className="font-serif text-4xl leading-tight mb-4">
+            Practice management, built for the discipline of law.
+          </h2>
+          <p className="text-sidebar-foreground/70 leading-relaxed">
+            Cases, clients, documents, time, and billing — secured behind authenticated access and
+            row-level data protection. Designed for HOA-focused firms and beyond.
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2 text-xs text-sidebar-foreground/60">
+          <ShieldCheck className="h-4 w-4" />
+          Encrypted in transit · Role-based access · Audit-ready
+        </div>
+      </div>
+
+      {/* Form */}
+      <div className="flex items-center justify-center p-6">
+        <Card className="w-full max-w-md border-border/60 shadow-sm">
+          <CardHeader className="space-y-2">
+            <div className="lg:hidden flex items-center gap-2 mb-2">
+              <Scale className="h-5 w-5 text-primary" />
+              <span className="font-serif text-lg">Counsel</span>
+            </div>
+            <CardTitle className="font-serif text-2xl">Sign in</CardTitle>
+            <CardDescription>Restricted access. Contact your administrator for credentials.</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={onSubmit} className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="attorney@firm.com"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="password">Password</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  autoComplete="current-password"
+                  required
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              <Button type="submit" className="w-full" disabled={submitting}>
+                {submitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                Sign in
+              </Button>
+              <p className="text-xs text-muted-foreground text-center">
+                First time setting up the firm?{" "}
+                <Link to="/setup" className="text-primary underline-offset-4 hover:underline">
+                  Create the founding admin account
+                </Link>
+              </p>
+            </form>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}