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

3
src/assets/icons/input/eye-closed.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.4004 19.5L5.40039 4.5M10.2004 10.4416C9.82697 10.8533 9.60039 11.394 9.60039 11.9863C9.60039 13.2761 10.6749 14.3217 12.0004 14.3217C12.6115 14.3217 13.1693 14.0994 13.593 13.7334M20.4392 14.3217C21.2654 13.0848 21.6004 12.0761 21.6004 12.0761C21.6004 12.0761 19.4158 5.1 12.0004 5.1C11.5841 5.1 11.1843 5.12199 10.8004 5.16349M17.4004 17.3494C16.023 18.2281 14.2497 18.8495 12.0004 18.8127C4.67731 18.693 2.40039 12.0761 2.40039 12.0761C2.40039 12.0761 3.45825 8.69808 6.60039 6.64332" stroke="#EDF6F7" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 662 B

BIN
src/assets/icons/input/eye-open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 662 B

3
src/assets/icons/input/eye-open.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.3999 12.0291C14.3999 13.3189 13.3254 14.3645 11.9999 14.3645C10.6744 14.3645 9.5999 13.3189 9.5999 12.0291C9.5999 10.7393 10.6744 9.69377 11.9999 9.69377C13.3254 9.69377 14.3999 10.7393 14.3999 12.0291Z" stroke="#EDF6F7" stroke-width="2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B

13
src/assets/icons/input/google-logo.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2246_905)">
<path d="M12 9.81812V14.4654H18.4582C18.1746 15.9599 17.3236 17.2254 16.0472 18.0763L19.9417 21.0982C22.2108 19.0037 23.5199 15.9273 23.5199 12.2728C23.5199 11.4219 23.4436 10.6036 23.3017 9.81825L12 9.81812Z" fill="#4285F4"/>
<path d="M5.27461 14.2841L4.39625 14.9564L1.28711 17.3782C3.26165 21.2945 7.30862 24 11.9995 24C15.2394 24 17.9557 22.9309 19.9412 21.0983L16.0467 18.0764C14.9776 18.7964 13.614 19.2328 11.9995 19.2328C8.87951 19.2328 6.22868 17.1274 5.27952 14.291L5.27461 14.2841Z" fill="#34A853"/>
<path d="M1.28718 6.62183C0.469042 8.23631 0 10.0581 0 11.9999C0 13.9417 0.469042 15.7636 1.28718 17.378C1.28718 17.3889 5.27997 14.2799 5.27997 14.2799C5.03998 13.5599 4.89812 12.7963 4.89812 11.9998C4.89812 11.2033 5.03998 10.4398 5.27997 9.71976L1.28718 6.62183Z" fill="#FBBC05"/>
<path d="M11.9997 4.77818C13.767 4.77818 15.3379 5.38907 16.5925 6.56727L20.0288 3.13095C17.9452 1.18917 15.2398 0 11.9997 0C7.30887 0 3.26165 2.69454 1.28711 6.62183L5.27978 9.72001C6.22882 6.88362 8.87976 4.77818 11.9997 4.77818Z" fill="#EA4335"/>
</g>
<defs>
<clipPath id="clip0_2246_905">
<rect width="24" height="24" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

5
src/assets/icons/input/index.ts Normal file
View File

@@ -0,0 +1,5 @@
import eyeClosed from "./eye-closed.svg"
import eyeOpen from "./eye-open.png"
import googleLogo from "./google-logo.svg"
export {eyeClosed, eyeOpen, googleLogo}

3
src/components/button/PrimaryButton.tsx
View File

@@ -21,7 +21,6 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
disabled && "pointer-events-none",
className
)}
onClick={() => onClick()}
>
{/* Основной контейнер, */}
<div
@@ -41,7 +40,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
"[&:focus-visible+*]:outline-liquid-brightmain",
)}
disabled={disabled}
onClick={() => {}}
onClick={() => {onClick()}}
/>
{/* Граница при выделении через tab */}

3
src/components/button/SecondaryButton.tsx
View File

@@ -21,7 +21,6 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
disabled && "pointer-events-none",
className
)}
onClick={() => onClick()}
>
{/* Основной контейнер, */}
<div
@@ -40,7 +39,7 @@ export const SecondaryButton: React.FC<ButtonProps> = ({
"[&:focus-visible+*]:outline-liquid-brightmain",
)}
disabled={disabled}
onClick={() => {}}
onClick={() => {onClick()}}
/>
{/* Граница при выделении через tab */}

2
src/components/checkbox/Checkbox.tsx
View File

