From 0c40c7959042e6e95f6dfd608458c6462ef6822d Mon Sep 17 00:00:00 2001 From: mihail323i21 Date: Wed, 8 Nov 2023 00:03:00 +0500 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D1=83=20=D0=B0=D0=B2=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D0=B8,=20=D0=BD=D0=BE...?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit почему-то не работает observer на файлике с маршрутами и я не могу разделить пути на приватные и публичные --- .../customCheckbox/CustomCheckbox.tsx | 42 ++++--- .../customCheckbox/customCheckbox.css | 8 +- .../customCheckbox/customCheckbox.css.map | 2 +- .../customCheckbox/customCheckbox.scss | 8 +- frontend/src/components/MapMenu/MapMenu.tsx | 2 +- .../authentication/Authentication.tsx | 20 ++-- frontend/src/routes/AppRouter.tsx | 42 ++++--- frontend/src/store/authStore.ts | 17 ++- frontend/src/styles/authentication.css | 16 +-- frontend/src/styles/authentication.css.map | 2 +- frontend/src/styles/authentication.scss | 12 +- package-lock.json | 103 ++++++++++++++++++ package.json | 7 ++ 13 files changed, 218 insertions(+), 63 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/frontend/src/UIComponents/customCheckbox/CustomCheckbox.tsx b/frontend/src/UIComponents/customCheckbox/CustomCheckbox.tsx index fe18c1c..7eff21a 100644 --- 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 = ({text, id, additionalClassName, handleOnChange}) => { const [isChecked, changeIsChecked] = useState(false); - const onChange = () => { + const onChangeHandler = () => { changeIsChecked(!isChecked) if (handleOnChange) handleOnChange() } return ( -
- {isChecked ? : } +
+ {isChecked ? : } + checked={isChecked} + onChange={() => ""} + />
); }; -const Checkbox: React.FC = () => { +const Checkbox: React.FC = ({classContainer}) => { return ( - - - +
+ + + +
) } -const CheckboxActive: React.FC = () => { +const CheckboxActive: React.FC = ({classContainer}) => { return ( - - - - +
+ + + + +
); }; diff --git a/frontend/src/UIComponents/customCheckbox/customCheckbox.css b/frontend/src/UIComponents/customCheckbox/customCheckbox.css index 65fae25..34bf3b9 100644 --- a/frontend/src/UIComponents/customCheckbox/customCheckbox.css +++ b/frontend/src/UIComponents/customCheckbox/customCheckbox.css @@ -11,8 +11,14 @@ margin-left: 10px; } -.custom_checkbox { +.custom-checkbox { position: absolute; + display: inline-flex; + align-items: center; +} + +.svg-container { + cursor: pointer; } /*# sourceMappingURL=customCheckbox.css.map */ diff --git a/frontend/src/UIComponents/customCheckbox/customCheckbox.css.map b/frontend/src/UIComponents/customCheckbox/customCheckbox.css.map index 473c96c..911f474 100644 --- a/frontend/src/UIComponents/customCheckbox/customCheckbox.css.map +++ b/frontend/src/UIComponents/customCheckbox/customCheckbox.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["customCheckbox.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"customCheckbox.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["customCheckbox.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE","file":"customCheckbox.css"} \ No newline at end of file diff --git a/frontend/src/UIComponents/customCheckbox/customCheckbox.scss b/frontend/src/UIComponents/customCheckbox/customCheckbox.scss index c9d3274..b790759 100644 --- 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 index 8e17edf..d3b6513 100644 --- 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 (
- + asd
); }; diff --git a/frontend/src/components/authentication/Authentication.tsx b/frontend/src/components/authentication/Authentication.tsx index 1a501e3..1f3c981 100644 --- 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 ( -
+
-

АВТОРИЗАЦИЯ

-
-
+

АВТОРИЗАЦИЯ

+
+
-
+
{isPasswordShows ? : }
-
+
- null}/> + navigateTo('/')}>
diff --git a/frontend/src/routes/AppRouter.tsx b/frontend/src/routes/AppRouter.tsx index e6edce3..d24e955 100644 --- 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(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: } ] const privateRoutes: RouteType[] = [ - { - id: "1", - path: '/', - element: - }, - { - id: "2", - path: 'authentication', - element: - }, { id: "3", - path: 'map', + path: '/map', element: } ] + // Здесь будет логика авторизации пользователя + + return (
- - {isUserAuthorized - ? privateRoutes.map(({path, element, id}) => ) - : publicRoutes.map(({path, element, id}) => ) - } - {publicRoutes.map(({path, element, id}) => )} - + { + authStore.isUserAuthorized + ? {privateRoutes.map(({path, element, id}) => + )} + : {publicRoutes.map(({path, element, id}) => + )} + }
); -}; +}) + export default AppRouter; diff --git a/frontend/src/store/authStore.ts b/frontend/src/store/authStore.ts index 4b30906..2808207 100644 --- 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 index f26b523..577c838 100644 --- a/frontend/src/styles/authentication.css +++ b/frontend/src/styles/authentication.css @@ -1,4 +1,4 @@ -.auth_page { +.auth-page { position: relative; top: 30%; } @@ -23,24 +23,26 @@ } } -.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; } -.auth_data__field > input { +.auth-data__field > input { font-size: 16px; color: #F5F5F5; left: 10%; @@ -49,7 +51,7 @@ background: none; border: none; } -.auth_data__field > input:focus { +.auth-data__field > input:focus { border: none; outline: none; } diff --git a/frontend/src/styles/authentication.css.map b/frontend/src/styles/authentication.css.map index 1f02b93..9201561 100644 --- a/frontend/src/styles/authentication.css.map +++ b/frontend/src/styles/authentication.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["authentication.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EASE;EACA;EACA;EACA;EACA;;AAZA;EADF;IAEI;IACA;;;AAEF;EALF;IAMI;IACA;;;;AASJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA","file":"authentication.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["authentication.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EASE;EACA;EACA;EACA;EACA;;AAZA;EADF;IAEI;IACA;;;AAEF;EALF;IAMI;IACA;;;;AASJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA","file":"authentication.css"} \ No newline at end of file diff --git a/frontend/src/styles/authentication.scss b/frontend/src/styles/authentication.scss index 70a1517..27f9582 100644 --- 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; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..6fb97b9 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,103 @@ +{ + "name": "adaptify", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "mobx": "^6.10.2", + "mobx-react-lite": "^4.0.5", + "react-dom": "^18.2.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/mobx": { + "version": "6.10.2", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.10.2.tgz", + "integrity": "sha512-B1UGC3ieK3boCjnMEcZSwxqRDMdzX65H/8zOHbuTY8ZhvrIjTUoLRR2TP2bPqIgYRfb3+dUigu8yMZufNjn0LQ==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mobx" + } + }, + "node_modules/mobx-react-lite": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-4.0.5.tgz", + "integrity": "sha512-StfB2wxE8imKj1f6T8WWPf4lVMx3cYH9Iy60bbKXEs21+HQ4tvvfIBZfSmMXgQAefi8xYEwQIz4GN9s0d2h7dg==", + "dependencies": { + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mobx" + }, + "peerDependencies": { + "mobx": "^6.9.0", + "react": "^16.8.0 || ^17 || ^18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" + } + }, + "node_modules/scheduler": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..c6927dc --- /dev/null +++ b/package.json @@ -0,0 +1,7 @@ +{ + "dependencies": { + "mobx": "^6.10.2", + "mobx-react-lite": "^4.0.5", + "react-dom": "^18.2.0" + } +}