secajs/public/javascript/createProfile.js

const createProfileConfirmation = document.querySelector(
  '#create-profile-success'
);

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

const validateNymInput = debounce(() => {
  const nymValue = nymInput.value.trim();
  const isValid = nymValue.length >= 3 && nymValue.length <= 128;
  if (isValid) {
    nymInputValidationWarning.style.display = 'none';
  } else {
    nymInputValidationWarning.style.display = 'block';
  }
}, 500);

const checkIfSubmittable = debounce((allInputs) => {
  const nymIsFilled = allInputs.nymInput.value !== '';
  let atLeastOneContactIsFilled = false;

  for (const contactInput of allInputs.contactInputs) {
    if (contactInput.value !== '') {
      atLeastOneContactIsFilled = true;
    }
  }

  const buttonShouldBeDisabled = !(nymIsFilled && atLeastOneContactIsFilled);
  submitProfileButton.disabled = buttonShouldBeDisabled;
}, 500);

async function createProfile(allInputs) {
  const contactDetails = [];
  for (const someInput of allInputs.contactInputs) {
    contactDetails.push({
      type: someInput.getAttribute('data-type'),
      value: someInput.value,
    });
  }
  const encryptedContactDetails = await window.nostr.nip04.encrypt(
    await window.nostr.getPublicKey(),
    JSON.stringify(contactDetails)
  );
  await fetch('/api/set-contact-details', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ encryptedContactDetails }),
  });

  const nym = allInputs.nymInput.value;
  await fetch('/api/set-nym', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ nym }),
  });

  createProfileConfirmation.classList.add('revealed');
  setTimeout(() => {
    window.location.href = '/home';
  }, 5000);
}

function onLoadErrands(allInputs, submitProfileButton) {
  allInputs.nymInput.addEventListener('input', validateNymInput);

  for (const someInput of allInputs.allInputs) {
    someInput.addEventListener('input', () => {
      checkIfSubmittable(allInputs);
    });
  }

  checkIfSubmittable(allInputs);

  submitProfileButton.addEventListener('click', () => {
    createProfile(allInputs);
  });
}

const nymInput = document.getElementById('nym-input');
const nymInputValidationWarning = document.getElementById(
  'nym-input-validation-warning'
);
const phoneInput = document.getElementById('phone-input');
const whatsappInput = document.getElementById('whatsapp-input');
const telegramInput = document.getElementById('telegram-input');
const emailInput = document.getElementById('email-input');
const nostrInput = document.getElementById('nostr-input');
const signalInput = document.getElementById('signal-input');
const submitProfileButton = document.getElementById('submit-profile-button');

const allInputs = {
  nymInput: nymInput,
  contactInputs: [
    phoneInput,
    whatsappInput,
    telegramInput,
    emailInput,
    nostrInput,
    signalInput,
  ],
  allInputs: [
    nymInput,
    phoneInput,
    whatsappInput,
    telegramInput,
    emailInput,
    nostrInput,
    signalInput,
  ],
};

onLoadErrands(allInputs, submitProfileButton);