LiquidCode/LiquidCode_Frontend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

register

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-10-23 18:10:59 +03:00
parent e3ce191b44
commit d419e06d65
4 changed files with 124 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/input/Input.tsx
View File

@@ -4,9 +4,9 @@ import { cn } from "../../lib/cn";
/* Варианты для скользящего шарика */ /* Варианты для скользящего шарика */
const inputVariants = { const inputVariants = {
size: { size: {
sm: "h-[3rem] w-[27rem]", sm: "h-[3rem] w-full",
md: "h-[3.5rem] w-[27rem]", md: "h-[3.5rem] w-full",
lg: "h-[4rem] w-[27rem]", lg: "h-[4rem] w-full",
}, },
colors: { colors: {
default: "text-default-600 bg-default-200 placeholder-default-600", default: "text-default-600 bg-default-200 placeholder-default-600",
@@ -75,7 +75,7 @@ export const Input: React.FC<SwitchProps> = ({
label = "", label = "",
labelType = "in", labelType = "in",
placeholder = "", placeholder = "",
variant = "flat", variant = "bordered",
className, className,
onChange, onChange,
defaultState = "", defaultState = "",

8
src/views/home/auth/Login.tsx
View File

@@ -35,7 +35,7 @@ const Login = () => {
}; };
const navigateToRegister = () => { const navigateToRegister = () => {
navigate("/auth/register"); navigate("/home/register");
}; };
return ( return (
@@ -44,7 +44,7 @@ const Login = () => {
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<img src={Balloon} /> <img src={Balloon} />
</div> </div>
<div > <div className=" relative">
<div className="text-content-1 w-full text-[28px] font-bold text-center"> <div className="text-content-1 w-full text-[28px] font-bold text-center">
Вход в аккаунт Вход в аккаунт
</div> </div>
@@ -62,7 +62,7 @@ const Login = () => {
<Input <Input
label="Логин" label="Логин"
radius="sm" radius="sm"
className="w-[22rem]" className="w-full"
required required
onChange={(val) => setUsername(val)} onChange={(val) => setUsername(val)}
/> />
@@ -77,7 +77,7 @@ const Login = () => {
label="Пароль" label="Пароль"
type="password" type="password"
radius="sm" radius="sm"
className="w-[22rem]" className="w-hull"
required required
onChange={(val) => setPassword(val)} onChange={(val) => setPassword(val)}
/> />

92
src/views/home/auth/Register.tsx
View File

@@ -3,8 +3,10 @@ import { PrimaryButton } from "../../../components/button/PrimaryButton";
import { Input } from "../../../components/input/Input"; import { Input } from "../../../components/input/Input";
import { useAppDispatch, useAppSelector } from "../../../redux/hooks"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { registerUser } from "../../../redux/slices/auth"; import { registerUser } from "../../../redux/slices/auth"; // 👈 новый экшен
import { cn } from "../../../lib/cn"; import { cn } from "../../../lib/cn";
import { setMenuActivePage } from "../../../redux/slices/store";
import { Balloon } from "../../../assets/icons/auth";
const Register = () => { const Register = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@@ -13,96 +15,140 @@ const Register = () => {
const [username, setUsername] = useState<string>(""); const [username, setUsername] = useState<string>("");
const [email, setEmail] = useState<string>(""); const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>(""); const [password, setPassword] = useState<string>("");
const [confirmPassword, setConfirmPassword] = useState<string>("");
const [submitClicked, setSubmitClicked] = useState<boolean>(false); const [submitClicked, setSubmitClicked] = useState<boolean>(false);
const { status, error, jwt } = useAppSelector((state) => state.auth); const { status, error, jwt } = useAppSelector((state) => state.auth);
// После успешной регистрации // После успешной регистрации — переход в систему
useEffect(() => { useEffect(() => {
dispatch(setMenuActivePage("account"));
if (jwt) { if (jwt) {
navigate("/home/offices"); // или на любую страницу после логина navigate("/home/offices");
} }
}, [jwt]); }, [jwt]);
const handleRegister = () => { const handleRegister = () => {
setSubmitClicked(true); setSubmitClicked(true);
if (!username || !email || !password) return; if (!username || !email || !password || !confirmPassword) return;
if (password !== confirmPassword) return;
dispatch(registerUser({ username, email, password })); dispatch(registerUser({ username, email, password }));
}; };
const navigateToLogin = () => {
navigate("/home/login");
};
return ( return (
<div className="h-full w-full bg-default-100 flex items-center justify-center"> <div className="h-full w-full flex items-center justify-center">
<div className="bg-layout-background w-[25rem] rounded-[15px] box-border p-[25px] relative"> <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=" relative">
<div className="text-content-1 w-full text-[28px] font-bold text-center"> <div className="text-content-1 w-full text-[28px] font-bold text-center">
Регистрация Регистрация
</div> </div>
<div className="text-content-1 w-full text-[12px] text-center mt-[15px]"> <div className="text-content-1 w-full text-[12px] text-center mt-[15px]">
Для создания аккаунта заполните поля ниже и нажмите кнопку "Зарегистрироваться" Создайте учетную запись, заполнив поля ниже и нажав "Зарегистрироваться".
</div> </div>
<div className="mt-[15px] flex flex-col gap-4"> <div className="mt-[15px] flex flex-col gap-4">
{/* Username */} {/* Username */}
<div className={cn( <div
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden", className={cn(
"text-[14px] text-danger font-medium transition-all overflow-hidden",
submitClicked && !username && "h-[21px]" submitClicked && !username && "h-[21px]"
)}> )}
>
Поле не может быть пустым Поле не может быть пустым
</div> </div>
<Input <Input
label="Логин" label="Имя пользователя"
radius="sm" radius="sm"
className="w-[22rem]" className="w-full"
required required
onChange={(val) => setUsername(val)} onChange={(val) => setUsername(val)}
/> />
{/* Email */} {/* Email */}
<div className={cn( <div
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden", className={cn(
"text-[14px] text-danger font-medium transition-all overflow-hidden",
submitClicked && !email && "h-[21px]" submitClicked && !email && "h-[21px]"
)}> )}
>
Поле не может быть пустым Поле не может быть пустым
</div> </div>
<Input <Input
label="Email" label="Email"
type="email"
radius="sm" radius="sm"
className="w-[22rem]" className="w-full"
required required
onChange={(val) => setEmail(val)} onChange={(val) => setEmail(val)}
/> />
{/* Password */} {/* Password */}
<div className={cn( <div
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden", className={cn(
"text-[14px] text-danger font-medium transition-all overflow-hidden",
submitClicked && !password && "h-[21px]" submitClicked && !password && "h-[21px]"
)}> )}
>
Поле не может быть пустым Поле не может быть пустым
</div> </div>
<Input <Input
label="Пароль" label="Пароль"
type="password" type="password"
radius="sm" radius="sm"
className="w-[22rem]" className="w-full"
required required
onChange={(val) => setPassword(val)} 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 && ( {status === "failed" && error && (
<div className="text-[14px] text-danger font-medium">{error}</div> <div className="text-[14px] text-danger font-medium">{error}</div>
)} )}
</div> </div>
<div className="w-[calc(100%-50px)] absolute bottom-0"> <div className="w-[calc(100%-50px)]">
<PrimaryButton <PrimaryButton
className="w-full mb-[8px]" className="w-full mb-[8px]"
onClick={handleRegister} onClick={handleRegister}
text={status === "loading" ? "Регистрация..." : "Зарегистрироваться"} text={status === "loading" ? "Регистрация..." : "Зарегистрироваться"}
disabled={status === "loading"} disabled={status === "loading"}
/> />
<PrimaryButton
className="w-full mb-[25px]"
onClick={navigateToLogin}
text="Уже есть аккаунт"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

3
src/views/home/menu/MenuItem.tsx
View File

@@ -19,7 +19,8 @@ const MenuItem: React.FC<MenuItemProps> = ({ icon, text = "", href = "", active
to={href} to={href}
className={` className={`
flex items-center gap-3 p-[16px] rounded-[10px\] h-[40px] text-[18px] font-bold 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" ${active ? "bg-liquid-darkmain hover:bg-liquid-lighter hover:ring-[1px] hover:ring-liquid-darkmain hover:ring-inset"
: " hover:bg-liquid-lighter"} : " hover:bg-liquid-lighter"}
`} `}