106 lines
3.0 KiB
HTML
106 lines
3.0 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Login - QR Code Management{% endblock %}
|
|
|
|
{% block extra_styles %}
|
|
<!-- Include the new authentication styles -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="auth-container">
|
|
<div class="auth-card">
|
|
<div class="auth-header">
|
|
<div class="auth-logo">
|
|
<i class="fas fa-qrcode"></i>
|
|
</div>
|
|
<h1>QR Manager</h1>
|
|
<p>Sign in to your account</p>
|
|
</div>
|
|
|
|
<form method="POST" class="auth-form">
|
|
<div class="form-group">
|
|
<label for="username">
|
|
<i class="fas fa-user"></i>
|
|
Username
|
|
</label>
|
|
<input type="text" id="username" name="username" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password">
|
|
<i class="fas fa-lock"></i>
|
|
Password
|
|
</label>
|
|
<input type="password" id="password" name="password" required />
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-full">
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Register link removed as requested -->
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
// Enhanced form validation and user experience improvements
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const form = document.querySelector(".auth-form");
|
|
const inputs = form.querySelectorAll("input");
|
|
|
|
// Add focus effects with improved visual feedback
|
|
inputs.forEach((input) => {
|
|
input.addEventListener("focus", function () {
|
|
this.parentElement.classList.add("focused");
|
|
});
|
|
|
|
input.addEventListener("blur", function () {
|
|
if (!this.value) {
|
|
this.parentElement.classList.remove("focused");
|
|
}
|
|
});
|
|
|
|
// Keep focus state if input has value
|
|
if (input.value) {
|
|
input.parentElement.classList.add("focused");
|
|
}
|
|
});
|
|
|
|
// Enhanced form submission with loading state
|
|
form.addEventListener("submit", function () {
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
const originalContent = submitBtn.innerHTML;
|
|
|
|
submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing In...';
|
|
submitBtn.disabled = true;
|
|
|
|
// Re-enable button after 10 seconds as fallback
|
|
setTimeout(() => {
|
|
if (submitBtn.disabled) {
|
|
submitBtn.innerHTML = originalContent;
|
|
submitBtn.disabled = false;
|
|
}
|
|
}, 10000);
|
|
});
|
|
|
|
// Add keyboard navigation enhancement
|
|
inputs.forEach((input, index) => {
|
|
input.addEventListener("keydown", function (e) {
|
|
if (e.key === "Enter" && index < inputs.length - 1) {
|
|
e.preventDefault();
|
|
inputs[index + 1].focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Auto-focus first input
|
|
if (inputs.length > 0) {
|
|
inputs[0].focus();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |