1"use client";
2
3import { useEffect, useActionState, useState, useRef } from "react";
4import { signup } from "@/actions";
5import { cn, validateEmail, validateUsername } from "@/util";
6import { useIsTyping } from "@/hooks/use-is-typing";
7
8export default function SignupForm({ redirect }: { redirect?: string }) {
9  const [state, formAction, isPending] = useActionState(signup, null);
10  const [username, setUsername] = useState("");
11  const [email, setEmail] = useState("");
12  const [canSubmit, setCanSubmit] = useState(false);
13  const isTyping = useIsTyping(username, email);
14  const usernameRef = useRef<HTMLInputElement>(null);
15
16  useEffect(() => {
17    if (!isTyping) {
18      setCanSubmit(
19        validateEmail(email) && validateUsername(username) && !isPending,
20      );
21    }
22  }, [email, username, isTyping, isPending]);
23
24  return (
25    <form action={formAction} className="flex flex-col text-sm w-sm" noValidate>
26      <p className="pb-2">Sign up.</p>
27
28      <input
29        type="email"
30        name="email"
31        placeholder="Email"
32        value={email}
33        onChange={(e) => setEmail(e.target.value)}
34        onKeyDown={(e) => {
35          if (e.key === 'Enter') {
36            e.preventDefault();
37            usernameRef.current?.focus();
38          }
39        }}
40        className="border-border border-b mb-2 ring-0 outline-0 focus:border-black transition-colors duration-150"
41      />
42
43      <input
44        type="text"
45        name="username"
46        placeholder="Username"
47        value={username}
48        onChange={(e) => setUsername(e.target.value)}
49        className="border-border border-b mb-2 ring-0 outline-0 focus:border-black transition-colors duration-150"
50      />
51
52      {redirect && <input type="hidden" name="redirect" value={redirect} /> }
53
54      <div className="flex flex-row w-full justify-between">
55        <div className="flex">
56          {state && "error" in state && (
57            <p className="text-red-500">{state.error}</p>
58          )}
59        </div>
60        <button
61          type="submit"
62          className={cn(
63            "cursor-pointer underline transition-all duration-300",
64            canSubmit ? "decoration-current" : "decoration-transparent",
65            isPending ? "cursor-default" : "",
66          )}
67          disabled={isPending}
68        >
69          {isPending ? "Submitting..." : "Submit."}
70        </button>
71      </div>
72    </form>
73  );
74}
75