Auth navigation
This commit is contained in:
Виталий Лавшонок
114
package-lock.json
generated
114
package-lock.json
generated
@@ -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": {
|
||||
|
||||
@@ -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"
|
||||
|
||||
24
src/App.tsx
24
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 (
|
||||
<div className="flex py-[100px] w-full h-full">
|
||||
<Switch
|
||||
<Routes>
|
||||
<Route path="/home/*" element={<Home/>}/>
|
||||
|
||||
|
||||
|
||||
<Route path="*" element={<Home/>}/>
|
||||
</Routes>
|
||||
|
||||
{/* <Switch
|
||||
className=" fixed top-0 left-0 z-full"
|
||||
variant="theme"
|
||||
color="secondary"
|
||||
@@ -90,7 +100,7 @@ function App() {
|
||||
<SecondaryButton onClick={() => { }} text="Button" disabled className="m-5" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full"></div>
|
||||
<div className="w-full"></div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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<CheckboxProps> = ({
|
||||
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]
|
||||
)}
|
||||
>
|
||||
<input
|
||||
|
||||
@@ -4,9 +4,12 @@ import App from "./App.tsx";
|
||||
import "./styles/index.css";
|
||||
import "./styles/palette/theme-dark.css";
|
||||
import "./styles/palette/theme-light.css";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>
|
||||
);
|
||||
|
||||
20
src/pages/Home.tsx
Normal file
20
src/pages/Home.tsx
Normal file
@@ -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 (
|
||||
<div className="h-full w-full bg-default-100 flex items-center justify-center">
|
||||
<div className=" bg-layout-background w-[25rem] h-[34.375rem] rounded-[15px] box-border p-[25px] relative">
|
||||
<Routes>
|
||||
<Route path="login" element={<Login/>}/>
|
||||
<Route path="register" element={<Register/>}/>
|
||||
<Route path="*" element={"123"}/>
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
111
src/views/home/auth/Login.tsx
Normal file
111
src/views/home/auth/Login.tsx
Normal file
@@ -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<string>("");
|
||||
// const [inputPassword, setInputPassword] = React.useState<string>("");
|
||||
// const [inputClickLogin, setInputClickLogin] = React.useState<boolean>(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 (
|
||||
<div className="h-full w-full bg-default-100 flex items-center justify-center">
|
||||
<div className=" bg-layout-background w-[25rem] h-[34.375rem] rounded-[15px] box-border p-[25px] relative">
|
||||
<div className="text-content-1 w-full h-[3.125rem] text-[28px] font-bold text-center">
|
||||
Вход в аккаунт
|
||||
</div>
|
||||
<div className="text-content-1 w-full h-[3.4375rem] text-[12px] text-center mt-[15px]">
|
||||
Для начала работы вам необходимо войти в аккаунт. Заполните поля ниже
|
||||
и нажмите кнопку войти
|
||||
</div>
|
||||
|
||||
{/* <div className="mt-[15px]">
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[20px] overflow-hidden",
|
||||
inputClickLogin && inputUsername == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<Input
|
||||
color="danger"
|
||||
required
|
||||
label="Логин"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changeUsername}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickLogin && inputPassword == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Пароль"
|
||||
type="password"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changePassword}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-[calc(100%-50px)] absolute bottom-0">
|
||||
<Button
|
||||
className="w-full mb-[8px]"
|
||||
size="lg"
|
||||
onClick={clickLogin}
|
||||
text="Войти"
|
||||
/>
|
||||
<Button
|
||||
variant="bordered"
|
||||
color="default"
|
||||
className="w-full mb-[25px]"
|
||||
size="lg"
|
||||
onClick={clickNavigateRegister}
|
||||
text="Зарегистрироваться"
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
207
src/views/home/auth/Register.tsx
Normal file
207
src/views/home/auth/Register.tsx
Normal file
@@ -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<string>("");
|
||||
// const [inputEmail, setInputEmail] = React.useState<string>("");
|
||||
// const [inputPassword, setInputPassword] = React.useState<string>("");
|
||||
// const [inputRepeatPassword, setInputRepeatPassword] =
|
||||
// React.useState<string>("");
|
||||
// const [inputChecked, setInputChecked] = React.useState<boolean>(false);
|
||||
// const [inputClickRegister, setInputClickRegister] =
|
||||
// React.useState<boolean>(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 (
|
||||
<div className="h-full w-full bg-default-100 flex items-center justify-center">
|
||||
<div className=" bg-layout-background w-[25rem] rounded-[15px] box-border p-[25px] relative">
|
||||
<div className="text-content-1 w-full h-[3.125rem] text-[28px] font-bold text-center">
|
||||
Регистрация аккаунта
|
||||
</div>
|
||||
<div className="text-content-1 w-full h-[3.4375rem] text-[12px] text-center mt-[15px]">
|
||||
Для начала работы вам необходимо создать аккаунт. Заполните поля ниже
|
||||
и нажмите кнопку продолжить
|
||||
</div>
|
||||
|
||||
{/* <div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickRegister && inputUsername == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Логин"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changeUsername}
|
||||
defaultState={username}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickRegister && inputEmail == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Почта"
|
||||
type="email"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changeEmail}
|
||||
defaultState={email}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickRegister && inputPassword == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
|
||||
inputClickRegister &&
|
||||
inputRepeatPassword != inputPassword &&
|
||||
"h-[21px]"
|
||||
)}
|
||||
>
|
||||
Пароли не совпадают
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Пароль"
|
||||
type="password"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changePassword}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickRegister && inputRepeatPassword == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden",
|
||||
inputClickRegister &&
|
||||
inputRepeatPassword != inputPassword &&
|
||||
"h-[21px]"
|
||||
)}
|
||||
>
|
||||
Пароли не совпадают
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Повторите пароль"
|
||||
type="password"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={setInputRepeatPassword}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all overflow-hidden mt-[20px]",
|
||||
inputClickRegister && inputChecked == false && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Это обязательное поле
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Checkbox
|
||||
className="z-10"
|
||||
onChange={(state: boolean) => {
|
||||
setInputChecked(state);
|
||||
}}
|
||||
/>
|
||||
<div className="text-[10px] absolute top-0 left-[35px] text-content-1">
|
||||
Согласен с Условиями обслуживания и Политикой конфиденциальности
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className="w-full mb-[8px] mt-[20px]"
|
||||
size="lg"
|
||||
onClick={completeRegister}
|
||||
text="Зарегистрироваться"
|
||||
/>
|
||||
<Button
|
||||
variant="bordered"
|
||||
color="default"
|
||||
className="w-full mb-[25px]"
|
||||
size="lg"
|
||||
onClick={clickNavigateLogin}
|
||||
text="Вернуться ко входу"
|
||||
/> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
||||
111
src/views/home/menu/Menu.tsx
Normal file
111
src/views/home/menu/Menu.tsx
Normal file
@@ -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<string>("");
|
||||
// const [inputPassword, setInputPassword] = React.useState<string>("");
|
||||
// const [inputClickLogin, setInputClickLogin] = React.useState<boolean>(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 (
|
||||
<div className="h-full w-full bg-default-100 flex items-center justify-center">
|
||||
<div className=" bg-layout-background w-[25rem] h-[34.375rem] rounded-[15px] box-border p-[25px] relative">
|
||||
<div className="text-content-1 w-full h-[3.125rem] text-[28px] font-bold text-center">
|
||||
Вход в аккаунт
|
||||
</div>
|
||||
<div className="text-content-1 w-full h-[3.4375rem] text-[12px] text-center mt-[15px]">
|
||||
Для начала работы вам необходимо войти в аккаунт. Заполните поля ниже
|
||||
и нажмите кнопку войти
|
||||
</div>
|
||||
|
||||
{/* <div className="mt-[15px]">
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[20px] overflow-hidden",
|
||||
inputClickLogin && inputUsername == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<Input
|
||||
color="danger"
|
||||
required
|
||||
label="Логин"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changeUsername}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
"text-[14px] text-danger font-medium h-0 transition-all mt-[15px] overflow-hidden",
|
||||
inputClickLogin && inputPassword == "" && "h-[21px]"
|
||||
)}
|
||||
>
|
||||
Поле не может быть пустым
|
||||
</div>
|
||||
<Input
|
||||
required
|
||||
label="Пароль"
|
||||
type="password"
|
||||
radius="sm"
|
||||
className="w-[22rem]"
|
||||
onChange={changePassword}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-[calc(100%-50px)] absolute bottom-0">
|
||||
<Button
|
||||
className="w-full mb-[8px]"
|
||||
size="lg"
|
||||
onClick={clickLogin}
|
||||
text="Войти"
|
||||
/>
|
||||
<Button
|
||||
variant="bordered"
|
||||
color="default"
|
||||
className="w-full mb-[25px]"
|
||||
size="lg"
|
||||
onClick={clickNavigateRegister}
|
||||
text="Зарегистрироваться"
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Menu;
|
||||
@@ -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"}
|
||||
{"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"}
|
||||
Reference in New Issue
Block a user