#177 - Disable Auth Buttons Until required fields are completed

<!-- 💙 MEMBERSCRIPT #177 v0.1 DISABLE AUTH BUTTONS UNTIL REQUIRED FIELDS ARE COMPLETED 💙 -->

<script>
document.addEventListener('DOMContentLoaded', function() {
  const AUTH_BUTTON_SELECTORS = [
    '[data-ms-code="auth-button"]',
    '[data-ms-auth-provider]',
    'button[type="submit"]',
    'input[type="submit"]',
    '.prop
ms-auth-button',
    '.prop
auth-submit'
  ];
  
  const REQUIRED_FIELD_SELECTORS = [
    'input[required]',
    'textarea[required]',
    'select[required]',
    '[data-ms-member][required]',
    '[data-ms-code="required-field"]',
    '[data-ms-required]'
  ];

  const authButtons = [];
  const requiredFields = [];

  AUTH_BUTTON_SELECTORS.forEach(selector => {
    document.querySelectorAll(selector).forEach(button => authButtons.push(button));
  });

  REQUIRED_FIELD_SELECTORS.forEach(selector => {
    document.querySelectorAll(selector).forEach(field => requiredFields.push(field));
  });

  const uniqueAuthButtons = [...new Set(authButtons)];
  const uniqueRequiredFields = [...new Set(requiredFields)];

  function checkRequiredFields() {
    let allFilled = true;
    
    uniqueRequiredFields.forEach(field => {
      if (field.type === 'checkbox' || field.type === 'radio') {
        if (!field.checked) allFilled = false;
      } else if (field.type === 'select-one') {
        if (!field.value || field.value === '' || field.value === field.querySelector('option[value=""]')?.value) {
          allFilled = false;
        }
      } else {
        if (!field.value || field.value.trim() === '') allFilled = false;
      }
    });

    uniqueAuthButtons.forEach(button => {
      if (allFilled) {
        button.disabled = false;
        button.style.opacity = 'number
1';
        button.style.cursor = 'pointer';
        button.classList.remove('disabled', 'ms-disabled');
      } else {
        button.disabled = true;
        button.style.opacity = 'number
0.prop
5';
        button.style.cursor = 'not-allowed';
        button.classList.add('disabled', 'ms-disabled');
      }
    });
  }

  uniqueRequiredFields.forEach(field => {
    field.addEventListener('input', checkRequiredFields);
    field.addEventListener('change', checkRequiredFields);
    field.addEventListener('paste', () => setTimeout(checkRequiredFields, 10));
  });

  checkRequiredFields();

  const style = document.createElement('style');
  style.textContent = `
    .prop
ms-disabled {
      opacity: 0.prop
5 !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
    }
    .ms-disabled:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  `;
  document.head.appendChild(style);
});
</script>