184 lines
8.7 KiB
HTML
184 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Вход в систему - Склад-Менеджер</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="css/style.css" rel="stylesheet">
|
|
</head>
|
|
<body class="d-flex flex-column min-vh-100">
|
|
<div class="login-container flex-grow-1">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<i class="fas fa-warehouse fa-3x mb-3"></i>
|
|
<h2>Склад-Менеджер</h2>
|
|
<p class="mb-0">Система управления складом</p>
|
|
</div>
|
|
<div class="login-body">
|
|
<form id="loginForm" novalidate>
|
|
<div class="mb-3">
|
|
<label for="username" class="form-label">
|
|
<i class="fas fa-user me-2"></i>Имя пользователя
|
|
</label>
|
|
<input type="text" class="form-control" id="username" required
|
|
placeholder="Введите имя пользователя" autocomplete="username">
|
|
<div class="invalid-feedback" id="usernameError"></div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="password" class="form-label">
|
|
<i class="fas fa-lock me-2"></i>Пароль
|
|
</label>
|
|
<input type="password" class="form-control" id="password" required
|
|
placeholder="Введите пароль" autocomplete="current-password">
|
|
<div class="invalid-feedback" id="passwordError"></div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary w-100 mb-3" id="loginBtn">
|
|
<i class="fas fa-sign-in-alt me-2"></i>Войти в систему
|
|
</button>
|
|
<div id="loginLoading" class="text-center" style="display: none;">
|
|
<div class="loading-spinner text-primary mb-2"></div>
|
|
<small class="text-muted">Выполняется вход...</small>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Информация о тестовых пользователях -->
|
|
<div class="mt-4">
|
|
<h6 class="text-muted mb-3">
|
|
<i class="fas fa-info-circle me-2"></i>Тестовые учетные записи:
|
|
</h6>
|
|
<div class="row">
|
|
<div class="col-12 mb-2">
|
|
<small class="text-muted">
|
|
<strong>Администратор:</strong> admin / admin123
|
|
</small>
|
|
</div>
|
|
<div class="col-12 mb-2">
|
|
<small class="text-muted">
|
|
<strong>Менеджер:</strong> manager / manager123
|
|
</small>
|
|
</div>
|
|
<div class="col-12 mb-2">
|
|
<small class="text-muted">
|
|
<strong>Оператор:</strong> operator / operator123
|
|
</small>
|
|
</div>
|
|
<div class="col-12">
|
|
<small class="text-muted">
|
|
<strong>Наблюдатель:</strong> viewer / viewer123
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Информация о правах доступа -->
|
|
<div class="mt-4 p-3 bg-light rounded">
|
|
<h6 class="text-muted mb-2">
|
|
<i class="fas fa-shield-alt me-2"></i>Уровни доступа:
|
|
</h6>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<small class="text-muted">
|
|
<strong>Администратор:</strong><br>
|
|
Полный доступ ко всем функциям
|
|
</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<small class="text-muted">
|
|
<strong>Менеджер:</strong><br>
|
|
Чтение и запись данных
|
|
</small>
|
|
</div>
|
|
<div class="col-6 mt-2">
|
|
<small class="text-muted">
|
|
<strong>Оператор:</strong><br>
|
|
Только чтение данных
|
|
</small>
|
|
</div>
|
|
<div class="col-6 mt-2">
|
|
<small class="text-muted">
|
|
<strong>Наблюдатель:</strong><br>
|
|
Ограниченный просмотр
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-dark text-white py-3 mt-auto">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<small>
|
|
<i class="fas fa-shield-alt me-2"></i>Безопасная система авторизации
|
|
</small>
|
|
</div>
|
|
<div class="col-md-6 text-md-end">
|
|
<p class="mb-0">© 2025 Склад-Менеджер. Все права защищены.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Скрипты -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
|
|
<script src="js/auth.js"></script>
|
|
|
|
<!-- Дополнительный JavaScript для улучшения UX -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Обработка формы входа с улучшенной валидацией
|
|
$('#loginForm').on('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Сброс ошибок
|
|
$('.form-control').removeClass('is-invalid');
|
|
$('.invalid-feedback').hide();
|
|
|
|
const username = $('#username').val().trim();
|
|
const password = $('#password').val().trim();
|
|
let hasErrors = false;
|
|
|
|
// Валидация имени пользователя
|
|
if (!username) {
|
|
$('#username').addClass('is-invalid');
|
|
$('#usernameError').text('Введите имя пользователя').show();
|
|
hasErrors = true;
|
|
}
|
|
|
|
// Валидация пароля
|
|
if (!password) {
|
|
$('#password').addClass('is-invalid');
|
|
$('#passwordError').text('Введите пароль').show();
|
|
hasErrors = true;
|
|
}
|
|
|
|
if (hasErrors) {
|
|
return;
|
|
}
|
|
|
|
// Показываем индикатор загрузки
|
|
$('#loginBtn').prop('disabled', true);
|
|
$('#loginLoading').show();
|
|
|
|
// Вызываем метод входа из auth.js
|
|
auth.login();
|
|
});
|
|
|
|
// Убираем ошибки при вводе
|
|
$('.form-control').on('input', function() {
|
|
$(this).removeClass('is-invalid');
|
|
$(this).siblings('.invalid-feedback').hide();
|
|
});
|
|
|
|
// Автофокус на поле имени пользователя
|
|
$('#username').focus();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |