vincent/gerbeur
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v4: users can't rename themselves, /settings lays out again, and its selectors fit a phone — PATCH /api/me refuses a username with a 400 and changes nothing else in that request; a name changes only through PATCH /api/users/:key/username, which needs user:manage, from /@name/manage. The old name still stays an alias for good. renameUser lost its 30-day limit and its exempt flag, and RENAME_LIMITS holds the slug limit alone. /settings shows the username as plain text, and the rename hint left the catalogs. The settings grid sized its control column to its widest content, the rename hint, which stretched every control under it; that column now takes the remaining width and each control keeps its own size. A segmented control wraps instead of overflowing; in a settings row on a phone it takes the full width, and one of more than 4 options (the styles) lays out in two even rows. .btn-border turned red on hover, so Settings, Manage, Retry and Back looked like Log out; it is now neutral (Smooth's accent is red too), and only Log out takes the new btn-border--danger, muted until hovered red. A <button> and a <Link> .btn-border are now the same height. API.md and the module docs say who renames; the backend tests rename through the moderator route and check a self-rename is refused, and the malformed-name check moved to the manage tab's test. 254 backend and 667 frontend tests pass, and tsc, deno check and doc:lint are clean; Smooth, Brutalist, GeoCities and Kanagawa were checked in screenshots at desktop and phone widths.

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
khannurien
2026-10-07 06:50:43 +00:00
parent 4468438ba7
commit 0a16d3c96c
21 changed files with 235 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/App.css
View File

