makearmy-app/app/auth/sign-up/sign-up.tsx

// app/auth/sign-up/sign-up.tsx
"use client";

import { useState, useCallback } from "react";
import { useRouter } from "next/navigation";

type Props = { nextPath?: string };

export default function SignUp({ nextPath = "/portal" }: Props) {
    const router = useRouter();
    const [username, setUsername] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [showPassword, setShowPassword] = useState(false);
    const [loading, setLoading] = useState(false);
    const [err, setErr] = useState<string | null>(null);

    const onSubmit = useCallback(
        async (e: React.FormEvent<HTMLFormElement>) => {
            e.preventDefault();
            setErr(null);

            const u = username.trim();
            const em = email.trim().toLowerCase();
            const pw = password;

            if (!u) {
                setErr("Username is required.");
                return;
            }
            if (!pw || pw.length < 8) {
                setErr("Password must be at least 8 characters.");
                return;
            }

            setLoading(true);
            try {
                const res = await fetch("/api/auth/register", {
                    method: "POST",
                    credentials: "include",
                    headers: {
                        "Content-Type": "application/json",
                        Accept: "application/json",
                    },
                    body: JSON.stringify({
                        username: u,
                        email: em || undefined,
                        password: pw,
                    }),
                });

                const txt = await res.text();
                let j: any = null;
                try {
                    j = txt ? JSON.parse(txt) : null;
                } catch {
                    j = null;
                }

                if (!res.ok) {
                    const message =
                    (j?.error && j?.debug ? `${j.error} (${j.debug})` : j?.error) ||
                    j?.message ||
                    `Sign-up failed (${res.status})`;
                    throw new Error(message);
                }

                // If AUTO_LOGIN is enabled on the server, the user is already signed in.
                router.replace(nextPath);
                router.refresh();
            } catch (e: any) {
                setErr(e?.message || "Unable to sign up.");
            } finally {
                setLoading(false);
            }
        },
        [username, email, password, nextPath, router]
    ); // <-- make sure this closing ); is present

    return (
        <div className="mx-auto max-w-md rounded-lg border p-6">
        <h1 className="mb-1 text-2xl font-semibold">Create Account</h1>
        <p className="mb-6 text-sm opacity-70">
        Join MakerDash to manage rigs, settings, and projects.
        </p>

        <form className="space-y-4" onSubmit={onSubmit}>
        <div className="space-y-1">
        <label className="text-sm font-medium">Username</label>
        <input
        type="text"
        autoComplete="username"
        className="w-full rounded-md border px-3 py-2"
        placeholder="your-handle"
        value={username}
        onChange={(e) => setUsername(e.currentTarget.value)}
        required
        />
        </div>

        <div className="space-y-1">
        <label className="text-sm font-medium">
        Email <span className="opacity-60">(optional)</span>
        </label>
        <input
        type="email"
        autoComplete="email"
        className="w-full rounded-md border px-3 py-2"
        placeholder="you@example.com"
        value={email}
        onChange={(e) => setEmail(e.currentTarget.value)}
        />
        </div>

        <div className="space-y-1">
        <div className="flex items-center justify-between">
        <label className="text-sm font-medium">Password</label>
        <button
        type="button"
        className="text-xs opacity-70 hover:opacity-100"
        onClick={() => setShowPassword((s) => !s)}
        >
        {showPassword ? "Hide" : "Show"}
        </button>
        </div>
        <input
        type={showPassword ? "text" : "password"}
        autoComplete="new-password"
        className="w-full rounded-md border px-3 py-2"
        placeholder="Choose a strong password"
        value={password}
        onChange={(e) => setPassword(e.currentTarget.value)}
        required
        minLength={8}
        />
        </div>

        {err && (
            <div className="rounded-md border border-red-300 bg-red-50 px-3 py-2 text-sm text-red-700">
            {err}
            </div>
        )}

        <button
        type="submit"
        disabled={loading}
        className="w-full rounded-md bg-black px-3 py-2 text-white disabled:opacity-60"
        >
        {loading ? "Creating account…" : "Sign Up"}
        </button>
        </form>

        <div className="mt-4 text-center text-sm">
        <span className="opacity-70">Already have an account?</span>{" "}
        <a className="underline" href={`/auth/sign-in?next=${encodeURIComponent(nextPath)}`}>
        Sign in
        </a>
        </div>
        </div>
    );
}