add LoginRoutes and CalenderRoutes

backend/app/main.py

@@ -26,6 +26,14 @@ def configure_application(
     configure_authentication(app, settings)
     configure_docs(app, settings)
     configure_templating(app, settings)
+
+    app.use_cors(
+        allow_methods="*",
+        allow_origins="*",
+        allow_headers="*",
+        max_age=300,
+    )
+
     return app
 
 

frontend/package.json

@@ -6,9 +6,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.7",
     "flatpickr": "^4.6.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.js

@@ -5,7 +5,7 @@ function App() {
     <div>
       <DatePicker/>
     </div>
-  );
+  );  
 }
 
 export default App;

frontend/src/components/Calendar.jsx → frontend/src/components/Calendar/Calendar.jsx

@@ -1,7 +1,7 @@
 import flatpickr from "flatpickr";
 import { useCallback, useRef } from "react";
 
-function Calendar() {
+const Calendar = () => {
     const fp1 = useRef();
 
     const inputRef = useCallback((node) => {

frontend/src/components/Calendar/DataPicker.jsx

@@ -0,0 +1,29 @@
+import React, { useRef, useEffect, useState } from 'react';
+import Flatpickr from 'flatpickr';
+import weekSelect from 'flatpickr';
+import 'flatpickr/dist/flatpickr.css';
+import flatpickr from 'flatpickr';
+
+const DatePicker = () => {
+  const datePickerRef = useRef(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);
+    }]
+    });
+  }, []);
+
+  return (
+    <div>
+      <input type="text" ref={datePickerRef} value={dateOnCalendar} onChange={(e) => setDateOnCalendar(e.target.value)}/>
+    </div>
+  );
+};
+
+export default DatePicker;

frontend/src/components/Login/ModeusLoginForm.jsx

@@ -0,0 +1,29 @@
+import { useState } from "react"
+import { loginModeus } from "../../services/api/login"
+
+const ModeusLoginForm = () => {
+    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;
+        }
+
+        localStorage.setItem('token', response.data?.token)
+    }
+
+    return (
+        <div>
+            <p>Modeus Login</p><br/>
+            <input id="email" type="email" onChange={(e) => setEmail(e.target.value)}/>
+            <input id="password" type="password" onChange={(e) => setPassword(e.target.value)}/>
+            <button id="login" onClick={onClickLogin}>Login</button>
+        </div>
+    )   
+}
+
+export default ModeusLoginForm

frontend/src/index.js

@@ -1,16 +1,35 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App';
+import {
+  createBrowserRouter,
+  RouterProvider,
+} from "react-router-dom";
+
 import reportWebVitals from './reportWebVitals';
+import LoginRoute from './routes/LoginRoute';
+import CalendarRoute from './routes/CalendarRoute';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <div>Hello world!</div>,
+  },
+  {
+    path: "/login",
+    element: <LoginRoute/>,
+  },
+  {
+    path: "/calendar",
+    element: <CalendarRoute/>
+  }
+]);
+
+
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();

frontend/src/routes/CalendarRoute.jsx

@@ -0,0 +1,12 @@
+import Calendar from "../components/Calendar/Calendar"
+import DataPicker from "../components/Calendar/DataPicker"
+
+const CalendarRoute = () => {
+    return (
+        <div>
+            <DataPicker/>
+        </div>
+    )   
+}
+
+export default CalendarRoute

frontend/src/routes/LoginRoute.jsx

@@ -0,0 +1,11 @@
+import ModeusLoginForm from "../components/Login/ModeusLoginForm"
+
+const LoginRoute = () => {
+    return (
+        <div>
+            <ModeusLoginForm/>
+        </div>
+    )   
+}
+
+export default LoginRoute

frontend/src/services/api/login.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+import { BACKEND_URL } from '../../variables';
+
+
+export function getTokenFromLocalStorage() {
+    return localStorage.getItem('token')
+}
+
+export async function loginModeus(username, password) {
+    try {
+        return await axios.post(`${BACKEND_URL}/api/modeus`, {username, password});
+    } catch (e) {
+        return e.response;
+    }
+} 

frontend/src/variables.js

@@ -0,0 +1 @@
+export const BACKEND_URL="http://localhost:8000"