username change admin center

frontend/src/App.tsx

@@ -115,6 +115,7 @@ export function App() {
   const [previewBusy, setPreviewBusy] = useState(false);
   const [ocrAvailable, setOcrAvailable] = useState(false);
   const [reportsEnabled, setReportsEnabled] = useState(true);
+  const [usernameChangeEnabled, setUsernameChangeEnabled] = useState(true);
   // Model-error retry: which trailing message is the error bubble (if any),
   // its conversation, and how many times this prompt was already retried.
   const [failed, setFailed] = useState<{ index: number; convId: string } | null>(null);
@@ -185,10 +186,12 @@ export function App() {
             .catch(() => ({
               tools: [] as { name: string; available: boolean }[],
               reportsEnabled: true,
+              usernameChangeEnabled: true,
             })),
         ]);
         setOcrAvailable(t.tools.some((x) => x.name === "ocr" && x.available));
         setReportsEnabled(t.reportsEnabled ?? true);
+        setUsernameChangeEnabled(t.usernameChangeEnabled ?? true);
         setModels(m.models);
         if (m.models.length > 0) setModel(m.models[0]!.id);
         setConvs(c.conversations);
@@ -312,6 +315,7 @@ export function App() {
       .then((t) => {
         setOcrAvailable(t.tools.some((x) => x.name === "ocr" && x.available));
         setReportsEnabled(t.reportsEnabled ?? true);
+        setUsernameChangeEnabled(t.usernameChangeEnabled ?? true);
       })
       .catch(() => {});
     // Land directly on the latest conversation's own URL.
@@ -722,6 +726,7 @@ export function App() {
       />
       <SettingsModal
         user={settingsOpen ? user : null}
+        usernameChangeEnabled={usernameChangeEnabled}
         onClose={() => setSettingsOpen(false)}
         onSaved={(u) => {
           if (u.theme !== user?.theme) {

frontend/src/components/AdminCenter.tsx

@@ -24,7 +24,7 @@ export function AdminCenter() {
   const { t } = useT();
   const [allowed, setAllowed] = useState<boolean | null>(null);
   const [tab, setTab] = useState<Tab>("accounts");
-  const [settings, setSettings] = useState<{ registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean; reportsEnabled: boolean } | null>(null);
+  const [settings, setSettings] = useState<{ registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean; reportsEnabled: boolean; usernameChangeEnabled: boolean } | null>(null);
   const [error, setError] = useState("");
   const [saving, setSaving] = useState(false);
   const [openAccessCount, setOpenAccessCount] = useState(0);
@@ -100,7 +100,7 @@ export function AdminCenter() {
     });
   }, [allowed]);
 
-  async function toggle(patch: { registrationEnabled?: boolean; accessRequestEnabled?: boolean; ocrEnabled?: boolean; reportsEnabled?: boolean }) {
+  async function toggle(patch: { registrationEnabled?: boolean; accessRequestEnabled?: boolean; ocrEnabled?: boolean; reportsEnabled?: boolean; usernameChangeEnabled?: boolean }) {
     setSaving(true);
     setError("");
     try {
@@ -251,6 +251,13 @@ export function AdminCenter() {
               </div>
               <Switch label={t("center.reportsTitle")} checked={settings?.reportsEnabled ?? false} onChange={(v) => toggle({ reportsEnabled: v })} />
             </div>
+            <div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium">{t("center.usernameChangeTitle")}</p>
+                <p className="text-sm opacity-60">{t("center.usernameChangeDesc")}</p>
+              </div>
+              <Switch label={t("center.usernameChangeTitle")} checked={settings?.usernameChangeEnabled ?? false} onChange={(v) => toggle({ usernameChangeEnabled: v })} />
+            </div>
             {saving && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.saving")}</p>}
             {!settings && !error && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.loading")}</p>}
           </section>

frontend/src/components/AdminPanel.tsx

@@ -417,6 +417,7 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
 
 function EditUserDialog({ user, onClose, onSaved }: { user: User | null; onClose: () => void; onSaved: () => void }) {
   const { t } = useT();
+  const [username, setUsername] = useState("");
   const [displayName, setDisplayName] = useState("");
   const [avatarUrl, setAvatarUrl] = useState("");
   const [email, setEmail] = useState("");
@@ -425,6 +426,7 @@ function EditUserDialog({ user, onClose, onSaved }: { user: User | null; onClose
 
   useEffect(() => {
     if (user) {
+      setUsername(user.username);
       setDisplayName(user.displayName);
       setAvatarUrl(user.avatarUrl);
       setEmail(user.email);
@@ -437,7 +439,7 @@ function EditUserDialog({ user, onClose, onSaved }: { user: User | null; onClose
     e.preventDefault();
     if (!user) return;
     try {
-      await api.adminPatch(user.id, { displayName: displayName.trim(), avatarUrl: avatarUrl.trim(), email: email.trim(), theme });
+      await api.adminPatch(user.id, { username: username.trim().toLowerCase(), displayName: displayName.trim(), avatarUrl: avatarUrl.trim(), email: email.trim(), theme });
       onSaved();
       onClose();
     } catch (err) {
@@ -448,6 +450,9 @@ function EditUserDialog({ user, onClose, onSaved }: { user: User | null; onClose
   return (
     <Modal open={user !== null} onClose={onClose} title={t("admin.editUserTitle", { user: user?.username ?? "" })} icon={Pencil}>
       <form onSubmit={save} className="space-y-4">
+        <Field label={t("settings.username")} hint={t("settings.usernameHint")}>
+          <Input value={username} onChange={(e) => setUsername(e.target.value)} maxLength={32} required autoComplete="username" disabled={user?.username === "admin"} />
+        </Field>
         <Field label={t("common.displayName")}><Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required /></Field>
         <Field label={t("admin.avatarUrl")}><Input value={avatarUrl} onChange={(e) => setAvatarUrl(e.target.value)} placeholder="https://…" /></Field>
         <Field label={t("admin.email")}><Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" /></Field>

frontend/src/components/dialogs.tsx

@@ -259,6 +259,7 @@ export function ShareModal({ conv, onClose }: { conv: Conversation | null; onClo
 
 export function SettingsModal({
   user,
+  usernameChangeEnabled = true,
   onClose,
   onSaved,
   onKeyRotated,
@@ -267,6 +268,7 @@ export function SettingsModal({
   onProvidersChanged,
 }: {
   user: User | null;
+  usernameChangeEnabled?: boolean;
   onClose: () => void;
   onSaved: (u: User) => void;
   onKeyRotated?: () => void;
@@ -533,8 +535,8 @@ export function SettingsModal({
               />
               {uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
             </div>
-            <Field label={t("settings.username")} hint={t("settings.usernameHint")}>
-              <Input value={username} onChange={(e) => setUsername(e.target.value)} maxLength={32} required autoComplete="username" disabled={user?.username === "admin"} />
+            <Field label={t("settings.username")} hint={usernameChangeEnabled ? t("settings.usernameHint") : t("settings.usernameDisabled")}>
+              <Input value={username} onChange={(e) => setUsername(e.target.value)} maxLength={32} required autoComplete="username" disabled={user?.username === "admin" || !usernameChangeEnabled} />
             </Field>
             <Field label={t("common.displayName")}>
               <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required autoComplete="nickname" />

frontend/src/lib/api.ts

@@ -185,12 +185,12 @@ export const api = {
       method: "PATCH",
       body: JSON.stringify({ model, ...patch }),
     }),
-  adminPatch: (id: string, patch: { displayName?: string; avatarUrl?: string; theme?: string; email?: string }) =>
+  adminPatch: (id: string, patch: { username?: string; displayName?: string; avatarUrl?: string; theme?: string; email?: string }) =>
     req<{ user: User }>(`/api/admin/users/${id}`, { method: "PATCH", body: JSON.stringify(patch) }),
 
-  adminGetSettings: () => req<{ settings: { registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean; reportsEnabled: boolean } }>("/api/admin/settings"),
-  adminPatchSettings: (patch: { registrationEnabled?: boolean; accessRequestEnabled?: boolean; ocrEnabled?: boolean; reportsEnabled?: boolean }) =>
-    req<{ settings: { registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean; reportsEnabled: boolean } }>("/api/admin/settings", { method: "PATCH", body: JSON.stringify(patch) }),
+  adminGetSettings: () => req<{ settings: { registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean; reportsEnabled: boolean; usernameChangeEnabled: boolean } }>("/api/admin/settings"),
+  adminPatchSettings: (patch: { registrationEnabled?: boolean; accessRequestEnabled?: boolean; ocrEnabled?: boolean; reportsEnabled?: boolean; usernameChangeEnabled?: boolean }) =>
+    req<{ settings: { registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean; reportsEnabled: boolean; usernameChangeEnabled: boolean } }>("/api/admin/settings", { method: "PATCH", body: JSON.stringify(patch) }),
 
   /** Admin: SMTP credentials viewer (password included, blur it by default) + connectivity. */
   adminMailStatus: () =>
@@ -328,7 +328,7 @@ export const api = {
   deleteProvider: (provider: string) =>
     req<{ providers: UserProvider[] }>(`/api/me/providers/${provider}`, { method: "DELETE" }),
 
-  tools: () => req<{ tools: { name: string; description: string; available: boolean; reason: string | null }[]; reportsEnabled: boolean }>("/api/tools"),
+  tools: () => req<{ tools: { name: string; description: string; available: boolean; reason: string | null }[]; reportsEnabled: boolean; usernameChangeEnabled: boolean }>("/api/tools"),
 
   /** Send an image to the platform OCR tool. Returns editable text (never the raw image). */
   ocrImage: async (file: File): Promise<{ text: string; truncated: boolean; chars: number }> => {

frontend/src/lib/i18n.ts

@@ -345,6 +345,10 @@ const en = {
   "center.reportsTitle": "Message reports",
   "center.reportsDesc":
     "Flag button under assistant responses. Off = the flag turns grey with a “Report disabled” tooltip and new reports are rejected.",
+  "center.usernameChangeTitle": "Username changes",
+  "center.usernameChangeDesc":
+    "Lets users rename themselves in Settings → Profile. Off = the field is locked (admins can still rename accounts).",
+  "settings.usernameDisabled": "Username changes are disabled by the administrator.",
   "center.mailTitle": "Key recovery emails",
   "center.mailChecking": "Checking…",
   "center.mailFrom": "Enabled — sent from {from}",
@@ -913,6 +917,10 @@ const es: Dict = {
   "center.reportsTitle": "Denuncias de mensajes",
   "center.reportsDesc":
     "Botón de bandera bajo las respuestas. Off = bandera gris con aviso y se rechazan nuevas denuncias.",
+  "center.usernameChangeTitle": "Cambios de nombre",
+  "center.usernameChangeDesc":
+    "Permite renombrarse en Ajustes → Perfil. Off = campo bloqueado (el admin aún puede renombrar).",
+  "settings.usernameDisabled": "El administrador ha desactivado los cambios de nombre.",
   "center.mailTitle": "Emails de recuperación",
   "center.mailChecking": "Verificando…",
   "center.mailFrom": "Activado — enviados desde {from}",
@@ -1475,6 +1483,10 @@ const fr: Dict = {
   "center.reportsTitle": "Signalements de messages",
   "center.reportsDesc":
     "Bouton drapeau sous les réponses. Off = drapeau grisé avec infobulle et nouveaux signalements refusés.",
+  "center.usernameChangeTitle": "Changements de pseudo",
+  "center.usernameChangeDesc":
+    "Permet de se renommer dans Réglages → Profil. Off = champ verrouillé (l'admin peut toujours renommer).",
+  "settings.usernameDisabled": "Changements de pseudo désactivés par l'administrateur.",
   "center.mailTitle": "Emails de récupération",
   "center.mailChecking": "Vérification…",
   "center.mailFrom": "Activé — envoyés depuis {from}",
@@ -2028,6 +2040,10 @@ const ru: Dict = {
   "center.reportsTitle": "Жалобы на сообщения",
   "center.reportsDesc":
     "Кнопка-флажок под ответами. Выкл = серый флажок с подсказкой, новые жалобы отклоняются.",
+  "center.usernameChangeTitle": "Смена имени",
+  "center.usernameChangeDesc":
+    "Позволяет переименоваться в Настройки → Профиль. Выкл = поле закрыто (админ всё равно может).",
+  "settings.usernameDisabled": "Смена имени отключена администратором.",
   "center.mailTitle": "Письма восстановления",
   "center.mailChecking": "Проверяем…",
   "center.mailFrom": "Включено — шлём от {from}",
@@ -2581,6 +2597,10 @@ const it: Dict = {
   "center.reportsTitle": "Segnalazioni messaggi",
   "center.reportsDesc":
     "Bandierina sotto le risposte. Off = bandierina grigia con tooltip e nuove segnalazioni rifiutate.",
+  "center.usernameChangeTitle": "Cambi di nome",
+  "center.usernameChangeDesc":
+    "Permette di rinominarsi in Impostazioni → Profilo. Off = campo bloccato (l'admin può ancora rinominare).",
+  "settings.usernameDisabled": "Cambi di nome disabilitati dall'amministratore.",
   "center.mailTitle": "Email di recupero",
   "center.mailChecking": "Verifica…",
   "center.mailFrom": "Attivo — inviate da {from}",
@@ -3129,6 +3149,10 @@ const pt: Dict = {
   "center.reportsTitle": "Denúncias de mensagens",
   "center.reportsDesc":
     "Bandeira sob as respostas. Off = bandeira cinzenta com aviso e novas denúncias recusadas.",
+  "center.usernameChangeTitle": "Mudanças de nome",
+  "center.usernameChangeDesc":
+    "Permite renomear-se em Definições → Perfil. Off = campo bloqueado (o admin continua a poder renomear).",
+  "settings.usernameDisabled": "Mudanças de nome desativadas pelo administrador.",
   "center.mailTitle": "Emails de recuperação",
   "center.mailChecking": "A verificar…",
   "center.mailFrom": "Ativo — enviados de {from}",