64 lines
2.1 KiB
HTML
64 lines
2.1 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<h1>Create an Account</h1>
|
|
|
|
<div id="password-requirements" class="hidden">
|
|
<ul>
|
|
<li id="min-length">Minimum 10 characters: ❌</li>
|
|
<li id="uppercase">At least 1 uppercase letter: ❌</li>
|
|
<li id="special-char">At least 1 special character: ❌</li>
|
|
<li id="number">At least 1 number: ❌</li>
|
|
<li id="match">Passwords match: ❌</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<form method="POST">
|
|
<label for="username">Username:</label>
|
|
<input type="text" id="username" name="username" required>
|
|
|
|
<label for="email">Email:</label>
|
|
<input type="email" id="email" name="email" required>
|
|
|
|
<label for="password">Password:</label>
|
|
<input type="password" id="password" name="password" required>
|
|
|
|
<label for="confirm_password">Confirm Password:</label>
|
|
<input type="password" id="confirm_password" name="confirm_password" required>
|
|
|
|
<button type="submit">Register</button>
|
|
</form>
|
|
|
|
<script>
|
|
const passwordField = document.getElementById('password');
|
|
const confirmPasswordField = document.getElementById('confirm_password');
|
|
const passwordRequirements = document.getElementById('password-requirements');
|
|
|
|
function showRequirements() {
|
|
passwordRequirements.classList.remove('hidden');
|
|
}
|
|
|
|
function hideRequirements() {
|
|
if (!passwordField.value && !confirmPasswordField.value) {
|
|
passwordRequirements.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Event listeners for showing and hiding the requirements
|
|
passwordField.addEventListener('focus', showRequirements);
|
|
passwordField.addEventListener('blur', hideRequirements);
|
|
|
|
confirmPasswordField.addEventListener('focus', showRequirements);
|
|
confirmPasswordField.addEventListener('blur', hideRequirements);
|
|
|
|
// Prevent hiding on invalid form submission
|
|
document.querySelector('form').addEventListener('submit', (event) => {
|
|
if (!passwordField.value || !confirmPasswordField.value) {
|
|
passwordRequirements.classList.remove('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
{% endblock %}
|