diff --git a/README.md b/README.md index 01b29ce..c2bf608 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,13 @@ # YetAnotherCalendar +This product can replace Modeus calendar & Netology calendar. + +### [Backend readme.md](https://github.com/depocoder/YetAnotherCalendar/tree/main/backend) + +### [Frontend readme.md](https://github.com/depocoder/YetAnotherCalendar/tree/main/frontend) + +### How to run? +``` +docker-compose up +``` + diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 03efee6..224de35 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,9 +12,12 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.7.7", + "bootstrap": "^5.3.3", "flatpickr": "^4.6.13", "react": "^18.3.1", + "react-bootstrap": "^2.10.5", "react-dom": "^18.3.1", + "react-router": "^6.26.2", "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" @@ -3304,6 +3307,31 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.9.5", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz", + "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==", + "license": "Apache-2.0", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.19.2", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz", @@ -3312,7 +3340,48 @@ "node": ">=14.0.0" } }, - + "node_modules/@restart/hooks": { + "version": "0.4.16", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz", + "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==", + "license": "MIT", + "dependencies": { + "dequal": "^2.0.3" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.8.0.tgz", + "integrity": "sha512-xJEOXUOTmT4FngTmhdjKFRrVVF0hwCLNPdatLCHkyS4dkiSK12cEu1Y0fjxktjJrdst9jJIc5J6ihMJCoWEN/g==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", + "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", + "license": "MIT", + "peerDependencies": { + "react": ">=16.14.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3636,6 +3705,15 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.5.13", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz", + "integrity": "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", @@ -4419,6 +4497,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", + "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -4490,6 +4577,12 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz", "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==" }, + "node_modules/@types/warning": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", + "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==", + "license": "MIT" + }, "node_modules/@types/ws": { "version": "8.5.12", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.12.tgz", @@ -5824,6 +5917,25 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "node_modules/bootstrap": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz", + "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "license": "MIT", + "peerDependencies": { + "@popperjs/core": "^2.11.8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -6091,6 +6203,12 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz", "integrity": "sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==" }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", + "license": "MIT" + }, "node_modules/clean-css": { "version": "5.3.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz", @@ -6938,7 +7056,6 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", - "peer": true, "engines": { "node": ">=6" } @@ -7058,6 +7175,16 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -8511,7 +8638,8 @@ "node_modules/flatpickr": { "version": "4.6.13", "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz", - "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==" + "integrity": "sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==", + "license": "MIT" }, "node_modules/flatted": { "version": "3.3.1", @@ -9541,6 +9669,15 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", @@ -14623,6 +14760,25 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "license": "MIT", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, + "node_modules/prop-types-extra/node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" + }, "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -14803,6 +14959,36 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, + "node_modules/react-bootstrap": { + "version": "2.10.5", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.5.tgz", + "integrity": "sha512-XueAOEn64RRkZ0s6yzUTdpFtdUXs5L5491QU//8ZcODKJNDLt/r01tNyriZccjgRImH1REynUc9pqjiRMpDLWQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.24.7", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.9", + "@types/react-transition-group": "^4.4.6", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -14999,6 +15185,12 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", + "license": "MIT" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -15011,6 +15203,7 @@ "version": "6.26.2", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz", "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==", + "license": "MIT", "dependencies": { "@remix-run/router": "1.19.2" }, @@ -15025,6 +15218,7 @@ "version": "6.26.2", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz", "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==", + "license": "MIT", "dependencies": { "@remix-run/router": "1.19.2", "react-router": "6.26.2" @@ -15109,6 +15303,22 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "license": "BSD-3-Clause", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -17185,6 +17395,21 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/underscore": { "version": "1.12.1", "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz", @@ -17412,6 +17637,15 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 59992f8..a0f8521 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -7,9 +7,12 @@ "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.7.7", + "bootstrap": "^5.3.3", "flatpickr": "^4.6.13", "react": "^18.3.1", + "react-bootstrap": "^2.10.5", "react-dom": "^18.3.1", + "react-router": "^6.26.2", "react-router-dom": "^6.26.2", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" diff --git a/frontend/public/index.html b/frontend/public/index.html index aa069f2..8753b50 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -1,21 +1,21 @@ - + - - - - - - - - - - - React App - - - -
- - + --> diff --git a/frontend/public/logo192.png b/frontend/public/logo192.png index fc44b0a..722b9ca 100644 Binary files a/frontend/public/logo192.png and b/frontend/public/logo192.png differ diff --git a/frontend/src/App.js b/frontend/src/App.js index 7412c89..1fbb552 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,11 +1,11 @@ -import DatePicker from './components/DataPicker'; +import DatePicker from "./components/DataPicker"; function App() { return (
- +
- ); + ); } export default App; diff --git a/frontend/src/components/Calendar/Calendar.jsx b/frontend/src/components/Calendar/Calendar.jsx index b84c964..a2c9be1 100644 --- a/frontend/src/components/Calendar/Calendar.jsx +++ b/frontend/src/components/Calendar/Calendar.jsx @@ -2,18 +2,18 @@ import flatpickr from "flatpickr"; import { useCallback, useRef } from "react"; const Calendar = () => { - const fp1 = useRef(); + const fp1 = useRef(); - const inputRef = useCallback((node) => { - if (node !== null) { - fp1.current = flatpickr(node, { - enableTime: true, - dateFormat: "Y-m-d H:i", - }); - } - }, []); + const inputRef = useCallback((node) => { + if (node !== null) { + fp1.current = flatpickr(node, { + enableTime: true, + dateFormat: "Y-m-d H:i", + }); + } + }, []); - return (); -} + return ; +}; export default Calendar; diff --git a/frontend/src/components/Calendar/DataPicker.jsx b/frontend/src/components/Calendar/DataPicker.jsx index 05925b3..6bed40b 100644 --- a/frontend/src/components/Calendar/DataPicker.jsx +++ b/frontend/src/components/Calendar/DataPicker.jsx @@ -1,29 +1,41 @@ -import React, { useRef, useEffect, useState } from 'react'; -import Flatpickr from 'flatpickr'; -import weekSelect from 'flatpickr'; -import 'flatpickr/dist/flatpickr.css'; -import flatpickr from 'flatpickr'; +import React, { useRef, useEffect, useState } from "react"; +import Flatpickr from "flatpickr"; +import weekSelect from "flatpickr"; +import "flatpickr/dist/flatpickr.css"; +import flatpickr from "flatpickr"; +import { Russian } from "flatpickr/dist/l10n/ru.js"; const DatePicker = () => { const datePickerRef = useRef(null); - - const [dateOnCalendar, setDateOnCalendar] = useState("2024-09-19") - const [weekNumber, setWeekNumber] = useState(null) + + const [dateOnCalendar, setDateOnCalendar] = useState("2024-09-19"); + const [weekNumber, setWeekNumber] = useState(null); useEffect(() => { flatpickr(datePickerRef.current, { - "onChange": [() => { - setWeekNumber(this.selectedDates[0] ? setWeekNumber(this.selectedDates[0]) : null) - console.log(weekNumber); - }] + locale: Russian, + onChange: [ + () => { + setWeekNumber( + this.selectedDates[0] ? setWeekNumber(this.selectedDates[0]) : null, + ); + console.log(weekNumber); + }, + ], }); }, []); return (
- setDateOnCalendar(e.target.value)}/> + setDateOnCalendar(e.target.value)} + />
); }; - +flatpickr.l10ns.default.firstDayOfWeek = 1; export default DatePicker; diff --git a/frontend/src/components/Header/Header.js b/frontend/src/components/Header/Header.js new file mode 100644 index 0000000..2cdb4b7 --- /dev/null +++ b/frontend/src/components/Header/Header.js @@ -0,0 +1,17 @@ +import React from "react"; +import { useNavigate } from "react-router-dom"; + +export default function Header() { + const navigate = useNavigate(); + return ( +
+
+ Мое расписание + + +
+
+ ); +} diff --git a/frontend/src/components/Login/ModeusLoginForm.jsx b/frontend/src/components/Login/ModeusLoginForm.jsx index 46c8c65..7729912 100644 --- a/frontend/src/components/Login/ModeusLoginForm.jsx +++ b/frontend/src/components/Login/ModeusLoginForm.jsx @@ -1,29 +1,52 @@ -import { useState } from "react" -import { loginModeus } from "../../services/api/login" +import { useState } from "react"; +import { loginModeus } from "../../services/api/login"; const ModeusLoginForm = () => { - const [email, setEmail] = useState(null) - const [password, setPassword] = useState(null) + const [email, setEmail] = useState(null); + const [password, setPassword] = useState(null); - const onClickLogin = async() => { - let response = await loginModeus(email, password) - - if (response.status !== 200) { - alert("Ты лох, введи правильные креды") - return; - } + const onClickLogin = async () => { + let response = await loginModeus(email, password); - localStorage.setItem('token', response.data?.token) + if (response.status !== 200) { + alert("Ты лох, введи правильные креды"); + return; } - return ( -
-

Modeus Login


- setEmail(e.target.value)}/> - setPassword(e.target.value)}/> - -
- ) -} + localStorage.setItem("token", response.data?.token); + }; -export default ModeusLoginForm + return ( +
+
+ +
+
+ setEmail(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+
+ ); +}; + +export default ModeusLoginForm; diff --git a/frontend/src/index.css b/frontend/src/index.css index ec2585e..c0dba85 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1,13 +1,135 @@ +@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Unbounded:wght@200..900&display=swap"); +html { + height: 100%; +} + body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + height: 100%; + background: #fff; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} + +.wrapper { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + margin: 20px 120px; +} + +header .raspisanie { + font-family: "Unbounded", sans-serif; + font-weight: 500; + font-size: 32px; +} +header .export-btn { + cursor: pointer; + position: absolute; + margin-top: 6px; + width: 90px; + height: 28px; + background-color: #5856d6; + color: #fff; + text-decoration: none; + border: none; + border-radius: 6px; + padding: 4px 8px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-style: normal; + margin-left: 18px; + transition: color 0.2s linear; +} +header .export-btn:hover { + background-color: #4745b5; +} + +header .login-btn { + cursor: pointer; + float: right; + border: none; + margin-top: 6px; + background-color: #5856d6; + color: #fff; + text-decoration: none; + border-radius: 6px; + padding: 10px 20px; + font-family: "Roboto", sans-serif; + font-weight: 400; + transition: color 0.2s linear; +} + +header .login-btn:hover { + background-color: #4745b5; +} + +.input-email { + margin-top: 8px; + width: 320px; + height: 32px; + border-radius: 4px; + border-color: #d9d9d9; +} + +.login-btn-log { + margin-top: 8px; + width: 100px; + position: relative; + cursor: pointer; + border: none; + margin-top: 6px; + background-color: #5856d6; + color: #fff; + text-decoration: none; + border-radius: 6px; + padding: 10px 20px; + font-family: "Roboto", sans-serif; + font-weight: 400; + transition: color 0.2s linear; +} +.login-btn-log:hover { + background-color: #4745b5; +} + +.login-container { + display: flex; + align-items: center; + flex-direction: column; +} + +.login-netologiya { + margin-top: 24px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.calendar { + background-color: #ecedf0; + width: 406px; + height: 32px; + border-radius: 6px; + border: 1px solid rgba(217, 217, 217, 0.5); + font-family: "Unbounded", sans-serif; + font-weight: 500; + font-size: 15px; + padding-left: 14px; + transition: color 0.2s linear; +} +.calendar:hover { + background-color: #e7e7ea; } diff --git a/frontend/src/index.js b/frontend/src/index.js index b0319bc..5b3ffe8 100644 --- a/frontend/src/index.js +++ b/frontend/src/index.js @@ -1,35 +1,56 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; +import React from "react"; +import ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider, + Routes, + Route, + Router, } from "react-router-dom"; -import reportWebVitals from './reportWebVitals'; -import LoginRoute from './routes/LoginRoute'; -import CalendarRoute from './routes/CalendarRoute'; +import reportWebVitals from "./reportWebVitals"; +import LoginRoute from "./routes/LoginRoute"; +import CalendarRoute from "./routes/CalendarRoute"; -const root = ReactDOM.createRoot(document.getElementById('root')); +import Header from "./components/Header/Header"; +import "./index.css"; + +const root = ReactDOM.createRoot(document.getElementById("root")); const router = createBrowserRouter([ { path: "/", - element:
Hello world!
, + element: ( +
+
+
+ ), }, { path: "/login", - element: , + element: , }, { path: "/calendar", - element: - } + element: , + }, ]); - root.render( - + , ); +const App = () => { + return ( + + + + } /> + + + + ); +}; + reportWebVitals();