126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from '@/shared/config/i18n/navigation';
|
|
import { saveToken } from '@/shared/lib/cookie';
|
|
import { Button } from '@/shared/ui/button';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/shared/ui/card';
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormMessage,
|
|
} from '@/shared/ui/form';
|
|
import { Input } from '@/shared/ui/input';
|
|
import { Label } from '@/shared/ui/label';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { useMutation } from '@tanstack/react-query';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { useForm } from 'react-hook-form';
|
|
import { toast } from 'sonner';
|
|
import * as z from 'zod';
|
|
import { login } from '../lib/api';
|
|
|
|
const loginSchema = z.object({
|
|
login: z.string().min(1, 'Login is required'),
|
|
password: z.string().min(1, 'Password is required'),
|
|
});
|
|
|
|
const Login = () => {
|
|
const navigate = useRouter();
|
|
const form = useForm<z.infer<typeof loginSchema>>({
|
|
resolver: zodResolver(loginSchema),
|
|
defaultValues: {
|
|
login: '',
|
|
password: '',
|
|
},
|
|
});
|
|
|
|
const { mutate, isPending } = useMutation({
|
|
mutationFn: (body: { username: string; password: string }) => login(body),
|
|
onSuccess: (res) => {
|
|
saveToken(res.data.data.accessToken);
|
|
navigate.back();
|
|
},
|
|
onError: () => {
|
|
toast.error('Xatolik yuz berdi', {
|
|
richColors: true,
|
|
position: 'top-center',
|
|
});
|
|
},
|
|
});
|
|
|
|
function onSubmit(values: z.infer<typeof loginSchema>) {
|
|
mutate({
|
|
password: values.password,
|
|
username: values.login,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center p-4 w-full">
|
|
<Card className="w-full max-w-md sm:max-w-lg md:max-w-xl lg:max-w-2xl shadow-lg">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl sm:text-3xl font-semibold text-center">
|
|
Login
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form
|
|
onSubmit={form.handleSubmit(onSubmit)}
|
|
className="space-y-6 sm:space-y-8"
|
|
>
|
|
<FormField
|
|
control={form.control}
|
|
name="login"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<Label className="text-base sm:text-lg">Login</Label>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Enter your login"
|
|
className="h-12 sm:h-14 text-base sm:text-lg placeholder:text-base sm:placeholder:text-lg"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<FormField
|
|
control={form.control}
|
|
name="password"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<Label className="text-base sm:text-lg">Password</Label>
|
|
<FormControl>
|
|
<Input
|
|
type="password"
|
|
placeholder="Enter your password"
|
|
className="h-12 sm:h-14 text-base sm:text-lg placeholder:text-base sm:placeholder:text-lg"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<Button
|
|
type="submit"
|
|
className="w-full h-12 sm:h-14 text-lg sm:text-xl rounded-xl sm:rounded-2xl cursor-pointer"
|
|
>
|
|
{isPending ? <Loader2 className="animate-spin" /> : 'Send'}
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|