signin

components/SignInForm.tsx

@@ -8,97 +8,222 @@ import { login } from "@/utils/signIn";
 import { Label } from "./ui/label";
 import { useState } from "react";
 import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { createClient } from "@supabase/supabase-js";
+
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL!,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+);
 
 const schema = z.object({
-  email: z.string().email(),
-  password: z.string().min(8),
+  email: z
+    .string()
+    .min(1, "Email is required")
+    .email("Please enter a valid email address"),
+  password: z
+    .string()
+    .min(1, "Password is required")
+    .min(8, "Password must be at least 8 characters"),
 });
 
 type FormFields = z.infer<typeof schema>;
 
 const SignInForm = () => {
   const [showPassword, setShowPassword] = useState(false);
+  const [isResettingPassword, setIsResettingPassword] = useState(false);
+  const [resetEmailSent, setResetEmailSent] = useState(false);
 
   const {
     register,
     handleSubmit,
     setError,
+    clearErrors,
+    getValues,
     formState: { errors, isSubmitting },
   } = useForm<FormFields>({
-    defaultValues: {},
+    defaultValues: {
+      email: "",
+      password: "",
+    },
     resolver: zodResolver(schema),
   });
 
   const onSubmit: SubmitHandler<FormFields> = async (data) => {
     try {
+      clearErrors("root");
       await login(data.email, data.password);
     } catch (error) {
       setError("root", {
-        message: "Invalid email or password",
+        message: "Email atau password salah",
       });
     }
   };
 
+  const handleForgotPassword = async () => {
+    const email = getValues("email");
+
+    if (!email) {
+      setError("email", {
+        message: "Please enter your email address first",
+      });
+      return;
+    }
+
+    if (!z.string().email().safeParse(email).success) {
+      setError("email", {
+        message: "Please enter a valid email address",
+      });
+      return;
+    }
+
+    try {
+      setIsResettingPassword(true);
+      clearErrors(["email"]);
+
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: `${window.location.origin}/auth/reset-password`,
+      });
+
+      if (error) {
+        throw new Error(error.message);
+      }
+
+      setResetEmailSent(true);
+
+      // Clear the success message after 5 seconds
+      setTimeout(() => setResetEmailSent(false), 5000);
+    } catch (error) {
+      let errorMessage = "Failed to send reset email. Please try again.";
+
+      if (error instanceof Error) {
+        if (error.message.includes("For security purposes")) {
+          errorMessage =
+            "Reset email sent (if account exists). Check your inbox.";
+          setResetEmailSent(true);
+        } else {
+          errorMessage = error.message;
+        }
+      }
+
+      if (!resetEmailSent) {
+        setError("root", {
+          message: errorMessage,
+        });
+      }
+    } finally {
+      setIsResettingPassword(false);
+    }
+  };
+
   const togglePasswordVisibility = () => {
     setShowPassword(!showPassword);
   };
 
   return (
     <>
-      <form className="flex flex-col gap-2" onSubmit={handleSubmit(onSubmit)}>
-        <Label htmlFor="email" className="text-left">
-          Email
-        </Label>
-        <Input
-          {...register("email")}
-          placeholder="Email"
-          id="email"
-          type="email"
-        />
-        {errors.email && (
-          <div className="text-left text-xs text-red-500">
-            {errors.email.message}
-          </div>
-        )}
-        <Label htmlFor="password" className="text-left">
-          Password
-        </Label>
-        <div className="relative">
+      <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
+        <div className="space-y-2">
+          <Label htmlFor="email" className="text-left">
+            Email
+          </Label>
           <Input
-            {...register("password")}
-            placeholder="Password"
-            type={showPassword ? "text" : "password"}
-            id="password"
-            className="pr-10"
+            {...register("email")}
+            placeholder="Enter your email"
+            id="email"
+            type="email"
+            autoComplete="email"
+            className={
+              errors.email ? "border-red-500 focus-visible:ring-red-500" : ""
+            }
           />
-          <button
-            type="button"
-            onClick={togglePasswordVisibility}
-            className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700"
-            tabIndex={-1}
-          >
-            {showPassword ? (
-              <EyeOff className="h-4 w-4" />
-            ) : (
-              <Eye className="h-4 w-4" />
-            )}
-          </button>
+          {errors.email && (
+            <div className="text-left text-xs text-red-500">
+              {errors.email.message}
+            </div>
+          )}
         </div>
-        {errors.password && (
-          <div className="text-left text-xs text-red-500">
-            {errors.password.message}
+
+        <div className="space-y-2">
+          <Label htmlFor="password" className="text-left">
+            Password
+          </Label>
+          <div className="relative">
+            <Input
+              {...register("password")}
+              placeholder="Enter your password"
+              type={showPassword ? "text" : "password"}
+              id="password"
+              autoComplete="current-password"
+              className={
+                errors.password
+                  ? "border-red-500 pr-10 focus-visible:ring-red-500"
+                  : "pr-10"
+              }
+            />
+            <button
+              type="button"
+              onClick={togglePasswordVisibility}
+              className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700"
+              tabIndex={-1}
+            >
+              {showPassword ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+          {errors.password && (
+            <div className="text-left text-xs text-red-500">
+              {errors.password.message}
+            </div>
+          )}
+        </div>
+
+        {errors.root && !resetEmailSent && (
+          <div className="rounded-md border border-red-200 bg-red-50 p-2 text-center text-xs text-red-500">
+            {errors.root.message}
+          </div>
+        )}
+
+        {resetEmailSent && (
+          <div className="rounded-md border border-green-200 bg-green-50 p-2 text-center text-xs text-green-600">
+            Password reset email sent! Check your inbox and spam folder.
           </div>
         )}
+
         <Button
           disabled={isSubmitting}
           type="submit"
-          className="mt-4 bg-orange-600 hover:bg-orange-800"
+          className="mt-2 bg-orange-600 hover:bg-orange-700 disabled:opacity-50"
         >
-          {isSubmitting ? "Loading..." : "Login"}
+          {isSubmitting ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Signing in...
+            </>
+          ) : (
+            "Sign In"
+          )}
         </Button>
-        {errors.root && (
-          <div className="text-xs text-red-500">{errors.root.message}</div>
-        )}
+
+        <div className="text-center">
+          <button
+            type="button"
+            onClick={handleForgotPassword}
+            disabled={isResettingPassword}
+            className="text-xs text-orange-600 underline hover:text-orange-700 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {isResettingPassword ? (
+              <>
+                <Loader2 className="mr-1 inline h-3 w-3 animate-spin" />
+                Sending reset email...
+              </>
+            ) : (
+              "Forgot your password?"
+            )}
+          </button>
+        </div>
       </form>
     </>
   );