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> |