2024-02-08 14:46:14 +01:00
|
|
|
"use strict";
|
|
|
|
|
2024-02-04 19:34:27 +01:00
|
|
|
let newsletter_form;
|
|
|
|
let newsletter_input_mail_address;
|
|
|
|
let newsletter_input_language;
|
|
|
|
let newsletter_input_language_option_list;
|
|
|
|
let newsletter_input_submit;
|
|
|
|
let newsletter_feedback;
|
|
|
|
let newsletter_feedback_wait;
|
|
|
|
let newsletter_feedback_success;
|
|
|
|
let newsletter_feedback_failure;
|
|
|
|
|
|
|
|
let newsletter_valid_mail_address = false;
|
|
|
|
let newsletter_valid_language = false;
|
|
|
|
|
|
|
|
window.addEventListener("load", function(){
|
|
|
|
// STORE ELEMENTS //
|
|
|
|
newsletter_form = document.getElementById("newsletter-signup-form");
|
|
|
|
newsletter_input_mail_address = document.getElementById("newsletter-signup-form-mail-address");
|
|
|
|
newsletter_input_language = document.getElementById("newsletter-signup-form-language");
|
|
|
|
newsletter_input_language_option_list = newsletter_input_language.getElementsByClassName("option");
|
|
|
|
newsletter_input_submit = document.getElementById("newsletter-signup-form-submit");
|
|
|
|
newsletter_feedback = document.getElementById("newsletter-signup-form-feedback");
|
|
|
|
newsletter_feedback_wait = document.getElementById("newsletter-signup-form-feedback-wait");
|
|
|
|
newsletter_feedback_success = document.getElementById("newsletter-signup-form-feedback-success");
|
|
|
|
newsletter_feedback_failure = document.getElementById("newsletter-signup-form-feedback-failure");
|
|
|
|
|
|
|
|
|
|
|
|
// INITIALIZE INPUTS //
|
|
|
|
newsletter_init_mail_address();
|
|
|
|
newsletter_init_language();
|
|
|
|
newsletter_init_submit();
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* HELPER: Initialize mail address input.
|
|
|
|
*/
|
|
|
|
async function newsletter_init_mail_address(){
|
|
|
|
// REGISTER INPUT HANDLER //
|
|
|
|
newsletter_input_mail_address.addEventListener("input", newsletter_update_mail_address);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* HELPER: Initialize language input.
|
|
|
|
*/
|
|
|
|
async function newsletter_init_language(){
|
|
|
|
// REGISTER CLICK HANDLERS //
|
|
|
|
for(let one_option of newsletter_input_language_option_list){
|
|
|
|
one_option.addEventListener("click", newsletter_change_language);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// UPDATE STATE //
|
|
|
|
newsletter_update_language();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* HELPER: Initialize submit button input.
|
|
|
|
*/
|
|
|
|
async function newsletter_init_submit(){
|
|
|
|
// REGISTER CLICK HANDLER //
|
|
|
|
newsletter_input_submit.addEventListener("click", newsletter_submit);
|
|
|
|
|
|
|
|
|
|
|
|
// UPDATE STATE //
|
|
|
|
newsletter_update_submit();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* CALLBACK: Update mail address state.
|
|
|
|
*/
|
|
|
|
async function newsletter_update_mail_address(){
|
|
|
|
// VALIDATE INPUT //
|
|
|
|
// load value
|
|
|
|
let value = newsletter_input_mail_address.value;
|
|
|
|
|
|
|
|
// check against regex
|
|
|
|
newsletter_valid_mail_address = (value.match(/^[a-zA-Z0-9\.\-\_\+]+@([a-z0-9\-]+\.)+[a-z0-9\-]{2,}$/) !== null);
|
|
|
|
|
|
|
|
|
|
|
|
// UPDATE VALIDITY INDICATOR //
|
|
|
|
// get element
|
|
|
|
let validity_indicator = newsletter_input_mail_address.parentElement;
|
|
|
|
|
|
|
|
// reset state
|
|
|
|
validity_indicator.classList.remove("valid", "invalid");
|
|
|
|
|
|
|
|
// set state
|
|
|
|
if(newsletter_valid_mail_address){
|
|
|
|
validity_indicator.classList.add("valid");
|
|
|
|
} else {
|
|
|
|
validity_indicator.classList.add("invalid");
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// UPDATE SUBMIT BUTTON //
|
|
|
|
newsletter_update_submit();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* CALLBACK: Change language.
|
|
|
|
*/
|
|
|
|
async function newsletter_change_language(){
|
|
|
|
// DETERMINE NEW VALUE //
|
|
|
|
// get from attribute
|
|
|
|
let value = this.dataset.value;
|
|
|
|
|
|
|
|
// store to main element
|
|
|
|
newsletter_input_language.dataset.selected = value;
|
|
|
|
|
|
|
|
|
|
|
|
// UPDATE STATE //
|
|
|
|
newsletter_update_language();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* HELPER: Update language state.
|
|
|
|
*/
|
|
|
|
async function newsletter_update_language(){
|
|
|
|
// HIGHLIGHT SELECTED ELEMENT //
|
|
|
|
let value = newsletter_input_language.dataset.selected;
|
|
|
|
newsletter_valid_language = false;
|
|
|
|
for(let one_option of newsletter_input_language_option_list){
|
|
|
|
// reset classes
|
|
|
|
one_option.classList.remove("selected");
|
|
|
|
|
|
|
|
// selected
|
|
|
|
if(one_option.dataset.value === value){
|
|
|
|
newsletter_valid_language = true;
|
|
|
|
one_option.classList.add("selected");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// UPDATE SUBMIT BUTTON //
|
|
|
|
newsletter_update_submit();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* HELPER: Update submit button state.
|
|
|
|
*/
|
|
|
|
async function newsletter_update_submit(){
|
|
|
|
// DISABLE //
|
|
|
|
newsletter_input_submit.classList.add("disabled");
|
|
|
|
|
|
|
|
|
|
|
|
// MAYBE ENABLE //
|
|
|
|
if(newsletter_valid_mail_address && newsletter_valid_language){
|
|
|
|
newsletter_input_submit.classList.remove("disabled");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* CALLBACK: Maybe submit the form.
|
|
|
|
*/
|
|
|
|
async function newsletter_submit(){
|
|
|
|
// MAKE SURE ALL INPUTS ARE VALID //
|
|
|
|
if(!newsletter_valid_mail_address || !newsletter_valid_language) return;
|
|
|
|
|
|
|
|
|
|
|
|
// SHOW WAIT FEEDBACK //
|
|
|
|
newsletter_feedback.classList.remove("hidden", "gone");
|
|
|
|
newsletter_form.classList.add("hidden");
|
|
|
|
newsletter_feedback_wait.classList.remove("hidden", "gone");
|
|
|
|
|
|
|
|
|
|
|
|
// COLLECT VALUES //
|
|
|
|
// mail address
|
|
|
|
let mail_address = newsletter_input_mail_address.value;
|
|
|
|
|
|
|
|
// language
|
|
|
|
let language = newsletter_input_language.dataset.selected;
|
|
|
|
|
|
|
|
|
|
|
|
// SEND API REQUEST //
|
2024-02-04 20:40:40 +01:00
|
|
|
var xhr = new XMLHttpRequest();
|
2024-02-17 22:15:43 +01:00
|
|
|
xhr.open("POST", "/api/newsletter/verify", true);
|
2024-02-04 20:40:40 +01:00
|
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
2024-02-18 21:07:52 +01:00
|
|
|
xhr.setRequestHeader("x-cookieless-csrf-protection", "42");
|
2024-02-04 20:40:40 +01:00
|
|
|
xhr.send(JSON.stringify({
|
|
|
|
mail_address: mail_address,
|
|
|
|
language: language
|
|
|
|
}));
|
|
|
|
|
|
|
|
xhr.onload = function(){
|
|
|
|
let success = true;
|
|
|
|
|
|
|
|
// validate http status code
|
|
|
|
if(xhr.status !== 200) success = false;
|
|
|
|
|
|
|
|
// check response
|
|
|
|
if(success){
|
|
|
|
let response = null;
|
|
|
|
try {
|
|
|
|
response = JSON.parse(xhr.response);
|
|
|
|
} catch(e){}
|
|
|
|
|
|
|
|
if(typeof response !== "object") success = false;
|
|
|
|
if(success && response === null) success = false;
|
|
|
|
if(success && response.success !== true) success = false;
|
|
|
|
}
|
|
|
|
|
2024-02-04 19:34:27 +01:00
|
|
|
// positive feedback
|
2024-02-04 20:40:40 +01:00
|
|
|
if(success){
|
|
|
|
newsletter_feedback_wait.classList.add("gone");
|
|
|
|
newsletter_feedback_success.classList.remove("hidden", "gone");
|
|
|
|
return;
|
|
|
|
}
|
2024-02-04 19:34:27 +01:00
|
|
|
|
|
|
|
// negative feedback
|
|
|
|
newsletter_feedback_wait.classList.add("gone");
|
|
|
|
newsletter_feedback_failure.classList.remove("hidden", "gone");
|
2024-02-04 20:40:40 +01:00
|
|
|
}
|
2024-02-04 19:34:27 +01:00
|
|
|
}
|