kin: BATON-005-frontend_dev
This commit is contained in:
Gros Frumos
parent
fac6a0976d
commit
3e8e83481c
3 changed files with 725 additions and 0 deletions
379
frontend/admin.html
Normal file
379
frontend/admin.html
Normal file
|
|
@ -0,0 +1,379 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Baton — Admin</title>
|
||||||
|
<style>
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #000000;
|
||||||
|
--bg2: #0d0d0d;
|
||||||
|
--text: #ffffff;
|
||||||
|
--muted: #9ca3af;
|
||||||
|
--input-bg: #1a1a1a;
|
||||||
|
--border: #374151;
|
||||||
|
--border-focus: #6b7280;
|
||||||
|
--btn-bg: #374151;
|
||||||
|
--btn-hover: #4b5563;
|
||||||
|
--danger: #991b1b;
|
||||||
|
--danger-hover: #7f1d1d;
|
||||||
|
--warn: #78350f;
|
||||||
|
--warn-hover: #92400e;
|
||||||
|
--success-bg: #14532d;
|
||||||
|
--blocked-row: #1c1008;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Token screen ===== */
|
||||||
|
|
||||||
|
#screen-token {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-card {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 360px;
|
||||||
|
background: var(--bg2);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px 28px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Panel screen ===== */
|
||||||
|
|
||||||
|
#screen-panel { display: none; flex-direction: column; min-height: 100vh; }
|
||||||
|
#screen-panel.active { display: flex; }
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 16px 20px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 700;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-body {
|
||||||
|
flex: 1;
|
||||||
|
overflow: auto;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Table ===== */
|
||||||
|
|
||||||
|
.users-wrap {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
min-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead tr {
|
||||||
|
background: var(--bg2);
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--muted);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-bottom: 1px solid #1f2937;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.is-blocked td { background: var(--blocked-row); }
|
||||||
|
|
||||||
|
tr:hover td { background: #111827; }
|
||||||
|
tr.is-blocked:hover td { background: #231508; }
|
||||||
|
|
||||||
|
.col-id { width: 50px; color: var(--muted); }
|
||||||
|
.col-uuid { max-width: 120px; font-family: monospace; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||||
|
.col-date { white-space: nowrap; color: var(--muted); font-size: 12px; }
|
||||||
|
.col-actions { white-space: nowrap; }
|
||||||
|
|
||||||
|
.empty-row td {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--muted);
|
||||||
|
padding: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Badges ===== */
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 2px 8px;
|
||||||
|
border-radius: 9999px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge--active { background: #14532d; color: #4ade80; }
|
||||||
|
.badge--blocked { background: #7f1d1d; color: #fca5a5; }
|
||||||
|
|
||||||
|
/* ===== Inputs ===== */
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"] {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 14px;
|
||||||
|
background: var(--input-bg);
|
||||||
|
border: 1.5px solid var(--border);
|
||||||
|
border-radius: 10px;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 15px;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input::placeholder { color: var(--muted); }
|
||||||
|
input:focus { border-color: var(--border-focus); }
|
||||||
|
|
||||||
|
/* ===== Buttons ===== */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 10px 18px;
|
||||||
|
background: var(--btn-bg);
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover:not(:disabled) { background: var(--btn-hover); }
|
||||||
|
.btn:disabled { opacity: 0.4; cursor: default; }
|
||||||
|
.btn--full { width: 100%; }
|
||||||
|
.btn--danger { background: var(--danger); }
|
||||||
|
.btn--danger:hover:not(:disabled) { background: var(--danger-hover); }
|
||||||
|
|
||||||
|
/* Small inline buttons */
|
||||||
|
.btn-sm {
|
||||||
|
padding: 4px 10px;
|
||||||
|
background: var(--btn-bg);
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: var(--text);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sm:last-child { margin-right: 0; }
|
||||||
|
.btn-sm:hover { background: var(--btn-hover); }
|
||||||
|
.btn-sm--danger { background: var(--danger); }
|
||||||
|
.btn-sm--danger:hover { background: var(--danger-hover); }
|
||||||
|
.btn-sm--warn { background: var(--warn); }
|
||||||
|
.btn-sm--warn:hover { background: var(--warn-hover); }
|
||||||
|
|
||||||
|
/* ===== Error / info messages ===== */
|
||||||
|
|
||||||
|
.msg-error {
|
||||||
|
color: #f87171;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-info {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== Modals ===== */
|
||||||
|
|
||||||
|
.modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.75);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-backdrop[hidden] { display: none; }
|
||||||
|
|
||||||
|
.modal-box {
|
||||||
|
background: var(--bg2);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 28px 24px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-subtitle {
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-top: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions .btn { flex: 1; }
|
||||||
|
|
||||||
|
/* ===== Label ===== */
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field { display: flex; flex-direction: column; gap: 4px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ===== Token screen ===== -->
|
||||||
|
<div id="screen-token">
|
||||||
|
<div class="login-card">
|
||||||
|
<h1 class="login-title">Baton Admin</h1>
|
||||||
|
<p class="login-subtitle">Введите токен для доступа</p>
|
||||||
|
<input type="password" id="token-input" placeholder="Admin token" autocomplete="current-password">
|
||||||
|
<button type="button" id="btn-login" class="btn btn--full">Войти</button>
|
||||||
|
<p id="login-error" class="msg-error" hidden></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== Admin panel screen ===== -->
|
||||||
|
<div id="screen-panel">
|
||||||
|
<header class="panel-header">
|
||||||
|
<h1 class="panel-title">Пользователи</h1>
|
||||||
|
<button type="button" id="btn-create" class="btn">+ Создать</button>
|
||||||
|
<button type="button" id="btn-logout" class="btn">Выйти</button>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="panel-body">
|
||||||
|
<p id="panel-error" class="msg-error" hidden></p>
|
||||||
|
|
||||||
|
<div class="users-wrap">
|
||||||
|
<table id="users-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="col-id">#</th>
|
||||||
|
<th>Имя</th>
|
||||||
|
<th class="col-uuid">UUID</th>
|
||||||
|
<th>Статус</th>
|
||||||
|
<th class="col-date">Создан</th>
|
||||||
|
<th class="col-actions">Действия</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="users-tbody">
|
||||||
|
<tr class="empty-row"><td colspan="6">Загрузка…</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== Modal: change password ===== -->
|
||||||
|
<div id="modal-password" class="modal-backdrop" hidden>
|
||||||
|
<div class="modal-box">
|
||||||
|
<h2 class="modal-title">Сменить пароль</h2>
|
||||||
|
<p id="modal-pw-subtitle" class="modal-subtitle"></p>
|
||||||
|
<input type="hidden" id="modal-pw-user-id">
|
||||||
|
<div class="field">
|
||||||
|
<div class="field-label">Новый пароль</div>
|
||||||
|
<input type="password" id="new-password" placeholder="Минимум 1 символ" autocomplete="new-password">
|
||||||
|
</div>
|
||||||
|
<p id="modal-pw-error" class="msg-error" hidden></p>
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button type="button" id="btn-pw-cancel" class="btn">Отмена</button>
|
||||||
|
<button type="button" id="btn-pw-save" class="btn">Сохранить</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===== Modal: create user ===== -->
|
||||||
|
<div id="modal-create" class="modal-backdrop" hidden>
|
||||||
|
<div class="modal-box">
|
||||||
|
<h2 class="modal-title">Создать пользователя</h2>
|
||||||
|
<div class="field">
|
||||||
|
<div class="field-label">UUID</div>
|
||||||
|
<input type="text" id="create-uuid" autocomplete="off" spellcheck="false">
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="field-label">Имя</div>
|
||||||
|
<input type="text" id="create-name" placeholder="Имя пользователя" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<div class="field-label">Пароль (необязательно)</div>
|
||||||
|
<input type="password" id="create-password" placeholder="Оставьте пустым если не нужен" autocomplete="new-password">
|
||||||
|
</div>
|
||||||
|
<p id="create-error" class="msg-error" hidden></p>
|
||||||
|
<div class="modal-actions">
|
||||||
|
<button type="button" id="btn-create-cancel" class="btn">Отмена</button>
|
||||||
|
<button type="button" id="btn-create-submit" class="btn">Создать</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="/admin.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
333
frontend/admin.js
Normal file
333
frontend/admin.js
Normal file
|
|
@ -0,0 +1,333 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// ========== Token (sessionStorage — cleared on browser close) ==========
|
||||||
|
|
||||||
|
function _getToken() {
|
||||||
|
return sessionStorage.getItem('baton_admin_token') || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function _saveToken(t) {
|
||||||
|
sessionStorage.setItem('baton_admin_token', t);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _clearToken() {
|
||||||
|
sessionStorage.removeItem('baton_admin_token');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== API wrapper ==========
|
||||||
|
|
||||||
|
async function _api(method, path, body) {
|
||||||
|
const opts = {
|
||||||
|
method,
|
||||||
|
headers: { 'Authorization': 'Bearer ' + _getToken() },
|
||||||
|
};
|
||||||
|
if (body !== undefined) {
|
||||||
|
opts.headers['Content-Type'] = 'application/json';
|
||||||
|
opts.body = JSON.stringify(body);
|
||||||
|
}
|
||||||
|
|
||||||
|
const res = await fetch(path, opts);
|
||||||
|
|
||||||
|
if (res.status === 204) return null;
|
||||||
|
|
||||||
|
const text = await res.text().catch(() => '');
|
||||||
|
if (!res.ok) {
|
||||||
|
let detail = text;
|
||||||
|
try { detail = JSON.parse(text).detail || text; } catch (_) {}
|
||||||
|
throw new Error('HTTP ' + res.status + (detail ? ': ' + detail : ''));
|
||||||
|
}
|
||||||
|
|
||||||
|
try { return JSON.parse(text); } catch (_) { return null; }
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== UI helpers ==========
|
||||||
|
|
||||||
|
function _esc(str) {
|
||||||
|
return String(str)
|
||||||
|
.replace(/&/g, '&')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>')
|
||||||
|
.replace(/"/g, '"');
|
||||||
|
}
|
||||||
|
|
||||||
|
function _setError(id, msg) {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
el.textContent = msg;
|
||||||
|
el.hidden = !msg;
|
||||||
|
}
|
||||||
|
|
||||||
|
function _showPanel() {
|
||||||
|
document.getElementById('screen-token').style.display = 'none';
|
||||||
|
document.getElementById('screen-panel').classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
function _showTokenScreen() {
|
||||||
|
document.getElementById('screen-panel').classList.remove('active');
|
||||||
|
document.getElementById('screen-token').style.display = '';
|
||||||
|
document.getElementById('token-input').value = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Users table ==========
|
||||||
|
|
||||||
|
function _renderTable(users) {
|
||||||
|
const tbody = document.getElementById('users-tbody');
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
|
||||||
|
if (!users.length) {
|
||||||
|
const tr = document.createElement('tr');
|
||||||
|
tr.className = 'empty-row';
|
||||||
|
tr.innerHTML = '<td colspan="6">Нет пользователей</td>';
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
users.forEach((u) => {
|
||||||
|
const tr = document.createElement('tr');
|
||||||
|
if (u.is_blocked) tr.classList.add('is-blocked');
|
||||||
|
|
||||||
|
const date = u.created_at ? u.created_at.slice(0, 16).replace('T', ' ') : '—';
|
||||||
|
const uuidShort = u.uuid ? u.uuid.slice(0, 8) + '…' : '—';
|
||||||
|
|
||||||
|
tr.innerHTML = `
|
||||||
|
<td class="col-id">${u.id}</td>
|
||||||
|
<td>${_esc(u.name)}</td>
|
||||||
|
<td class="col-uuid" title="${_esc(u.uuid)}">${_esc(uuidShort)}</td>
|
||||||
|
<td>
|
||||||
|
<span class="badge ${u.is_blocked ? 'badge--blocked' : 'badge--active'}">
|
||||||
|
${u.is_blocked ? 'Заблокирован' : 'Активен'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="col-date">${_esc(date)}</td>
|
||||||
|
<td class="col-actions">
|
||||||
|
<button class="btn-sm"
|
||||||
|
data-action="password"
|
||||||
|
data-id="${u.id}"
|
||||||
|
data-name="${_esc(u.name)}">Пароль</button>
|
||||||
|
<button class="btn-sm ${u.is_blocked ? 'btn-sm--warn' : ''}"
|
||||||
|
data-action="block"
|
||||||
|
data-id="${u.id}"
|
||||||
|
data-blocked="${u.is_blocked ? '1' : '0'}">
|
||||||
|
${u.is_blocked ? 'Разблокировать' : 'Заблокировать'}
|
||||||
|
</button>
|
||||||
|
<button class="btn-sm btn-sm--danger"
|
||||||
|
data-action="delete"
|
||||||
|
data-id="${u.id}"
|
||||||
|
data-name="${_esc(u.name)}">Удалить</button>
|
||||||
|
</td>
|
||||||
|
`;
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Load users ==========
|
||||||
|
|
||||||
|
async function _loadUsers() {
|
||||||
|
_setError('panel-error', '');
|
||||||
|
try {
|
||||||
|
const users = await _api('GET', '/admin/users');
|
||||||
|
_renderTable(users);
|
||||||
|
} catch (err) {
|
||||||
|
_setError('panel-error', err.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Login / Logout ==========
|
||||||
|
|
||||||
|
async function _handleLogin() {
|
||||||
|
const input = document.getElementById('token-input');
|
||||||
|
const btn = document.getElementById('btn-login');
|
||||||
|
const token = input.value.trim();
|
||||||
|
if (!token) return;
|
||||||
|
|
||||||
|
btn.disabled = true;
|
||||||
|
_setError('login-error', '');
|
||||||
|
_saveToken(token);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const users = await _api('GET', '/admin/users');
|
||||||
|
_renderTable(users);
|
||||||
|
_showPanel();
|
||||||
|
} catch (err) {
|
||||||
|
_clearToken();
|
||||||
|
const msg = err.message.includes('401') ? 'Неверный токен' : err.message;
|
||||||
|
_setError('login-error', msg);
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function _handleLogout() {
|
||||||
|
_clearToken();
|
||||||
|
_showTokenScreen();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Table action dispatcher (event delegation) ==========
|
||||||
|
|
||||||
|
async function _handleTableClick(e) {
|
||||||
|
const btn = e.target.closest('[data-action]');
|
||||||
|
if (!btn) return;
|
||||||
|
|
||||||
|
const { action, id, name, blocked } = btn.dataset;
|
||||||
|
|
||||||
|
if (action === 'password') {
|
||||||
|
_openPasswordModal(id, name);
|
||||||
|
} else if (action === 'block') {
|
||||||
|
await _toggleBlock(id, blocked === '1');
|
||||||
|
} else if (action === 'delete') {
|
||||||
|
await _handleDelete(id, name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Block / Unblock ==========
|
||||||
|
|
||||||
|
async function _toggleBlock(userId, currentlyBlocked) {
|
||||||
|
_setError('panel-error', '');
|
||||||
|
try {
|
||||||
|
await _api('PUT', `/admin/users/${userId}/block`, { is_blocked: !currentlyBlocked });
|
||||||
|
await _loadUsers();
|
||||||
|
} catch (err) {
|
||||||
|
_setError('panel-error', err.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Delete ==========
|
||||||
|
|
||||||
|
async function _handleDelete(userId, userName) {
|
||||||
|
if (!confirm(`Удалить пользователя "${userName}"?\n\nБудут удалены все его сигналы. Действие нельзя отменить.`)) return;
|
||||||
|
_setError('panel-error', '');
|
||||||
|
try {
|
||||||
|
await _api('DELETE', `/admin/users/${userId}`);
|
||||||
|
await _loadUsers();
|
||||||
|
} catch (err) {
|
||||||
|
_setError('panel-error', err.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Password modal ==========
|
||||||
|
|
||||||
|
function _openPasswordModal(userId, userName) {
|
||||||
|
document.getElementById('modal-pw-subtitle').textContent = `Пользователь: ${userName}`;
|
||||||
|
document.getElementById('modal-pw-user-id').value = userId;
|
||||||
|
document.getElementById('new-password').value = '';
|
||||||
|
_setError('modal-pw-error', '');
|
||||||
|
document.getElementById('btn-pw-save').disabled = false;
|
||||||
|
document.getElementById('modal-password').hidden = false;
|
||||||
|
document.getElementById('new-password').focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _closePasswordModal() {
|
||||||
|
document.getElementById('modal-password').hidden = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function _handleSetPassword() {
|
||||||
|
const userId = document.getElementById('modal-pw-user-id').value;
|
||||||
|
const password = document.getElementById('new-password').value;
|
||||||
|
const btn = document.getElementById('btn-pw-save');
|
||||||
|
|
||||||
|
if (!password) {
|
||||||
|
_setError('modal-pw-error', 'Введите пароль');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.disabled = true;
|
||||||
|
_setError('modal-pw-error', '');
|
||||||
|
|
||||||
|
try {
|
||||||
|
await _api('PUT', `/admin/users/${userId}/password`, { password });
|
||||||
|
_closePasswordModal();
|
||||||
|
} catch (err) {
|
||||||
|
_setError('modal-pw-error', err.message);
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Create user modal ==========
|
||||||
|
|
||||||
|
function _openCreateModal() {
|
||||||
|
document.getElementById('create-uuid').value = crypto.randomUUID();
|
||||||
|
document.getElementById('create-name').value = '';
|
||||||
|
document.getElementById('create-password').value = '';
|
||||||
|
_setError('create-error', '');
|
||||||
|
document.getElementById('btn-create-submit').disabled = false;
|
||||||
|
document.getElementById('modal-create').hidden = false;
|
||||||
|
document.getElementById('create-name').focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
function _closeCreateModal() {
|
||||||
|
document.getElementById('modal-create').hidden = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function _handleCreateUser() {
|
||||||
|
const uuid = document.getElementById('create-uuid').value.trim();
|
||||||
|
const name = document.getElementById('create-name').value.trim();
|
||||||
|
const password = document.getElementById('create-password').value;
|
||||||
|
const btn = document.getElementById('btn-create-submit');
|
||||||
|
|
||||||
|
if (!uuid || !name) {
|
||||||
|
_setError('create-error', 'UUID и имя обязательны');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
btn.disabled = true;
|
||||||
|
_setError('create-error', '');
|
||||||
|
|
||||||
|
const body = { uuid, name };
|
||||||
|
if (password) body.password = password;
|
||||||
|
|
||||||
|
try {
|
||||||
|
await _api('POST', '/admin/users', body);
|
||||||
|
_closeCreateModal();
|
||||||
|
await _loadUsers();
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err.message.includes('409') ? 'Пользователь с таким UUID уже существует' : err.message;
|
||||||
|
_setError('create-error', msg);
|
||||||
|
btn.disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== Init ==========
|
||||||
|
|
||||||
|
function _init() {
|
||||||
|
// Login screen
|
||||||
|
document.getElementById('btn-login').addEventListener('click', _handleLogin);
|
||||||
|
document.getElementById('token-input').addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter') _handleLogin();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Panel
|
||||||
|
document.getElementById('btn-logout').addEventListener('click', _handleLogout);
|
||||||
|
document.getElementById('btn-create').addEventListener('click', _openCreateModal);
|
||||||
|
|
||||||
|
// Table (event delegation)
|
||||||
|
document.getElementById('users-table').addEventListener('click', _handleTableClick);
|
||||||
|
|
||||||
|
// Password modal
|
||||||
|
document.getElementById('btn-pw-cancel').addEventListener('click', _closePasswordModal);
|
||||||
|
document.getElementById('btn-pw-save').addEventListener('click', _handleSetPassword);
|
||||||
|
document.getElementById('new-password').addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter') _handleSetPassword();
|
||||||
|
});
|
||||||
|
document.getElementById('modal-password').addEventListener('click', (e) => {
|
||||||
|
if (e.target.id === 'modal-password') _closePasswordModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create modal
|
||||||
|
document.getElementById('btn-create-cancel').addEventListener('click', _closeCreateModal);
|
||||||
|
document.getElementById('btn-create-submit').addEventListener('click', _handleCreateUser);
|
||||||
|
document.getElementById('create-password').addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter') _handleCreateUser();
|
||||||
|
});
|
||||||
|
document.getElementById('modal-create').addEventListener('click', (e) => {
|
||||||
|
if (e.target.id === 'modal-create') _closeCreateModal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto-login if token is already saved in sessionStorage
|
||||||
|
if (_getToken()) {
|
||||||
|
_showPanel();
|
||||||
|
_loadUsers().catch(() => {
|
||||||
|
_clearToken();
|
||||||
|
_showTokenScreen();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', _init);
|
||||||
|
|
@ -78,6 +78,19 @@ server {
|
||||||
proxy_set_header X-Forwarded-Proto $scheme;
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
# Admin API → FastAPI (UI-страница /admin.html раздаётся статикой ниже)
|
||||||
|
location /admin/users {
|
||||||
|
proxy_pass http://127.0.0.1:8000;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
|
||||||
|
proxy_read_timeout 30s;
|
||||||
|
proxy_send_timeout 30s;
|
||||||
|
proxy_connect_timeout 5s;
|
||||||
|
}
|
||||||
|
|
||||||
# Статика фронтенда (SPA)
|
# Статика фронтенда (SPA)
|
||||||
location / {
|
location / {
|
||||||
root /opt/baton/frontend;
|
root /opt/baton/frontend;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue