._.

src/App.jsx

@@ -1,18 +1,18 @@
-import React from 'react';
+import React from "react";
-import RoutesComponent from './AppRouter.jsx';
+import RoutesComponent from "./AppRouter.jsx";
-import { AuthProvider } from './AuthContext.jsx';
+import { AuthProvider } from "./AuthContext.jsx";
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from "react-router-dom";
 
 const App = () => {
-    return (
+  return (
     <Router>
-        <AuthProvider>
+      <AuthProvider>
-            <div>
+        <div>
-            <RoutesComponent />
+          <RoutesComponent />
-            </div>
+        </div>
-        </AuthProvider>
+      </AuthProvider>
     </Router>
-    );
+  );
 };
 
 export default App;

src/AppRouter.jsx

@@ -1,14 +1,15 @@
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route, Navigate } from "react-router-dom";
-import Login from './pages/Login';
+import Login from "./pages/Login";
-import PrivateRoute from './components/PrivateRoute';
+import Home from "./pages/Home.jsx";
+import PrivateRoute from "./components/PrivateRoute";
 
 const RoutesComponent = () => (
-    <Routes>
+  <Routes>
-        <Route path="/login" element={<Login />} />
+    <Route path="/login" element={<Login />} />
-        <Route element={<PrivateRoute />}>
+    <Route element={<PrivateRoute />}>
-            <Route path='/' />
+      <Route path="/" element={<Home />} />
-        </Route>
+    </Route>
-    </Routes>
+  </Routes>
 );
 
 export default RoutesComponent;

src/AuthContext.jsx

@@ -1,34 +1,34 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useContext, useState, useEffect } from "react";
 
 const AuthContext = createContext();
 
 export const useAuth = () => {
-    return useContext(AuthContext); 
+  return useContext(AuthContext);
 };
 
 export const AuthProvider = ({ children }) => {
-    const [isAuthenticated, setIsAuthenticated] = useState(() => {
+  const [isAuthenticated, setIsAuthenticated] = useState(() => {
-        const savedAuth = localStorage.getItem('isAuthenticated');
+    const savedAuth = localStorage.getItem("isAuthenticated");
-        return savedAuth === 'true';
+    return savedAuth === "true";
-    });
+  });
 
-    const login = () => {
+  const login = () => {
-        setIsAuthenticated(true);
+    setIsAuthenticated(true);
-    };
+  };
 
-    const logout = () => {
+  const logout = () => {
-        setIsAuthenticated(false);
+    setIsAuthenticated(false);
-        localStorage.removeItem('token');  
+    localStorage.removeItem("token");
-        localStorage.removeItem('isAuthenticated');  
+    localStorage.removeItem("isAuthenticated");
-    };
+  };
 
-    useEffect(() => {
+  useEffect(() => {
-        localStorage.setItem('isAuthenticated', isAuthenticated);
+    localStorage.setItem("isAuthenticated", isAuthenticated);
-    }, [isAuthenticated]);
+  }, [isAuthenticated]);
 
-    return (
+  return (
-        <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
+    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
-            {children}
+      {children}
-        </AuthContext.Provider>
+    </AuthContext.Provider>
-    );
+  );
 };

src/api.jsx

@@ -1,44 +1,50 @@
-import axios from 'axios';
+import axios from "axios";
 
-const API_URL = 'http://localhost:8000/api'; 
+const API_URL = "http://localhost:8000/api";
 
 const getAuthToken = () => {
-    return localStorage.getItem('token');
+  return localStorage.getItem("token");
 };
 
 export const loginUser = async (loginData) => {
-    const params = new URLSearchParams();
+  const params = new URLSearchParams();
-    params.append('grant_type', 'password');
+  params.append("grant_type", "password");
-    params.append('username', loginData.login);  
+  params.append("username", loginData.login);
-    params.append('password', loginData.password);
+  params.append("password", loginData.password);
 
-    try {
+  try {
-        const response = await axios.post(`${API_URL}/token`, params, {
+    const response = await axios.post(`${API_URL}/token`, params, {
-            headers: {
+      headers: {
-                'Content-Type': 'application/x-www-form-urlencoded',
+        "Content-Type": "application/x-www-form-urlencoded",
-                'Accept': 'application/json',
+        Accept: "application/json",
-            },
+      },
-        });
+    });
-        console.log(response.data);
+    console.log(response.data);
-        return response.data;
+    return response.data;
-    } catch (error) {
+  } catch (error) {
-        console.log('Ошибка при запросе:', error.response ? error.response.data : error);
+    console.log(
-        throw error.response ? error.response.data : error;
+      "Ошибка при запросе:",
-    }
+      error.response ? error.response.data : error
+    );
+    throw error.response ? error.response.data : error;
+  }
 };
 
 export const getAccessories = async () => {
-    try {
+  try {
-        const token = getAuthToken();
+    const token = getAuthToken();
-        const response = await axios.get(`${API_URL}/accessories`, {
+    const response = await axios.get(`${API_URL}/accessories`, {
-            headers: {
+      headers: {
-                'Authorization': `Bearer ${token}`,  
+        Authorization: `Bearer ${token}`,
-                'Accept': 'application/json',
+        Accept: "application/json",
-            },
+      },
-        });
+    });
-        return response.data;
+    return response.data;
-    } catch (error) {
+  } catch (error) {
-        console.error('Ошибка при запросе аксессуаров:', error.response ? error.response.data : error);
+    console.error(
-        throw error.response ? error.response.data : error;
+      "Ошибка при запросе аксессуаров:",
-    }
+      error.response ? error.response.data : error
+    );
+    throw error.response ? error.response.data : error;
+  }
 };