@@ -105,7 +105,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
>
<div
className={cn(
"group-hover:bg-default-100 group-active:scale-90 flex items-center justify-center bg-transparent hover:bg-default-100 box-border border-solid border-[2px] border-default z-10 relative transition-all duration-300",
"group-hover:bg-default-100 group-active:scale-90 flex items-center justify-center bg-transparent hover:bg-default-100 box-border border-solid border-[1px] border-liquid-white z-10 relative transition-all duration-300",
sizeVariants[size],
radiusVraiants[radius],
active && borderColorsVariants[color]

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

@@ -1,142 +1,72 @@
import React from "react";
import { cn } from "../../lib/cn";
import { eyeClosed, eyeOpen } from "../../assets/icons/input";
/* Варианты для скользящего шарика */
const inputVariants = {
size: {
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",
primary: "text-liquid-brightmain bg-liquid-brightmain placeholder-liquid-brightmain",
secondary: "text-secondary bg-secondary-100 placeholder-secondary",
success: "text-success bg-success-100 placeholder-success",
warning: "text-warning bg-warning-100 placeholder-warning",
danger: "text-danger bg-danger-100 placeholder-danger",
},
radius: {
none: "rounded-none",
sm: "rounded-[8px]",
md: "rounded-[12px]",
lg: "rounded-[16px]",
full: "rounded-full",
},
colorsHovered: {
default: "focus:bg-default-200 hover:bg-default-300",
primary: "focus:bg-liquid-brightmain hover:bg-liquid-brightmain",
secondary: "focus:bg-secondary-100 hover:bg-secondary-200",
success: "focus:bg-success-100 hover:bg-success-200",
warning: "focus:bg-warning-100 hover:bg-warning-200",
danger: "focus:bg-danger-100 hover:bg-danger-200",
},
label: {
default: "text-default-600",
primary: "text-liquid-brightmain",
secondary: "text-secondary",
success: "text-success",
warning: "text-warning",
danger: "text-dange",
},
};
interface SwitchProps {
size?: "sm" | "md" | "lg";
radius?: "sm" | "md" | "lg" | "none" | "full";
interface inputProps {
type: "text" | "email" | "password" | "first_name";
error?: string;
disabled?: boolean;
placeholder?: string;
type?: "text" | "email" | "password" | "first_name";
color?:
| "default"
| "primary"
| "secondary"
| "success"
| "warning"
| "danger";
id?: string;
required?: boolean;
label?: string;
labelType?: "none" | "in" | "out" | "left" | "in-fixed" | "out-fixed";
variant?: "flat" | "faded" | "bordered" | "underlined";
placeholder?: string;
className?: string;
defaultState?: string;
onChange: (state: string) => void;
defaultState?: string;
}
export const Input: React.FC<SwitchProps> = ({
size = "sm",
// radius = "md",
export const Input: React.FC<inputProps> = ({
type = "text",
id = "",
error = "",
disabled = false,
required = false,
// color = "default",
label = "",
labelType = "in",
placeholder = "",
variant = "bordered",
className,
className = "",
onChange,
defaultState = "",
}) => {
const [value, setValue] = React.useState<string>(defaultState);
const [visible, setVIsible] = React.useState<boolean>(type != "password");
React.useEffect(() => onChange(value), [value]);
if (labelType == "in" || labelType == "in-fixed")
return (
<label
className={cn(
"grid relative select-none group cursor-text overflow-hidden",
disabled && "pointer-events-none opacity-50",
className
)}
>
{/* Основной контейнер, */}
<div
return (
<div className={cn(
"relative",
className
)}>
<div className={cn("text-[18px] text-liquid-white font-medium h-[23px] mb-[10px] transition-all",
label == "" && "h-0 mb-0"
)}>
{label}
</div>
<div className="relative">
<input
className={cn(
"box-border z-10 relative transition-all duration-300 h-fit flex items-center px-3 rounded-[12px] overflow-hidden ",
inputVariants.size[size],
variant == "flat" &&
"group-hover:bg-default-300 group-focus-within:bg-default-300 bg-default-200",
variant == "faded" &&
"group-hover:bg-default-300 group-focus-within:bg-default-300 bg-default-200 border-[2px] border-default-300 group-focus-within:border-default group-hover:border-default",
variant == "bordered" &&
"border-[2px] border-default-300 group-focus-within:border-default group-hover:border-default"
"bg-liquid-lighter w-full rounded-[10px] outline-none pl-[16px] py-[8px] placeholder:text-liquid-light",
type == "password" ? "h-[40px]" : "h-[36px]"
)}
>
<input
id={type == "password" ? type : id}
type={type}
className={cn(
"outline outline-transparent transition-all duration-300 bg-transparent absolute left-0 bottom-0 placeholder-default-500 text-layout-foreground w-full px-3 pt-[10px] h-full",
placeholder == "" && value == ""
? "opacity-0 focus:opacity-100"
: " [&:-webkit-autofill+*]:text-white"
)}
value={value}
placeholder={placeholder}
disabled={disabled}
onChange={(e) => {
setValue(e.target.value);
}}
/>
type={type == "password" ? (visible ? "text" : "password") : type}
placeholder={placeholder}
onChange={(e) => {
setValue(e.target.value);
}} />
{
type == "password" &&
<img src={visible ? eyeOpen : eyeClosed} className="w-[24px] h-[24px] cursor-pointer right-[16px] top-[8px] absolute" onClick={() => {
setVIsible(!visible);
}}/>
}
</div>
<div
className={cn(
"absolute text-default-600 transition-all duration-300 my-[2px]",
placeholder == "" && value == "" && labelType != "in-fixed"
? "top-[20%] text-[16px] group-focus-within:top-0 group-focus-within:text-[12px] group-focus-within:text-default-700"
: "top-0 text-[12px] text-default-700"
)}
>
{label}
{required && <span className="text-danger m-[2px]">*</span>}
</div>
</div>
</label>
);
<div className={cn("text-liquid-red text-[14px] h-[18px] text-right mt-[5px]",
error == "" && "h-0 mt-0"
)}>
{error}
</div>
</div>
);
return <></>;
};

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

@@ -2,11 +2,12 @@ import { useState, useEffect } from "react";
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 { Link, useNavigate } from "react-router-dom";
import { loginUser } from "../../../redux/slices/auth";
import { cn } from "../../../lib/cn";
import { setMenuActivePage } from "../../../redux/slices/store";
import { Balloon } from "../../../assets/icons/auth";
import { SecondaryButton } from "../../../components/button/SecondaryButton";
const Login = () => {
const dispatch = useAppDispatch();
@@ -18,6 +19,9 @@ const Login = () => {
const { status, error, jwt } = useAppSelector((state) => state.auth);
const [err, setErr] = useState<string>("");
// После успешного логина
useEffect(() => {
dispatch(setMenuActivePage("account"))
@@ -27,6 +31,8 @@ const Login = () => {
}, [jwt]);
const handleLogin = () => {
setErr(err == "" ? "Неверная почта и/или пароль" : "");
console.log(123);
setSubmitClicked(true);
if (!username || !password) return;
@@ -39,67 +45,60 @@ const Login = () => {
};
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>
<div className="mt-[15px] flex flex-col gap-4">
<div className={cn(
"text-[14px] text-danger font-medium transition-all overflow-hidden",
submitClicked && !username && "h-[21px]"
)}>
Поле не может быть пустым
<div className=" relative pointer-events-auto">
<div>
<div className="text-[40px] text-liquid-white font-bold h-[50px]">
С возвращением
</div>
<Input
label="Логин"
radius="sm"
className="w-full"
required
onChange={(val) => setUsername(val)}
/>
<div className={cn(
"text-[14px] text-danger font-medium transition-all overflow-hidden",
submitClicked && !password && "h-[21px]"
)}>
Поле не может быть пустым
<div className="text-[18px] text-liquid-light font-bold h-[23px]">
Вход в аккаунт
</div>
<Input
label="Пароль"
type="password"
radius="sm"
className="w-hull"
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)]">
<Input className="mt-[10px]" type="email" label="Почта" onChange={(v) => { }} placeholder="example@gmail.com" error={err}/>
<Input className="mt-[10px]" type="password" label="Пароль" onChange={(v) => { }} placeholder="abCD1234" />
<div className="flex justify-end mt-[10px]">
<Link
to={""}
className={"text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline "}>
Забыли пароль?
</Link>
</div>
<div className="mt-[10px]">
<PrimaryButton
className="w-full mb-[8px]"
onClick={handleLogin}
text={status === "loading" ? "Вход..." : "Войти"}
text={status === "loading" ? "Вход..." : "Вход"}
disabled={status === "loading"}
/>
<PrimaryButton
className="w-full mb-[25px]"
<SecondaryButton
className="w-full"
onClick={navigateToRegister}
text="Зарегистрироваться"
text="Войти с Google "
/>
</div>
<div className="flex justify-center mt-[10px]">
<span>
Нет аккаунта? <Link
to={"/home/register"}
className={"text-liquid-brightmain text-[16px] h-[20px] transition-all hover:underline "}>
Регистрация
</Link>
</span>
</div>
</div>
</div>

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>
);