From 5b16c67af9bea9a1a376c9a6620c6751b4e8a940 Mon Sep 17 00:00:00 2001
From: host <arumyantsev@rummail.ru>
Date: Sun, 9 Aug 2026 14:23:29 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20frontend-=D1=8D=D0=BA=D1=80=D0=B0=D0=BD=D1=8B=20?=
 =?UTF-8?q?=D0=B2=D1=85=D0=BE=D0=B4=D0=B0=20=D0=B8=20=D1=80=D0=B5=D0=B3?=
 =?UTF-8?q?=D0=B8=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/main.jsx | 60 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 6 deletions(-)

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 841dc61..660859e 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,21 +1,69 @@
-import React from "react";
+import React, { useState } from "react";
 import { createRoot } from "react-dom/client";
+import { getMe, login, register } from "./api";
 import "./styles.css";
 
 function App() {
+  const [mode, setMode] = useState("login");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [message, setMessage] = useState("");
+  const [user, setUser] = useState(null);
+
+  async function handleSubmit(event) {
+    event.preventDefault();
+    setMessage("");
+    try {
+      if (mode === "register") {
+        await register(email, password);
+        setMessage("Регистрация завершена. Теперь войдите.");
+        setMode("login");
+        return;
+      }
+      const tokenData = await login(email, password);
+      const currentUser = await getMe(tokenData.access_token);
+      setUser(currentUser);
+      setMessage(`Вы вошли как ${currentUser.role}.`);
+    } catch (error) {
+      setMessage(error.message);
+    }
+  }
+
   return (
     <main className="page">
       <section className="card">
         <h1>Proxmox VPS Panel</h1>
-        <p>Защищённая версия панели готова к подключению API.</p>
-        <p className="muted">Следующий этап — перенос экранов авторизации, шаблонов и инстансов.</p>
+        {user ? (
+          <>
+            <p>Добро пожаловать, {user.email}</p>
+            <p className="muted">Роль: {user.role}</p>
+            <button type="button" onClick={() => setUser(null)}>Выйти</button>
+          </>
+        ) : (
+          <>
+            <h2>{mode === "login" ? "Вход" : "Регистрация"}</h2>
+            <form onSubmit={handleSubmit}>
+              <label>
+                Email
+                <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
+              </label>
+              <label>
+                Пароль
+                <input type="password" minLength={12} value={password} onChange={(event) => setPassword(event.target.value)} required />
+              </label>
+              <button type="submit">{mode === "login" ? "Войти" : "Зарегистрироваться"}</button>
+            </form>
+            <button className="link" type="button" onClick={() => setMode(mode === "login" ? "register" : "login")}>
+              {mode === "login" ? "Создать аккаунт" : "У меня уже есть аккаунт"}
+            </button>
+          </>
+        )}
+        {message && <p className="message">{message}</p>}
       </section>
     </main>
   );
 }
 
 createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+  <React.StrictMode><App /></React.StrictMode>,
 );