219 lines
6.6 KiB
HTML
219 lines
6.6 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Вход в систему</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<style>
|
||
.login-page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||
}
|
||
.login-box {
|
||
background: white;
|
||
padding: 40px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
|
||
width: 100%;
|
||
max-width: 400px;
|
||
}
|
||
.login-box h1 {
|
||
font-size: 24px;
|
||
color: #1e3a5f;
|
||
text-align: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
.login-box .subtitle {
|
||
text-align: center;
|
||
color: #666;
|
||
margin-bottom: 32px;
|
||
font-size: 14px;
|
||
}
|
||
.login-box .form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
.login-box label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
.login-box input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
}
|
||
.login-box button {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: #1e3a5f;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 6px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
}
|
||
.login-box button:hover {
|
||
background: #2c5282;
|
||
}
|
||
.login-box .error {
|
||
background: #fef2f2;
|
||
color: #dc2626;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
display: none;
|
||
}
|
||
.login-box .loading {
|
||
background: #dbeafe;
|
||
color: #1e40af;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
display: none;
|
||
}
|
||
.demo-users {
|
||
margin-top: 24px;
|
||
padding-top: 24px;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
.demo-users h3 {
|
||
font-size: 14px;
|
||
color: #666;
|
||
margin-bottom: 12px;
|
||
}
|
||
.demo-users table {
|
||
width: 100%;
|
||
font-size: 12px;
|
||
border-collapse: collapse;
|
||
}
|
||
.demo-users td {
|
||
padding: 6px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.demo-users td:first-child {
|
||
font-weight: 500;
|
||
color: #1e3a5f;
|
||
}
|
||
.demo-users td:last-child {
|
||
color: #888;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="login-page">
|
||
<div class="login-box">
|
||
<h1>Контроль исполнения поручений СД</h1>
|
||
<p class="subtitle">Войдите для продолжения работы</p>
|
||
|
||
<div class="loading" id="loadingMsg">Проверка...</div>
|
||
<div class="error" id="errorMsg"></div>
|
||
|
||
<form id="loginForm">
|
||
<div class="form-group">
|
||
<label for="login">Логин</label>
|
||
<input type="text" id="login" name="login" required placeholder="Введите логин">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="password">Пароль</label>
|
||
<input type="password" id="password" name="password" required placeholder="Введите пароль">
|
||
</div>
|
||
<button type="submit" id="submitBtn">Войти</button>
|
||
</form>
|
||
|
||
<div class="demo-users">
|
||
<h3>Тестовые пользователи:</h3>
|
||
<table>
|
||
<tr><td>admin</td><td>admin</td><td>Администратор</td></tr>
|
||
<tr><td>pmo</td><td>pmo</td><td>Сотрудник ПО</td></tr>
|
||
<tr><td>ivanov</td><td>123</td><td>РМ</td></tr>
|
||
<tr><td>executor</td><td>123</td><td>Исполнитель</td></tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Проверка: если уже авторизован — редирект на дашборд
|
||
const saved = localStorage.getItem("sdCurrentUser");
|
||
if (saved) {
|
||
window.location = "index.html";
|
||
}
|
||
|
||
// Встроенные пользователи (резервный вариант если API не работает)
|
||
const USERS = [
|
||
{ login: "admin", password: "admin", role: "admin", name: "Администратор" },
|
||
{ login: "pmo", password: "pmo", role: "pmo", name: "Сотрудник ПО" },
|
||
{ login: "ivanov", password: "123", role: "rm", name: "Иванов А.С." },
|
||
{ login: "petrova", password: "123", role: "rm", name: "Петрова В.И." },
|
||
{ login: "executor", password: "123", role: "executor", name: "Исполнитель" }
|
||
];
|
||
|
||
document.getElementById("loginForm").addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
const login = document.getElementById("login").value;
|
||
const password = document.getElementById("password").value;
|
||
const btn = document.getElementById("submitBtn");
|
||
const errorEl = document.getElementById("errorMsg");
|
||
const loadingEl = document.getElementById("loadingMsg");
|
||
|
||
btn.disabled = true;
|
||
btn.textContent = "Проверка...";
|
||
errorEl.style.display = "none";
|
||
loadingEl.style.display = "block";
|
||
|
||
try {
|
||
// Пробуем через API
|
||
const res = await fetch("/api/login", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ login, password })
|
||
});
|
||
|
||
if (res.ok) {
|
||
const result = await res.json();
|
||
if (result.ok) {
|
||
localStorage.setItem("sdCurrentUser", JSON.stringify(result.user));
|
||
window.location = "index.html";
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Если API не сработало — проверяем локально
|
||
const user = USERS.find(u => u.login === login && u.password === password);
|
||
if (user) {
|
||
localStorage.setItem("sdCurrentUser", JSON.stringify(user));
|
||
window.location = "index.html";
|
||
} else {
|
||
throw new Error("Неверный логин или пароль");
|
||
}
|
||
} catch (err) {
|
||
// Фоллбэк на локальную проверку
|
||
const user = USERS.find(u => u.login === login && u.password === password);
|
||
if (user) {
|
||
localStorage.setItem("sdCurrentUser", JSON.stringify(user));
|
||
window.location = "index.html";
|
||
} else {
|
||
errorEl.textContent = "Неверный логин или пароль";
|
||
errorEl.style.display = "block";
|
||
}
|
||
} finally {
|
||
loadingEl.style.display = "none";
|
||
btn.disabled = false;
|
||
btn.textContent = "Войти";
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|