From d37676f6f9d6fc7e54b243b65a0fa348b88d4c4a Mon Sep 17 00:00:00 2001 From: andrei Date: Fri, 4 Oct 2024 17:44:37 +0500 Subject: [PATCH] ._. --- public/index.html | 15 ++++++++++ src/App.jsx | 14 ++++++--- src/AppRouter.jsx | 24 ++++++++-------- src/AuthContext.jsx | 33 +++++++++++++++++++++ src/api.jsx | 18 ++++++------ src/components/PrivateRoute.jsx | 11 +++++++ src/pages/Home.jsx | 6 ++++ src/pages/Login.jsx | 51 +++++++++++++++++++++++++++++++++ 8 files changed, 146 insertions(+), 26 deletions(-) create mode 100644 public/index.html create mode 100644 src/AuthContext.jsx create mode 100644 src/components/PrivateRoute.jsx create mode 100644 src/pages/Home.jsx create mode 100644 src/pages/Login.jsx diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..b082434 --- /dev/null +++ b/public/index.html @@ -0,0 +1,15 @@ + + + + + Парковка + + +
+ + + + diff --git a/src/App.jsx b/src/App.jsx index 4f05f3c..508150f 100755 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,11 +1,17 @@ import React from 'react'; -import AppRouter from './AppRouter'; +import RoutesComponent from './AppRouter.jsx'; +import { AuthProvider } from './AuthContext.jsx'; +import { BrowserRouter as Router } from 'react-router-dom'; const App = () => { return ( -
- -
+ + +
+ +
+ + ); }; diff --git a/src/AppRouter.jsx b/src/AppRouter.jsx index 6ca9a16..e11411a 100755 --- a/src/AppRouter.jsx +++ b/src/AppRouter.jsx @@ -1,14 +1,14 @@ -import React from 'react'; -import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; +import { Routes, Route, Navigate } from 'react-router-dom'; +import Login from './pages/Login'; +import PrivateRoute from './components/PrivateRoute'; -const AppRouter = () => { - return ( - - - - - - ); -}; +const RoutesComponent = () => ( + + } /> + }> + + + +); -export default AppRouter; \ No newline at end of file +export default RoutesComponent; diff --git a/src/AuthContext.jsx b/src/AuthContext.jsx new file mode 100644 index 0000000..318ecde --- /dev/null +++ b/src/AuthContext.jsx @@ -0,0 +1,33 @@ +import React, { createContext, useContext, useState, useEffect } from 'react'; + +const AuthContext = createContext(); + +export const useAuth = () => { + return useContext(AuthContext); +}; + +export const AuthProvider = ({ children }) => { + const [isAuthenticated, setIsAuthenticated] = useState(() => { + const savedAuth = localStorage.getItem('isAuthenticated'); + return savedAuth === 'true'; + }); + + const login = () => { + setIsAuthenticated(true); + }; + + const logout = () => { + setIsAuthenticated(false); + }; + + useEffect(() => { + localStorage.setItem('isAuthenticated', isAuthenticated); + }, [isAuthenticated]); + + return ( + + {children} + + ); +}; + diff --git a/src/api.jsx b/src/api.jsx index 7b00f4b..aa4d6cb 100755 --- a/src/api.jsx +++ b/src/api.jsx @@ -1,14 +1,12 @@ import axios from 'axios'; -const API_URL = 'http://localhost:8000/api'; +const API_URL = 'http://localhost:8000/api'; // Убедитесь, что этот URL правильный -export const getUsers = async () => { - const response = await axios.get(`${API_URL}/users`); - return response.data; -}; - - -export const createUser = async (userData) => { - const response = await axios.post(`${API_URL}/users`, userData); - return response.data; +export const loginUser = async (loginData) => { + try { + const response = await axios.post(`${API_URL}/login`, loginData); + return response.data; + } catch (error) { + throw error.response.data; + } }; \ No newline at end of file diff --git a/src/components/PrivateRoute.jsx b/src/components/PrivateRoute.jsx new file mode 100644 index 0000000..0b45d13 --- /dev/null +++ b/src/components/PrivateRoute.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Navigate, Outlet } from 'react-router-dom'; +import { useAuth } from '../AuthContext.jsx'; + +const PrivateRoute = () => { + const { isAuthenticated } = useAuth(); + + return isAuthenticated ? : ; +}; + +export default PrivateRoute; diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx new file mode 100644 index 0000000..d5a8b4a --- /dev/null +++ b/src/pages/Home.jsx @@ -0,0 +1,6 @@ +import React, { useState, useEffect } from 'react'; + +const Home = () => { + + return +} \ No newline at end of file diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx new file mode 100644 index 0000000..e23a9a8 --- /dev/null +++ b/src/pages/Login.jsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import { loginUser } from '../api'; + +const Login = () => { + const [login, setLogin] = useState(''); + const [password, setPassword] = useState(''); + const [error, setError] = useState(''); + + const handleSubmit = async (e) => { + e.preventDefault(); + + try { + const userData = await loginUser({ login, password }); + + } catch (error) { + setError(error.detail ? error.detail : 'Ошибка авторизации'); + } + }; + + return ( +
+

Вход

+ {error &&

{error}

} +
+
+ + setLogin(e.target.value)} + required + /> +
+
+ + setPassword(e.target.value)} + required + /> +
+ +
+
+ ); +}; + +export default Login;