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

layout auth page

Browse Source
This commit is contained in:
Виталий Лавшонок
2025-10-26 07:08:47 +03:00
parent a1576dd16f
commit 68a74771f3
11 changed files with 174 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,10 +3,14 @@ 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";
import { Link } from "react-router-dom";
import { SecondaryButton } from "../../../components/button/SecondaryButton";
import { Checkbox } from "../../../components/checkbox/Checkbox";
const Register = () => {
const dispatch = useAppDispatch();
@@ -42,114 +46,72 @@ const Register = () => {
};
return (
<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">
<div className="h-svh w-svw fixed pointer-events-none top-0 left-0 flex items-center justify-center">
<div className="grid gap-[80px] grid-cols-[400px,384px] 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>
<div className="text-content-1 w-full text-[12px] text-center mt-[15px]">
Создайте учетную запись, заполнив поля ниже и нажав "Зарегистрироваться".
<div className=" relative pointer-events-auto">
<div>
<div className="text-[40px] text-liquid-white font-bold h-[50px]">
Добро пожаловать
</div>
<div className="text-[18px] text-liquid-light font-bold h-[23px]">
Регистрация
</div>
</div>
<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)}
/>
<Input className="mt-[10px]" type="email" label="Почта" onChange={(v) => { }} placeholder="example@gmail.com" />
<Input className="mt-[10px]" type="text" label="Логин пользователя" onChange={(v) => { }} placeholder="login" />
<Input className="mt-[10px]" type="password" label="Пароль" onChange={(v) => { }} placeholder="abCD1234" />
<Input className="mt-[10px]" type="password" label="Повторите пароль" onChange={(v) => { }} placeholder="abCD1234" />
{/* 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)}
/>
<div className=" flex items-center mt-[10px] h-[24px]">
<Checkbox
onChange={(value: boolean) => { console.log(value) }}
className="p-0 w-fit m-[2.75px]"
size="md"
color="secondary"
variant="default" />
<span className="text-[14px] font-medium text-liquid-light h-[18px] ml-[10px]">
Я принимаю <Link
to={"/home"}
className={" underline"}
>
политику конфиденциальности
</Link>
</span>
{/* 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>
<div className="w-[calc(100%-50px)]">
<div className="mt-[10px]">
<PrimaryButton
className="w-full mb-[8px]"
onClick={handleRegister}
text={status === "loading" ? "Регистрация..." : "Зарегистрироваться"}
onClick={() => { }}
text={status === "loading" ? "Регистрация..." : "Регистрация"}
disabled={status === "loading"}
/>
<PrimaryButton
className="w-full mb-[25px]"
onClick={navigateToLogin}
text="Уже есть аккаунт"
<SecondaryButton
className="w-full"
onClick={() => { }}
text="Регистрация с Google "
/>
</div>
<div className="flex justify-center mt-[10px]">
<span>
Уже есть аккаунт? <Link
to={"/home/login"}
className={"text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline "}>
Авторизация
</Link>
</span>
</div>
</div>
</div>
</div>
);