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 { 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('ایمیل یا رمز عبور اشتباه است');
|
||||
login(data, {
|
||||
onSuccess: () => {
|
||||
restoreSession();
|
||||
navigate('/');
|
||||
},
|
||||
onError: () => {
|
||||
setError('نام کاربری یا رمز عبور اشتباه است');
|
||||
}
|
||||
} catch (error) {
|
||||
setError('خطایی رخ داده است. لطفا دوباره تلاش کنید');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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"
|
||||
>
|
||||
|
|
|
|||
Loading…
Reference in New Issue