1"use client";
2
3import { useActionState, useEffect, useState, useRef } from "react";
4import { login } from "@/actions";
5import { useIsTyping } from "@/hooks/use-is-typing";
6import { cn, validateEmail, validatePassword } from "@/util";
7
8export default function LoginForm({ redirect }: { redirect?: string }) {
9  const [state, formAction, isPending] = useActionState(login, null);
10  const [email, setEmail] = useState("");
11  const [password, setPassword] = useState("");
12  const [canSubmit, setCanSubmit] = useState(false);
13  const isTyping = useIsTyping(email, password);
14  const passwordRef = useRef<HTMLInputElement>(null);
15
16  useEffect(() => {
17    if (!isTyping) {
18      setCanSubmit(
19        validateEmail(email) && validatePassword(password) && !isPending,
20      );
21    }
22  }, [email, password, isTyping, isPending]);
23
24  return (
25    <form action={formAction} className="flex flex-col text-sm w-sm" noValidate>
26      <p className="pb-2">Login.</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          passwordRef.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      ref={passwordRef}
45      type="password"
46      name="password"
47      placeholder="Password"
48      value={password}
49      onChange={(e) => setPassword(e.target.value)}
50      className="border-border border-b mb-2 ring-0 outline-0 focus:border-black transition-colors duration-150"
51      />
52      {redirect &&
53        <input type="hidden" name="redirect" value={redirect} />
54      }
55
56      <div className="flex flex-row w-full justify-between">
57        <div className="flex">
58          {state && "error" in state && (
59            <p className="text-red-500">{state.error}</p>
60          )}
61        </div>
62        <button
63          type="submit"
64          className={cn(
65            "cursor-pointer underline transition-all duration-300",
66            canSubmit ? "decoration-current" : "decoration-transparent",
67            isPending ? "cursor-default" : "",
68          )}
69          disabled={isPending}
70        >
71          {isPending ? "Submitting..." : "Submit."}
72        </button>
73      </div>
74    </form>
75  );
76}
77