feat: authorization

2026-05-23 22:37:10 +00:00 · 2025-03-01 20:24:23 +03:00
parent f74b8df791
commit 535b0c39dc
22 changed files with 560 additions and 108 deletions
@@ -0,0 +1,74 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "../components/input";
+import { login } from "@/shared/api/auth";
+import { saveToken } from "@/shared/token";
+import { useNavigate } from "react-router";
+import { useState } from "react";
+import { Spinner } from "@/components/ui/spinner";
+import { ApiError } from "@/shared/api";
+
+export const LoginTab = () => {
+  const navigate = useNavigate();
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const loginAction = async (
+    formData: FormData,
+    e: React.FormEvent<HTMLFormElement>,
+  ) => {
+    e.preventDefault();
+
+    setLoading(true);
+
+    const email = formData.get("email");
+    const password = formData.get("password");
+
+    if (!email || !password) {
+      setError("Неверное имя пользователя или пароль");
+      setLoading(false);
+      return;
+    }
+
+    try {
+      const token = await login({
+        email: email.toString(),
+        password: password.toString(),
+      });
+      saveToken(token.token);
+      navigate("/");
+    } catch (e) {
+      if (e instanceof ApiError && (e.status === 400 || e.status === 401)) {
+        setError("Неверное имя пользователя или пароль");
+      } else {
+        setError("Произошла непредвиденная ошибка");
+      }
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <form
+      className="flex w-full flex-col items-stretch gap-8"
+      onSubmit={(e) => loginAction(new FormData(e.currentTarget), e)}
+    >
+      <div className="flex flex-col items-stretch gap-5">
+        <Input
+          id="email"
+          name="email"
+          label="Почта"
+          placeholder="vdeniske@megazord.pobeda"
+        />
+        <Input
+          id="password"
+          name="password"
+          label="Пароль"
+          placeholder="Введите пароль"
+          type="password"
+        />
+      </div>
+      {error && <span className="text-red-500">{error}</span>}
+      <Button type="submit">{loading ? <Spinner size={16} /> : "Войти"}</Button>
+    </form>
+  );
+};