@ploykit/ui 0.6.0 → 0.7.0

package/src/pages/auth/InviteAcceptPage.tsx

@@ -0,0 +1,105 @@
+
+import { useNavigate } from 'react-router'
+import { Check, X } from 'lucide-react'
+import { Button } from '../../components/ui/button'
+import { Badge } from '../../components/ui/badge'
+import { PageLoading, PageEmpty } from '../../components/Page'
+import { toast } from '../../components/toast'
+import { useMyInvitations } from '@ploykit/hooks'
+import { formatDateTime } from '../../lib/utils'
+import { apiErrorMessage } from '../../lib/api-error'
+
+const ROLE_LABEL: Record<string, string> = { owner: '所有者', admin: '管理员', member: '成员' }
+
+export interface InviteAcceptPageProps {
+  
+  onAccepted?: (workspaceId: string) => void
+  
+  onDeclined?: () => void
+}
+
+export function InviteAcceptPage({ onAccepted, onDeclined }: InviteAcceptPageProps = {}) {
+  const navigate = useNavigate()
+  const { invitations, loading, error, refetch, accept, decline } = useMyInvitations()
+
+  const pending = invitations.filter((i) => i.status === 'pending')
+
+  const onAccept = async (id: string, name: string) => {
+    try {
+      const ws = await accept.mutateAsync(id)
+      toast.success(`已加入「${name}」`)
+      
+      if (onAccepted) onAccepted(ws.id)
+      else navigate('/app')
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '接受邀请失败'))
+    }
+  }
+
+  const onDecline = async (id: string, name: string) => {
+    try {
+      await decline.mutateAsync(id)
+      toast.success(`已拒绝「${name}」的邀请`)
+      onDeclined?.()
+    } catch (e) {
+      toast.error(apiErrorMessage(e, '操作失败'))
+    }
+  }
+
+  return (
+    <div className="flex min-h-svh w-full items-center justify-center bg-muted/40 p-6 md:p-10">
+      <div className="w-full max-w-md rounded-xl border bg-card p-6 shadow-sm">
+        <h1 className="text-xl font-bold">我的邀请</h1>
+        <p className="mt-1 text-sm text-muted-foreground">接受后你将加入对应工作区。</p>
+
+        <div className="mt-4">
+          {loading ? (
+            <PageLoading label="加载邀请…" />
+          ) : error ? (
+            <div className="py-6 text-center text-sm text-destructive">
+              {apiErrorMessage(error, '邀请加载失败')}
+              <div className="mt-3">
+                <Button size="sm" variant="outline" onClick={() => refetch()}>重试</Button>
+              </div>
+            </div>
+          ) : pending.length === 0 ? (
+            <PageEmpty label="暂无待处理的邀请" hint="收到新邀请时会出现在这里" />
+          ) : (
+            <ul className="divide-y">
+              {pending.map((inv) => (
+                <li key={inv.id} className="flex items-center justify-between gap-3 py-3">
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">
+                      {inv.workspace_name || inv.workspace_slug || '工作区'}
+                    </p>
+                    <p className="mt-0.5 flex items-center gap-2 text-xs text-muted-foreground">
+                      <Badge variant="secondary">{ROLE_LABEL[inv.role] ?? inv.role}</Badge>
+                      <span>{formatDateTime(inv.expires_at)} 过期</span>
+                    </p>
+                  </div>
+                  <div className="flex shrink-0 gap-1.5">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      disabled={decline.isPending}
+                      onClick={() => onDecline(inv.id, inv.workspace_name)}
+                    >
+                      <X /> 拒绝
+                    </Button>
+                    <Button
+                      size="sm"
+                      disabled={accept.isPending}
+                      onClick={() => onAccept(inv.id, inv.workspace_name)}
+                    >
+                      <Check /> 接受
+                    </Button>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/pages/auth/RegisterPage.tsx

@@ -0,0 +1,204 @@
+
+import { useState } from 'react';
+import { z } from 'zod';
+import { AuthShell } from '../../layouts/AuthShell';
+import { FormField } from '../../components/FormField';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { FieldDescription, FieldSeparator } from '../../components/ui/field';
+import { useApi } from '@ploykit/hooks';
+import { useAuth } from '@ploykit/hooks';
+import { useSiteConfig } from '@ploykit/hooks';
+import { useZodForm } from '@ploykit/hooks';
+import { apiErrorMessage } from '../../lib/api-error';
+import { toast } from '../../components/toast';
+import type { PKUser } from '@ploykit/hooks';
+
+
+function passwordKinds(pw: string): number {
+  let kinds = 0;
+  if (/[0-9]/.test(pw)) kinds++;
+  if (/[a-z]/.test(pw)) kinds++;
+  if (/[A-Z]/.test(pw)) kinds++;
+  if (/[^0-9a-zA-Z]/.test(pw)) kinds++;
+  return kinds;
+}
+
+
+export const passwordSchema = z
+  .string()
+  .min(10, '密码至少 10 位')
+  .refine(
+    (pw) => new TextEncoder().encode(pw).length <= 128,
+    '密码过长（按字节计最多 128，一个汉字占 3 字节）',
+  )
+  .refine(
+    (pw) => passwordKinds(pw) >= 3,
+    '需包含大写/小写/数字/符号中的至少三类',
+  );
+
+export const registerSchema = z.object({
+  
+  email: z.string().min(1, '请输入邮箱').max(254, '邮箱过长').email('邮箱格式不正确'),
+  password: passwordSchema,
+  
+  display_name: z.string().max(100, '昵称最多 100 字符').optional(),
+});
+
+export type RegisterForm = z.infer<typeof registerSchema>;
+
+export interface RegisterPageProps {
+  
+  onSuccess?: () => void;
+  
+  loginPath?: string;
+  title?: string;
+  description?: string;
+}
+
+export function RegisterPage({
+  onSuccess,
+  loginPath = '/login',
+  title = '创建账号',
+  description = '填写以下信息开始使用',
+}: RegisterPageProps) {
+  const api = useApi();
+  const { refresh } = useAuth();
+  
+  
+  
+  const { data: siteCfg } = useSiteConfig();
+  const inviteOnly = siteCfg?.allow_signup === '0';
+  const [submitting, setSubmitting] = useState(false);
+  const [serverError, setServerError] = useState<string | null>(null);
+
+  const form = useZodForm<RegisterForm>({
+    schema: registerSchema,
+    defaultValues: { email: '', password: '', display_name: '' },
+  });
+
+  const handleSubmit = form.handleSubmit(async (values) => {
+    setServerError(null);
+    setSubmitting(true);
+    try {
+      
+      
+      const body: { email: string; password: string; display_name?: string } = {
+        email: values.email,
+        password: values.password,
+      }
+      if (values.display_name?.trim()) body.display_name = values.display_name.trim()
+      await api.post<{ user: PKUser; expires_at: string }>(
+        '/auth/register',
+        body,
+      )
+      await refresh();
+      toast.success('注册成功');
+      if (onSuccess) onSuccess();
+      else window.location.href = '/app';
+    } catch (e) {
+      
+      
+      const msg = apiErrorMessage(e, '注册失败，请稍后重试');
+      setServerError(msg);
+      toast.error(msg);
+    } finally {
+      setSubmitting(false);
+    }
+  });
+
+  const pw = form.watch('password') ?? '';
+  const kinds = passwordKinds(pw);
+
+  return (
+    <>
+      {inviteOnly && (
+        <div className="fixed inset-x-0 top-0 z-50 border-b border-primary/25 bg-primary/10 px-4 py-2 text-center text-sm text-primary">
+          当前为邀请制注册：仅白名单邮箱可完成注册（最终以服务端校验为准）
+        </div>
+      )}
+      <AuthShell footer={<span>注册即代表同意我们的服务条款与隐私政策</span>}>
+        <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+          <div className="flex flex-col items-center gap-1 text-center">
+            <h1 className="text-2xl font-bold">{title}</h1>
+            <p className="text-sm text-balance text-muted-foreground">
+              {description}
+            </p>
+          </div>
+
+          <FormField
+            label="邮箱"
+            error={form.formState.errors.email?.message}
+            htmlFor="reg-email"
+          >
+            <Input
+              id="reg-email"
+              type="email"
+              placeholder="you@example.com"
+              autoComplete="email"
+              {...form.register('email')}
+            />
+          </FormField>
+
+          <FormField
+            label="密码"
+            error={form.formState.errors.password?.message}
+            htmlFor="reg-password"
+          >
+            <Input
+              id="reg-password"
+              type="password"
+              placeholder="至少 10 位，含三类字符"
+              autoComplete="new-password"
+              {...form.register('password')}
+            />
+            {pw.length > 0 && (
+              <FieldDescription>
+                字符类别：大写 {/[A-Z]/.test(pw) ? '✓' : '—'} / 小写{' '}
+                {/[a-z]/.test(pw) ? '✓' : '—'} / 数字{' '}
+                {/[0-9]/.test(pw) ? '✓' : '—'} / 符号{' '}
+                {/[^0-9a-zA-Z]/.test(pw) ? '✓' : '—'}
+                （已满足 {kinds}/3 类）
+              </FieldDescription>
+            )}
+          </FormField>
+
+          <FormField
+            label="昵称（可选）"
+            error={form.formState.errors.display_name?.message}
+            htmlFor="reg-name"
+          >
+            <Input
+              id="reg-name"
+              type="text"
+              maxLength={100}
+              placeholder="怎么称呼你？"
+              {...form.register('display_name')}
+            />
+          </FormField>
+
+          {serverError && (
+            <p role="alert" className="text-sm text-destructive">
+              {serverError}
+            </p>
+          )}
+
+          <Button type="submit" disabled={submitting}>
+            {submitting ? '注册中…' : '创建账号'}
+          </Button>
+
+          <FieldSeparator>已有账号？</FieldSeparator>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              window.location.href = loginPath;
+            }}
+          >
+            登录
+          </Button>
+        </form>
+      </AuthShell>
+    </>
+  );
+}

package/src/pages/auth/ResetPasswordPage.tsx

@@ -0,0 +1,160 @@
+
+import { useEffect, useState, type FormEvent } from 'react'
+import { AuthShell } from '../../layouts/AuthShell'
+import { FormField } from '../../components/FormField'
+import { Button } from '../../components/ui/button'
+import { Input } from '../../components/ui/input'
+import { usePasswordReset } from '@ploykit/hooks'
+import { passwordSchema } from './RegisterPage'
+
+export interface ResetPasswordPageProps {
+  
+  onDone?: string
+  
+  /** 页面标题（i18n 覆盖点，走查 #5）。 */
+  title?: string
+  
+  /** 成功态文案（i18n 覆盖点）。 */
+  successHint?: string
+}
+
+const REDIRECT_DELAY_MS = 3000
+
+export function ResetPasswordPage({
+  onDone,
+  title = '设置新密码',
+  successHint = '密码已重置，全部旧会话已失效。',
+}: ResetPasswordPageProps) {
+  const { reset } = usePasswordReset()
+  
+  const [params, setParams] = useState<URLSearchParams | null>(null)
+  const email = params?.get('email') ?? ''
+  const token = params?.get('token') ?? ''
+
+  const [password, setPassword] = useState('')
+  const [confirm, setConfirm] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [done, setDone] = useState(false)
+  const [countdown, setCountdown] = useState(REDIRECT_DELAY_MS / 1000)
+  
+  const [confirmError, setConfirmError] = useState<string | null>(null)
+  const [serverError, setServerError] = useState<string | null>(null)
+
+  useEffect(() => {
+    setParams(new URLSearchParams(window.location.search))
+  }, [])
+
+  useEffect(() => {
+    if (!done) return
+    
+    try {
+      window.history.replaceState(null, '', window.location.pathname)
+    } catch {
+      /* replaceState 不可用（极端沙箱）时忽略——令牌已失效，仅剩地址残留 */
+    }
+    const tick = setInterval(() => setCountdown((c) => c - 1), 1000)
+    const jump = setTimeout(() => {
+      window.location.href = onDone ?? '/login'
+    }, REDIRECT_DELAY_MS)
+    return () => {
+      clearInterval(tick)
+      clearTimeout(jump)
+    }
+  }, [done, onDone])
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
+    setConfirmError(null)
+    setServerError(null)
+    if (!password || !confirm) return
+    if (password !== confirm) {
+      
+      setConfirmError('两次输入的密码不一致')
+      return
+    }
+    
+    const pwCheck = passwordSchema.safeParse(password)
+    if (!pwCheck.success) {
+      setServerError(pwCheck.error.issues[0]?.message ?? '密码不符合要求')
+      return
+    }
+    setLoading(true)
+    try {
+      await reset(email, token, password)
+      setDone(true)
+    } catch (err) {
+      setServerError(err instanceof Error ? err.message : '重置失败，链接可能已失效')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <AuthShell>
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-1 text-center">
+          <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+        </div>
+
+        {done ? (
+          <div className="space-y-2 text-center" data-testid="reset-done">
+            <p className="text-sm text-(--success)">{successHint}</p>
+            <p className="text-sm text-muted-foreground">
+              {countdown > 0 ? `${countdown} 秒后跳转登录页…` : '正在跳转…'}
+            </p>
+          </div>
+        ) : params === null ? (
+          
+          <p className="text-center text-sm text-muted-foreground">正在打开链接…</p>
+        ) : !email || !token ? (
+          <p className="text-center text-sm text-destructive" data-testid="reset-invalid">
+            链接无效：缺少邮箱或令牌参数，请从邮件中的链接进入。
+          </p>
+        ) : (
+          <>
+            <p className="text-sm text-muted-foreground">正在为 {email} 设置新密码</p>
+
+            <FormField label="新密码" htmlFor="reset-new">
+              <Input
+                id="reset-new"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="至少 10 位，含三类字符"
+                autoComplete="new-password"
+                required
+              />
+            </FormField>
+
+            <FormField
+              label="确认新密码"
+              error={confirmError ?? undefined}
+              htmlFor="reset-confirm"
+            >
+              <Input
+                id="reset-confirm"
+                type="password"
+                value={confirm}
+                onChange={(e) => setConfirm(e.target.value)}
+                placeholder="再输入一次"
+                autoComplete="new-password"
+                aria-invalid={confirmError ? true : undefined}
+                required
+              />
+            </FormField>
+
+            {serverError && (
+              <p role="alert" className="text-sm text-destructive">
+                {serverError}
+              </p>
+            )}
+
+            <Button type="submit" className="w-full" disabled={loading || !password || !confirm}>
+              {loading ? '提交中…' : '重置密码'}
+            </Button>
+          </>
+        )}
+      </form>
+    </AuthShell>
+  )
+}

package/src/pages/auth/VerifyEmailPage.tsx

@@ -0,0 +1,83 @@
+
+import { useEffect, useRef, useState } from 'react'
+import { api } from '@ploykit/client'
+import { AuthShell } from '../../layouts/AuthShell'
+import { buttonVariants } from '../../components/ui/button'
+import {
+  Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
+} from '../../components/ui/empty'
+import { MailCheck, LoaderCircle, CircleX } from 'lucide-react'
+
+type VerifyState = 'verifying' | 'ok' | 'failed'
+
+export interface VerifyEmailPageProps {
+  /** 三态标题（i18n 覆盖点，走查 #5）：成功 / 失败 / 验证中。 */
+  titles?: { ok?: string; failed?: string; verifying?: string }
+}
+
+export function VerifyEmailPage({
+  titles = { ok: '邮箱验证成功', failed: '验证失败', verifying: '正在验证…' },
+}: VerifyEmailPageProps) {
+  const [state, setState] = useState<VerifyState>('verifying')
+  const [message, setMessage] = useState<string | null>(null)
+  
+  const fired = useRef(false)
+
+  useEffect(() => {
+    if (fired.current) return
+    fired.current = true
+
+    const params = new URLSearchParams(window.location.search)
+    const email = params.get('email') ?? ''
+    const token = params.get('token') ?? ''
+    if (!email || !token) {
+      setState('failed')
+      setMessage('链接无效：缺少邮箱或令牌参数')
+      return
+    }
+    api
+      .post('/auth/verify-email', { email, token })
+      .then(() => {
+        
+        try {
+          window.history.replaceState(null, '', window.location.pathname)
+        } catch {
+          /* replaceState 不可用时忽略——令牌已失效 */
+        }
+        setState('ok')
+      })
+      .catch((err: unknown) => {
+        setState('failed')
+        setMessage(err instanceof Error ? err.message : '验证失败，链接可能已失效')
+      })
+  }, [])
+
+  return (
+    <AuthShell>
+      <Empty className="border-none p-0">
+        <EmptyHeader>
+          <EmptyMedia variant="icon" data-testid="verify-state">
+            {state === 'ok' && <MailCheck className="text-(--success)" aria-hidden="true" />}
+            {state === 'verifying' && <LoaderCircle className="animate-spin" aria-hidden="true" />}
+            {state === 'failed' && <CircleX className="text-destructive" aria-hidden="true" />}
+          </EmptyMedia>
+          <EmptyTitle>
+            {state === 'ok' ? titles.ok : state === 'failed' ? titles.failed : titles.verifying}
+          </EmptyTitle>
+          <EmptyDescription>
+            {state === 'ok'
+              ? '感谢确认，现在可以正常登录了。'
+              : state === 'failed'
+                ? (message ?? '验证失败')
+                : '请稍候，正在校验邮件链接…'}
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <a href="/login" className={buttonVariants({ variant: 'outline' })}>
+            返回登录
+          </a>
+        </EmptyContent>
+      </Empty>
+    </AuthShell>
+  )
+}

package/src/pages/auth/__tests__/AuthPagesI18n.test.tsx

@@ -0,0 +1,33 @@
+import '@testing-library/jest-dom/vitest'
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router'
+import { describe, expect, it, vi } from 'vitest'
+
+// renderx-walk #5: every auth page exposes i18n override props — titles at
+// minimum, so overseas products are not stuck with hardcoded copy.
+vi.mock('@ploykit/client', () => ({
+  api: {
+    get: vi.fn(),
+    // never-settling promise keeps VerifyEmailPage in its 'verifying' state
+    post: vi.fn(() => new Promise(() => {})),
+  },
+}))
+vi.mock('../../../../hooks/src/hooks/usePasswordReset', () => ({
+  usePasswordReset: () => ({ reset: vi.fn() }),
+}))
+
+import { ResetPasswordPage } from '../ResetPasswordPage'
+import { VerifyEmailPage } from '../VerifyEmailPage'
+// imports after mocks (mock hoisting applies regardless of position)
+
+describe('auth 页 i18n 覆盖面（走查 #5）', () => {
+  it('ResetPasswordPage：title/successHint 可覆盖', () => {
+    render(<ResetPasswordPage title="Set a new password" successHint="Password reset; old sessions revoked." />)
+    expect(screen.getByText('Set a new password')).toBeInTheDocument()
+  })
+
+  it('VerifyEmailPage：三态标题可覆盖（无参渲染即 failed 态）', () => {
+    render(<MemoryRouter><VerifyEmailPage titles={{ failed: 'Verification failed' }} /></MemoryRouter>)
+    expect(screen.getByText('Verification failed')).toBeInTheDocument()
+  })
+})

package/src/pages/auth/__tests__/ForgotPasswordPage.test.tsx

@@ -0,0 +1,67 @@
+
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { ForgotPasswordPage } from '../ForgotPasswordPage'
+
+const mockedPost = vi.hoisted(() => vi.fn())
+vi.mock('@ploykit/client', () => ({
+  api: {
+    post: mockedPost,
+    get: vi.fn(),
+    put: vi.fn(),
+    patch: vi.fn(),
+    delete: vi.fn(),
+  },
+}))
+
+beforeEach(() => {
+  mockedPost.mockReset().mockResolvedValue(undefined)
+})
+
+describe('ForgotPasswordPage', () => {
+  it('提交邮箱 → POST /auth/forgot-password {email}', async () => {
+    render(<ForgotPasswordPage />)
+    fireEvent.change(screen.getByLabelText('邮箱'), {
+      target: { value: 'user@example.com' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: '发送重置链接' }))
+
+    await waitFor(() =>
+      expect(mockedPost).toHaveBeenCalledWith('/auth/forgot-password', {
+        email: 'user@example.com',
+      }),
+    )
+  })
+
+  it('防枚举：无论结果，成功提示同一句（不区分邮箱是否存在）', async () => {
+    render(<ForgotPasswordPage />)
+    fireEvent.change(screen.getByLabelText('邮箱'), {
+      target: { value: 'whoever@example.com' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: '发送重置链接' }))
+
+    expect(await screen.findByTestId('sent-hint')).toHaveTextContent(
+      '如果该邮箱存在，重置链接已发送，请查收邮箱。',
+    )
+  })
+
+  it('请求失败 → 展示错误（不伪装成已发送）', async () => {
+    mockedPost.mockRejectedValueOnce(new Error('发送过于频繁'))
+    render(<ForgotPasswordPage />)
+    fireEvent.change(screen.getByLabelText('邮箱'), {
+      target: { value: 'user@example.com' },
+    })
+    fireEvent.click(screen.getByRole('button', { name: '发送重置链接' }))
+
+    expect(await screen.findByText('发送过于频繁')).toBeInTheDocument()
+    expect(screen.queryByTestId('sent-hint')).not.toBeInTheDocument()
+  })
+
+  it('空邮箱不可提交（按钮禁用）', () => {
+    render(<ForgotPasswordPage />)
+    expect(
+      screen.getByRole('button', { name: '发送重置链接' }),
+    ).toBeDisabled()
+  })
+})