Merge pull request 'Add optional pronoun field in user settings' (#1518) from hazy/forgejo:feat/pronoun-field into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/1518
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Gergely Nagy <algernon@noreply.codeberg.org>

web_src/js/features/user-settings.js

@@ -1,5 +1,35 @@
 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;
 
@@ -16,4 +46,18 @@ export function initUserSettings() {
       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);
 }