refactor(login): update Login page to use custom hook
- Replace direct AuthContext usage with useLogin hook - Change form field from email to username - Add proper error handling and navigation - Follow separation of concerns pattern
This commit is contained in:
parent
7ec69a67e7
commit
64a63e01fb
|
|
@ -1,19 +1,22 @@
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { Navigate } from 'react-router-dom';
|
import { Navigate, useNavigate } from 'react-router-dom';
|
||||||
import { Eye, EyeOff, Lock, Mail } from 'lucide-react';
|
import { Eye, EyeOff, Lock, User } from 'lucide-react';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
import { Button } from '../components/ui/Button';
|
import { Button } from '../components/ui/Button';
|
||||||
import { Input } from '../components/ui/Input';
|
import { Input } from '../components/ui/Input';
|
||||||
import { loginSchema, LoginFormData } from '../utils/validationSchemas';
|
import { loginSchema, LoginFormData } from '../utils/validationSchemas';
|
||||||
|
import { useLogin } from './auth/core/_hooks';
|
||||||
|
|
||||||
export const Login = () => {
|
export const Login = () => {
|
||||||
const { isAuthenticated, login } = useAuth();
|
const { isAuthenticated, restoreSession } = useAuth();
|
||||||
|
const navigate = useNavigate();
|
||||||
const [showPassword, setShowPassword] = useState(false);
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
|
const { mutate: login, isPending: isLoading } = useLogin();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
|
|
@ -28,19 +31,17 @@ export const Login = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSubmit = async (data: LoginFormData) => {
|
const onSubmit = async (data: LoginFormData) => {
|
||||||
setLoading(true);
|
|
||||||
setError('');
|
setError('');
|
||||||
|
|
||||||
try {
|
login(data, {
|
||||||
const success = await login(data.email, data.password);
|
onSuccess: () => {
|
||||||
if (!success) {
|
restoreSession();
|
||||||
setError('ایمیل یا رمز عبور اشتباه است');
|
navigate('/');
|
||||||
}
|
},
|
||||||
} catch (error) {
|
onError: () => {
|
||||||
setError('خطایی رخ داده است. لطفا دوباره تلاش کنید');
|
setError('نام کاربری یا رمز عبور اشتباه است');
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -61,12 +62,12 @@ export const Login = () => {
|
||||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
|
<form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<Input
|
<Input
|
||||||
label="ایمیل"
|
label="نام کاربری"
|
||||||
type="email"
|
type="text"
|
||||||
placeholder="admin@test.com"
|
placeholder="نام کاربری خود را وارد کنید"
|
||||||
icon={Mail}
|
icon={User}
|
||||||
error={errors.email?.message}
|
error={errors.username?.message}
|
||||||
{...register('email')}
|
{...register('username')}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
|
|
@ -79,7 +80,7 @@ export const Login = () => {
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type={showPassword ? 'text' : 'password'}
|
type={showPassword ? 'text' : 'password'}
|
||||||
placeholder="admin123"
|
placeholder="رمز عبور خود را وارد کنید"
|
||||||
className={`input pr-10 pl-10 ${errors.password ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''
|
className={`input pr-10 pl-10 ${errors.password ? 'border-red-500 dark:border-red-500 focus:ring-red-500' : ''
|
||||||
}`}
|
}`}
|
||||||
{...register('password')}
|
{...register('password')}
|
||||||
|
|
@ -110,15 +111,9 @@ export const Login = () => {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-600 dark:text-blue-400 px-4 py-3 rounded-lg text-sm">
|
|
||||||
<p className="font-medium">اطلاعات تست:</p>
|
|
||||||
<p>ایمیل: admin@test.com</p>
|
|
||||||
<p>رمز عبور: admin123</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
type="submit"
|
type="submit"
|
||||||
loading={loading}
|
loading={isLoading}
|
||||||
disabled={!isValid}
|
disabled={!isValid}
|
||||||
className="w-full"
|
className="w-full"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue