resolve bug on sign in
This commit is contained in:
vergiLgood1
parent
2ee73acfe7
commit
b4eb2dc1ba
|
|
@ -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.';
|
||||
|
|
|
|||
|
|
@ -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
|
||||
const {
|
||||
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);
|
||||
};
|
||||
// Get the current active handler based on state
|
||||
const activeHandler = isSignInWithPassword ? passwordHandler : passwordlessHandler;
|
||||
|
||||
// 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}
|
||||
disabled={isPending}
|
||||
error={!!activeHandler.formErrors.email}
|
||||
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`}
|
||||
error={isSignInWithPassword && !!passwordHandler.formErrors.password}
|
||||
disabled={isPending}
|
||||
onChange={handlePasswordChange}
|
||||
className={`bg-[#1C1C1C] border-gray-800`}
|
||||
error={!!passwordHandler.formErrors.password}
|
||||
disabled={passwordHandler.isPending}
|
||||
/>
|
||||
<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..."}
|
||||
|
|
|
|||
Loading…
Reference in New Issue