added login page

2025-11-08 11:47:47 +05:00
parent dc478c57bb
commit 5c41a87e23
13 changed files with 727 additions and 28 deletions
--- a/src/widgets/auth/ui/login.tsx
+++ b/src/widgets/auth/ui/login.tsx
@@ -0,0 +1,125 @@
+'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;