Rework user profile settings

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

View file

@ -0,0 +1,65 @@
// @watch start
// templates/user/settings/**.tmpl
// web_src/css/{form,user}.css
// @watch end
import {expect} from '@playwright/test';
import {test, save_visual, login_user, login} from './utils_e2e.ts';
import {validate_form} from './shared/forms.ts';
test.beforeAll(async ({browser}, workerInfo) => {
await login_user(browser, workerInfo, 'user2');
});
test('User: Profile settings', async ({browser}, workerInfo) => {
const page = await login({browser}, workerInfo);
await page.goto('/user/settings');
await page.getByLabel('Full name').fill('SecondUser');
await page.locator('#pronouns-dropdown').click();
await page.getByRole('option', {name: 'she/her'}).click();
await page.getByPlaceholder('Tell others a little bit').fill('I am a playwright test running for several seconds.');
await page.getByPlaceholder('Tell others a little bit').press('Tab');
await page.getByLabel('Website').fill('https://forgejo.org');
await page.getByPlaceholder('Share your approximate').fill('on a computer chip');
await page.getByLabel('User visibility').click();
await page.getByLabel('Visible only to signed-in').click();
await page.getByLabel('Hide email address Your email').uncheck();
await page.getByLabel('Hide activity from profile').check();
await validate_form({page}, 'fieldset');
await save_visual(page);
await page.getByRole('button', {name: 'Update profile'}).click();
await expect(page.getByText('Your profile has been updated.')).toBeVisible();
await page.getByRole('link', {name: 'public activity'}).click();
await expect(page.getByText('Your activity is only visible')).toBeVisible();
await save_visual(page);
await page.goto('/user2');
await expect(page.getByText('SecondUser')).toBeVisible();
await expect(page.getByText('on a computer chip')).toBeVisible();
await expect(page.locator('li').filter({hasText: 'user2@example.com'})).toBeVisible();
await expect(page.locator('li').filter({hasText: 'https://forgejo.org'})).toBeVisible();
await expect(page.getByText('I am a playwright test')).toBeVisible();
await save_visual(page);
await page.goto('/user/settings');
await page.locator('#pronouns-dropdown').click();
await page.getByRole('option', {name: 'Custom'}).click();
await page.getByLabel('Custom pronouns').fill('rob/ot');
await page.getByLabel('User visibility').click();
await page.getByLabel('Visible to everyone').click();
await page.getByLabel('Hide email address Your email').check();
await page.getByLabel('Hide activity from profile').uncheck();
await expect(page.getByText('Your profile has been updated.')).toBeHidden();
await validate_form({page}, 'fieldset');
await save_visual(page);
await page.getByRole('button', {name: 'Update profile'}).click();
await expect(page.getByText('Your profile has been updated.')).toBeVisible();
await page.goto('/user2');
await expect(page.getByText('SecondUser')).toBeVisible();
await expect(page.locator('li').filter({hasText: 'user2@example.com'})).toBeHidden();
await page.goto('/user2?tab=activity');
await expect(page.getByText('Your activity is visible to everyone')).toBeVisible();
});

View file

@ -105,6 +105,7 @@ export async function save_visual(page: Page) {
page.locator('#repo_migrating'),
// update order of recently created repos is not fully deterministic
page.locator('.flex-item-main').filter({hasText: 'relative time in repo'}),
page.locator('#activity-feed'),
// dynamic IDs in fixed-size inputs
page.locator('input[value*="dyn-id-"]'),
],

View file

@ -185,7 +185,6 @@ func TestLDAPUserSignin(t *testing.T) {
assert.Equal(t, u.UserName, htmlDoc.GetInputValueByName("name"))
assert.Equal(t, u.FullName, htmlDoc.GetInputValueByName("full_name"))
assert.Equal(t, u.Email, htmlDoc.Find("#signed-user-email").Text())
}
func TestLDAPAuthChange(t *testing.T) {

View file

@ -157,23 +157,3 @@ func TestSettingSecurityAuthSource(t *testing.T) {
assert.Contains(t, resp.Body.String(), `gitlab-active`)
assert.Contains(t, resp.Body.String(), `gitlab-inactive`)
}
func TestSettingShowUserEmailSettings(t *testing.T) {
defer tests.PrepareTestEnv(t)()
// user1: keep_email_private = false, user2: keep_email_private = true
// user1 can see own visible email
session := loginUser(t, "user1")
req := NewRequest(t, "GET", "/user/settings")
resp := session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, resp.Body)
assert.Contains(t, htmlDoc.doc.Find("#signed-user-email").Text(), "user1@example.com")
// user2 cannot see own hidden email
session = loginUser(t, "user2")
req = NewRequest(t, "GET", "/user/settings")
resp = session.MakeRequest(t, req, http.StatusOK)
htmlDoc = NewHTMLParser(t, resp.Body)
assert.NotContains(t, htmlDoc.doc.Find("#signed-user-email").Text(), "user2@example.com")
}

View file

@ -42,25 +42,16 @@ func TestUserProfileActivity(t *testing.T) {
// Verify the hint for all types of users: admin, self, guest
testUser2ActivityVisibility(t, userAdmin, "This activity is visible to everyone, but as an administrator you can also see interactions in private spaces.", true)
hintLink := testUser2ActivityVisibility(t, userRegular, "Your activity is visible to everyone, except for interactions in private spaces. Configure.", true)
testUser2ActivityVisibility(t, userRegular, "Your activity is visible to everyone, except for interactions in private spaces. Configure.", true)
testUser2ActivityVisibility(t, userGuest, "", true)
// When viewing own profile, the user is offered to configure activity visibility. Verify that the link is correct and works, also check that it links back to the activity tab.
linkCorrect := assert.EqualValues(t, "/user/settings#keep-activity-private", hintLink)
if linkCorrect {
page := NewHTMLParser(t, userRegular.MakeRequest(t, NewRequest(t, "GET", hintLink), http.StatusOK).Body)
activityLink, exists := page.Find(".field:has(.checkbox#keep-activity-private) .help a").Attr("href")
assert.True(t, exists)
assert.EqualValues(t, "/user2?tab=activity", activityLink)
}
// = Private profile, but public activity =
// Set profile visibility of user2 to private
testChangeUserProfileVisibility(t, userRegular, structs.VisibleTypePrivate)
// When profile activity is configured as public, but the profile is private, tell the user about this and link to visibility settings.
hintLink = testUser2ActivityVisibility(t, userRegular, "Your activity is only visible to you and the instance administrators because your profile is private. Configure.", true)
hintLink := testUser2ActivityVisibility(t, userRegular, "Your activity is only visible to you and the instance administrators because your profile is private. Configure.", true)
assert.EqualValues(t, "/user/settings#visibility-setting", hintLink)
// When the profile is private, tell the admin about this.