git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Rework user profile settings

Browse source 
Accessibility:

- improved semantic layout
- Fixes unlabelled input for custom pronouns. CC @hazy
- Adds labels to dropdowns.
- Shortens certain texts for less verbose screen reader outputs and
  people with slow reading speed.
- Turned optional username rename helper text with low contrast into
  "normal" help text.

UI/UX:

- Removes section about primary email which is no longer managed in the
  profile section.
- Fixes section about primary email not displaying in user settings when notifications are
  not available.
- Removes primary email display, because it is not actually a form
  element here. (Alternatively, we could display it and link to the
account settings for managing the email)
This commit is contained in:
Otto Richter 2024-12-29 12:42:13 +01:00
parent de4053db83
commit 2885ea8da2
11 changed files with 195 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web_src/js/features/user-settings.js
View file

@ -1,7 +1,8 @@
import {hideElem, showElem} from '../utils/dom.js';
function onPronounsDropdownUpdate() {
const pronounsCustom = document.getElementById('pronouns-custom');
const pronounsCustom = document.getElementById('label-pronouns-custom');
const pronounsCustomInput = pronounsCustom.querySelector('input');
const pronounsDropdown = document.getElementById('pronouns-dropdown');
const pronounsInput = pronounsDropdown.querySelector('input');
// must be kept in sync with `routers/web/user/setting/profile.go`
@ -15,49 +16,35 @@ function onPronounsDropdownUpdate() {
);
if (isCustom) {
if (pronounsInput.value === '!') {
pronounsCustom.value = '';
pronounsCustomInput.value = '';
} else {
pronounsCustom.value = pronounsInput.value;
pronounsCustomInput.value = pronounsInput.value;
}
pronounsCustom.style.display = '';
showElem(pronounsCustom);
} else {
pronounsCustom.style.display = 'none';
hideElem(pronounsCustom);
}
}
function onPronounsCustomUpdate() {
const pronounsCustom = document.getElementById('pronouns-custom');
const pronounsCustomInput = document.querySelector('#label-pronouns-custom input');
const pronounsInput = document.querySelector('#pronouns-dropdown input');
pronounsInput.value = pronounsCustom.value;
pronounsInput.value = pronounsCustomInput.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 pronounsDropdown = document.getElementById('label-pronouns');
const pronounsCustomInput = document.querySelector('#label-pronouns-custom input');
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');
pronounsCustomInput.removeAttribute('name');
pronounsInput.setAttribute('name', 'pronouns');
pronounsDropdown.style.display = '';
showElem(pronounsDropdown);
onPronounsDropdownUpdate();
pronounsInput.addEventListener('change', onPronounsDropdownUpdate);
pronounsCustom.addEventListener('input', onPronounsCustomUpdate);
pronounsCustomInput.addEventListener('input', onPronounsCustomUpdate);
}