add new ui

frontend/login.js

@@ -0,0 +1,58 @@
+function setStatus(msg, type = "info") {
+  const el = document.getElementById("status");
+  el.textContent = msg || "";
+  el.style.color = type === 'error' ? '#b91c1c' : type === 'ok' ? '#16a34a' : '';
+}
+
+function decodeRoleFromJWT(token) {
+  try {
+    const payload = JSON.parse(atob(token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/')));
+    return payload.role || null;
+  } catch { return null; }
+}
+
+async function login(username, password) {
+  const params = new URLSearchParams();
+  params.set('username', username);
+  params.set('password', password);
+  try {
+    const res = await fetch('/auth/token', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: params.toString(),
+    });
+    if (!res.ok) {
+      const txt = await res.text();
+      throw new Error(`Ошибка входа (${res.status}): ${txt}`);
+    }
+    const data = await res.json();
+    const token = data.access_token;
+    if (!token) throw new Error('Токен не получен');
+    localStorage.setItem('access_token', token);
+    const role = decodeRoleFromJWT(token);
+    if (role) localStorage.setItem('role', role);
+    return { token, role };
+  } catch (e) {
+    throw e;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const form = document.getElementById('login-form');
+  form.addEventListener('submit', async (ev) => {
+    ev.preventDefault();
+    setStatus('Входим…');
+    const username = document.getElementById('username').value.trim();
+    const password = document.getElementById('password').value;
+    try {
+      const { role } = await login(username, password);
+      setStatus(`Успешный вход${role ? ' (' + role + ')' : ''}`, 'ok');
+      // Небольшая задержка для визуального отклика
+      setTimeout(() => { window.location.href = '/app/'; }, 400);
+    } catch (e) {
+      console.error(e);
+      setStatus(e.message || 'Ошибка авторизации', 'error');
+    }
+  });
+});
+