diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx index 5b54315..6decc4a 100644 --- 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 = ({ label = "", labelType = "in", placeholder = "", - variant = "flat", + variant = "bordered", className, onChange, defaultState = "", diff --git a/src/views/home/auth/Login.tsx b/src/views/home/auth/Login.tsx index 84deb39..c73b7b3 100644 --- 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 = () => {
-
+
Вход в аккаунт
@@ -62,7 +62,7 @@ const Login = () => { setUsername(val)} /> @@ -77,7 +77,7 @@ const Login = () => { label="Пароль" type="password" radius="sm" - className="w-[22rem]" + className="w-hull" required onChange={(val) => setPassword(val)} /> diff --git a/src/views/home/auth/Register.tsx b/src/views/home/auth/Register.tsx index 0611bf3..9d4008e 100644 --- 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(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); const [submitClicked, setSubmitClicked] = useState(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 ( -
-
-
- Регистрация +
+
+
+
-
- Для создания аккаунта заполните поля ниже и нажмите кнопку "Зарегистрироваться" -
- -
- {/* Username */} -
- Поле не может быть пустым +
+
+ Регистрация
- setUsername(val)} - /> - - {/* Email */} -
- Поле не может быть пустым +
+ Создайте учетную запись, заполнив поля ниже и нажав "Зарегистрироваться".
- setEmail(val)} - /> - {/* Password */} -
- Поле не может быть пустым +
+ {/* Username */} +
+ Поле не может быть пустым +
+ setUsername(val)} + /> + + {/* Email */} +
+ Поле не может быть пустым +
+ setEmail(val)} + /> + + {/* Password */} +
+ Поле не может быть пустым +
+ setPassword(val)} + /> + + {/* Confirm Password */} +
+ {submitClicked && password !== confirmPassword + ? "Пароли не совпадают" + : "Поле не может быть пустым"} +
+ setConfirmPassword(val)} + /> + + {/* Ошибка с сервера */} + {status === "failed" && error && ( +
{error}
+ )}
- setPassword(val)} - /> - {/* Ошибка от сервера */} - {status === "failed" && error && ( -
{error}
- )} -
- -
- +
+ + +
diff --git a/src/views/home/menu/MenuItem.tsx b/src/views/home/menu/MenuItem.tsx index ff25d43..d74c7fa 100644 --- a/src/views/home/menu/MenuItem.tsx +++ b/src/views/home/menu/MenuItem.tsx @@ -19,7 +19,8 @@ const MenuItem: React.FC = ({ 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"} `}