74 lines
2.5 KiB
HTML
74 lines
2.5 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Register{% endblock %}
|
|
|
|
{% block content %}
|
|
<h2>Register</h2>
|
|
{% if error_msg %}
|
|
<p style="color: red;">{{ error_msg }}</p>
|
|
{% endif %}
|
|
<form method="post" id="registration-form">
|
|
<label for="username">Username</label><br>
|
|
<input type="text" name="username" id="username" required><br>
|
|
<label for="email">Email</label><br>
|
|
<input type="text" name="email" id="email" required><br>
|
|
<label for="password">Password</label><br>
|
|
<input type="password" name="password" id="password" required><br>
|
|
<div id="password-strength" class="password-strength" style="margin-bottom:0.7em;"></div>
|
|
<label for="password">Confirm password</label><br>
|
|
<input type="password" name="password-2" id="password-2" required><br>
|
|
<div id="password-match" class="password-match"></div><br>
|
|
<input type="submit" value="Register">
|
|
</form>
|
|
|
|
<script>
|
|
const passwordInput = document.getElementById('password');
|
|
const confirmPasswordInput = document.getElementById('password-2');
|
|
const passwordStrength = document.getElementById('password-strength');
|
|
const passwordMatch = document.getElementById('password-match');
|
|
|
|
passwordInput.addEventListener('input', updatePasswordStrength);
|
|
confirmPasswordInput.addEventListener('input', checkPasswordMatch);
|
|
|
|
function updatePasswordStrength() {
|
|
const password = passwordInput.value;
|
|
const length = password.length;
|
|
const containsLetters = /[a-zA-Z]/.test(password);
|
|
const containsNumbers = /[0-9]/.test(password);
|
|
|
|
let strength = 0;
|
|
|
|
if (length >= 5 && length <= 7) {
|
|
strength = 1;
|
|
} else if (length > 7 && containsLetters && containsNumbers) {
|
|
strength = 2;
|
|
} else if (length > 7) {
|
|
strength = 1;
|
|
}
|
|
|
|
updateStrengthIndicator(strength);
|
|
}
|
|
|
|
function updateStrengthIndicator(strength) {
|
|
const indicator = ['Weak', 'Moderate', 'Strong'];
|
|
const colors = ['red', 'yellow', 'green'];
|
|
|
|
passwordStrength.textContent = `Password Strength: ${indicator[strength]}`;
|
|
passwordStrength.style.color = colors[strength];
|
|
}
|
|
|
|
function checkPasswordMatch() {
|
|
const password = passwordInput.value;
|
|
const confirmPassword = confirmPasswordInput.value;
|
|
|
|
if (password === confirmPassword) {
|
|
passwordMatch.textContent = 'Passwords match';
|
|
passwordMatch.style.color = 'green';
|
|
} else {
|
|
passwordMatch.textContent = 'Passwords do not match';
|
|
passwordMatch.style.color = 'red';
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|