._.
This commit is contained in:
parent
647facb74c
commit
d37676f6f9
15
public/index.html
Normal file
15
public/index.html
Normal 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
12
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 (
|
||||
<div className="App">
|
||||
<AppRouter />
|
||||
<Router>
|
||||
<AuthProvider>
|
||||
<div>
|
||||
<RoutesComponent />
|
||||
</div>
|
||||
</AuthProvider>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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 (
|
||||
<Router>
|
||||
<Switch>
|
||||
const RoutesComponent = () => (
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route element={<PrivateRoute />}>
|
||||
|
||||
</Switch>
|
||||
</Router>
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppRouter;
|
||||
export default RoutesComponent;
|
||||
|
||||
33
src/AuthContext.jsx
Normal file
33
src/AuthContext.jsx
Normal 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
16
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);
|
||||
export const loginUser = async (loginData) => {
|
||||
try {
|
||||
const response = await axios.post(`${API_URL}/login`, loginData);
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw error.response.data;
|
||||
}
|
||||
};
|
||||
11
src/components/PrivateRoute.jsx
Normal file
11
src/components/PrivateRoute.jsx
Normal 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
6
src/pages/Home.jsx
Normal file
@ -0,0 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
const Home = () => {
|
||||
|
||||
return
|
||||
}
|
||||
51
src/pages/Login.jsx
Normal file
51
src/pages/Login.jsx
Normal 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;
|
||||
Loading…
x
Reference in New Issue
Block a user