register

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)}
             />

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>