resolve bug on sign in

sigap-website/app/(pages)/(auth)/_handlers/use-sign-in-with-password.ts

@@ -37,16 +37,18 @@ export const useSignInWithPasswordHandler = () => {
 
         const formData = new FormData();
         formData.append('email', data.email);
+        formData.append('password', data.password);
+
 
         try {
             toast.promise(
                 signInWithPassword(formData),
                 {
-                    loading: 'Sending magic link...',
+                    loading: 'Signing in...',
                     success: () => {
                         // If we reach here, the operation was successful
                         router.push(createRoute(ROUTES.APP.DASHBOARD));
-                        return 'An email has been sent to you. Please check your inbox.';
+                        return "Successfully signed in!";
                     },
                     error: (err) => {
                         const errorMessage = err?.message || 'Failed to send email.';

sigap-website/app/(pages)/(auth)/sign-in/_components/sign-in-with-password-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Loader2, Lock, Eye, EyeOff } from "lucide-react";
 import { Button } from "@/app/_components/ui/button";
 import { Input } from "@/app/_components/ui/input";
@@ -22,33 +22,12 @@ export function SignInWithPasswordForm({
     const [showPassword, setShowPassword] = useState(false);
     const [isSignInWithPassword, setIsSignInWithPassword] = useState(false);
 
-    // State to track if the password field has a value
-    const [hasPasswordValue, setHasPasswordValue] = useState(false);
-
     // Get handlers for both authentication methods
     const passwordHandler = useSignInWithPasswordHandler();
     const passwordlessHandler = useSignInPasswordlessHandler();
 
-    // Choose the appropriate handler based on whether password is provided
+    // Get the current active handler based on state
-    const {
+    const activeHandler = isSignInWithPassword ? passwordHandler : passwordlessHandler;
-        register,
-        isPending,
-        handleSignIn,
-        error,
-        errors,
-        formErrors,
-        getFieldErrorMessage
-    } = isSignInWithPassword ? passwordHandler : passwordlessHandler;
-
-    // Handle password input changes to determine which auth method to use
-    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setHasPasswordValue(!!e.target.value);
-    };
-
-    // Toggle password visibility
-    const togglePasswordVisibility = () => {
-        setShowPassword(!showPassword);
-    };
 
     // Toggle password form field
     const togglePasswordField = () => {
@@ -56,8 +35,8 @@ export function SignInWithPasswordForm({
     };
 
     const handleForgotPassword = () => {
-        router.push(createRoute(ROUTES.AUTH.FORGOT_PASSWORD))
+        router.push(createRoute(ROUTES.AUTH.FORGOT_PASSWORD));
-    }
+    };
 
     return (
         <div>
@@ -79,7 +58,7 @@ export function SignInWithPasswordForm({
                             variant="outline"
                             className="w-full bg-[#1C1C1C] text-white border-gray-800 hover:bg-[#2C2C2C] hover:border-gray-700"
                             size="lg"
-                            disabled={isPending}
+                            disabled={activeHandler.isPending}
                         >
                             <Lock className="mr-2 h-5 w-5" />
                             Continue with SSO
@@ -95,7 +74,7 @@ export function SignInWithPasswordForm({
                         </div>
                     </div>
 
-                    <form onSubmit={handleSignIn} className="space-y-4" {...props} noValidate>
+                    <form onSubmit={activeHandler.handleSignIn} className="space-y-4" {...props} noValidate>
                         <div className="relative">
                             <FormField
                                 label="Email"
@@ -109,11 +88,11 @@ export function SignInWithPasswordForm({
                                             : passwordlessHandler.register("email"))}
                                         placeholder="you@example.com"
                                         className={`bg-[#1C1C1C] border-gray-800`}
-                                        error={!!formErrors.email}
+                                        error={!!activeHandler.formErrors.email}
-                                        disabled={isPending}
+                                        disabled={activeHandler.isPending}
                                     />
                                 }
-                                error={getFieldErrorMessage('email') || error}
+                                error={activeHandler.getFieldErrorMessage('email') || activeHandler.error}
                             />
                         </div>
 
@@ -129,33 +108,21 @@ export function SignInWithPasswordForm({
                                             {...passwordHandler.register("password")}
                                             type={showPassword ? "text" : "password"}
                                             placeholder="Password"
-                                            className={`bg-[#1C1C1C] border-gray-800 pr-10`}
+                                            className={`bg-[#1C1C1C] border-gray-800`}
-                                            error={isSignInWithPassword && !!passwordHandler.formErrors.password}
+                                            error={!!passwordHandler.formErrors.password}
-                                            disabled={isPending}
+                                            disabled={passwordHandler.isPending}
-                                            onChange={handlePasswordChange}
                                         />
-                                        <button
-                                            type="button"
-                                            onClick={togglePasswordVisibility}
-                                            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-white"
-                                        >
-                                            {showPassword ? (
-                                                <EyeOff className="h-4 w-4" />
-                                            ) : (
-                                                <Eye className="h-4 w-4" />
-                                            )}
-                                        </button>
                                     </div>
                                 }
-                                error={passwordHandler.getFieldErrorMessage('password') || error}
+                                error={passwordHandler.getFieldErrorMessage('password') || passwordHandler.error}
                             />
                         )}
                         <Button
                             className="w-full bg-emerald-600 hover:bg-emerald-700 text-white"
                             size="lg"
-                            disabled={isPending}
+                            disabled={activeHandler.isPending}
                         >
-                            {isPending ? (
+                            {activeHandler.isPending ? (
                                 <>
                                     <Loader2 className="h-5 w-5 animate-spin mr-2" />
                                     {isSignInWithPassword ? "Signing in..." : "Sending login link..."}