1"use client";
2
3import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
4import { useState, useTransition } from "react";
5import { login, signup } from "@/actions";
6import { Dialog, DialogContent, DialogTitle } from "@/ui/dialog";
7import { useUser } from "../providers/user-provider";
8
9export function AuthBlockerDialog({
10  open,
11  setOpen,
12}: {
13  open: boolean;
14  setOpen: (open: boolean) => void;
15}) {
16  const [mode, setMode] = useState<"login" | "signup">("login");
17  const [email, setEmail] = useState("");
18  const [password, setPassword] = useState("");
19  const [error, setError] = useState<string | null>(null);
20  const [isPending, startTransition] = useTransition();
21
22  const { refreshUser } = useUser();
23
24  const handleSubmit = (e: React.FormEvent) => {
25    e.preventDefault();
26    setError(null);
27
28    const formData = new FormData();
29    formData.append("email", email);
30    formData.append("password", password);
31
32    startTransition(async () => {
33      const action = mode === "login" ? login : signup;
34      const result = await action(null, formData);
35
36      if ("success" in result) {
37        refreshUser();
38        setOpen(false);
39        setEmail("");
40        setPassword("");
41        setMode("login");
42      } else {
43        setError(result.error);
44      }
45    });
46  };
47
48  const _toggleMode = () => {
49    setMode(mode === "login" ? "signup" : "login");
50    setError(null);
51  };
52
53  const isValid = email.trim() !== "" && password.trim() !== "";
54
55  return (
56    <Dialog open={open} onOpenChange={setOpen}>
57      <DialogContent
58        className="max-w-md min-w-md border-black rounded-xs shadow-2xl top-[35%] p-0 overflow-hidden"
59        animations={true}
60        showOverlay={true}
61      >
62        <VisuallyHidden>
63          <DialogTitle>Authenticate</DialogTitle>
64        </VisuallyHidden>
65        <form onSubmit={handleSubmit}>
66          <p className="p-2 text-sm border-b border-border">
67            Please authenticate to proceed.
68          </p>
69          <input
70            type="email"
71            name="email"
72            placeholder="Email"
73            value={email}
74            onChange={(e) => setEmail(e.target.value)}
75            className="w-full p-2 text-sm bg-background outline-none border-b border-border"
76            disabled={isPending}
77            autoFocus
78          />
79          <input
80            type="password"
81            name="password"
82            placeholder="Password"
83            value={password}
84            onChange={(e) => setPassword(e.target.value)}
85            className="w-full p-2 text-sm bg-background outline-none border-b border-border"
86            disabled={isPending}
87          />
88          {error && <p className="text-xs text-red-500 px-2 py-1">{error}</p>}
89          <div className="flex items-center justify-end h-9">
90            {/* disable the sign up button for now */}
91            {/*
92              <button
93              type="button"
94              onClick={toggleMode}
95              className="group px-3 py-1.5 h-9 text-xs text-muted-foreground"
96              >
97              {mode === "login" ? (
98              <>
99              Don&apos;t have an account?{" "}
100              <span className="group-hover:text-foreground">Sign up</span>
101              </>
102              ) : (
103              <>
104              Already have an account?{" "}
105              <span className="group-hover:text-foreground">Log in</span>
106              </>
107              )}
108              </button>
109              */}
110            <button
111              type="submit"
112              disabled={!isValid || isPending}
113              className="px-3 py-1.5 h-9 text-xs bg-primary text-primary-foreground disabled:opacity-50 disabled:cursor-not-allowed"
114            >
115              {isPending
116                ? mode === "login"
117                  ? "Logging in..."
118                  : "Signing up..."
119                : mode === "login"
120                  ? "Log in"
121                  : "Sign up"}
122            </button>
123          </div>
124        </form>
125      </DialogContent>
126    </Dialog>
127  );
128}
129