kczx-user-management 1.0.0 → 1.0.2

package/README.md

@@ -66,7 +66,8 @@ node scripts/ensure-deps.mjs                     # 仅当上述解析不到 sche
 
 | 能力 | 说明 |
 |---|---|
-| 用户增删改查 | 新增 / 删除 / 角色调整 / 禁用启用 / 重置密码（一次性临时密码）/ 重置两步验证 |
+| 用户增删改查 | 用户表每行一个「编辑」**全屏页**：基本资料（部门 / 角色）+ 账号操作（重置密码 / 重置两步验证 / 禁用启用 / 删除）+ 权限与配额，集中一屏；改动类走「保存」，破坏性操作仍是各自带确认的按钮 |
+| 所属部门 | 账号资料字段（trim 后 ≤ 64 字，控制字符剔除）：新增用户时可填，编辑页可随时改或清空；变更写进操作日志 |
 | 工作区白名单 | 留空 = 允许全部；填写后只允许这些目录（Windows 路径折叠大小写，末尾斜杠自动忽略） |
 | 工作区归属跟踪 | 谁创建的工作区归谁：别人看不到、也不能删改；删除后释放，账号删除后清理 |
 | 每小时 token 配额 | 由浏览器上报 dsh 自身的用量投影增量，服务端按小时窗口累计并拦截 |
@@ -98,6 +99,7 @@ user-management:
   sites: []               # 空 = 自动枚举本机 IP；配域名 + 证书则按 SNI 选择
   title: 'DSH 控制台'
   autoActivate: false     # false = 自助注册需管理员启用
+  historyMaxBytes: 67108864   # 历史改写缓冲上限（字节，默认 64 MiB，最小 1 MiB）
 ```
 
 ## 数据文件
@@ -106,7 +108,7 @@ user-management:
 
 | 文件 | 内容 |
 |---|---|
-| `users.json` | 账号（scrypt 哈希；迁移进来的账号保留 bcrypt，首次登录成功后自动升级为 scrypt） |
+| `users.json` | 账号（scrypt 哈希；迁移进来的账号保留 bcrypt，首次登录成功后自动升级为 scrypt；含 `department` 所属部门） |
 | `sessions.json` | 会话令牌（重启不掉线，7 天滑动过期） |
 | `activity.jsonl` / `audit.jsonl` | 登录与访问台账 / 操作日志（滚动保留最近若干条） |
 | `bans.json` | IP 封禁 |
@@ -130,7 +132,7 @@ node scripts/import-from-dsh-passwords.mjs --from E:\path\to\dsh-passwords --ove
 ## 测试
 
 ```bash
