Bans page: users-style table with badges, client-side pagination, manual ban modal (POST /api/bans with ip/reason/hours), unban row buttons

This commit is contained in:
dev
2026-09-12 00:59:32 +03:00
parent 7dd816cfce
commit 5aee2ce3f5
3 changed files with 140 additions and 37 deletions
+56 -16
View File
@@ -12,24 +12,55 @@
<div class="main">
<div class="page-head">
<h2>Блокировки IP</h2>
<p class="page-sub">IP автоматически блокируется на 24 часа: за заполнение скрытого антиспам-поля, за 10 неудачных попыток входа или 10 неверных паролей на защищённой ссылке</p>
<p class="page-sub">Автобан на 24 часа за антиспам и брутфорс. Здесь можно разбанить или добавить вручную</p>
</div>
<div class="trash-head">
<span class="trash-muted" id="bansInfo"></span>
<button class="btn-primary ghost" id="refreshBtn" type="button"><i data-lucide="refresh-cw"></i> Обновить</button>
<div class="actions-row" style="margin-bottom:16px">
<button class="btn-primary" id="addBanBtn" type="button">
<span style="font-size:1.2rem">+</span> Забанить IP вручную
</button>
</div>
<div class="audit-wrap">
<table class="audit-table" id="bansTable">
<thead>
<tr>
<th>IP</th>
<th>Причина</th>
<th>Заблокирован</th>
<th>Разблокируется</th>
<th></th>
</tr>
</thead>
<tbody id="bansBody"></tbody>
</table>
<div class="empty" id="bansEmpty" style="display:none">Активных блокировок нет</div>
</div>
<div class="pager" id="pager"></div>
</div>
</div>
<div class="modal-overlay" id="banModal">
<div class="edit-modal" style="max-width:440px">
<h3>Заблокировать IP</h3>
<div class="settings-stack" style="gap:12px;max-width:none">
<div class="settings-field">
<label>IP-адрес <span style="color:#ef4444">*</span></label>
<input type="text" id="bIp" class="settings-input" placeholder="например: 185.220.101.34" autocomplete="off">
</div>
<div class="settings-field">
<label>Причина</label>
<input type="text" id="bReason" class="settings-input" placeholder="например: Спам с этого адреса" autocomplete="off">
</div>
<div class="settings-field">
<label>Срок (часов, 1–720)</label>
<input type="number" id="bHours" class="settings-input" min="1" max="720" value="24">
</div>
<div class="card-foot" style="justify-content:flex-end;border-top:none;padding-top:0">
<button type="button" class="btn-primary ghost" id="bCancel">Отмена</button>
<button type="button" class="btn-primary" id="bSave">Заблокировать</button>
</div>
</div>
<table class="audit-table" id="bansTable">
<thead>
<tr>
<th>IP</th>
<th>Причина</th>
<th>Заблокирован</th>
<th>Разблокируется</th>
<th></th>
</tr>
</thead>
<tbody id="bansBody"><tr><td colspan="5">Загрузка…</td></tr></tbody>
</table>
</div>
</div>
@@ -37,5 +68,14 @@
<script src="vendor/lucide.min.js"></script>
<script src="admin.js"></script>
<script src="js/bans.js"></script>
<style>
.reason-badge{font-size:.7rem;font-weight:600;padding:2px 10px;border-radius:999px;white-space:nowrap}
.reason-honeypot{color:#ea580c;background:rgba(234,88,12,.12)}
.reason-login-bruteforce,.reason-share-password-bruteforce{color:#7c3aed;background:rgba(124,58,237,.12)}
.reason-manual{color:#ef4444;background:rgba(239,68,68,.12)}
.row-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.05rem;padding:4px 8px;border-radius:6px}
.row-btn:hover{background:var(--bg);color:var(--accent)}
</style>
</body>
</html>