Numerum/WEB_logistics
Numerum/WEB_logistics
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

._.

Browse Source
This commit is contained in:
Андрей Дувакин 2024-10-04 17:44:37 +05:00
parent 647facb74c
commit d37676f6f9
8 changed files with 146 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Парковка</title>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet"
/>
<body>
<div id="root"></div>
<script src="public/bundle.js"></script>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</html>

12
src/App.jsx
View File

@ -1,11 +1,17 @@
import React from 'react'; 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 = () => { const App = () => {
return ( return (
<div className="App"> <Router>
<AppRouter /> <AuthProvider>
<div>
<RoutesComponent />
</div> </div>
</AuthProvider>
</Router>
); );
}; };

22
src/AppRouter.jsx
View File

@ -1,14 +1,14 @@
import React from 'react'; import { Routes, Route, Navigate } from 'react-router-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Login from './pages/Login';
import PrivateRoute from './components/PrivateRoute';
const AppRouter = () => { const RoutesComponent = () => (
return ( <Routes>
<Router> <Route path="/login" element={<Login />} />
<Switch> <Route element={<PrivateRoute />}>
</Switch> </Route>
</Router> </Routes>
); );
};
export default AppRouter; export default RoutesComponent;

33
src/AuthContext.jsx Normal file
View File

@ -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 (
<AuthContext.Provider value={{ isAuthenticated, login, logout }}>
{children}
</AuthContext.Provider>
);
};

16
src/api.jsx
View File

@ -1,14 +1,12 @@
import axios from 'axios'; import axios from 'axios';
const API_URL = 'http://localhost:8000/api'; const API_URL = 'http://localhost:8000/api'; // Убедитесь, что этот URL правильный
export const getUsers = async () => { export const loginUser = async (loginData) => {
const response = await axios.get(`${API_URL}/users`); try {
return response.data; const response = await axios.post(`${API_URL}/login`, loginData);
};
export const createUser = async (userData) => {
const response = await axios.post(`${API_URL}/users`, userData);
return response.data; return response.data;
} catch (error) {
throw error.response.data;
}
}; };

11
src/components/PrivateRoute.jsx Normal file
View File

@ -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 ? <Outlet /> : <Navigate to="/login" />;
};
export default PrivateRoute;

6
src/pages/Home.jsx Normal file
View File

@ -0,0 +1,6 @@
import React, { useState, useEffect } from 'react';
const Home = () => {
return
}

51
src/pages/Login.jsx Normal file
View File

@ -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 (
<div>
<h2>Вход</h2>
{error && <p style={{ color: 'red' }}>{error}</p>}
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="login">Логин</label>
<input
type="text"
id="login"
value={login}
onChange={(e) => setLogin(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="password">Пароль</label>
<input
type="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit">Войти</button>
</form>
</div>
);
};
export default Login;