добавил логику авторизации, но...

почему-то не работает observer на файлике с маршрутами и я не могу разделить пути на приватные и публичные
codEnjoyer · Nov 7, 2023 · 0c40c79 · 0c40c79
1 parent 7a472dc
commit 0c40c79
Show file tree

Hide file tree

Showing 13 changed files with 218 additions and 63 deletions.
diff --git a/frontend/src/UIComponents/customCheckbox/CustomCheckbox.tsx b/frontend/src/UIComponents/customCheckbox/CustomCheckbox.tsx
@@ -8,42 +8,52 @@ interface ICustomCheckboxProps {
     handleOnChange?: () => void
 }
 
+interface ICheckboxContainerProps {
+    classContainer: string
+}
+
 const CustomCheckbox: React.FC<ICustomCheckboxProps> = ({text, id, additionalClassName, handleOnChange}) => {
     const [isChecked, changeIsChecked] = useState(false);
-    const onChange = () => {
+    const onChangeHandler = () => {
         changeIsChecked(!isChecked)
         if (handleOnChange) handleOnChange()
     }
 
 
     return (
-        <div className={additionalClassName ? additionalClassName + " " + "custom_checkbox" : "custom_checkbox"}
-             onClick={onChange}>
-            {isChecked ? <CheckboxActive/> : <Checkbox/>}
+        <div className={additionalClassName ? additionalClassName + " " + "custom-checkbox" : "custom-checkbox"}
+             onClick={onChangeHandler}>
+            {isChecked ? <CheckboxActive classContainer="svg-container"/> : <Checkbox classContainer="svg-container"/>}
             <input type="checkbox" id={id}
                    className="input__checkbox"
-                   checked={isChecked}/>
+                   checked={isChecked}
+                   onChange={() => ""}
+            />
             <label className="checkbox-text" htmlFor={id}>{text}</label>
         </div>
     );
 };
 
-const Checkbox: React.FC = () => {
+const Checkbox: React.FC<ICheckboxContainerProps> = ({classContainer}) => {
     return (
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect opacity="0.32" x="1" y="1" width="22" height="22" rx="7.4" stroke="#2B2A29" strokeWidth="2"/>
-        </svg>
+        <div className={classContainer}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect opacity="0.32" x="1" y="1" width="22" height="22" rx="7.4" stroke="#2B2A29" strokeWidth="2"/>
+            </svg>
+        </div>
     )
 }
 
-const CheckboxActive: React.FC = () => {
+const CheckboxActive: React.FC<ICheckboxContainerProps> = ({classContainer}) => {
     return (
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect width="24" height="24" rx="8.4" fill="#00D29D"/>
-            <path fillRule="evenodd" clipRule="evenodd"
-                  d="M18.9058 7.22502C19.1984 7.51817 19.198 7.99305 18.9049 8.28568L10.3999 16.7757C10.1069 17.0681 9.63238 17.0679 9.33967 16.7752L5.09467 12.5302C4.80178 12.2373 4.80178 11.7624 5.09467 11.4696C5.38756 11.1767 5.86244 11.1767 6.15533 11.4696L9.87047 15.1847L17.8451 7.22408C18.1383 6.93145 18.6132 6.93187 18.9058 7.22502Z"
-                  fill="#F9F9F9"/>
-        </svg>
+        <div className={classContainer}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect width="24" height="24" rx="8.4" fill="#00D29D"/>
+                <path fillRule="evenodd" clipRule="evenodd"
+                      d="M18.9058 7.22502C19.1984 7.51817 19.198 7.99305 18.9049 8.28568L10.3999 16.7757C10.1069 17.0681 9.63238 17.0679 9.33967 16.7752L5.09467 12.5302C4.80178 12.2373 4.80178 11.7624 5.09467 11.4696C5.38756 11.1767 5.86244 11.1767 6.15533 11.4696L9.87047 15.1847L17.8451 7.22408C18.1383 6.93145 18.6132 6.93187 18.9058 7.22502Z"
+                      fill="#F9F9F9"/>
+            </svg>
+        </div>
     );
 };
 

diff --git a/frontend/src/UIComponents/customCheckbox/customCheckbox.css b/frontend/src/UIComponents/customCheckbox/customCheckbox.css
diff --git a/frontend/src/UIComponents/customCheckbox/customCheckbox.css.map b/frontend/src/UIComponents/customCheckbox/customCheckbox.css.map
diff --git a/frontend/src/UIComponents/customCheckbox/customCheckbox.scss b/frontend/src/UIComponents/customCheckbox/customCheckbox.scss
@@ -11,6 +11,12 @@
   margin-left: 10px;
 }
 
-.custom_checkbox {
+.custom-checkbox {
   position: absolute;
+  display: inline-flex;
+  align-items: center;
+}
+
+.svg-container {
+  cursor: pointer;
 }
diff --git a/frontend/src/components/MapMenu/MapMenu.tsx b/frontend/src/components/MapMenu/MapMenu.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 const MapMenu: React.FC = () => {
     return (
         <div>
-
+            asd
         </div>
     );
 };

diff --git a/frontend/src/components/authentication/Authentication.tsx b/frontend/src/components/authentication/Authentication.tsx
@@ -3,6 +3,7 @@ import {useNavigate} from "react-router-dom";
 import './../../styles/authentication.scss'
 import CustomButton from "../../UIComponents/customButton/CustomButton.tsx";
 import CustomCheckbox from "../../UIComponents/customCheckbox/CustomCheckbox.tsx";
+import authStore from "../../store/authStore.ts";
 
 const Authentication: React.FC = () => {
     const navigateTo = useNavigate()
@@ -12,25 +13,30 @@ const Authentication: React.FC = () => {
         setIsPasswordShow(!isPasswordShows)
     }
 
+    const signIn = () => {
+        authStore.signInUser()
+        navigateTo('/map')
+    }
+
     return (
-        <div className="auth_page">
+        <div className="auth-page">
             <form className="auth__form">
-                <h2 className="auth_form_title">АВТОРИЗАЦИЯ</h2>
-                <div className="auth_fields">
-                    <div className="auth_data__field">
+                <h2 className="auth-form-title">АВТОРИЗАЦИЯ</h2>
+                <fieldset className="auth-fields">
+                    <div className="auth-data__field">
                         <input type="email" className="login__input" placeholder="Логин"/>
                     </div>
-                    <div className="auth_data__field">
+                    <div className="auth-data__field">
                         {isPasswordShows
                             ? <input type="text" className="password__input" placeholder="Пароль"/>
                             : <input type="password" className="password__input" placeholder="Пароль"/>}
 
                     </div>
-                </div>
+                </fieldset>
                 <CustomCheckbox text="Показать пароль" id="is-remember"
                                 additionalClassName="is-remember-password__checkbox"
                                 handleOnChange={changeShowPassword}/>
-                <CustomButton additionalClassName="auth__btn" text="ВОЙТИ" handleOnClick={() => null}/>
+                <CustomButton additionalClassName="auth__btn" text="ВОЙТИ" handleOnClick={signIn}/>
             </form>
             <CustomButton text="Вернуться обратно" handleOnClick={() => navigateTo('/')}></CustomButton>
         </div>

diff --git a/frontend/src/routes/AppRouter.tsx b/frontend/src/routes/AppRouter.tsx
@@ -1,11 +1,15 @@
-import React, {useState} from 'react';
+import React from 'react';
 import {RouteType} from "../types/RouteType.ts";
 import WelcomePage from "../components/welcomePage/WelcomePage.tsx";
 import {Route, Routes} from "react-router-dom";
 import Authentication from "../components/authentication/Authentication.tsx";
 import MapMenu from "../components/MapMenu/MapMenu.tsx";
+import authStore from "../store/authStore.ts";
+import {observer} from "mobx-react-lite";
+
+const AppRouter: React.FC = observer(() => {
+    // const [isUserAuthorized, setUserAuthorized] = useState<boolean>(false);
 
-const AppRouter: React.FC = () => {
     const publicRoutes: RouteType[] = [
         {
             id: "1",
@@ -14,40 +18,34 @@ const AppRouter: React.FC = () => {
         },
         {
             id: "2",
-            path: 'authentication',
+            path: '/authentication',
             element: <Authentication/>
         }
     ]
 
     const privateRoutes: RouteType[] = [
-        {
-            id: "1",
-            path: '/',
-            element: <WelcomePage/>
-        },
-        {
-            id: "2",
-            path: 'authentication',
-            element: <Authentication/>
-        },
         {
             id: "3",
-            path: 'map',
+            path: '/map',
             element: <MapMenu/>
         }
     ]
 
+    // Здесь будет логика авторизации пользователя
+
+
     return (
         <div>
-            <Routes>
-                {isUserAuthorized
-                    ? privateRoutes.map(({path, element, id}) => <Route path={path} element={element} id={id}/>)
-                    : publicRoutes.map(({path, element, id}) => <Route path={path} element={element} id={id}/>)
-                }
-                {publicRoutes.map(({path, element, id}) => <Route path={path} element={element} id={id}/>)}
-            </Routes>
+            {
+                authStore.isUserAuthorized
+                    ? <Routes>{privateRoutes.map(({path, element, id}) =>
+                        <Route path={path} element={element} key={id}/>)} </Routes>
+                    : <Routes>{publicRoutes.map(({path, element, id}) =>
+                        <Route path={path} element={element} key={id}/>)} </Routes>
+            }
         </div>
     );
-};
+})
+
 
 export default AppRouter;
diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts
@@ -1,6 +1,21 @@
-import {observer} from "mobx"
+import {makeAutoObservable} from "mobx";
+
 class AuthStore {
+    isUserAuthorized: boolean = false
+    userLogin: string | null = null
+    userPassword: string | null = null
+
+    constructor() {
+        makeAutoObservable(this)
+    }
+
+    signInUser() {
+        this.isUserAuthorized = true
+    }
 
+    signOutUser() {
+        this.isUserAuthorized = false;
+    }
 }
 
 export default new AuthStore()
diff --git a/frontend/src/styles/authentication.css b/frontend/src/styles/authentication.css
diff --git a/frontend/src/styles/authentication.css.map b/frontend/src/styles/authentication.css.map
diff --git a/frontend/src/styles/authentication.scss b/frontend/src/styles/authentication.scss
@@ -1,4 +1,4 @@
-.auth_page {
+.auth-page {
   position: relative;
   top: 30%;
 }
@@ -19,19 +19,21 @@
   border-radius: 70px;
 }
 
-.auth_form_title {
+.auth-form-title {
   margin-top: 75px;
   font-size: 26px;
   color: #2B2A29;
 }
 
-.auth_fields {
-  margin: auto;
+.auth-fields {
   height: 170px;
   width: 58%;
+  border: none;
+  margin: auto auto 20px;
+  box-sizing: border-box;
 }
 
-.auth_data__field {
+.auth-data__field {
   margin-top: 15px;
   background: #B0B0B0;
   border-radius: 30px;