register

2025-10-23 18:10:59 +03:00
parent e3ce191b44
commit d419e06d65
4 changed files with 124 additions and 77 deletions
--- a/src/components/input/Input.tsx
+++ b/src/components/input/Input.tsx
@@ -4,9 +4,9 @@ import { cn } from "../../lib/cn";
 /* Варианты для скользящего шарика */
 const inputVariants = {
  size: {
-    sm: "h-[3rem] w-[27rem]",
-    md: "h-[3.5rem] w-[27rem]",
-    lg: "h-[4rem] w-[27rem]",
+    sm: "h-[3rem] w-full",
+    md: "h-[3.5rem] w-full",
+    lg: "h-[4rem] w-full",
  },
  colors: {
    default: "text-default-600 bg-default-200 placeholder-default-600",
@@ -75,7 +75,7 @@ export const Input: React.FC<SwitchProps> = ({
  label = "",
  labelType = "in",
  placeholder = "",
-  variant = "flat",
+  variant = "bordered",
  className,
  onChange,
  defaultState = "",
--- a/src/views/home/auth/Login.tsx
+++ b/src/views/home/auth/Login.tsx
@@ -35,7 +35,7 @@ const Login = () => {
  };

  const navigateToRegister = () => {
-    navigate("/auth/register");
+    navigate("/home/register");
  };

  return (
@@ -44,7 +44,7 @@ const Login = () => {
        <div className="flex items-center justify-center">
          <img src={Balloon} />
        </div>
-        <div >
+        <div className=" relative">
          <div className="text-content-1 w-full text-[28px] font-bold text-center">
            Вход в аккаунт
          </div>
@@ -62,7 +62,7 @@ const Login = () => {
            <Input
              label="Логин"
              radius="sm"
-              className="w-[22rem]"
+              className="w-full"
              required
              onChange={(val) => setUsername(val)}
            />
@@ -77,7 +77,7 @@ const Login = () => {
              label="Пароль"
              type="password"
              radius="sm"
-              className="w-[22rem]"
+              className="w-hull"
              required
              onChange={(val) => setPassword(val)}
            />
--- a/src/views/home/auth/Register.tsx
+++ b/src/views/home/auth/Register.tsx
@@ -3,8 +3,10 @@ import { PrimaryButton } from "../../../components/button/PrimaryButton";
 import { Input } from "../../../components/input/Input";
 import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import { useNavigate } from "react-router-dom";
-import { registerUser } from "../../../redux/slices/auth";
+import { registerUser } from "../../../redux/slices/auth"; // 👈 новый экшен
 import { cn } from "../../../lib/cn";
+import { setMenuActivePage } from "../../../redux/slices/store";
+import { Balloon } from "../../../assets/icons/auth";

 const Register = () => {
  const dispatch = useAppDispatch();
@@ -13,96 +15,140 @@ const Register = () => {
  const [username, setUsername] = useState<string>("");
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
+  const [confirmPassword, setConfirmPassword] = useState<string>("");
  const [submitClicked, setSubmitClicked] = useState<boolean>(false);

  const { status, error, jwt } = useAppSelector((state) => state.auth);

-  // После успешной регистрации
+  // После успешной регистрации — переход в систему
  useEffect(() => {
+    dispatch(setMenuActivePage("account"));
    if (jwt) {
-      navigate("/home/offices"); // или на любую страницу после логина
+      navigate("/home/offices");
    }
  }, [jwt]);

  const handleRegister = () => {
    setSubmitClicked(true);

-    if (!username || !email || !password) return;
+    if (!username || !email || !password || !confirmPassword) return;
+    if (password !== confirmPassword) return;

    dispatch(registerUser({ username, email, password }));
  };

+  const navigateToLogin = () => {
+    navigate("/home/login");
+  };
+
  return (
-    <div className="h-full w-full bg-default-100 flex items-center justify-center">
-      <div className="bg-layout-background w-[25rem] rounded-[15px] box-border p-[25px] relative">
-        <div className="text-content-1 w-full text-[28px] font-bold text-center">
-          Регистрация
+    <div className="h-full w-full flex items-center justify-center">
+      <div className="bg-layout-background grid gap-[80px] grid-cols-[400px,400px] box-border relative">
+        <div className="flex items-center justify-center">
+          <img src={Balloon} />
        </div>
-        <div className="text-content-1 w-full text-[12px] text-center mt-[15px]">
-          Для создания аккаунта заполните поля ниже и нажмите кнопку "Зарегистрироваться"
-        </div>
-
-        <div className="mt-[15px] flex flex-col gap-4">
-          {/* Username */}
-          <div className={cn(
-            "text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
-            submitClicked && !username && "h-[21px]"
-          )}>
-            Поле не может быть пустым
+        <div className=" relative">
+          <div className="text-content-1 w-full text-[28px] font-bold text-center">
+            Регистрация
          </div>
-          <Input
-            label="Логин"
-            radius="sm"
-            className="w-[22rem]"
-            required
-            onChange={(val) => setUsername(val)}
-          />
-
-          {/* Email */}
-          <div className={cn(
-            "text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
-            submitClicked && !email && "h-[21px]"
-          )}>
-            Поле не может быть пустым
+          <div className="text-content-1 w-full text-[12px] text-center mt-[15px]">
+            Создайте учетную запись, заполнив поля ниже и нажав "Зарегистрироваться".
          </div>
-          <Input
-            label="Email"
-            type="email"
-            radius="sm"
-            className="w-[22rem]"
-            required
-            onChange={(val) => setEmail(val)}
-          />

-          {/* Password */}
-          <div className={cn(
-            "text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
-            submitClicked && !password && "h-[21px]"
-          )}>
-            Поле не может быть пустым
+          <div className="mt-[15px] flex flex-col gap-4">
+            {/* Username */}
+            <div
+              className={cn(
+                "text-[14px] text-danger font-medium transition-all overflow-hidden",
+                submitClicked && !username && "h-[21px]"
+              )}
+            >
+              Поле не может быть пустым
+            </div>
+            <Input
+              label="Имя пользователя"
+              radius="sm"
+              className="w-full"
+              required
+              onChange={(val) => setUsername(val)}
+            />
+
+            {/* Email */}
+            <div
+              className={cn(
+                "text-[14px] text-danger font-medium transition-all overflow-hidden",
+                submitClicked && !email && "h-[21px]"
+              )}
+            >
+              Поле не может быть пустым
+            </div>
+            <Input
+              label="Email"
+              radius="sm"
+              className="w-full"
+              required
+              onChange={(val) => setEmail(val)}
+            />
+
+            {/* Password */}
+            <div
+              className={cn(
+                "text-[14px] text-danger font-medium transition-all overflow-hidden",
+                submitClicked && !password && "h-[21px]"
+              )}
+            >
+              Поле не может быть пустым
+            </div>
+            <Input
+              label="Пароль"
+              type="password"
+              radius="sm"
+              className="w-full"
+              required
+              onChange={(val) => setPassword(val)}
+            />
+
+            {/* Confirm Password */}
+            <div
+              className={cn(
+                "text-[14px] text-danger font-medium transition-all overflow-hidden",
+                submitClicked &&
+                  (password !== confirmPassword || !confirmPassword) &&
+                  "h-[21px]"
+              )}
+            >
+              {submitClicked && password !== confirmPassword
+                ? "Пароли не совпадают"
+                : "Поле не может быть пустым"}
+            </div>
+            <Input
+              label="Подтвердите пароль"
+              type="password"
+              radius="sm"
+              className="w-full"
+              required
+              onChange={(val) => setConfirmPassword(val)}
+            />
+
+            {/* Ошибка с сервера */}
+            {status === "failed" && error && (
+              <div className="text-[14px] text-danger font-medium">{error}</div>
+            )}
          </div>
-          <Input
-            label="Пароль"
-            type="password"
-            radius="sm"
-            className="w-[22rem]"
-            required
-            onChange={(val) => setPassword(val)}
-          />

-          {/* Ошибка от сервера */}
-          {status === "failed" && error && (
-            <div className="text-[14px] text-danger font-medium">{error}</div>
-          )}
-        </div>
-
-        <div className="w-[calc(100%-50px)] absolute bottom-0">
-          <PrimaryButton
-            className="w-full mb-[8px]"
-            onClick={handleRegister}
-            text={status === "loading" ? "Регистрация..." : "Зарегистрироваться"}
-            disabled={status === "loading"}
-          />
+          <div className="w-[calc(100%-50px)]">
+            <PrimaryButton
+              className="w-full mb-[8px]"
+              onClick={handleRegister}
+              text={status === "loading" ? "Регистрация..." : "Зарегистрироваться"}
+              disabled={status === "loading"}
+            />
+            <PrimaryButton
+              className="w-full mb-[25px]"
+              onClick={navigateToLogin}
+              text="Уже есть аккаунт"
+            />
+          </div>
        </div>
      </div>
    </div>
--- a/src/views/home/menu/MenuItem.tsx
+++ b/src/views/home/menu/MenuItem.tsx
@@ -19,7 +19,8 @@ const MenuItem: React.FC<MenuItemProps> = ({ icon, text = "", href = "", active
      to={href}
      className={`
        flex items-center gap-3 p-[16px] rounded-[10px\] h-[40px] text-[18px] font-bold 
-        transition-colors duration-300 text-liquid-white mt-[20px]
+        transition-all duration-300 text-liquid-white mt-[20px]
+        active:scale-95
        ${active ? "bg-liquid-darkmain hover:bg-liquid-lighter hover:ring-[1px] hover:ring-liquid-darkmain hover:ring-inset"
             : " hover:bg-liquid-lighter"}
      `}