react

2025-11-27 15:57:26 +05:00
parent 980fb1dd13
commit 969e32be09
177 changed files with 17023 additions and 995 deletions
--- a/src/features/auth/ui/login.tsx
+++ b/src/features/auth/ui/login.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import LOGO from "@/assets/logo.png";
+import type { LoginRequest } from "@/features/auth/lib";
+import { userInfoStore } from "@/shared/hooks/user-info";
+import { Button } from "@/shared/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  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 {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { AxiosError } from "axios";
+import { Loader2 } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import z from "zod";
+import { auth_api } from "../lib/api";
+import { loginform } from "../lib/form";
+
+export default function LoginForm() {
+  const { user, setLoginUser } = userInfoStore();
+
+  const form = useForm<z.infer<typeof loginform>>({
+    resolver: zodResolver(loginform),
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      regions: "",
+    },
+  });
+
+  const { data: regions } = useQuery({
+    queryKey: ["region"],
+    queryFn: () => auth_api.getRegions(),
+    select(data) {
+      return data.data.data;
+    },
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: LoginRequest) => auth_api.create(body),
+    onSuccess: () => {
+      toast.success("Siz ro'yxatdan o'tingiz");
+      setLoginUser({
+        active: false,
+        first_name: form.getValues("firstName"),
+        last_name: form.getValues("lastName"),
+      });
+    },
+    onError: (error: AxiosError) => {
+      const data = error.response?.data as { message?: string };
+      toast.error(data?.message || "Xatolik yuz berdi");
+    },
+  });
+
+  function handleSubmit(value: z.infer<typeof loginform>) {
+    mutate({
+      first_name: value.firstName,
+      last_name: value.lastName,
+      region: Number(value.regions),
+      telegram_id: user.user_id,
+    });
+  }
+
+  return (
+    <div className="w-full max-w-md h-screen flex items-center justify-center mx-auto">
+      <Card className="border-0 w-full shadow-none">
+        <CardHeader className="text-center">
+          <CardTitle className="text-2xl w-full flex justify-center items-center">
+            <img
+              src={LOGO}
+              width={300}
+              height={300}
+              alt="logo"
+              className="w-52 h-16"
+            />
+          </CardTitle>
+          <CardDescription className="text-slate-600 mt-2 text-lg dark:text-slate-400">
+            Tizimga xush kelibsiz
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="space-y-4"
+            >
+              <FormField
+                control={form.control}
+                name="firstName"
+                render={({ field }) => (
+                  <FormItem>
+                    <Label>Ism</Label>
+                    <FormControl>
+                      <Input
+                        placeholder="Ismingizni kiriting"
+                        className="h-12 rounded-lg border-slate-200 dark:border-slate-700 focus:ring-2 focus:ring-emerald-500"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="lastName"
+                render={({ field }) => (
+                  <FormItem>
+                    <Label>Familiya</Label>
+                    <FormControl>
+                      <Input
+                        placeholder="Familiyangizni kiriting"
+                        className="h-12 rounded-lg border-slate-200 dark:border-slate-700 focus:ring-2 focus:ring-emerald-500"
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="regions"
+                render={({ field }) => (
+                  <FormItem>
+                    <Label>Hudud</Label>
+                    <FormControl>
+                      <Select
+                        onValueChange={field.onChange}
+                        value={field.value}
+                      >
+                        <SelectTrigger className="!h-12 w-full rounded-lg border-slate-200 dark:border-slate-700 focus:ring-2 focus:ring-emerald-500">
+                          <SelectValue placeholder="Hududingizni tanlang" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {regions &&
+                            regions.map((region) => (
+                              <SelectItem
+                                key={region.id}
+                                value={String(region.id)}
+                              >
+                                {region.name}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <Button
+                type="submit"
+                disabled={isPending}
+                className="w-full h-12 text-lg bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white font-medium rounded-lg transition-colors"
+              >
+                {isPending ? <Loader2 className="animate-spin" /> : "Kirish"}
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}