аутентификация к веб админке

This commit is contained in:
vrubelroman 2025-11-23 02:36:15 +03:00
parent 595c9419f4
commit e6967db17d
6 changed files with 282 additions and 2 deletions

View file

@ -282,7 +282,10 @@
<div class="container">
<!-- Левая панель: Пользователи -->
<div class="panel users-panel">
<h1>👥 Пользователи</h1>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h1 style="margin: 0;">👥 Пользователи</h1>
<a href="/logout" style="padding: 8px 16px; background: #8B6F47; color: white; text-decoration: none; border-radius: 8px; font-size: 14px; transition: background 0.3s;" onmouseover="this.style.background='#6B5432'" onmouseout="this.style.background='#8B6F47'">Выход</a>
</div>
<div class="stats">
Всего пользователей: <strong id="total-users">0</strong> (сегодня: <strong id="users-today">0</strong>)<br>

View file

@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Вход в админ-панель</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #D2B48C;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.login-container {
background: #F5E6D3;
border-radius: 15px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
}
h1 {
color: #5C4033;
margin-bottom: 30px;
text-align: center;
font-size: 28px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
color: #5C4033;
margin-bottom: 8px;
font-weight: 600;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="text"]:focus,
input[type="password"]:focus {
outline: none;
border-color: #8B6F47;
}
.error-message {
background: #f8d7da;
color: #721c24;
padding: 12px;
border-radius: 8px;
margin-bottom: 20px;
display: none;
}
.error-message.show {
display: block;
}
button {
width: 100%;
padding: 14px;
background: #8B6F47;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #6B5432;
}
button:active {
transform: scale(0.98);
}
</style>
</head>
<body>
<div class="login-container">
<h1>🔐 Вход в админ-панель</h1>
<div class="error-message" id="error-message"></div>
<form method="POST" action="/login" id="login-form">
{% if error %}
<div class="error-message show">{{ error }}</div>
{% endif %}
<div class="form-group">
<label for="username">Логин:</label>
<input type="text" id="username" name="username" required autofocus>
</div>
<div class="form-group">
<label for="password">Пароль:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Войти</button>
</form>
</div>
<script>
// Показываем ошибку, если она есть в URL
const urlParams = new URLSearchParams(window.location.search);
const error = urlParams.get('error');
if (error) {
const errorDiv = document.getElementById('error-message');
errorDiv.textContent = decodeURIComponent(error);
errorDiv.classList.add('show');
}
// Обработка отправки формы
document.getElementById('login-form').addEventListener('submit', function(e) {
const username = document.getElementById('username').value.trim();
const password = document.getElementById('password').value;
if (!username || !password) {
e.preventDefault();
const errorDiv = document.getElementById('error-message');
errorDiv.textContent = 'Пожалуйста, заполните все поля';
errorDiv.classList.add('show');
return false;
}
});
</script>
</body>
</html>