Remake

Добавил авторизацию в приложение, сделал регистарцию, добавил мидлы

frontend/Dockerfile

@@ -13,9 +13,26 @@ FROM nginx:stable-alpine
 
 COPY --from=build /app/dist /usr/share/nginx/html
 
+
 COPY <<EOF /etc/nginx/conf.d/default.conf
 server {
     listen 89;
+
+    location /register {
+        proxy_pass http://backend:8090; 
+        proxy_set_header Host \$host;
+    }
+
+    location /login {
+        proxy_pass http://backend:8090; 
+        proxy_set_header Host \$host;
+    }
+
+    location /api {
+        proxy_pass http://backend:8090;
+    }
+
+    # Сама статика React
     location / {
         root /usr/share/nginx/html;
         index index.html;

frontend/src/App.jsx

@@ -1,15 +1,48 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import Dashboard from "./pages/Dashboard";
 import PartDetail from "./pages/PartDetail";
 import AddPartPage from "./pages/AddPartPage";
+import AuthForm from "./components/AuthForm";
+
+const PrivateRoute = ({ children }) => {
+  const token = localStorage.getItem("token");
+
+  if (!token) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+};
 
 export default function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Dashboard />} />
-        <Route path="/part/:id" element={<PartDetail />} />
-        <Route path="/add" element={<AddPartPage />} />
+        <Route path="/login" element={<AuthForm />} />
+        <Route
+          path="/"
+          element={
+            <PrivateRoute>
+              <Dashboard />
+            </PrivateRoute>
+          }
+        />
+        <Route
+          path="/part/:id"
+          element={
+            <PrivateRoute>
+              <PartDetail />
+            </PrivateRoute>
+          }
+        />
+        <Route
+          path="/add"
+          element={
+            <PrivateRoute>
+              <AddPartPage />
+            </PrivateRoute>
+          }
+        />
       </Routes>
     </BrowserRouter>
   );

frontend/src/api/index.js

@@ -3,6 +3,30 @@ import Papa from "papaparse";
 
 const API_URL = "/api";
 
+axios.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+axios.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response && error.response.status === 401) {
+      localStorage.removeItem("token");
+      window.location.href = "/login";
+    }
+    return Promise.reject(error);
+  },
+);
+
 // Базовые CRUD операции
 export const getAllParts = () => axios.get(`${API_URL}/parts`);
 export const getAllOrders = () => axios.get(`${API_URL}/orders`);

frontend/src/components/AuthForm.jsx

@@ -0,0 +1,98 @@
+import { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+const AuthForm = () => {
+  const [isLogin, setIsLogin] = useState(true);
+  const [formData, setFormData] = useState({ username: "", password: "" });
+  const [message, setMessage] = useState({ text: "", isError: false });
+  const navigate = useNavigate();
+
+  const API_BASE = "";
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setMessage({ text: "", isError: false });
+
+    const endpoint = isLogin ? "/login" : "/register";
+
+    try {
+      const { data } = await axios.post(`${API_BASE}${endpoint}`, formData);
+
+      if (isLogin) {
+        localStorage.setItem("token", data.token);
+        navigate("/");
+      } else {
+        setMessage({
+          text: "Регистрация успешна! Теперь войдите",
+          isError: false,
+        });
+        setIsLogin(true);
+      }
+    } catch (err) {
+      setMessage({
+        text: err.response?.data?.error || "Ошибка сервера",
+        isError: true,
+      });
+    }
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 px-4">
+      <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-10 shadow-md">
+        <h2 className="text-center text-3xl font-bold text-gray-900">
+          {isLogin ? "Вход в MRP" : "Регистрация"}
+        </h2>
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="rounded-md shadow-sm -space-y-px">
+            <input
+              type="text"
+              required
+              className="relative block w-full rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 focus:z-10 focus:border-blue-500 focus:outline-none sm:text-sm"
+              placeholder="Логин"
+              onChange={(e) =>
+                setFormData({ ...formData, username: e.target.value })
+              }
+            />
+            <input
+              type="password"
+              required
+              className="relative block w-full rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 focus:z-10 focus:border-blue-500 focus:outline-none sm:text-sm"
+              placeholder="Пароль"
+              onChange={(e) =>
+                setFormData({ ...formData, password: e.target.value })
+              }
+            />
+          </div>
+
+          {message.text && (
+            <p
+              className={`text-sm ${message.isError ? "text-red-500" : "text-green-500"}`}
+            >
+              {message.text}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            className="group relative flex w-full justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none"
+          >
+            {isLogin ? "Войти" : "Зарегистрироваться"}
+          </button>
+        </form>
+
+        <div className="text-center">
+          <button
+            onClick={() => setIsLogin(!isLogin)}
+            className="text-sm text-blue-600 hover:text-blue-500"
+          >
+            {isLogin ? "Нет аккаунта? Создать" : "Уже есть аккаунт? Войти"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthForm;