86 lines
3.7 KiB
HTML
86 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
{% from "macros/ui.html" import flash_messages %}
|
|
|
|
{% set title = 'Admin Login' %}
|
|
|
|
{% block body_class %}bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center{% endblock %}
|
|
|
|
{% block body %}
|
|
<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">Admin Login</h2>
|
|
|
|
{{ flash_messages() }}
|
|
|
|
<form method="POST" novalidate>
|
|
{{ form.hidden_tag() }}
|
|
|
|
{# Username #}
|
|
<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 with visibility 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>
|
|
|
|
<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>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}{% endblock %}{# No Flowbite needed #}
|
|
|
|
{% block scripts_extra %}
|
|
<script>
|
|
function togglePassword() {
|
|
const input = document.getElementById("password");
|
|
const icon = document.getElementById("eyeIcon");
|
|
const hide = input.type === "password";
|
|
input.type = hide ? "text" : "password";
|
|
icon.innerHTML = hide
|
|
? `<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>
|
|
{% endblock %}
|