xfarrow/blink
0
0
Fork 0
mirror of https://github.com/xfarrow/blink synced 2025-06-27 09:03:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update register.html

Browse Source
This commit is contained in:
xfarrow
2024-03-25 12:12:39 +01:00
parent 8fb6e6d823
commit 36f434e1f7
1 changed files with 50 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/vanilla/html/register.html
View File

@@ -67,7 +67,7 @@
<input type="email" class="form-control" name="email" id="email" required <input type="email" class="form-control" name="email" id="email" required
onblur="emailFieldLosesFocus();"> onblur="emailFieldLosesFocus();">
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter an email address Please fill out this field
</div> </div>
</div> </div>
</div> </div>
@@ -125,6 +125,9 @@
<script src="../js/constants.js"></script> <script src="../js/constants.js"></script>
<script src="../js/utils.js"></script> <script src="../js/utils.js"></script>
<script> <script>
/*
* Performs an API POST Request to register the user.
*/
async function register() { async function register() {
const display_name = document.getElementById('displayname').value; const display_name = document.getElementById('displayname').value;
const email = document.getElementById('email').value; const email = document.getElementById('email').value;
@@ -149,11 +152,16 @@
response.json().then(data => { response.json().then(data => {
if (response.ok) { if (response.ok) {
clearInputFields(); clearInputFields();
if (!data.enabled) { // is the user already enabled or do they need email verification? if (!data
showSuccessAlert("Congratulations! You've successfully registered to Blink. " + .enabled
"Please click on the e-mail we sent you to confirm your account"); ) { // is the user already enabled or do they need email verification?
showSuccessAlert(
"Congratulations! You've successfully registered to Blink. " +
"Please click on the e-mail we sent you to confirm your account"
);
} else { } else {
showSuccessAlert("Congratulations! You've successfully registered to Blink. " + showSuccessAlert(
"Congratulations! You've successfully registered to Blink. " +
"You can now <a href='login.html'>log in</a>"); "You can now <a href='login.html'>log in</a>");
} }
window.location.href = '/login.html'; window.location.href = '/login.html';
@@ -219,15 +227,43 @@
* calls. Retrurns true or false * calls. Retrurns true or false
*/ */
function validateFields() { function validateFields() {
const email = document.getElementById("email").value; const emailField = document.getElementById("email");
const password = document.getElementById("password").value; const passwordField = document.getElementById("password");
const displayname = document.getElementById("displayname").value; const displaynameField = document.getElementById("displayname");
const iAgree = document.getElementById('iAgree'); const isAgreeCheckBox = document.getElementById('iAgree');
if (!email || !password || !displayname || !validateEmail(email) || password.length < 5 || !iAgree var isFormValid = true;
.checked) {
return false; if (!emailField.value || !validateEmail(emailField.value)) {
emailField.classList.add("is-invalid");
isFormValid = false;
} else {
emailField.classList.remove("is-invalid");
} }
return true;
if (!passwordField.value) {
passwordField.classList.add("is-invalid");
document.getElementById('passwordErrorLabel').innerHTML = 'Please fill out this field';
isFormValid = false;
} else if (passwordField.value.length < 5) {
passwordField.classList.add("is-invalid");
document.getElementById('passwordErrorLabel').innerHTML = 'Password must be at least 5 characters';
isFormValid = false;
} else {
passwordField.classList.remove("is-invalid");
}
if (!displaynameField.value) {
displaynameField.classList.add("is-invalid");
isFormValid = false;
} else {
displaynameField.classList.remove("is-invalid");
}
if (!isAgreeCheckBox.checked) {
isFormValid = false;
} else {
}
return isFormValid;
} }
function showSuccessAlert(message) { function showSuccessAlert(message) {
@@ -236,7 +272,7 @@
successAlert.style.display = 'block'; successAlert.style.display = 'block';
} }
function showErrorAlert(message){ function showErrorAlert(message) {
const errorAlert = document.getElementById('errorAlert'); const errorAlert = document.getElementById('errorAlert');
errorAlert.innerHTML = message; errorAlert.innerHTML = message;
errorAlert.style.display = 'block'; errorAlert.style.display = 'block';