From 1552ecd5658967cf0a099b31e060696093de6373 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=92=D0=B8=D1=82=D0=B0=D0=BB=D0=B8=D0=B9=20=D0=9B=D0=B0?= =?UTF-8?q?=D0=B2=D1=88=D0=BE=D0=BD=D0=BE=D0=BA?= <114582703+valavshonok@users.noreply.github.com> Date: Thu, 23 Oct 2025 12:54:07 +0300 Subject: [PATCH] Auth navigation --- package-lock.json | 114 ++++++++++++--- package.json | 5 +- src/App.tsx | 24 +++- src/components/checkbox/Checkbox.tsx | 13 +- src/main.tsx | 5 +- src/pages/Home.tsx | 20 +++ src/views/home/auth/Login.tsx | 111 ++++++++++++++ src/views/home/auth/Register.tsx | 207 +++++++++++++++++++++++++++ src/views/home/menu/Menu.tsx | 111 ++++++++++++++ tsconfig.app.tsbuildinfo | 2 +- 10 files changed, 577 insertions(+), 35 deletions(-) create mode 100644 src/pages/Home.tsx create mode 100644 src/views/home/auth/Login.tsx create mode 100644 src/views/home/auth/Register.tsx create mode 100644 src/views/home/menu/Menu.tsx diff --git a/package-lock.json b/package-lock.json index f4bd102..83484c5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,14 +8,15 @@ "name": "react-kit", "version": "0.0.0", "dependencies": { - "@reduxjs/toolkit": "^2.2.7", + "@reduxjs/toolkit": "^2.9.2", "@types/react-redux": "^7.1.33", "clsx": "^2.1.1", "framer-motion": "^11.9.0", "postcss": "^8.4.47", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-redux": "^9.1.2", + "react-redux": "^9.2.0", + "react-router-dom": "^7.9.4", "tailwind-cn": "^1.0.2", "tailwind-merge": "^1.14.0", "tailwindcss": "^3.4.12" @@ -1066,18 +1067,20 @@ } }, "node_modules/@reduxjs/toolkit": { - "version": "2.2.7", - "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.7.tgz", - "integrity": "sha512-faI3cZbSdFb8yv9dhDTmGwclW0vk0z5o1cia+kf7gCbaCwHI5e+7tP57mJUv22pNcNbeA62GSrPpfrUfdXcQ6g==", + "version": "2.9.2", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.9.2.tgz", + "integrity": "sha512-ZAYu/NXkl/OhqTz7rfPaAhY0+e8Fr15jqNxte/2exKUxvHyQ/hcqmdekiN1f+Lcw3pE+34FCgX+26zcUE3duCg==", "license": "MIT", "dependencies": { + "@standard-schema/spec": "^1.0.0", + "@standard-schema/utils": "^0.3.0", "immer": "^10.0.3", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { - "react": "^16.9.0 || ^17.0.0 || ^18", + "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "peerDependenciesMeta": { @@ -1313,6 +1316,18 @@ "win32" ] }, + "node_modules/@standard-schema/spec": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz", + "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==", + "license": "MIT" + }, + "node_modules/@standard-schema/utils": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz", + "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==", + "license": "MIT" + }, "node_modules/@types/babel__core": { "version": "7.20.5", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", @@ -1423,9 +1438,9 @@ } }, "node_modules/@types/use-sync-external-store": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", - "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", + "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", "license": "MIT" }, "node_modules/@typescript-eslint/eslint-plugin": { @@ -1916,9 +1931,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001662", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz", - "integrity": "sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==", + "version": "1.0.30001751", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001751.tgz", + "integrity": "sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==", "dev": true, "funding": [ { @@ -2036,6 +2051,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -3578,17 +3602,17 @@ "license": "MIT" }, "node_modules/react-redux": { - "version": "9.1.2", - "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz", - "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==", + "version": "9.2.0", + "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", + "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", "dependencies": { - "@types/use-sync-external-store": "^0.0.3", - "use-sync-external-store": "^1.0.0" + "@types/use-sync-external-store": "^0.0.6", + "use-sync-external-store": "^1.4.0" }, "peerDependencies": { - "@types/react": "^18.2.25", - "react": "^18.0", + "@types/react": "^18.2.25 || ^19", + "react": "^18.0 || ^19", "redux": "^5.0.0" }, "peerDependenciesMeta": { @@ -3610,6 +3634,44 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.9.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz", + "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.9.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.4.tgz", + "integrity": "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA==", + "license": "MIT", + "dependencies": { + "react-router": "7.9.4" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -3773,6 +3835,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4190,12 +4258,12 @@ } }, "node_modules/use-sync-external-store": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", - "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", + "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==", "license": "MIT", "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/util-deprecate": { diff --git a/package.json b/package.json index edd1f03..ec6a523 100644 --- a/package.json +++ b/package.json @@ -10,14 +10,15 @@ "preview": "vite preview" }, "dependencies": { - "@reduxjs/toolkit": "^2.2.7", + "@reduxjs/toolkit": "^2.9.2", "@types/react-redux": "^7.1.33", "clsx": "^2.1.1", "framer-motion": "^11.9.0", "postcss": "^8.4.47", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-redux": "^9.1.2", + "react-redux": "^9.2.0", + "react-router-dom": "^7.9.4", "tailwind-cn": "^1.0.2", "tailwind-merge": "^1.14.0", "tailwindcss": "^3.4.12" diff --git a/src/App.tsx b/src/App.tsx index f74a14a..5129d38 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,13 +1,23 @@ -import { PrimaryButton } from "./components/button/PrimaryButton"; -import { SecondaryButton } from "./components/button/SecondaryButton"; -import { Checkbox } from "./components/checkbox/Checkbox"; -import { Input } from "./components/input/Input"; -import { Switch } from "./components/switch/Switch"; +import { Route, Routes } from "react-router-dom"; +// import { PrimaryButton } from "./components/button/PrimaryButton"; +// import { SecondaryButton } from "./components/button/SecondaryButton"; +// import { Checkbox } from "./components/checkbox/Checkbox"; +// import { Input } from "./components/input/Input"; +// import { Switch } from "./components/switch/Switch"; +import Home from "./pages/Home"; function App() { return (
- + }/> + + + + }/> + + + {/* { }} text="Button" disabled className="m-5" />
-
+
*/} ); } diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx index c29cce4..05632d6 100644 --- a/src/components/checkbox/Checkbox.tsx +++ b/src/components/checkbox/Checkbox.tsx @@ -33,6 +33,16 @@ const colorsVariants = { danger: "bg-liquid-red", }; + +const borderColorsVariants = { + default: "border-default", + primary: "border-liquid-brightmain", + secondary: "border-liquid-darkmain", + success: "border-liquid-green", + warning: "border-liquid-orange", + danger: "border-liquid-red", +}; + const focuseOutlineVariants = { default: "[&:focus-visible+*]:outline-default", primary: "[&:focus-visible+*]:outline-liquid-brightmain", @@ -97,7 +107,8 @@ export const Checkbox: React.FC = ({ 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", sizeVariants[size], - radiusVraiants[radius] + radiusVraiants[radius], + active && borderColorsVariants[color] )} > - + + + ); diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx new file mode 100644 index 0000000..2ea413d --- /dev/null +++ b/src/pages/Home.tsx @@ -0,0 +1,20 @@ +// import React from "react"; +import { Route, Routes } from "react-router-dom"; +import Login from "../views/home/auth/Login"; +import Register from "../views/home/auth/Register"; + +const Home = () => { + return ( +
+
+ + }/> + }/> + + +
+
+ ); +}; + +export default Home; diff --git a/src/views/home/auth/Login.tsx b/src/views/home/auth/Login.tsx new file mode 100644 index 0000000..35d5e68 --- /dev/null +++ b/src/views/home/auth/Login.tsx @@ -0,0 +1,111 @@ +// import React from "react"; +// import { Button } from "../../components/button/Button"; +// import { Input } from "../../components/input/Input"; +// import { useDispatch, useSelector } from "react-redux"; +// import { useNavigate } from "react-router-dom"; +// import { loginUser } from "../../redux/slices/user"; +// import { setUsername, setPassword } from "../../redux/slices/user"; +// import { cn } from "../../lib/cn"; + +const Login = () => { + // const dispatch = useDispatch(); + // const navigate = useNavigate(); + + // const [inputUsername, setInputUsername] = React.useState(""); + // const [inputPassword, setInputPassword] = React.useState(""); + // const [inputClickLogin, setInputClickLogin] = React.useState(false); + + // const changeUsername = (s: string) => { + // dispatch(setUsername(s)); + // setInputUsername(s); + // }; + // const changePassword = (s: string) => { + // dispatch(setPassword(s)); + // setInputPassword(s); + // }; + + // const isAuthorised = useSelector((state: any) => state.user.isAuthorized); + + // React.useEffect(() => { + // if (isAuthorised) navigate("/home/offices"); + // }, [isAuthorised]); + + // const clickLogin = () => { + // setInputClickLogin(true); + // if (inputUsername == "" || inputPassword == "") return; + // setInputClickLogin(false); + // dispatch(loginUser()); + + // if (isAuthorised) navigate("/home/offices"); + // }; + // const clickNavigateRegister = () => { + // navigate("/auth/register"); + // }; + return ( +
+
+
+ Вход в аккаунт +
+
+ Для начала работы вам необходимо войти в аккаунт. Заполните поля ниже + и нажмите кнопку войти +
+ + {/*
+
+ Поле не может быть пустым +
+ +
+ Поле не может быть пустым +
+ +
+ +
+
*/} +
+
+ ); +}; + +export default Login; diff --git a/src/views/home/auth/Register.tsx b/src/views/home/auth/Register.tsx new file mode 100644 index 0000000..645df30 --- /dev/null +++ b/src/views/home/auth/Register.tsx @@ -0,0 +1,207 @@ +// import React from "react"; +// import { Button } from "../../components/button/Button"; +// import { Checkbox } from "../../components/checkbox/Checkbox"; +// import { Input } from "../../components/input/Input"; +// import { useDispatch, useSelector } from "react-redux"; +// import { useNavigate } from "react-router-dom"; +// import { +// setEmail, +// setUsername, +// setPassword, +// registerUser, +// } from "../../redux/slices/user"; +// import { cn } from "../../lib/cn"; + +const Register = () => { + // const dispatch = useDispatch(); + // const navigate = useNavigate(); + + // const [inputUsername, setInputUsername] = React.useState(""); + // const [inputEmail, setInputEmail] = React.useState(""); + // const [inputPassword, setInputPassword] = React.useState(""); + // const [inputRepeatPassword, setInputRepeatPassword] = + // React.useState(""); + // const [inputChecked, setInputChecked] = React.useState(false); + // const [inputClickRegister, setInputClickRegister] = + // React.useState(false); + + // const changeEmail = (s: string) => { + // setInputEmail(s); + // dispatch(setEmail(s)); + // }; + // const changeUsername = (s: string) => { + // setInputUsername(s); + // dispatch(setUsername(s)); + // }; + // const changePassword = (s: string) => { + // setInputPassword(s); + // dispatch(setPassword(s)); + // }; + + // const { username, email } = useSelector((state: any) => state.user); + + // const isAuthorized = useSelector((state: any) => state.user.isAuthorized); + + // React.useEffect(() => { + // if (isAuthorized) navigate("/home/offices"); + // }, [isAuthorized]); + + // const clickNavigateLogin = () => { + // navigate("/auth/login"); + // }; + + // const completeRegister = () => { + // setInputClickRegister(true); + // if ( + // inputChecked == false || + // inputEmail == "" || + // inputUsername == "" || + // inputPassword == "" || + // inputRepeatPassword == "" || + // inputPassword != inputRepeatPassword + // ) + // return; + // setInputClickRegister(false); + // dispatch(registerUser()); + // if (isAuthorized) navigate("/home"); + // }; + + return ( +
+
+
+ Регистрация аккаунта +
+
+ Для начала работы вам необходимо создать аккаунт. Заполните поля ниже + и нажмите кнопку продолжить +
+ + {/*
+
+ Поле не может быть пустым +
+ +
+ Поле не может быть пустым +
+ +
+ Поле не может быть пустым +
+
+ Пароли не совпадают +
+ +
+ Поле не может быть пустым +
+
+ Пароли не совпадают +
+ + +
+ Это обязательное поле +
+
+ { + setInputChecked(state); + }} + /> +
+ Согласен с Условиями обслуживания и Политикой конфиденциальности +
+
+
+ +
+
+ ); +}; + +export default Register; diff --git a/src/views/home/menu/Menu.tsx b/src/views/home/menu/Menu.tsx new file mode 100644 index 0000000..8f929da --- /dev/null +++ b/src/views/home/menu/Menu.tsx @@ -0,0 +1,111 @@ +// import React from "react"; +// import { Button } from "../../components/button/Button"; +// import { Input } from "../../components/input/Input"; +// import { useDispatch, useSelector } from "react-redux"; +// import { useNavigate } from "react-router-dom"; +// import { loginUser } from "../../redux/slices/user"; +// import { setUsername, setPassword } from "../../redux/slices/user"; +// import { cn } from "../../lib/cn"; + +const Menu = () => { + // const dispatch = useDispatch(); + // const navigate = useNavigate(); + + // const [inputUsername, setInputUsername] = React.useState(""); + // const [inputPassword, setInputPassword] = React.useState(""); + // const [inputClickLogin, setInputClickLogin] = React.useState(false); + + // const changeUsername = (s: string) => { + // dispatch(setUsername(s)); + // setInputUsername(s); + // }; + // const changePassword = (s: string) => { + // dispatch(setPassword(s)); + // setInputPassword(s); + // }; + + // const isAuthorised = useSelector((state: any) => state.user.isAuthorized); + + // React.useEffect(() => { + // if (isAuthorised) navigate("/home/offices"); + // }, [isAuthorised]); + + // const clickLogin = () => { + // setInputClickLogin(true); + // if (inputUsername == "" || inputPassword == "") return; + // setInputClickLogin(false); + // dispatch(loginUser()); + + // if (isAuthorised) navigate("/home/offices"); + // }; + // const clickNavigateRegister = () => { + // navigate("/auth/register"); + // }; + return ( +
+
+
+ Вход в аккаунт +
+
+ Для начала работы вам необходимо войти в аккаунт. Заполните поля ниже + и нажмите кнопку войти +
+ + {/*
+
+ Поле не может быть пустым +
+ +
+ Поле не может быть пустым +
+ +
+ +
+
*/} +
+
+ ); +}; + +export default Menu; diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo index 4ff1272..67f9d00 100644 --- a/tsconfig.app.tsbuildinfo +++ b/tsconfig.app.tsbuildinfo @@ -1 +1 @@ -{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button/button.tsx","./src/components/checkbox/checkbox.tsx","./src/components/checkbox-group/chexkboxgroup.tsx","./src/components/input/input.tsx","./src/components/switch/switch.tsx","./src/config/colors.ts","./src/lib/cn.ts","./src/redux/store.ts"],"version":"5.6.2"} \ No newline at end of file +{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/button/primarybutton.tsx","./src/components/button/secondarybutton.tsx","./src/components/checkbox/checkbox.tsx","./src/components/input/input.tsx","./src/components/switch/switch.tsx","./src/config/colors.ts","./src/lib/cn.ts","./src/redux/store.ts"],"version":"5.6.2"} \ No newline at end of file