document.addEventListener('DOMContentLoaded', () => {
    const createEmailAddress = document.getElementById('field-create_email');
    const username = document.getElementById('field-username');
    const email_username = document.getElementById('email_username');
    const domain = document.getElementById('field-domain');
    const recovery_email = document.getElementById('field-recovery_email');
    const recovery_email_label = recovery_email.parentElement.querySelector('.hint');

    function updateForm() {
        if (createEmailAddress.checked) {
            recovery_email.removeAttribute('required');
            recovery_email_label.style.display = 'block';
            domain.disabled = false;
        } else {
            recovery_email.setAttribute('required', 'required');
            recovery_email_label.style.display = 'none';
            domain.disabled = true;
        }
        username.value = username.value.toLowerCase();
        email_username.innerText = username.value + '@';
    }

    createEmailAddress.addEventListener('change', updateForm);
    username.addEventListener('change', updateForm);
    username.addEventListener('keyup', updateForm);
    updateForm();
});