An error has occurred

{{terminalError}}

/* validates the email field, show and hides error message, enables and disables signup button Angular 1.2 doesn't support touched and untouched states so we have to do this ourselves */ !function () { console.log(window.visualViewport.width); function trackOfferCheckboxChanged(checked) { if (checked) { window.parent.postMessage({ name: 'offer-checkbox-checked', newsletter: 'receiveTech' }, '*'); } else { window.parent.postMessage({ name: 'offer-checkbox-unchecked', newsletter: 'receiveTech' }, '*'); } } const errors = { unknown_error: 'An unknown problem occurred. Please try again later.', email_validation_error: 'Please enter a valid email address', existing_email_error: 'Your email is already signed up to this newsletter', }; function validateEmail(email) { const EMAIL_REGEX = /^(?=(.{1,64}@.{1,255}))([!#$%&'*+\-\/=?\^_`{|}~a-zA-Z0-9}]{1,64}(\.[!#$%&'*+\-\/=?\^_`{|}~a-zA-Z0-9]{0,}){0,})@((\[(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}\])|([a-zA-Z0-9-]{1,63}(\.[a-zA-Z0-9-]{2,63}){1,}))$/; return EMAIL_REGEX.test(email); } const formState = { inputField: { dirty: false, touched: false, valid: false, }, errorMessage: errors.email_validation_error, }; const emailInput = document.getElementById('email-input'); const errorMessageField = document.getElementById('error-message'); const submitButton = document.getElementById('submit-button'); const offerCheckbox = document.getElementById('offers'); offerCheckbox.addEventListener('change', (event) => { trackOfferCheckboxChanged(event.target.checked); }); function updateInputView() { if (formState.inputField.dirty) { emailInput.classList.add('dirty'); } else { emailInput.classList.remove('dirty'); } if (formState.inputField.valid) { emailInput.classList.add('valid'); emailInput.classList.remove('invalid'); } else { formState.errorMessage = errors.email_validation_error; emailInput.classList.add('invalid'); emailInput.classList.remove('valid'); } // can only be touched once if (formState.inputField.touched) { emailInput.classList.add('touched'); } } function updateErrorMessageView() { if (!formState.inputField.valid && formState.inputField.touched && formState.inputField.dirty) { errorMessageField.style.opacity = 1; errorMessageField.textContent = formState.errorMessage; } else { errorMessageField.style.opacity = 0; } } function updateSubmitButton() { if (formState.inputField.valid) { submitButton.disabled = false; } else { submitButton.disabled = true; } } function setLogoBackground(newsletter) { const logoBackground = document.getElementById('logo-background'); if (newsletter === 'receiveClimate') { logoBackground.setAttribute('fill', 'url(#paint0_linear)'); } else { logoBackground.setAttribute('fill', '#e30d24'); } } function hideLogo() { const logo = document.getElementById('logo'); let isSmallScreen = window.visualViewport.width < 621; if ('receiveTech' == 'receiveIndyBreakingNews' && !isSmallScreen) { logo.setAttribute('visibility', 'hidden'); } else { logo.setAttribute('visibility', 'visible'); } } setLogoBackground('receiveTech'); hideLogo('receiveTech'); function updateView() { updateErrorMessageView(); updateInputView() updateSubmitButton(); } // call this to render the initial state updateView(); emailInput.addEventListener('blur', () => { formState.inputField.touched = true; updateView(); }); emailInput.addEventListener('change', () => { formState.inputField.dirty = true; updateView(); }); emailInput.addEventListener('input', () => { formState.inputField.valid = validateEmail(event.target.value); updateView(); }); function queryAll(items) { return items .map(id => document.getElementById(id)) .filter(Boolean); } function onSuccess() { const successPanel = document.getElementById('success-panel'); const itemsToHide = queryAll(['heading-desktop', 'heading-mobile', 'email-input', 'submit-button', 'error-message', 'offer']); itemsToHide.forEach(item => { item.addEventListener('transitionend', () => { item.style.visibility = 'hidden'; }); item.style.transition = 'opacity 0.4s linear'; item.style.opacity = 0; successPanel.style.visibility = 'visible'; successPanel.offsetHeight; successPanel.style.opacity = 1; }); } function onError(errorKey) { formState.inputField.valid = false; formState.errorMessage = errors[errorKey] || errors.unknown_error; updateView(); } window.addEventListener('message', (event) => { if (event.data && event.data.piano) { const result = event.data.piano; if (result.success) { onSuccess(); } else { onError(result.error); } } }); window.addEventListener('resize', () => { hideLogo() }); }();
Tech

Sign up to our free weekly IndyTech newsletter delivered straight to your inbox

Sign up to our free IndyTech newsletter

I would like to be emailed about offers, events and updates from The Independent. Read our privacy notice
Thanks for signing up to the
IndyTechnewsletter