src/components/PrivateRoute.jsx

@@ -1,15 +1,15 @@
-import React from 'react';
+import React from "react";
-import { Navigate, Outlet } from 'react-router-dom';
+import { Navigate, Outlet } from "react-router-dom";
-import { useAuth } from '../AuthContext.jsx';
+import { useAuth } from "../AuthContext.jsx";
 
 const PrivateRoute = () => {
-    const { isAuthenticated } = useAuth();
+  const { isAuthenticated } = useAuth();
 
-    if (isAuthenticated === null) {
+  if (isAuthenticated === null) {
-        return <div>Loading...</div>;
+    return <div>Loading...</div>;
-    }
+  }
 
-    return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
+  return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
 };
 
 export default PrivateRoute;

src/index.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import App from './App';
+import App from "./App";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-    <React.StrictMode>
+  <React.StrictMode>
-        <App />
+    <App />
-    </React.StrictMode>
+  </React.StrictMode>
 );

src/pages/Home.jsx

@@ -1,10 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
 const Home = () => {
+  return <div>sadvsgrhgrtshte</div>;
+};
 
-    return (
+export default Home;
-        <div>
-            sadvsgrhgrtshte
-        </div>
-    )
-}

src/pages/Login.jsx

@@ -1,59 +1,61 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import { loginUser } from '../api';
+import { loginUser } from "../api";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import { useAuth } from '../AuthContext';  // Подключаем AuthContext
+import { useAuth } from "../AuthContext";
 
 const Login = () => {
-    const [login, setLogin] = useState('');
+  const [login, setLogin] = useState("");
-    const [password, setPassword] = useState('');
+  const [password, setPassword] = useState("");
-    const [error, setError] = useState('');
+  const [error, setError] = useState("");
-    const navigate = useNavigate();
+  const navigate = useNavigate();
-    const { login: authenticate } = useAuth();  // Вытаскиваем метод login из контекста
+  const { login: authenticate } = useAuth();
 
-    const handleSubmit = async (e) => {
+  const handleSubmit = async (e) => {
-        e.preventDefault();
+    e.preventDefault();
 
-        try {
+    try {
-            const userData = await loginUser({ login, password });
+      const userData = await loginUser({ login, password });
-            localStorage.setItem('token', userData.access_token);
+      localStorage.setItem("token", userData.access_token);
-            authenticate();
+      authenticate();
-            navigate('/');
+      navigate("/");
-        } catch (error) {
+    } catch (error) {
-            setError(error.detail ? error.detail : 'Ошибка авторизации');
+      setError(error.detail ? error.detail : "Ошибка авторизации");
-        }
+    }
-    };
+  };
 
-    return (
+  return (
-        <div className="container mt-5">
+    <div className="container mt-5">
-            <h2 className="text-center">Вход</h2>
+      <h2 className="text-center">Вход</h2>
-            {error && <p className="text-danger text-center">{error}</p>}
+      {error && <p className="text-danger text-center">{error}</p>}
-            <form onSubmit={handleSubmit} className="border p-4 rounded shadow">
+      <form onSubmit={handleSubmit} className="border p-4 rounded shadow">
-                <div className="form-group">
+        <div className="form-group">
-                    <label htmlFor="login">Логин</label>
+          <label htmlFor="login">Логин</label>
-                    <input
+          <input
-                        type="text"
+            type="text"
-                        id="login"
+            id="login"
-                        className="form-control"
+            className="form-control"
-                        value={login}
+            value={login}
-                        onChange={(e) => setLogin(e.target.value)}
+            onChange={(e) => setLogin(e.target.value)}
-                        required
+            required
-                    />
+          />
-                </div>
-                <div className="form-group">
-                    <label htmlFor="password">Пароль</label>
-                    <input
-                        type="password"
-                        id="password"
-                        className="form-control"
-                        value={password}
-                        onChange={(e) => setPassword(e.target.value)}
-                        required
-                    />
-                </div>
-                <button type="submit" className="btn btn-primary btn-block">Войти</button>
-            </form>
         </div>
-    );
+        <div className="form-group">
+          <label htmlFor="password">Пароль</label>
+          <input
+            type="password"
+            id="password"
+            className="form-control"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+        <button type="submit" className="btn btn-primary btn-block">
+          Войти
+        </button>
+      </form>
+    </div>
+  );
 };
 
 export default Login;