@@ -793,8 +793,11 @@
}
/* ── Mode toggle — segmented control ── */
/* Too wide for its container, it wraps onto more rows, each filled. */
.visibility-toggle {
display: flex;
flex-wrap: wrap;
max-width: 100%;
background: var(--color-bg);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-lg);
@@ -816,6 +819,14 @@
white-space: nowrap;
}
/* On a phone, many options make two even rows; Segmented sets the columns. */
@media (max-width: 512px) {
.visibility-toggle--many {
display: grid;
grid-template-columns: repeat(var(--segmented-columns), minmax(0, 1fr));
}
}
.visibility-toggle button.active {
background: var(--color-accent);
color: var(--color-on-accent);
@@ -2646,17 +2657,32 @@ body.has-player .chat-fab {
border: 1.5px solid var(--color-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
color: var(--color-text);
font-size: var(--text-sm);
/* A <button> and a <Link> come out the same height. */
line-height: 1.5;
font-family: inherit;
cursor: pointer;
transition: border-color var(--dur-base), color var(--dur-base), background
var(--dur-base);
}
/* Neutral: the accent can be a red (Smooth's), which would read as danger. */
.btn-border:hover {
border-color: var(--color-text-muted);
color: var(--color-text);
background: color-mix(in srgb, var(--color-text) 6%, transparent);
}
/* Log out: the one bordered button that ends something, muted until hovered. */
.btn-border--danger {
color: var(--color-text-muted);
}
.btn-border--danger:hover {
border-color: var(--color-danger);
color: var(--color-danger);
background: transparent;
}
/* ── ErrorCard ── */
@@ -7045,22 +7071,27 @@ body.has-player .chat-fab {
}
/* ── Profile appearance settings ── */
/* Labels in one column, controls in the rest of the width. Each control keeps
its own width, up to the column's, past which a segmented control wraps. */
.profile-appearance-grid {
display: grid;
grid-template-columns: max-content max-content;
grid-template-columns: max-content minmax(0, 1fr);
gap: 0.75rem 1rem;
align-items: center;
justify-items: start;
}
.profile-appearance-row {
display: contents;
}
/* On a phone the label goes above its control, and the segmented controls
take the whole width, so they line up and a long one wraps evenly. */
@media (max-width: 512px) {
.profile-appearance-grid {
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: stretch;
gap: 1rem;
}
@@ -7070,6 +7101,14 @@ body.has-player .chat-fab {
align-items: flex-start;
gap: 0.3rem;
}
.profile-appearance-row > .visibility-toggle {
align-self: stretch;
}
}
.profile-appearance-value {
font-weight: 600;
}
.profile-appearance-label {

6
src/components/profile/ProfileHeader.tsx
View File

@@ -181,7 +181,11 @@ export function ProfileHeader(
<Trans>Manage</Trans>
</Link>
)}
<button type="button" className="btn-border" onClick={logout}>
<button
type="button"
className="btn-border btn-border--danger"
onClick={logout}
>
<Trans>Log out</Trans>
</button>
</ProfileOwnActions>

14
src/components/profile/UsernameField.tsx
View File

@@ -1,6 +1,6 @@
/**
* Renders the field that renames a user, on the settings page for one's own
* name and on a profile's "manage" tab for a moderator.
* Renders the field that renames a user, on a profile's "manage" tab, which
* those with `user:manage` see: users can't rename themselves.
*
* @module
*/
@@ -14,16 +14,16 @@ import { useApiForm } from "../../hooks/form/useApiForm.ts";
import { FormError } from "../form/FormError.tsx";
import { SubmitButton } from "../form/SubmitButton.tsx";
/** Passed to {@link UsernameField} by `Settings` and `ProfileManageTab`. */
/** Passed to {@link UsernameField} by `ProfileManageTab`. */
export interface UsernameFieldProps {
username: string;
/**
* Sends the new name, to `PATCH /api/me` or
* `PATCH /api/users/:key/username`, and resolves to the name the server
* kept. A refusal rejects with its message, which the field shows.
* Sends the new name to `PATCH /api/users/:key/username`, and resolves to
* the name the server kept. A refusal rejects with its message, which the
* field shows.
*/
save: (username: string) => Promise<string>;
/** Shown under the field, such as how often the name may change. */
/** Shown under the field, such as what becomes of the old name. */
hint?: ReactNode;
}

18
src/components/shared/Segmented.tsx
View File

@@ -29,12 +29,28 @@ export interface SegmentedProps<V> {
className?: string;
}
/**
* Past this many options, a phone lays them out in two even rows rather than
* one row that would wrap unevenly (`.visibility-toggle--many`).
*/
const MAX_ONE_ROW = 4;
/** Renders the options as buttons, the one equal to `value` marked active. */
export function Segmented<V>(
{ options, value, onChange, disabled, className }: SegmentedProps<V>,
): React.JSX.Element {
const many = options.length > MAX_ONE_ROW;
return (
<div className={`visibility-toggle${className ? ` ${className}` : ""}`}>
<div
className={`visibility-toggle${many ? " visibility-toggle--many" : ""}${
className ? ` ${className}` : ""
}`}
style={many
? {
"--segmented-columns": Math.ceil(options.length / 2),
} as React.CSSProperties
: undefined}
>
{options.map((opt) => (
<button
key={String(opt.value)}

49
src/pages/Settings.tsx
View File

@@ -1,6 +1,6 @@
/**
* Renders the signed-in user's settings page, `/settings`, where they change
* their name, their password, their account's settings and this browser's.
* their password, their account's settings and this browser's.
*
* @module
*/
@@ -13,9 +13,6 @@ import { Trans } from "@lingui/react/macro";
import { Trans as Message } from "@lingui/react";
import type { ColorScheme, StyleName } from "../../shared/theme.ts";
import type { FeedTab } from "../../shared/paths.ts";
import type { Wire } from "../../shared/api.ts";
import type { SelfUser } from "../../shared/user.ts";
import { API_URL } from "../config/api.ts";
import { useTheme } from "../hooks/theme/useTheme.ts";
import { useDefaultFeedTab } from "../hooks/feed/useDefaultFeedTab.ts";
import { useSoundsEnabled } from "../hooks/shared/useSoundsEnabled.ts";
@@ -24,8 +21,6 @@ import { useRequiredAuth } from "../hooks/auth/useAuth.ts";
import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
import { EMAIL_ENABLED } from "../config/instance.ts";
import { previewChime } from "../utils/shared/sound.ts";
import { expectOk } from "../utils/shared/api.ts";
import { deserializeSelfUser } from "../utils/shared/deserialize.ts";
import { PageShell } from "../components/layout/PageShell.tsx";
import {
Segmented,
@@ -34,8 +29,6 @@ import {
import { ChangePasswordModal } from "../components/profile/ChangePasswordModal.tsx";
import { ProfileSection } from "../components/profile/ProfileSection.tsx";
import { SettingRow } from "../components/profile/SettingRow.tsx";
import { UsernameField } from "../components/profile/UsernameField.tsx";
import { RENAME_LIMITS } from "../../shared/validation.ts";
// The styles' names are their own, in every language.
const STYLE_OPTIONS: SegmentedOption<StyleName>[] = [
@@ -66,16 +59,15 @@ const ON_OFF_OPTIONS: SegmentedOption<boolean>[] = [
];
/**
* Renders `/settings`, signed in only: the username, the password change,
* which opens {@link ChangePasswordModal}, and the settings, each saved as
* soon as it is clicked. A new name is saved to `PATCH /api/me`, at most once
* in 30 days but for those with `user:manage`, and the old one keeps leading
* to the user. The style, color scheme and digests are saved to the account;
* the default feed tab and sounds, for now, to this browser.
* Renders `/settings`, signed in only: the username, which only a moderator
* changes (`ProfileManageTab`), the password change, which opens
* {@link ChangePasswordModal}, and the settings, each saved as soon as it is
* clicked. The style, color scheme and digests are saved to the account; the
* default feed tab and sounds, for now, to this browser.
*/
export function Settings(): React.JSX.Element {
useDocumentTitle(t`Settings`);
const { user, authFetch, updateSession } = useRequiredAuth();
const { user } = useRequiredAuth();
const { style, colorScheme, setStyle, setColorScheme } = useTheme();
const [defaultFeedTab, setDefaultFeedTab] = useDefaultFeedTab();
const [soundsEnabled, setSoundsEnabled] = useSoundsEnabled();
@@ -83,20 +75,6 @@ export function Settings(): React.JSX.Element {
// Until the session has the settings, a click would save over unknown ones.
const digestsDisabled = !EMAIL_ENABLED || !settings;
const [changePasswordOpen, setChangePasswordOpen] = useState(false);
const renameDays = RENAME_LIMITS.USERNAME.windowMs / 86_400_000;
async function rename(username: string): Promise<string> {
const self = deserializeSelfUser(
await expectOk<Wire<SelfUser>>(
await authFetch(`${API_URL}/api/me`, {
method: "PATCH",
body: JSON.stringify({ username }),
}),
),
);
updateSession({ user: self });
return self.username;
}
return (
<PageShell>
@@ -108,18 +86,7 @@ export function Settings(): React.JSX.Element {
<ProfileSection title={<Trans>Account</Trans>}>
<div className="profile-appearance-grid">
<SettingRow label={<Trans>Username</Trans>}>
<UsernameField
key={user.username}
username={user.username}
save={rename}
hint={
<Trans>
You can change it once every {renameDays}{" "}
days. Links to your old name keep working, and nobody else can
take it.
</Trans>
}
/>
<span className="profile-appearance-value">{user.username}</span>
</SettingRow>
<SettingRow label={<Trans>Password</Trans>}>
<button

6
src/pages/UserPublicProfile.tsx
View File

@@ -123,7 +123,11 @@ export function UserPublicProfile(): React.JSX.Element {
<Trans>← Back</Trans>
</button>
{me && (
<button className="btn-border" type="button" onClick={logout}>
<button
className="btn-border btn-border--danger"
type="button"
onClick={logout}
>
<Trans>Log out</Trans>
</button>
)}

47
src/test/pages/Settings.test.tsx
View File

@@ -4,7 +4,7 @@ import { userEvent } from "@testing-library/user-event";
import { Settings } from "../../pages/Settings.tsx";
import { DEFAULT_SETTINGS } from "../../../shared/settings.ts";
import { calls, fail, route } from "../fetch.ts";
import { makeSession, makeToken, wire } from "../fixtures.ts";
import { makeSession, makeToken } from "../fixtures.ts";
import { renderApp } from "../render.tsx";
import { AUTH_STORAGE_KEY } from "../../utils/auth/storage.ts";
@@ -95,45 +95,12 @@ describe("Settings", () => {
expect(weeklyOff).toHaveClass("active");
});
test("a new username goes to the account and the session", async () => {
route(
"PATCH /api/me",
(req) => wire({ ...annSession.user, ...(req.body as object) }),
);
const user = open();
const name = await screen.findByRole("textbox", { name: "Username" });
expect(screen.getByText(/once every 30 days/)).toBeInTheDocument();
const rename = screen.getByRole("button", { name: "Rename" });
expect(rename).toBeDisabled();
await user.clear(name);
await user.type(name, "annie");
await user.click(rename);
await waitFor(() =>
expect(JSON.parse(localStorage.getItem(AUTH_STORAGE_KEY)!).user.username)
.toBe("annie")
);
expect(calls("PATCH /api/me")[0].body).toEqual({ username: "annie" });
expect(screen.getByRole("textbox", { name: "Username" })).toHaveValue(
"annie",
);
});
test("a refused username says why, and a malformed one isn't sent", async () => {
route(
"PATCH /api/me",
() => fail("A username can only be changed once every 30 days", 429),
);
const user = open();
const name = await screen.findByRole("textbox", { name: "Username" });
await user.type(name, " x{Enter}");
expect(await screen.findByText(/Letters, numbers and underscores/))
.toBeInTheDocument();
expect(calls("PATCH /api/me")).toHaveLength(0);
await user.clear(name);
await user.type(name, "annie{Enter}");
expect(await screen.findByRole("alert")).toHaveTextContent(
"once every 30 days",
);
test("the username is shown, and can't be changed here", async () => {
open();
await screen.findByText("Username");
expect(row("Username")).toHaveTextContent(annSession.user.username);
expect(screen.queryByRole("textbox", { name: "Username" })).toBeNull();
expect(screen.queryByRole("button", { name: "Rename" })).toBeNull();
});
test("change password keeps you signed in with the fresh tokens", async () => {

9
src/test/pages/UserPublicProfile.test.tsx
View File

@@ -505,7 +505,7 @@ describe("UserPublicProfile", () => {
});
});
test("a refused rename says why", async () => {
test("a refused rename says why, and a malformed one isn't sent", async () => {
route(
"PATCH /api/users/:id/username",
() => fail("Username already exists", 409),
@@ -515,7 +515,12 @@ describe("UserPublicProfile", () => {
url: "/@ann/manage",
});
const name = await screen.findByRole("textbox", { name: "Username" });
await user.type(name, "x{Enter}");
await user.type(name, " x{Enter}");
expect(await screen.findByText(/Letters, numbers and underscores/))
.toBeInTheDocument();
expect(calls("PATCH /api/users/:id/username")).toHaveLength(0);
await user.clear(name);
await user.type(name, "annx{Enter}");
expect(await screen.findByRole("alert")).toHaveTextContent(
"Username already exists",
);