-npm test          # 83 项：策略纯函数、store、API 层、以及真实网关的端到端用例
+npm test          # 93 项：策略纯函数、store、API 层、以及真实网关的端到端用例
 npm run check     # 全量语法检查
 ```
 
@@ -151,7 +153,10 @@ dsh plugin --profile web remove kczx-user-management
 - **门只管走门的人**：若另有插件把 dsh 宿主绑到 `0.0.0.0`（例如 dsh-lan-access），直连宿主端口即可绕过登录，
   且**绕过流量不会出现在任何一本台账里**。要真正的强制约束，宿主端口必须保持回环。
 - **token 配额依赖客户端上报**：浏览器侧被禁用或页面未加载时不计费（时长配额不受影响，它在服务端计时）。
-- 上游 `@weibaohui/user-management`（0.9.5）与本包 `kczx-user-management`（1.0.0）是两个不同的包，互不覆盖，`pnpm update` 不会把两者串在一起。
+- **会话历史要缓冲后才能改写**：历史响应是**一个 JSON 文档**（长会话实测 9–16 MB），网关必须先缓冲才能做沙盒降级与隐藏字符
+  清洗，因此有 `historyMaxBytes` 上限（默认 64 MiB）。超过上限的会话会 **fail-closed 返回 502**，UI 显示「历史加载失败」——
+  调大该值即可；1.0.0 之前用代理默认的 8 MiB，长会话必然踩中。
+- 上游 `@weibaohui/user-management`（0.9.5）与本包 `kczx-user-management` 是两个不同的包，互不覆盖，`pnpm update` 不会把两者串在一起。
 
 ## License
 

package/client/bundle.js

@@ -105,8 +105,21 @@ window.__ModuleLoader__.load({
       actionLogout: '退出登录',
       createUser: '新增用户',
       createUserTitle: '新增用户',
+      actionEdit: '编辑',
+      editUserTitle: '编辑用户',
+      sectionProfile: '基本资料',
+      sectionAccount: '账号操作',
+      accountActionsHint: '以上操作立即生效且不可撤销；角色、部门、权限与配额的改动请用右上角「保存」提交。',
+      editSelfHint: '不能修改自己的角色，也不能禁用或删除自己的账号。',
+      close: '关闭',
       colPassword: '密码（至少 6 位）',
       colRolePick: '角色',
+      colDepartment: '所属部门',
+      departmentPlaceholder: '所属部门（可选，最多 64 字）',
+      departmentUnset: '未设置',
+      editDepartmentHint: '留空表示清除该用户的所属部门。',
+      departmentUpdated: '所属部门已更新',
+      typeProfileChange: '资料变更',
       submitCreate: '创建',
       userCreated: '用户已创建',
       actionDisable: '禁用',
@@ -184,7 +197,6 @@ window.__ModuleLoader__.load({
       usageMinutesFree: '{used} 分钟',
       usageTokens: '{used}/{limit} tok/h',
       usageTokensFree: '{used} tok/h',
-      actionPermissions: '权限/配额',
       permissionsTitle: '权限与配额',
       permFolders: '工作区白名单',
       permFoldersHint: '留空 = 允许访问所有工作区；填写后只允许这些目录下的工作区。',
@@ -276,8 +288,21 @@ window.__ModuleLoader__.load({
       actionLogout: 'Sign out',
       createUser: 'New User',
       createUserTitle: 'New User',
+      actionEdit: 'Edit',
+      editUserTitle: 'Edit user',
+      sectionProfile: 'Profile',
+      sectionAccount: 'Account actions',
+      accountActionsHint: 'These take effect immediately and cannot be undone. Role, department, permissions and quota are written by Save (top right).',
+      editSelfHint: 'You cannot change your own role, disable, or delete your own account.',
+      close: 'Close',
       colPassword: 'Password (min 6 chars)',
       colRolePick: 'Role',
+      colDepartment: 'Department',
+      departmentPlaceholder: 'Department (optional, max 64 chars)',
+      departmentUnset: 'Not set',
+      editDepartmentHint: 'Leave empty to clear this account’s department.',
+      departmentUpdated: 'Department updated',
+      typeProfileChange: 'Profile change',
       submitCreate: 'Create',
       userCreated: 'User created',
       actionDisable: 'Disable',
@@ -355,7 +380,6 @@ window.__ModuleLoader__.load({
       usageMinutesFree: '{used} min',
       usageTokens: '{used}/{limit} tok/h',
       usageTokensFree: '{used} tok/h',
-      actionPermissions: 'Limits',
       permissionsTitle: 'Permissions & Quota',
       permFolders: 'Workspace allow-list',
       permFoldersHint: 'Empty = every workspace is allowed; once filled, only workspaces under these folders are.',
@@ -399,6 +423,7 @@ window.__ModuleLoader__.load({
       delete_user: 'typeDeleteUser',
       access: 'typeAccess',
       user_created: 'typeUserCreated',
+      profile_change: 'typeProfileChange',
       user_disabled: 'typeUserDisabled',
       user_enabled: 'typeUserEnabled',
       ban_ip: 'typeBanIp',
@@ -870,16 +895,25 @@ window.__ModuleLoader__.load({
       return bits.length === 0 ? t('permUnrestricted') : bits.join(' · ')
     }
 
-    /** Per-user permissions & quota editor (admin only).
+    /** Full-page account editor (admin only): profile, account operations and the
+     *  permission/quota model that used to live in dsh-passwords, on one surface.
      *
-     *  This is the account model that used to live in dsh-passwords: workspace
-     *  scope, an hourly token cap, daily minutes, a sandbox floor, upload/git
-     *  switches and the policy ban. The store's reading is surfaced verbatim in the
-     *  form: an empty folder list means every workspace, an empty limit means no
-     *  cap — so clearing a field is a visible, deliberate act rather than a silent
-     *  default. */
-    function PermissionsDialog({ user, onClose, onSaved, __t: t }) {
+     *  Editing and acting are deliberately separated. Everything that is just state
+     *  (department, role, workspace scope, quotas, sandbox floor, upload/git
+     *  switches, ban, note) is staged in the form and written by 保存. Everything
+     *  that takes effect the moment it is pressed and is hard to walk back (reset
+     *  password, reset TOTP, disable, delete) stays an explicit button with its own
+     *  confirm: folding those into a save button would hide them from the operator
+     *  reviewing the form before pressing it.
+     *
+     *  The store's reading is surfaced verbatim: an empty folder list means every
+     *  workspace, an empty limit means no cap — clearing a field is a visible,
+     *  deliberate act rather than a silent default. */
+    function EditUserPage({ user, me, onClose, onDone, onTempPassword, __t: t }) {
       const p = user.permissions || {}
+      const isSelf = user.id === me.id
+      const [department, setDepartment] = useState(user.department || '')
+      const [role, setRole] = useState(user.role)
       const [folders, setFolders] = useState(Array.isArray(p.allowedFolders) ? p.allowedFolders.slice() : [])
       const [draft, setDraft] = useState('')
       const [tokenLimit, setTokenLimit] = useState(p.hourlyTokenLimit == null ? '' : String(p.hourlyTokenLimit))
@@ -892,6 +926,13 @@ window.__ModuleLoader__.load({
       const [busy, setBusy] = useState(false)
       const [err, setErr] = useState('')
 
+      // Same walk-back affordance as the console page this opens from: Escape closes.
+      useEffect(() => {
+        const onKey = (e) => { if (e.key === 'Escape') onClose() }
+        document.addEventListener('keydown', onKey)
+        return () => document.removeEventListener('keydown', onKey)
+      }, [onClose])
+
       const addFolder = () => {
         const value = draft.trim()
         if (value === '' || folders.includes(value)) { setDraft(''); return }
@@ -900,11 +941,27 @@ window.__ModuleLoader__.load({
       }
       const toLimit = (value) => (String(value).trim() === '' ? null : Number(value))
 
-      const submit = () => {
+      /** One write at a time, with the failure kept on the page rather than flashed
+       *  away — an edit this wide needs the error next to the fields it concerns. */
+      const run = (fn) => {
         if (busy) return
         setBusy(true)
         setErr('')
-        api(`/users/${user.id}/permissions`, {
+        Promise.resolve().then(fn).catch((e) => setErr(String(e && e.message))).finally(() => setBusy(false))
+      }
+
+      const save = () => run(async () => {
+        // Role first: it is the one staged edit behind a confirm, so cancelling
+        // that confirm leaves nothing else written.
+        if (role !== user.role) {
+          const label = role === 'admin' ? t('roleAdmin') : t('roleUser')
+          if (!window.confirm(interpolate(t('roleConfirm'), { name: user.username, role: label }))) return
+          await api(`/users/${user.id}/role`, { method: 'POST', body: { role } })
+        }
+        if (department !== (user.department || '')) {
+          await api(`/users/${user.id}/profile`, { method: 'PATCH', body: { department } })
+        }
+        await api(`/users/${user.id}/permissions`, {
           method: 'PUT',
           body: {
             allowedFolders: folders,
@@ -917,153 +974,163 @@ window.__ModuleLoader__.load({
             note,
           },
         })
-          .then(() => { onSaved() })
-          .catch((e) => setErr(String(e && e.message)))
-          .finally(() => setBusy(false))
-      }
+        onDone()
+      })
 
-      return h(UmDialog, {
-        title: `${t('permissionsTitle')} · ${user.username}`,
-        onClose,
-        footer: [
-          h('button', { className: 'um-btn', onClick: onClose }, '✕'),
-          h('button', { className: 'um-btn um-btn-primary', onClick: submit, disabled: busy }, t('save')),
-        ],
-      },
-        err && h('div', { style: { color: 'var(--dsw-alias-state-error-primary)', fontSize: 12, marginBottom: 6 } }, err),
-        // Setting a limit is a judgement about consumption, so show it: an
-        // administrator otherwise has to guess what "100k tokens an hour" means for
-        // this particular account.
-        usageSummary(user, t)
-          ? h('div', { className: 'um-muted', style: { fontSize: 11, marginBottom: 8 } }, interpolate(t('usageToday'), { summary: usageSummary(user, t) }))
-          : null,
-        h('div', { className: 'um-form', style: { maxWidth: 'none' } },
-          h('label', null, t('permFolders')),
-          h('div', { className: 'um-muted', style: { fontSize: 11, marginTop: -4 } }, t('permFoldersHint')),
-          folders.length === 0
-            ? h('div', { className: 'um-empty' }, t('permFoldersAll'))
-            : folders.map((folder, index) => h('div', { key: folder, className: 'um-row' },
-              h('code', { style: { flex: 1, wordBreak: 'break-all', fontSize: 12 } }, folder),
-              h('button', {
-                className: 'um-btn um-btn-danger', style: { flex: 'none' },
-                onClick: () => setFolders(folders.filter((_, i) => i !== index)),
-              }, t('remove')))),
-          h('div', { className: 'um-row' },
-            h('input', {
-              className: 'um-input', style: { flex: 1 }, placeholder: t('permFolderPlaceholder'),
-              value: draft, onChange: (e) => setDraft(e.target.value),
-              onKeyDown: (e) => { if (e.key === 'Enter') { e.preventDefault(); addFolder() } },
-            }),
-            h('button', { className: 'um-btn', style: { flex: 'none' }, onClick: addFolder }, t('add'))),
+      const resetPwd = () => run(async () => {
+        if (!window.confirm(interpolate(t('resetPwdConfirm'), { name: user.username }))) return
+        const d = await api(`/users/${user.id}/reset-password`, { method: 'POST' })
+        onTempPassword({ name: user.username, pwd: d.tempPassword })
+      })
 
-          h('label', { htmlFor: 'um-perm-tokens' }, t('permTokenLimit')),
-          h('input', {
-            id: 'um-perm-tokens', className: 'um-input', inputMode: 'numeric',
-            placeholder: t('permUnlimited'), value: tokenLimit, onChange: (e) => setTokenLimit(e.target.value),
-          }),
-          h('label', { htmlFor: 'um-perm-minutes' }, t('permMinuteLimit')),
-          h('input', {
-            id: 'um-perm-minutes', className: 'um-input', inputMode: 'numeric',
-            placeholder: t('permUnlimited'), value: minuteLimit, onChange: (e) => setMinuteLimit(e.target.value),
-          }),
+      const resetTotp = () => run(async () => {
+        if (!window.confirm(interpolate(t('totpResetConfirm'), { name: user.username }))) return
+        await api(`/users/${user.id}/reset-totp`, { method: 'POST' })
+        onDone()
+      })
 
-          h('label', { htmlFor: 'um-perm-sandbox' }, t('permSandbox')),
-          h('select', {
-            id: 'um-perm-sandbox', className: 'um-input', value: sandbox,
-            onChange: (e) => setSandbox(e.target.value),
-          },
-            h('option', { value: '' }, t('permSandboxNone')),
-            h('option', { value: 'read-only' }, t('permSandboxReadOnly')),
-            h('option', { value: 'workspace-write' }, t('permSandboxWorkspace')),
-            h('option', { value: 'danger-full-access' }, t('permSandboxFull'))),
-
-          h('label', { className: 'um-row', style: { gap: 6 } },
-            h('input', { type: 'checkbox', checked: allowUpload, onChange: (e) => setAllowUpload(e.target.checked) }),
-            t('permAllowUpload')),
-          h('label', { className: 'um-row', style: { gap: 6 } },
-            h('input', { type: 'checkbox', checked: allowGit, onChange: (e) => setAllowGit(e.target.checked) }),
-            t('permAllowGit')),
-          h('label', { className: 'um-row', style: { gap: 6 } },
-            h('input', { type: 'checkbox', checked: banned, onChange: (e) => setBanned(e.target.checked) }),
-            t('permBanned')),
-
-          h('label', { htmlFor: 'um-perm-note' }, t('permNote')),
-          h('input', {
-            id: 'um-perm-note', className: 'um-input', maxLength: 200,
-            value: note, onChange: (e) => setNote(e.target.value),
-          })))
+      const toggleDisabled = () => run(async () => {
+        const disabling = !user.disabled
+        const key = disabling ? 'disableConfirm' : 'enableConfirm'
+        if (!window.confirm(interpolate(t(key), { name: user.username }))) return
+        await api(`/users/${user.id}/disabled`, { method: 'POST', body: { disabled: disabling } })
+        onDone()
+      })
+
+      const remove = () => run(async () => {
+        if (!window.confirm(interpolate(t('deleteConfirm'), { name: user.username }))) return
+        await api(`/users/${user.id}`, { method: 'DELETE' })
+        onDone()
+      })
+
+      return h('div', { className: 'um-page-backdrop', role: 'dialog', 'aria-label': t('editUserTitle') },
+        h('div', { className: 'um-page-head' },
+          h('h3', { className: 'um-page-title' }, `${t('editUserTitle')} · ${user.username}`),
+          h('div', { className: 'um-row' },
+            h('button', { className: 'um-btn', onClick: onClose }, t('close')),
+            h('button', { className: 'um-btn um-btn-primary', disabled: busy, onClick: save }, t('save')))),
+        h('div', { className: 'um-page-body' },
+          h('div', { className: 'um-page-inner' },
+            err && h('div', { style: { color: 'var(--dsw-alias-state-error-primary)', fontSize: 12, marginBottom: 8 } }, err),
+
+            h('div', { className: 'um-card', style: { marginBottom: 14 } },
+              h('h3', { className: 'um-title' }, t('sectionProfile')),
+              h('div', { className: 'um-form', style: { maxWidth: 420 } },
+                h('label', { htmlFor: 'um-edit-username' }, t('colUser')),
+                h('input', { id: 'um-edit-username', className: 'um-input', value: user.username, disabled: true }),
+                h('label', { htmlFor: 'um-edit-department' }, t('colDepartment')),
+                h('input', {
+                  id: 'um-edit-department', className: 'um-input', value: department, maxLength: 64,
+                  placeholder: t('departmentPlaceholder'),
+                  onChange: (e) => setDepartment(e.target.value),
+                }),
+                h('div', { className: 'um-muted', style: { fontSize: 11, marginTop: -4 } }, t('editDepartmentHint')),
+                h('label', { htmlFor: 'um-edit-role' }, t('colRolePick')),
+                h('select', {
+                  id: 'um-edit-role', className: 'um-input', value: role, disabled: isSelf,
+                  onChange: (e) => setRole(e.target.value),
+                },
+                  h('option', { value: 'user' }, t('roleUser')),
+                  h('option', { value: 'admin' }, t('roleAdmin'))),
+                isSelf ? h('div', { className: 'um-muted', style: { fontSize: 11 } }, t('editSelfHint')) : null)),
+
+            h('div', { className: 'um-card', style: { marginBottom: 14 } },
+              h('h3', { className: 'um-title' }, t('sectionAccount')),
+              h('div', { className: 'um-row', style: { flexWrap: 'wrap' } },
+                h('button', { className: 'um-btn', disabled: busy, onClick: resetPwd }, t('actionResetPwd')),
+                user.totpEnabled
+                  ? h('button', { className: 'um-btn', disabled: busy, onClick: resetTotp }, t('totpResetAction'))
+                  : null,
+                h('button', {
+                  className: user.disabled ? 'um-btn' : 'um-btn um-btn-danger',
+                  disabled: busy || isSelf, title: isSelf ? '-' : undefined, onClick: toggleDisabled,
+                }, user.disabled ? t('actionEnable') : t('actionDisable')),
+                h('button', {
+                  className: 'um-btn um-btn-danger',
+                  disabled: busy || isSelf, title: isSelf ? '-' : undefined, onClick: remove,
+                }, t('actionDelete'))),
+              h('div', { className: 'um-muted', style: { fontSize: 11, marginTop: 8 } }, t('accountActionsHint'))),
+
+            h('div', { className: 'um-card' },
+              h('h3', { className: 'um-title' }, t('permissionsTitle')),
+              // Setting a limit is a judgement about consumption, so show it: an
+              // administrator otherwise has to guess what "100k tokens an hour"
+              // means for this particular account.
+              usageSummary(user, t)
+                ? h('div', { className: 'um-muted', style: { fontSize: 11, marginBottom: 8 } }, interpolate(t('usageToday'), { summary: usageSummary(user, t) }))
+                : null,
+              h('div', { className: 'um-form', style: { maxWidth: 'none' } },
+                h('label', null, t('permFolders')),
+                h('div', { className: 'um-muted', style: { fontSize: 11, marginTop: -4 } }, t('permFoldersHint')),
+                folders.length === 0
+                  ? h('div', { className: 'um-empty' }, t('permFoldersAll'))
+                  : folders.map((folder, index) => h('div', { key: folder, className: 'um-row' },
+                    h('code', { style: { flex: 1, wordBreak: 'break-all', fontSize: 12 } }, folder),
+                    h('button', {
+                      className: 'um-btn um-btn-danger', style: { flex: 'none' },
+                      onClick: () => setFolders(folders.filter((_, i) => i !== index)),
+                    }, t('remove')))),
+                h('div', { className: 'um-row' },
+                  h('input', {
+                    className: 'um-input', style: { flex: 1 }, placeholder: t('permFolderPlaceholder'),
+                    value: draft, onChange: (e) => setDraft(e.target.value),
+                    onKeyDown: (e) => { if (e.key === 'Enter') { e.preventDefault(); addFolder() } },
+                  }),
+                  h('button', { className: 'um-btn', style: { flex: 'none' }, onClick: addFolder }, t('add'))),
+
+                h('label', { htmlFor: 'um-perm-tokens' }, t('permTokenLimit')),
+                h('input', {
+                  id: 'um-perm-tokens', className: 'um-input', inputMode: 'numeric',
+                  placeholder: t('permUnlimited'), value: tokenLimit, onChange: (e) => setTokenLimit(e.target.value),
+                }),
+                h('label', { htmlFor: 'um-perm-minutes' }, t('permMinuteLimit')),
+                h('input', {
+                  id: 'um-perm-minutes', className: 'um-input', inputMode: 'numeric',
+                  placeholder: t('permUnlimited'), value: minuteLimit, onChange: (e) => setMinuteLimit(e.target.value),
+                }),
+
+                h('label', { htmlFor: 'um-perm-sandbox' }, t('permSandbox')),
+                h('select', {
+                  id: 'um-perm-sandbox', className: 'um-input', value: sandbox,
+                  onChange: (e) => setSandbox(e.target.value),
+                },
+                  h('option', { value: '' }, t('permSandboxNone')),
+                  h('option', { value: 'read-only' }, t('permSandboxReadOnly')),
+                  h('option', { value: 'workspace-write' }, t('permSandboxWorkspace')),
+                  h('option', { value: 'danger-full-access' }, t('permSandboxFull'))),
+
+                h('label', { className: 'um-row', style: { gap: 6 } },
+                  h('input', { type: 'checkbox', checked: allowUpload, onChange: (e) => setAllowUpload(e.target.checked) }),
+                  t('permAllowUpload')),
+                h('label', { className: 'um-row', style: { gap: 6 } },
+                  h('input', { type: 'checkbox', checked: allowGit, onChange: (e) => setAllowGit(e.target.checked) }),
+                  t('permAllowGit')),
+                h('label', { className: 'um-row', style: { gap: 6 } },
+                  h('input', { type: 'checkbox', checked: banned, onChange: (e) => setBanned(e.target.checked) }),
+                  t('permBanned')),
+
+                h('label', { htmlFor: 'um-perm-note' }, t('permNote')),
+                h('input', {
+                  id: 'um-perm-note', className: 'um-input', maxLength: 200,
+                  value: note, onChange: (e) => setNote(e.target.value),
+                }))))))
     }
 
     function UsersTab({ me, __t: t, flash }) {
       const [users, setUsers] = useState(null)
       const [temp, setTemp] = useState(null) // {name, pwd}
-      const [busyId, setBusyId] = useState(null)
       const [copied, setCopied] = useState(false)
       const [creating, setCreating] = useState(false)
-      const [permUser, setPermUser] = useState(null)
-      const [form, setForm] = useState({ username: '', password: '', role: 'user' })
+      const [editUser, setEditUser] = useState(null)
+      const [form, setForm] = useState({ username: '', password: '', role: 'user', department: '' })
 
       const load = () => api('/users').then((d) => setUsers(d.users)).catch((e) => flash(t('failed') + e.message))
       useEffect(() => { load() }, [])
 
-      const act = async (user, fn) => {
-        setBusyId(user.id)
-        try { await fn() } catch (e) { flash(t('failed') + e.message) } finally { setBusyId(null) }
-      }
-
-      const resetPwd = (user) => {
-        if (!window.confirm(interpolate(t('resetPwdConfirm'), { name: user.username }))) return
-        act(user, async () => {
-          const d = await api(`/users/${user.id}/reset-password`, { method: 'POST' })
-          setTemp({ name: user.username, pwd: d.tempPassword })
-          setCopied(false)
-        })
-      }
-
-      const changeRole = (user) => {
-        const nextRole = user.role === 'admin' ? 'user' : 'admin'
-        const label = nextRole === 'admin' ? t('roleAdmin') : t('roleUser')
-        if (!window.confirm(interpolate(t('roleConfirm'), { name: user.username, role: label }))) return
-        act(user, async () => {
-          await api(`/users/${user.id}/role`, { method: 'POST', body: { role: nextRole } })
-          flash(t('opOk'))
-          await load()
-        })
-      }
-
-      const toggleDisabled = (user) => {
-        const disabling = !user.disabled
-        const key = disabling ? 'disableConfirm' : 'enableConfirm'
-        if (!window.confirm(interpolate(t(key), { name: user.username }))) return
-        act(user, async () => {
-          await api(`/users/${user.id}/disabled`, { method: 'POST', body: { disabled: disabling } })
-          flash(t('opOk'))
-          await load()
-        })
-      }
-
-      const remove = (user) => {
-        if (!window.confirm(interpolate(t('deleteConfirm'), { name: user.username }))) return
-        act(user, async () => {
-          await api(`/users/${user.id}`, { method: 'DELETE' })
-          flash(t('opOk'))
-          await load()
-        })
-      }
-
-      const resetTotp = (user) => {
-        if (!window.confirm(interpolate(t('totpResetConfirm'), { name: user.username }))) return
-        act(user, async () => {
-          await api(`/users/${user.id}/reset-totp`, { method: 'POST' })
-          flash(t('totpResetDone'))
-          await load()
-        })
-      }
-
       const submitCreate = (e) => {
         e.preventDefault()
         api('/users', { method: 'POST', body: form })
-          .then(() => { setCreating(false); setForm({ username: '', password: '', role: 'user' }); flash(t('userCreated')); return load() })
+          .then(() => { setCreating(false); setForm({ username: '', password: '', role: 'user', department: '' }); flash(t('userCreated')); return load() })
           .catch((err) => flash(t('failed') + err.message))
       }
 
@@ -1085,6 +1152,7 @@ window.__ModuleLoader__.load({
           h('table', { className: 'um-table' },
             h('thead', null, h('tr', null,
               h('th', null, t('colUser')),
+              h('th', null, t('colDepartment')),
               h('th', null, t('colRole')),
               h('th', null, t('colCreatedAt')),
               h('th', null, t('colLastLogin')),
@@ -1092,6 +1160,7 @@ window.__ModuleLoader__.load({
               h('th', null, ''))),
             h('tbody', null, users.map((user) => h('tr', { key: user.id, style: user.disabled ? { opacity: 0.55 } : undefined },
               h('td', null, user.username, user.id === me.id ? t('you') : null),
+              h('td', { className: user.department ? undefined : 'um-muted' }, user.department || t('departmentUnset')),
               h('td', null, h('span', { className: 'um-row', style: { gap: 4 } },
                 h(RoleBadge, { role: user.role, __t: t }),
                 user.disabled ? h('span', { className: 'um-badge um-badge-err' }, t('badgeDisabled')) : null,
@@ -1109,26 +1178,7 @@ window.__ModuleLoader__.load({
                   ? h('div', { className: 'um-muted', style: { fontSize: 11, whiteSpace: 'nowrap' } }, usageSummary(user, t))
                   : null)),
               h('td', null, h('div', { className: 'um-row', style: { justifyContent: 'flex-end' } },
-                h('button', { className: 'um-btn', disabled: busyId === user.id, onClick: () => setPermUser(user) }, t('actionPermissions')),
-                h('button', { className: 'um-btn', disabled: busyId === user.id, onClick: () => resetPwd(user) }, t('actionResetPwd')),
-                h('button', {
-                  className: 'um-btn', disabled: busyId === user.id || user.id === me.id,
-                  title: user.id === me.id ? '-' : undefined, onClick: () => changeRole(user),
-                }, user.role === 'admin' ? t('actionSetUser') : t('actionSetAdmin')),
-                h('button', {
-                  className: user.disabled ? 'um-btn' : 'um-btn um-btn-danger',
-                  disabled: busyId === user.id || user.id === me.id,
-                  title: user.id === me.id ? '-' : undefined,
-                  onClick: () => toggleDisabled(user),
-                }, user.disabled ? t('actionEnable') : t('actionDisable')),
-                user.totpEnabled ? h('button', {
-                  className: 'um-btn', disabled: busyId === user.id,
-                  title: t('totpResetAction'), onClick: () => resetTotp(user),
-                }, t('totpResetAction')) : null,
-                h('button', {
-                  className: 'um-btn um-btn-danger', disabled: busyId === user.id || user.id === me.id,
-                  onClick: () => remove(user),
-                }, t('actionDelete'))))))))),
+                h('button', { className: 'um-btn um-btn-primary', onClick: () => setEditUser(user) }, t('actionEdit'))))))))),
         creating && h(UmDialog, {
           title: t('createUserTitle'), onClose: () => setCreating(false),
           footer: [
@@ -1141,14 +1191,24 @@ window.__ModuleLoader__.load({
             h('input', { id: 'um-new-username', className: 'um-input', value: form.username, onChange: (e) => setForm({ ...form, username: e.target.value }), required: true, autoFocus: true }),
             h('label', { htmlFor: 'um-new-password' }, t('colPassword')),
             h('input', { id: 'um-new-password', className: 'um-input', type: 'password', autoComplete: 'new-password', minLength: 6, value: form.password, onChange: (e) => setForm({ ...form, password: e.target.value }), required: true }),
+            h('label', { htmlFor: 'um-new-department' }, t('colDepartment')),
+            h('input', {
+              id: 'um-new-department', className: 'um-input', value: form.department, maxLength: 64,
+              placeholder: t('departmentPlaceholder'),
+              onChange: (e) => setForm({ ...form, department: e.target.value }),
+            }),
             h('label', { htmlFor: 'um-new-role' }, t('colRolePick')),
             h('select', { id: 'um-new-role', className: 'um-input', value: form.role, onChange: (e) => setForm({ ...form, role: e.target.value }) },
               h('option', { value: 'user' }, t('roleUser')),
               h('option', { value: 'admin' }, t('roleAdmin'))))),
-        permUser && h(PermissionsDialog, {
-          user: permUser,
-          onClose: () => setPermUser(null),
-          onSaved: () => { setPermUser(null); flash(t('opOk')); void load() },
+        editUser && h(EditUserPage, {
+          user: editUser,
+          me,
+          onClose: () => setEditUser(null),
+          // The page closes on any write that changes the account, so the row behind
+          // it is re-read instead of being reconciled field by field.
+          onDone: () => { setEditUser(null); flash(t('opOk')); void load() },
+          onTempPassword: (payload) => { setTemp(payload); setCopied(false) },
           __t: t,
         }),
         temp && h(UmDialog, {