-
+
+
+
+ const options = {
+ method: 'POST',
+ headers: createHeaders(null),
+ body: JSON.stringify({
+ display_name,
+ email,
+ password
+ }),
+ };
+
+ fetch(`${API_URL}/persons`, options)
+ .then(response => {
+ response.json().then(data => {
+ if (response.ok) {
+ clearInputFields();
+ if (!data.enabled) { // 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 {
+ showSuccessAlert("Congratulations! You've successfully registered to Blink. " +
+ "You can now log in");
+ }
+ window.location.href = '/login.html';
+ } else {
+ callbackErrors(data.errors, showErrorAlert);
+ }
+ });
+ })
+ .catch(err => {
+ alert("An error has occurred :-( please try again later");
+ console.error(err);
+ });
+ return false;
+ }
+
+ /*
+ * This function gets called when the displayname field loses focus.
+ * This is
+ * done to inform the user that they need to enter at least one
+ * character in said field.
+ */
+ function displaynameFieldLosesFocus() {
+ const nameField = document.getElementById("displayname");
+ if (!nameField.value) {
+ nameField.classList.add("is-invalid");
+ } else {
+ nameField.classList.remove("is-invalid");
+ }
+ }
+
+ /*
+ * This function gets called when the e-mail field loses focus. This is
+ * done to inform the user whether the entered e-mail is in a valid format
+ */
+ function emailFieldLosesFocus() {
+ const emailField = document.getElementById("email");
+ if (!emailField.value || !validateEmail(emailField.value)) {
+ emailField.classList.add("is-invalid");
+ } else {
+ emailField.classList.remove("is-invalid");
+ }
+ }
+
+ /*
+ * This function gets called when the password field loses focus. This is
+ * done to inform the user that they are required to enter a password
+ */
+ function passwordFieldLosesFocus() {
+ const passwordField = document.getElementById("password");
+ if (!passwordField.value) {
+ passwordField.classList.add("is-invalid");
+ document.getElementById('passwordErrorLabel').innerHTML = 'Please fill out this field';
+ } else if (passwordField.value.length < 5) {
+ passwordField.classList.add("is-invalid");
+ document.getElementById('passwordErrorLabel').innerHTML = 'Password must be at least 5 characters';
+ } else {
+ passwordField.classList.remove("is-invalid");
+ }
+ }
+
+ /*
+ * Validate the field before the submit. This helps to prevent useless API
+ * calls. Retrurns true or false
+ */
+ function validateFields() {
+ const email = document.getElementById("email").value;
+ const password = document.getElementById("password").value;
+ const displayname = document.getElementById("displayname").value;
+ const iAgree = document.getElementById('iAgree');
+ if (!email || !password || !displayname || !validateEmail(email) || password.length < 5 || !iAgree
+ .checked) {
+ return false;
+ }
+ return true;
+ }
+
+ function showSuccessAlert(message) {
+ const successAlert = document.getElementById('successAlert');
+ successAlert.innerHTML = message;
+ successAlert.style.display = 'block';
+ }
+
+ function showErrorAlert(message){
+ const errorAlert = document.getElementById('errorAlert');
+ errorAlert.innerHTML = message;
+ errorAlert.style.display = 'block';
+ }
+
+
+
\ No newline at end of file
diff --git a/frontend/vanilla/js/utils.js b/frontend/vanilla/js/utils.js
index 536e3b9..63beb44 100644
--- a/frontend/vanilla/js/utils.js
+++ b/frontend/vanilla/js/utils.js
@@ -10,6 +10,20 @@ function getCookie(name) {
return null;
}
+/**
+ * Validates an e-mail using a RegExpression
+ *
+ * @param {*} email
+ * @returns
+ */
+function validateEmail(email) {
+ return String(email)
+ .toLowerCase()
+ .match(
+ /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+ );
+}
+
function callbackErrors(errors, func) {
errors.forEach(error => func(error.msg));
}
@@ -19,4 +33,11 @@ function createHeaders(token) {
"Content-type": "application/json; charset=UTF-8",
"Authorization": `Bearer ${token}`
}
+}
+
+function clearInputFields() {
+ var inputs = document.querySelectorAll('input');
+ inputs.forEach(function(input) {
+ input.value = '';
+ });
}
\ No newline at end of file