/**
* Form validations and DOM manipulation for the signup form.
* Templates are under `/server/src/main/resources/templates/web/accounts`.
*
* ********** IMPORTANT **********
* This script depends on assets declared in `formManager.js`, which
* should be included in the document BEFORE this script such that
* those assets are available in the global scope.
*
* e.g.:
*
*
*/
var textInputs = document.querySelectorAll(
'div.ue-input-container .form-control');
var checkboxInputs = document.querySelectorAll(
'div.ue-input-container [type="checkbox"]');
var checkboxInputLabels = document.querySelectorAll(
'div.ue-input-container [type="checkbox"] ~ label');
var passwordInputEl = document.getElementById('ue-password-input');
var popoverCheckIconEls = document.querySelectorAll(
'.ue-validations-popover i');
var eyeIconEl = document.getElementById('ue-password-visibility-icon');
var marketingOptIn = document.querySelectorAll(
'.marketing-opt-in-radio-buttons input[type="radio"]');
var submitButtonEl = document.getElementById('signup-button');
var countrySelectEl = document.querySelector('select[name="country"]');
var elements = {
textInputs: textInputs,
checkboxInputs: checkboxInputs,
checkboxInputLabels: checkboxInputLabels,
};
// The country selector and marketing opt in only exist on the signup page, but
// this file is used by the portal creation page as well.
if (countrySelectEl && marketingOptIn) {
elements.radioInputs = marketingOptIn;
countrySelectEl.addEventListener('change', countrySelectHandler);
}
var revalidate = initForm(elements, setValidityState);
submitButtonEl.addEventListener('click', signUpSubmitButtonHandler);
eyeIconEl.addEventListener('click', eyeIconClickHandler);
/** Helpers */
function countrySelectHandler() {
updateStateSelector(countrySelectEl.value);
updateMarketingOptInCheckboxes(countrySelectEl.value);
}
function signUpSubmitButtonHandler() {
if (!revalidate()) {
return;
}
if (document.getElementById('recaptcha')) {
// Executing captcha will submit the form
grecaptcha.execute();
} else {
document.querySelector('form').submit();
}
}
function updateStateSelector(selectedCountry) {
var stateSelectContainer = document.getElementById('state-select-container');
var stateSelect = stateSelectContainer.querySelector('select[name="state"]');
var placeholder = stateSelectContainer.querySelector('.ue-placeholder');
switch (selectedCountry) {
case 'United States':
stateSelect.setAttribute('required', 'required');
stateSelect.value = undefined;
stateSelect.innerHTML = window['state-options'].innerHTML;
placeholder.textContent = 'State';
stateSelectContainer.classList.remove('display-none');
break;
case 'Canada':
stateSelect.setAttribute('required', 'required');
stateSelect.value = undefined;
stateSelect.innerHTML = window['province-options'].innerHTML;
placeholder.textContent = 'Province';
stateSelectContainer.classList.remove('display-none');
break;
default:
stateSelect.removeAttribute('required');
stateSelect.value = undefined;
stateSelectContainer.classList.add('display-none');
break;
}
}
function updateMarketingOptInCheckboxes(selectedCountry) {
var marketingOptInContainer = document.getElementById(
'marketing-opt-in-container');
var radioButtons = marketingOptInContainer.querySelectorAll(
'input[type="radio"]');
switch (selectedCountry) {
case 'United States':
case 'India':
marketingOptInContainer.classList.add('display-none');
radioButtons.forEach(function (el) {
el.removeAttribute('required');
el.checked = false;
});
break;
default:
marketingOptInContainer.classList.remove('display-none');
radioButtons.forEach(function (el) {
el.setAttribute('required', 'required');
el.checked = false;
});
break;
}
}
function eyeIconClickHandler(evt) {
evt.stopPropagation();
evt.target.classList.toggle('ue-eye-closed');
var passwordShouldBeVisible = evt.target.classList.contains('ue-eye-closed');
var passwordInputType = passwordShouldBeVisible ? 'text' : 'password';
passwordInputEl.setAttribute('type', passwordInputType);
}
function setValidityState(inputEl) {
var field = inputEl.getAttribute('name');
if (field === 'password') {
setPasswordPopupValidityIconClasses(inputEl);
}
var required = inputEl.getAttribute('required') === 'required';
switch (inputEl.type) {
case 'checkbox':
return !required || inputEl.checked;
case 'select-one':
return !required || !!inputEl.value;
case 'radio':
if (!required) {
return true;
}
return document.querySelectorAll(
`[type="radio"][name="${inputEl.getAttribute(
'name')}"]:checked`).length > 0;
default:
if (required && !inputEl.value) {
return false;
}
return validateTextInput(inputEl.value, field);
}
}
function setPasswordPopupValidityIconClasses(inputEl) {
var value = inputEl.value;
Array.prototype.slice.call(popoverCheckIconEls).forEach(function (iconEl) {
var nameAttr = iconEl.getAttribute('name');
switch (nameAttr) {
case 'length':
addOrRemoveClass(iconEl, 'condition-fulfilled', hasProperLength(value));
break;
case 'uppercase':
addOrRemoveClass(iconEl, 'condition-fulfilled',
hasUpperCaseChar(value));
break;
case 'lowercase':
addOrRemoveClass(iconEl, 'condition-fulfilled',
hasLowerCaseChar(value));
break;
case 'number':
addOrRemoveClass(iconEl, 'condition-fulfilled', hasNumber(value));
break;
case 'specialChar':
addOrRemoveClass(iconEl, 'condition-fulfilled', hasSpecialChar(value));
break;
}
});
}
function validateTextInput(value, fieldName) {
if (fieldName.startsWith("cust_")) {
return validateCustomField(value, fieldName);
}
switch (fieldName) {
case 'email':
return value && validateEmail(value);
case 'password':
return value && validatePassword(value);
case 'firstname':
case 'lastname':
case 'companyname':
return value && mostlyAlphanumeric(value);
default:
return true;
}
}
function validateEmail(email) {
return /\S+@\S+\.\S+/.test(email);
}
function validateCustomField(value, name) {
var retValue = true;
if (document.getElementsByName(name) &&
document.getElementsByName(name)[0]) {
//check to see if required value is populated
if (document.getElementsByName(name)[0].getAttribute("required")
== "required" && !value) {
retValue = false;
}
//only allow alpha numeric, dash and apostrophe
if (!mostlyAlphanumeric(value)) {
retValue = false;
}
}
return retValue;
}
function validatePassword(password) {
return hasLowerCaseChar(password)
&& hasUpperCaseChar(password)
&& hasNumber(password)
&& hasProperLength(password)
&& hasSpecialChar(password);
}
function hasLowerCaseChar(password) {
return /[a-z]/.test(password);
}
function hasUpperCaseChar(password) {
return /[A-Z]/.test(password);
}
function hasNumber(password) {
return /\d/.test(password);
}
function hasSpecialChar(password) {
return /[.(){}\[\]"':;<>,?/+=*&^%$#@!~`]/.test(password);
}
function hasProperLength(password) {
return password.length >= 8;
}