109 lines
5.1 KiB
HTML
109 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Login</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Flowbite -->
|
|
<script src="https://unpkg.com/flowbite@2.3.0/dist/flowbite.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
};
|
|
</script>
|
|
</head>
|
|
<body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center">
|
|
|
|
<div class="w-full max-w-sm p-6 bg-gray-800 rounded-2xl shadow-lg">
|
|
<h2 class="text-2xl font-bold mb-6 text-center text-white">Login</h2>
|
|
|
|
<!-- Display Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="mb-4">
|
|
{% for category, message in messages %}
|
|
<div class="text-sm p-3 rounded-md {{ 'bg-red-600' if category == 'error' else 'bg-green-600' }} text-white">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form method="POST" novalidate>
|
|
{{ form.hidden_tag() }}
|
|
|
|
<!-- Username Field -->
|
|
<div class="mb-4">
|
|
<label for="user_name" class="block text-sm font-medium mb-1 text-gray-200">
|
|
{{ form.user_name.label.text }}
|
|
</label>
|
|
{{ form.user_name(class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500") }}
|
|
{% for error in form.user_name.errors %}
|
|
<p class="text-red-400 text-sm mt-1">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Password Field with Toggle -->
|
|
<div class="mb-6">
|
|
<label for="password" class="block text-sm font-medium mb-1 text-gray-200">
|
|
{{ form.password.label.text }}
|
|
</label>
|
|
<div class="relative">
|
|
{{ form.password(
|
|
class="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500",
|
|
id="password"
|
|
) }}
|
|
<button type="button"
|
|
onclick="togglePassword()"
|
|
class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-white"
|
|
tabindex="-1"
|
|
aria-label="Toggle password visibility">
|
|
<svg id="eyeIcon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
{% for error in form.password.errors %}
|
|
<p class="text-red-400 text-sm mt-1">{{ error }}</p>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div>
|
|
<button type="submit"
|
|
class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-300">
|
|
Log In
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Password Toggle Script -->
|
|
<script>
|
|
function togglePassword() {
|
|
const passwordInput = document.getElementById("password");
|
|
const icon = document.getElementById("eyeIcon");
|
|
const isHidden = passwordInput.type === "password";
|
|
passwordInput.type = isHidden ? "text" : "password";
|
|
icon.innerHTML = isHidden
|
|
? `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.542-7a9.953 9.953 0 012.159-3.362m2.649-2.35A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.542 7a9.953 9.953 0 01-4.042 4.442M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 3l18 18" />`
|
|
: `<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />`;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|