Add bootstrap signup page for creating the first admin user

The CLI create-user scripts hit environment issues on the VPS (missing ts-node, missing node_modules on the host). A /signup page sidesteps that entirely since it runs inside the already-working Next.js server. It's a one-time-use setup form: the server action refuses to run once any user already exists, so it's safe to leave in place, though it can be deleted after the first account is created. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-18 16:26:50 +02:00
parent 29d5caa76a
commit 457469decd
4 changed files with 153 additions and 1 deletions
@@ -0,0 +1,62 @@
+"use client";
+
+import { useActionState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent } from "@/components/ui/card";
+import { createFirstUser, type CreateFirstUserState } from "@/actions/setup";
+
+const initialState: CreateFirstUserState = {};
+
+export function SignupForm() {
+  const [state, action, pending] = useActionState(createFirstUser, initialState);
+
+  if (state.success) {
+    return (
+      <Card>
+        <CardContent className="space-y-4 text-center">
+          <p className="text-sm">
+            Account created. You can delete the signup page now — sign in at{" "}
+            <a href="/login" className="text-amber-500 underline">
+              /login
+            </a>
+            .
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent>
+        <form action={action} className="space-y-4">
+          <div className="space-y-1.5">
+            <Label htmlFor="name">Name (optional)</Label>
+            <Input id="name" name="name" autoComplete="name" />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" name="email" type="email" autoComplete="email" required />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="new-password"
+              required
+              minLength={8}
+            />
+          </div>
+          {state.error && <p className="text-sm text-destructive">{state.error}</p>}
+          <Button type="submit" className="w-full" disabled={pending}>
+            {pending ? "Creating…" : "Create account"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}