67 lines
2.8 KiB
HTML
67 lines
2.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Login{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<h2 class="text-center">Login</h2>
|
|
<form id="loginForm" class="needs-validation" novalidate method="POST" action="/login">
|
|
{{ form.hidden_tag() }}
|
|
<div class="form-group">
|
|
<label for="username">Username</label>
|
|
<input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" pattern="^[a-zA-Z][a-zA-Z0-9_]{0,19}$" required>
|
|
<div class="invalid-feedback">
|
|
Username must start with a letter and can only contain letters, numbers, and underscores (max 20 characters).
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">Password</label>
|
|
<input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" minlength="1" maxlength="30" required>
|
|
<div class="invalid-feedback">
|
|
Password must be between 1 and 30 characters long.
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-block">Login</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// JavaScript for form validation
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const loginForm = document.getElementById('loginForm');
|
|
loginForm.addEventListener('submit', function(event) {
|
|
if (!loginForm.checkValidity()) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
}
|
|
loginForm.classList.add('was-validated');
|
|
});
|
|
|
|
// Real-time validation for username
|
|
const usernameInput = document.getElementById('username');
|
|
usernameInput.addEventListener('input', function() {
|
|
if (usernameInput.checkValidity()) {
|
|
usernameInput.classList.remove('is-invalid');
|
|
usernameInput.classList.add('is-valid');
|
|
} else {
|
|
usernameInput.classList.remove('is-valid');
|
|
usernameInput.classList.add('is-invalid');
|
|
}
|
|
});
|
|
|
|
// Real-time validation for password
|
|
const passwordInput = document.getElementById('password');
|
|
passwordInput.addEventListener('input', function() {
|
|
if (passwordInput.checkValidity()) {
|
|
passwordInput.classList.remove('is-invalid');
|
|
passwordInput.classList.add('is-valid');
|
|
} else {
|
|
passwordInput.classList.remove('is-valid');
|
|
passwordInput.classList.add('is-invalid');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |