Auth navigation

2025-10-23 12:54:07 +03:00
parent 4d0cafdce8
commit 1552ecd565
10 changed files with 577 additions and 35 deletions
--- 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 (
    <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>
  );
 }
--- 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<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
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -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>
 );
--- a/src/pages/Home.tsx
+++ 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 (
+    <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;
--- a/src/views/home/auth/Login.tsx
+++ 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<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;
--- a/src/views/home/auth/Register.tsx
+++ 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<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;
--- a/src/views/home/menu/Menu.tsx
+++ 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<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;