@ploykit/ui 0.5.0 → 0.6.2

package/src/pages/account/ProfileSettingsPage.tsx

@@ -0,0 +1,189 @@
+
+import { useState } from 'react'
+import { z } from 'zod'
+import { PageHeader, PageLoading, PageError } from '../../components/Page'
+import { SettingsCard } from '../../components/SettingsCard'
+import { FormField } from '../../components/FormField'
+import { Button } from '../../components/ui/button'
+import { Input } from '../../components/ui/input'
+import { Badge } from '../../components/ui/badge'
+import { ImpactConfirmation } from '../../components/SecretModal'
+import { toast } from '../../components/toast'
+import { apiErrorMessage } from '../../lib/api-error'
+import { useApi } from '@ploykit/hooks'
+import { useAuth } from '@ploykit/hooks'
+import { useZodForm } from '@ploykit/hooks'
+import type { PKUser } from '@ploykit/hooks'
+
+
+
+const profileSchema = z.object({
+  display_name: z.string().trim().min(1, '请输入昵称').max(100, '昵称最多 100 字符'),
+  
+  avatar_url: z.string()
+    .refine((v) => v === '' || /^https?:\/\//.test(v), '头像链接需以 http(s):// 开头')
+    .refine((v) => v === '' || v.length <= 2048, '头像链接最多 2048 字符'),
+})
+type ProfileForm = z.infer<typeof profileSchema>
+
+export interface ProfileSettingsPageProps {
+  
+  onDeleted?: () => void
+}
+
+export function ProfileSettingsPage({ onDeleted }: ProfileSettingsPageProps) {
+  const { user, loading, refresh, logout } = useAuth()
+  const api = useApi()
+  const [saving, setSaving] = useState(false)
+  const [sending, setSending] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const [confirmEmail, setConfirmEmail] = useState('')
+  const [confirmOpen, setConfirmOpen] = useState(false)
+
+  const form = useZodForm<ProfileForm>({
+    schema: profileSchema,
+    defaultValues: { display_name: user?.display_name ?? '', avatar_url: user?.avatar_url ?? '' },
+    values: user
+      ? { display_name: user.display_name, avatar_url: user.avatar_url ?? '' }
+      : undefined, // 用户数据到达后同步进表单（保留已输入内容的 RHF 回退语义）
+  })
+
+  if (loading) return <PageLoading label="加载账号信息…" />
+  if (!user) {
+    return <PageError message="未登录或会话已过期，请重新登录" onRetry={() => refresh()} />
+  }
+
+  const handleSave = form.handleSubmit(async (values) => {
+    setSaving(true)
+    try {
+      await api.patch<PKUser>('/auth/me', {
+        display_name: values.display_name,
+        avatar_url: values.avatar_url,
+      })
+      await refresh() 
+      toast.success('资料已更新')
+    } catch (e) {
+      
+      toast.error(apiErrorMessage(e, '保存失败'))
+    } finally {
+      setSaving(false)
+    }
+  })
+
+  const handleResend = async () => {
+    setSending(true)
+    try {
+      await api.post('/auth/send-verification') 
+      toast.success('验证邮件已发送，请查收')
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '发送失败'))
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    setDeleting(true)
+    try {
+      await api.delete('/auth/me') 
+      if (onDeleted) onDeleted()
+      else {
+        await logout()
+        window.location.href = '/login'
+      }
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '注销失败'))
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const emailReadyToDelete = confirmEmail.trim().toLowerCase() === user.email.toLowerCase()
+
+  return (
+    <div>
+      <PageHeader title="个人资料" description="管理昵称、头像等账号资料" />
+
+      <SettingsCard
+        title="资料" description="对外展示的昵称与头像"
+        cta={<Button type="submit" form="profile-form" disabled={saving}>{saving ? '保存中…' : '保存'}</Button>}
+      >
+        <form id="profile-form" onSubmit={handleSave} className="max-w-xl space-y-4">
+          <FormField
+            label="昵称" required
+            error={form.formState.errors.display_name?.message} htmlFor="profile-name"
+          >
+            <Input id="profile-name" maxLength={100} placeholder="怎么称呼你" {...form.register('display_name')} />
+          </FormField>
+          <FormField
+            label="头像链接"
+            error={form.formState.errors.avatar_url?.message} htmlFor="profile-avatar"
+            description="可选；需 http(s):// 开头、最多 2048 字符。外部图片可能被内容安全策略拦截，无法加载时显示默认头像"
+          >
+            <Input id="profile-avatar" maxLength={2048} placeholder="https://…（可选）" {...form.register('avatar_url')} />
+          </FormField>
+        </form>
+
+        <div className="mt-6 flex flex-row items-center justify-between gap-4 rounded-lg border p-4">
+          <div className="min-w-0">
+            <p className="text-sm font-medium">登录邮箱</p>
+            <p className="mt-0.5 truncate text-sm text-muted-foreground" data-testid="profile-email">
+              {user.email}
+            </p>
+            {/* B3：只读现实如实说明——此前页头承诺"管理登录邮箱"却无修改入口 */}
+            <p className="mt-1 text-xs text-muted-foreground">用于登录与接收通知，暂不支持自助修改</p>
+          </div>
+          <div className="flex shrink-0 items-center gap-2">
+            {user.email_verified ? (
+              <Badge variant="secondary" className="bg-(--success)/10 text-(--success) border-(--success)/30">
+                已验证
+              </Badge>
+            ) : (
+              <>
+                <Badge variant="outline" className="text-(--warning) border-(--warning)/40 bg-(--warning)/15">未验证</Badge>
+                <Button variant="outline" size="sm" onClick={handleResend} disabled={sending}>
+                  {sending ? '发送中…' : '重新发送验证邮件'}
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </SettingsCard>
+
+      <SettingsCard
+        danger title="删除账号" description="注销后账号进入删除状态，无法恢复"
+        cta={
+          <Button
+            variant="destructive" disabled={!emailReadyToDelete || deleting}
+            onClick={() => setConfirmOpen(true)}
+          >
+            删除账号
+          </Button>
+        }
+      >
+        <div className="max-w-xl space-y-4">
+          <FormField label="输入登录邮箱以确认" htmlFor="profile-delete-email">
+            <Input
+              id="profile-delete-email" placeholder={user.email} value={confirmEmail}
+              onChange={(e) => setConfirmEmail(e.target.value)}
+            />
+          </FormField>
+        </div>
+      </SettingsCard>
+
+      <ImpactConfirmation
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        onConfirm={handleDelete}
+        title="确认删除账号？"
+        confirmText="永久删除"
+        danger
+        impacts={[
+          '账号进入 deleted 状态，邮箱被释放（可用同邮箱重新注册）',
+          '所有会话立即失效并吊销全部个人访问令牌（PAT）',
+          '昵称、头像等资料被清空，操作不可恢复',
+        ]}
+      />
+    </div>
+  )
+}

package/src/pages/account/SecuritySettingsPage.tsx

@@ -0,0 +1,214 @@
+
+import { useState } from 'react'
+import { z } from 'zod'
+import { PageHeader, PageError } from '../../components/Page'
+import { SettingsCard } from '../../components/SettingsCard'
+import { FormField } from '../../components/FormField'
+import { Button } from '../../components/ui/button'
+import { Input } from '../../components/ui/input'
+import { Badge } from '../../components/ui/badge'
+import { DataTable, type Column } from '../../components/DataTable'
+import { ImpactConfirmation } from '../../components/SecretModal'
+import { useConfirm } from '../../components/ConfirmDialog'
+import { toast } from '../../components/toast'
+import { useApi } from '@ploykit/hooks'
+import { useAuth } from '@ploykit/hooks'
+import { useZodForm } from '@ploykit/hooks'
+import { useSessions, useRevokeSession, useRevokeAllSessions, type SessionInfo } from '@ploykit/hooks'
+import { passwordSchema } from '../auth/RegisterPage'
+import { apiErrorMessage } from '../../lib/api-error'
+import { formatDateTime, shortID } from '../../lib/utils'
+
+const changePwSchema = z
+  .object({
+    old_password: z.string().min(1, '请输入当前密码'),
+    new_password: passwordSchema,
+  })
+  // B4（ui-audit-10pages §4.2，S3）：new==old 客户端拦截——相同值提交后端会
+  // 判定通过并"成功"改密，顺带静默吊销全部会话（服务端无 new==old 校验，
+  // 半边 ➡️U1 identity 归属）。跨字段校验须挂对象级 refine（字段级拿不到 old）；
+  // zod 语义：字段规则全过才跑 refine，old 为空时不会叠加误导性报错。
+  .superRefine((v, ctx) => {
+    if (v.old_password !== '' && v.new_password === v.old_password) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['new_password'],
+        message: '新密码不能与当前密码相同',
+      })
+    }
+  })
+type ChangePwForm = z.infer<typeof changePwSchema>
+
+function truncate(s: string, max = 32): string {
+  return s.length > max ? s.slice(0, max) + '…' : s
+}
+
+export function SecuritySettingsPage() {
+  const api = useApi()
+  const { refresh, logout } = useAuth()
+  const confirm = useConfirm()
+  const { sessions, loading, error, refetch } = useSessions()
+  const { revoke } = useRevokeSession()
+  const { revokeAll } = useRevokeAllSessions()
+
+  const [saving, setSaving] = useState(false)
+  const [revokingAll, setRevokingAll] = useState(false)
+  const [confirmAllOpen, setConfirmAllOpen] = useState(false)
+
+  const form = useZodForm<ChangePwForm>({
+    schema: changePwSchema,
+    defaultValues: { old_password: '', new_password: '' },
+  })
+
+  const handleChangePw = form.handleSubmit(async (values) => {
+    setSaving(true)
+    try {
+      await api.post('/auth/change-password', {
+        old_password: values.old_password,
+        new_password: values.new_password,
+      })
+      toast.success('密码已修改，其他设备可能需要重新登录')
+      form.reset()
+      await refresh() 
+    } catch (e) {
+      
+      
+      
+      toast.error(apiErrorMessage(e, '修改失败'))
+    } finally {
+      setSaving(false)
+    }
+  })
+
+  const handleRevoke = async (s: SessionInfo) => {
+    const ok = await confirm({
+      title: '吊销此会话？',
+      description: s.current ? '这是当前设备，吊销后需要重新登录。' : truncate(s.user_agent),
+      confirmText: '吊销',
+      danger: true,
+    })
+    if (!ok) return
+    try {
+      await revoke(s.id)
+      if (s.current) {
+        
+        
+        
+        toast.success('已吊销当前会话，即将返回登录页')
+        await logout()
+        window.location.href = '/login'
+        return
+      }
+      toast.success('会话已吊销')
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '吊销失败'))
+    }
+  }
+
+  const handleRevokeAll = async () => {
+    setRevokingAll(true)
+    try {
+      await revokeAll() 
+      toast.success('已吊销全部会话')
+      window.location.href = '/login'
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '吊销失败'))
+      setRevokingAll(false)
+    }
+  }
+
+  const columns: Column<SessionInfo>[] = [
+    {
+      key: 'user_agent', header: '设备',
+      
+      
+      
+      render: (s) => (
+        <span title={s.user_agent} className="text-muted-foreground inline-block max-w-64 truncate">{truncate(s.user_agent)}</span>
+      ),
+    },
+    {
+      key: 'ip_hash', header: 'IP（哈希）',
+      render: (s) => <span title={s.ip_hash} className="font-mono text-xs">{shortID(s.ip_hash, 10)}</span>,
+    },
+    { key: 'last_seen_at', header: '最近活跃', render: (s) => formatDateTime(s.last_seen_at) },
+    { key: 'expires_at', header: '过期时间', render: (s) => formatDateTime(s.expires_at) },
+    {
+      key: 'current', header: '当前',
+      
+      render: (s) =>
+        s.current === undefined ? (
+          <span className="text-muted-foreground">—</span>
+        ) : s.current ? (
+          <Badge variant="secondary" className="bg-(--success)/10 text-(--success) border-(--success)/30">当前设备</Badge>
+        ) : (
+          <span className="text-muted-foreground">—</span>
+        ),
+    },
+    {
+      key: 'actions', header: '', className: 'text-right',
+      render: (s) => (
+        <Button variant="ghost" size="sm" className="text-destructive" onClick={() => handleRevoke(s)}>
+          吊销
+        </Button>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <PageHeader title="账户安全" description="修改密码并管理已登录设备" />
+
+      <SettingsCard
+        title="修改密码" description="修改后其他会话将失效，需要重新登录"
+        cta={<Button type="submit" form="security-pw-form" disabled={saving}>{saving ? '提交中…' : '修改密码'}</Button>}
+      >
+        <form id="security-pw-form" onSubmit={handleChangePw} className="max-w-xl space-y-4">
+          <FormField label="当前密码" error={form.formState.errors.old_password?.message} htmlFor="sec-old">
+            <Input id="sec-old" type="password" autoComplete="current-password" {...form.register('old_password')} />
+          </FormField>
+          <FormField label="新密码" error={form.formState.errors.new_password?.message} htmlFor="sec-new">
+            <Input id="sec-new" type="password" placeholder="至少 10 位，含三类字符"
+              autoComplete="new-password" {...form.register('new_password')} />
+          </FormField>
+        </form>
+      </SettingsCard>
+
+      <SettingsCard
+        title="活跃会话"
+        description="最近登录过你账号的设备；可疑会话请立即吊销"
+        cta={
+          <Button variant="destructive" size="sm" disabled={revokingAll} onClick={() => setConfirmAllOpen(true)}>
+            全部吊销
+          </Button>
+        }
+      >
+        {error ? (
+          <PageError message={apiErrorMessage(error, '会话列表加载失败')} onRetry={() => refetch()} />
+        ) : (
+          <DataTable
+            columns={columns}
+            rows={sessions}
+            rowKey={(s) => s.id}
+            loading={loading}
+            empty={<div className="py-8 text-center text-sm text-muted-foreground">暂无活跃会话</div>}
+          />
+        )}
+      </SettingsCard>
+
+      <ImpactConfirmation
+        open={confirmAllOpen}
+        onOpenChange={setConfirmAllOpen}
+        onConfirm={handleRevokeAll}
+        title="吊销全部会话？"
+        confirmText="全部吊销"
+        danger
+        impacts={[
+          '所有设备（含当前设备）立即退出登录',
+          '会话 cookie 被清除，页面将跳转登录页',
+          '个人访问令牌（PAT）不受影响，仍需单独吊销',
+        ]}
+      />
+    </div>
+  )
+}

package/src/pages/account/TokensPage.tsx

@@ -0,0 +1,211 @@
+
+import { useState } from 'react'
+import { PageHeader, PageEmpty } from '../../components/Page'
+import { FormField } from '../../components/FormField'
+import { Button } from '../../components/ui/button'
+import { Input } from '../../components/ui/input'
+import { Badge } from '../../components/ui/badge'
+import { DataTable, type Column } from '../../components/DataTable'
+import { SecretModal } from '../../components/SecretModal'
+import { useConfirm } from '../../components/ConfirmDialog'
+import {
+  Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter,
+} from '../../components/ui/dialog'
+import { toast } from '../../components/toast'
+import { useTokens, useCreateToken, useRevokeToken, type PAT } from '@ploykit/hooks'
+import { apiErrorMessage } from '../../lib/api-error'
+import { formatDateTime } from '../../lib/utils'
+
+
+const NAME_MAX_BYTES = 64
+const utf8Bytes = (s: string) => new TextEncoder().encode(s).length
+
+export function TokensPage() {
+  const { tokens, loading, refetch } = useTokens()
+  const { create } = useCreateToken()
+  const { revoke } = useRevokeToken()
+  const confirm = useConfirm()
+
+  const [createOpen, setCreateOpen] = useState(false)
+  const [name, setName] = useState('')
+  const [nameError, setNameError] = useState<string | null>(null)
+  const [ttlHours, setTtlHours] = useState('')
+  const [ttlError, setTtlError] = useState<string | null>(null)
+  const [creating, setCreating] = useState(false)
+  const [secret, setSecret] = useState<string | null>(null)
+
+  
+  function parseTtl(raw: string): { ok: true; hours?: number } | { ok: false; error: string } {
+    const s = raw.trim()
+    if (s === '') return { ok: true }
+    const n = Number(s)
+    if (!Number.isFinite(n) || !Number.isInteger(n) || n <= 0) {
+      return { ok: false, error: '有效期必须是正整数（小时）；不需要过期时间请留空' }
+    }
+    return { ok: true, hours: n }
+  }
+
+  const handleCreate = async () => {
+    const trimmed = name.trim()
+    if (!trimmed) return 
+    
+    if (utf8Bytes(trimmed) > NAME_MAX_BYTES) {
+      setNameError(`名称不能超过 64 字节（约 21 个汉字），当前 ${utf8Bytes(trimmed)} 字节`)
+      return
+    }
+    const ttl = parseTtl(ttlHours)
+    if (!ttl.ok) {
+      setTtlError(ttl.error)
+      return
+    }
+    setNameError(null)
+    setTtlError(null)
+    setCreating(true)
+    try {
+      const res = await create(trimmed, ttl.hours)
+      setCreateOpen(false)
+      setName('')
+      setTtlHours('')
+      setSecret(res.token) 
+      toast.success('令牌已创建')
+    } catch (e) {
+      
+      toast.error(apiErrorMessage(e, '创建失败'))
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  const handleRevoke = async (t: PAT) => {
+    const ok = await confirm({
+      title: '吊销此令牌？',
+      description: `使用「${t.name}」（前缀 ${t.prefix}…）的集成将立即失去访问权限。`,
+      confirmText: '吊销',
+      danger: true,
+    })
+    if (!ok) return
+    try {
+      await revoke(t.id)
+      toast.success('令牌已吊销')
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '吊销失败'))
+    }
+  }
+
+  const columns: Column<PAT>[] = [
+    {
+      
+      
+      
+      key: 'name', header: '名称',
+      render: (t) => (
+        <span className="font-medium block max-w-[16rem] truncate" title={t.name}>
+          {t.name}
+        </span>
+      ),
+    },
+    { key: 'prefix', header: '前缀', render: (t) => <code className="font-mono text-xs">{t.prefix}…</code> },
+    {
+      key: 'last_used_at', header: '最近使用',
+      render: (t) => (t.last_used_at ? formatDateTime(t.last_used_at) : <span className="text-muted-foreground">从未使用</span>),
+    },
+    {
+      key: 'expires_at', header: '过期时间',
+      render: (t) =>
+        t.expires_at ? (
+          formatDateTime(t.expires_at)
+        ) : (
+          <Badge variant="outline">永不过期</Badge>
+        ),
+    },
+    { key: 'created_at', header: '创建时间', render: (t) => formatDateTime(t.created_at) },
+    {
+      key: 'actions', header: '', className: 'text-right',
+      render: (t) => (
+        
+        <Button
+          variant="ghost" size="sm" className="text-destructive"
+          aria-label={`吊销令牌 ${t.name}`}
+          onClick={() => handleRevoke(t)}
+        >
+          吊销
+        </Button>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <PageHeader
+        title="个人访问令牌"
+        description="用于脚本与 API 集成；明文只在创建时显示一次"
+        actions={<Button onClick={() => setCreateOpen(true)}>新建令牌</Button>}
+      />
+
+      <DataTable
+        columns={columns}
+        rows={tokens}
+        rowKey={(t) => t.id}
+        loading={loading}
+        empty={
+          <PageEmpty
+            label="还没有令牌"
+            hint="创建一个令牌，让脚本以你的身份调用 API"
+          />
+        }
+      />
+
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>新建令牌</DialogTitle>
+            <DialogDescription>
+              创建后明文只显示一次，请立即保存到安全的地方。
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <FormField label="名称" htmlFor="pat-name" error={nameError ?? undefined}>
+              {/* B3：maxLength 只按 UTF-16 计（64 汉字 = 192 字节拦不住），
+                  作 ASCII 粗预约束；真正的字节上限在 handleCreate 校验。 */}
+              <Input
+                id="pat-name" value={name} onChange={(e) => {
+                  setName(e.target.value)
+                  if (nameError) setNameError(null) 
+                }}
+                placeholder="如：ci-deploy" maxLength={64} autoFocus
+                aria-invalid={nameError ? true : undefined}
+              />
+            </FormField>
+            <FormField label="有效期（小时，可选）" htmlFor="pat-ttl" error={ttlError ?? undefined}>
+              {/* P2-1：不用 type="number"——非法字符（如字母）不会进入受控值，
+                  会被静默当成留空创建永不过期凭证；text + inputMode 保留数字键盘
+                  且让 parseTtl 能真正拒绝非法输入。 */}
+              <Input
+                id="pat-ttl" type="text" inputMode="numeric" value={ttlHours}
+                onChange={(e) => {
+                  setTtlHours(e.target.value)
+                  if (ttlError) setTtlError(null) 
+                }}
+                placeholder="留空 = 永不过期（不建议）"
+                aria-invalid={ttlError ? true : undefined}
+              />
+            </FormField>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setCreateOpen(false)}>取消</Button>
+            <Button onClick={handleCreate} disabled={creating || !name.trim()}>
+              {creating ? '创建中…' : '创建'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <SecretModal
+        open={secret !== null}
+        onOpenChange={(o) => !o && setSecret(null)}
+        secretName="个人访问令牌"
+        secretValue={secret ?? ''}
+      />
+    </div>
+  )
+}