Initial Animatrix import

2026-04-17 19:11:57 +05:30
commit c7994d17a9
60 changed files with 8516 additions and 0 deletions
--- a/frontend/src/components/auth-form.tsx
+++ b/frontend/src/components/auth-form.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+
+import { apiPost } from "@/lib/api";
+
+export function AuthForm({ mode }: { mode: "login" | "register" }) {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setBusy(true);
+    setError("");
+
+    try {
+      const path = mode === "login" ? "/api/auth/login" : "/api/auth/register";
+      await apiPost(path, { email, password });
+      if (mode === "register") {
+        await apiPost("/api/auth/login", { email, password });
+      }
+      router.push("/dashboard");
+      router.refresh();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Request failed");
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="shell flex min-h-screen items-center justify-center py-14">
+      <section className="panel w-full max-w-md p-8 sm:p-10">
+        <div className="mb-8">
+          <p className="eyebrow">Animatrix</p>
+          <h1 className="mt-3 text-3xl font-semibold text-white">
+            {mode === "login" ? "Sign in" : "Create account"}
+          </h1>
+          <p className="mt-3 text-sm leading-6 text-subtext">
+            {mode === "login"
+              ? "Use your workspace account to open the generator."
+              : "Create a local account for this workspace."}
+          </p>
+        </div>
+
+        <form className="space-y-4" onSubmit={submit}>
+          <input
+            autoComplete="email"
+            className="input"
+            type="email"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <input
+            autoComplete={mode === "login" ? "current-password" : "new-password"}
+            className="input"
+            type="password"
+            placeholder="Password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          {error ? (
+            <div className="rounded-2xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-200">
+              {error}
+            </div>
+          ) : null}
+          <button className="btn-primary w-full" disabled={busy} type="submit">
+            {busy ? "Working..." : mode === "login" ? "Sign in" : "Create account"}
+          </button>
+        </form>
+
+        <div className="mt-6 text-sm text-subtext">
+          {mode === "login" ? (
+            <>
+              No account yet? <Link className="text-accent" href="/register">Register</Link>
+            </>
+          ) : (
+            <>
+              Already registered? <Link className="text-accent" href="/login">Sign in</Link>
+            </>
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}