Musselman/notatio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rework how form data is collected for signup

Browse source
This commit is contained in:
James Musselman 2023-11-29 23:30:12 -06:00
parent 174655a07c
commit 9ce0d02be7
3 changed files with 14 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

24
templates/index.html
View file

@ -10,26 +10,6 @@
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script>
document.addEventListener("DOMContentLoaded", function () {
const passwordInput = document.getElementById("signup-password");
const passwordRequirements = document.querySelectorAll(".password-requirement");
passwordInput.addEventListener("input", function () {
const password = passwordInput.value;
passwordRequirements.forEach(function (requirement) {
const requirementRegex = new RegExp(requirement.dataset.regex);
if (requirementRegex.test(password)) {
requirement.classList.add("text-success");
} else {
requirement.classList.remove("text-success");
}
});
});
});
</script>
</head>
@ -176,7 +156,7 @@
<label for="username" class="form-label">Username:</label>
<div class="input-group has-validation">
<span class="input-group-text">@</span>
<input type="text" onblur="checkUsernameAvailability();" id="signup-username"
<input type="text" onblur="checkUsernameAvailability();" id="signup_username"
name="username" pattern="[a-zA-Z0-9_\-]{5,20}" required class="form-control"
data-bs-toggle="popover"
data-bs-content="Username must be 5-20 characters and can contain letters, numbers, underscores, or hyphens."
@ -188,7 +168,7 @@
<div id="usernameAvailability"></div>
<br>
<label for="password" class="form-label">Password:</label>
<input type="password" id="signup-password" name="password"
<input type="password" id="signup_password" name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=!]).{10,}" required
class="form-control">
<div class="invalid-feedback">