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:
hosseintaromi 2025-07-18 13:06:12 +03:30
parent 7ec69a67e7
commit 64a63e01fb
1 changed files with 23 additions and 28 deletions

View File

@ -1,19 +1,22 @@
import { useState } from 'react';
import { Navigate } from 'react-router-dom';
import { Eye, EyeOff, Lock, Mail } from 'lucide-react';
import { Navigate, useNavigate } from 'react-router-dom';
import { Eye, EyeOff, Lock, User } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useAuth } from '../contexts/AuthContext';
import { Button } from '../components/ui/Button';
import { Input } from '../components/ui/Input';
import { loginSchema, LoginFormData } from '../utils/validationSchemas';
import { useLogin } from './auth/core/_hooks';
export const Login = () => {
const { isAuthenticated, login } = useAuth();
const { isAuthenticated, restoreSession } = useAuth();
const navigate = useNavigate();
const [showPassword, setShowPassword] = useState(false);
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const { mutate: login, isPending: isLoading } = useLogin();
const {
register,
handleSubmit,
@ -28,19 +31,17 @@ export const Login = () => {
}
const onSubmit = async (data: LoginFormData) => {
setLoading(true);
setError('');
try {
const success = await login(data.email, data.password);
if (!success) {
setError('ایمیل یا رمز عبور اشتباه است');
}
} catch (error) {
setError('خطایی رخ داده است. لطفا دوباره تلاش کنید');
} finally {
setLoading(false);
login(data, {
onSuccess: () => {
restoreSession();
navigate('/');
},
onError: () => {
setError('نام کاربری یا رمز عبور اشتباه است');
}
});
};
return (
@ -61,12 +62,12 @@ export const Login = () => {
<form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-4">
<Input
label="ایمیل"
type="email"
placeholder="admin@test.com"
icon={Mail}
error={errors.email?.message}
{...register('email')}
label="نام کاربری"
type="text"
placeholder="نام کاربری خود را وارد کنید"
icon={User}
error={errors.username?.message}
{...register('username')}
/>
<div className="space-y-1">
@ -79,7 +80,7 @@ export const Login = () => {
</div>
<input
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' : ''
}`}
{...register('password')}
@ -110,15 +111,9 @@ export const Login = () => {
</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
type="submit"
loading={loading}
loading={isLoading}
disabled={!isValid}
className="w-full"
>