forkjo/web_src/js/features/user-settings.js

import {hideElem, showElem} from '../utils/dom.js';

function onPronounsDropdownUpdate() {
  const pronounsCustom = document.getElementById('pronouns-custom');
  const pronounsDropdown = document.getElementById('pronouns-dropdown');
  const pronounsInput = pronounsDropdown.querySelector('input');
  // must be kept in sync with `routers/web/user/setting/profile.go`
  const isCustom = !(
    pronounsInput.value === '' ||
    pronounsInput.value === 'he/him' ||
    pronounsInput.value === 'she/her' ||
    pronounsInput.value === 'they/them' ||
    pronounsInput.value === 'it/its' ||
    pronounsInput.value === 'any pronouns'
  );
  if (isCustom) {
    if (pronounsInput.value === '!') {
      pronounsCustom.value = '';
    } else {
      pronounsCustom.value = pronounsInput.value;
    }
    pronounsCustom.style.display = '';
  } else {
    pronounsCustom.style.display = 'none';
  }
}
function onPronounsCustomUpdate() {
  const pronounsCustom = document.getElementById('pronouns-custom');
  const pronounsInput = document.querySelector('#pronouns-dropdown input');
  pronounsInput.value = pronounsCustom.value;
}

export function initUserSettings() {
  if (!document.querySelectorAll('.user.settings.profile').length) return;

  const usernameInput = document.getElementById('username');
  if (!usernameInput) return;
  usernameInput.addEventListener('input', function () {
    const prompt = document.getElementById('name-change-prompt');
    const promptRedirect = document.getElementById('name-change-redirect-prompt');
    if (this.value.toLowerCase() !== this.getAttribute('data-name').toLowerCase()) {
      showElem(prompt);
      showElem(promptRedirect);
    } else {
      hideElem(prompt);
      hideElem(promptRedirect);
    }
  });

  const pronounsDropdown = document.getElementById('pronouns-dropdown');
  const pronounsCustom = document.getElementById('pronouns-custom');
  const pronounsInput = pronounsDropdown.querySelector('input');

  // If JS is disabled, the page will show the custom input, as the dropdown requires JS to work.
  // JS progressively enhances the input by adding a dropdown, but it works regardless.
  pronounsCustom.removeAttribute('name');
  pronounsInput.setAttribute('name', 'pronouns');
  pronounsDropdown.style.display = '';

  onPronounsDropdownUpdate();
  pronounsInput.addEventListener('change', onPronounsDropdownUpdate);
  pronounsCustom.addEventListener('input', onPronounsCustomUpdate);
}