<!DOCTYPE html>
<html lang="ru"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/auth}">
<head>
<title>Вход</title>
</head>
<body>
<div layout:fragment="content">
<div class="auth-title">
<h2>Добро пожаловать!</h2>
<p>Войдите в свой аккаунт</p>
</div>
<form class="auth-form" method="post" th:action="@{/auth/login}">
<!-- Email -->
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-envelope"></i></span>
<input type="email"
class="form-control"
id="email"
name="email"
placeholder="your@email.com"
required
autofocus>
</div>
</div>
<!-- Password -->
<div class="mb-3">
<label for="password" class="form-label">Пароль</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-lock"></i></span>
<input type="password"
class="form-control"
id="password"
name="password"
placeholder="••••••••"
required>
<button type="button" class="btn btn-outline-secondary password-toggle" onclick="togglePassword('password')">
<i class="bi bi-eye" id="password-icon"></i>
</button>
</div>
</div>
<!-- Remember me & Forgot -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="remember-me" name="remember-me">
<label class="form-check-label" for="remember-me">Запомнить меня</label>
</div>
<a th:href="@{/auth/forgot-password}" class="auth-links">Забыли пароль?</a>
</div>
<!-- Submit -->
<button type="submit" class="btn btn-auth">
<i class="bi bi-box-arrow-in-right"></i>
Войти
</button>
</form>
<div class="auth-divider">
<span>или</span>
</div>
<div class="auth-links">
<p class="mb-0">Ещё нет аккаунта? <a th:href="@{/auth/register}">Зарегистрироваться</a></p>
</div>
</div>
<th:block layout:fragment="scripts">
<script>
function togglePassword(inputId) {
const input = document.getElementById(inputId);
const icon = document.getElementById(inputId + '-icon');
if (input.type === 'password') {
input.type = 'text';
icon.classList.remove('bi-eye');
icon.classList.add('bi-eye-slash');
} else {
input.type = 'password';
icon.classList.remove('bi-eye-slash');
icon.classList.add('bi-eye');
}
}
</script>
</th:block>
</body>
</html>
