feat(settings): 设置与个人信息模块审计重构 — i18n + 服务注入解耦 + Error Boundary + 流式渲染
- 新增 SettingsService 接口 + Context 注入，组件层不再直接 import users/messaging actions - 新增 resolveRoleSettingsConfig 配置驱动角色路由，删除 parent/student/teacher-settings-view 冗余文件 - 新增 SettingsSectionErrorBoundary，每个 TabsContent + profile 角色概览区块均包裹 - 新增 ProfileStudentOverview/ProfileTeacherOverview 异步 Server Component + 骨架屏，支持流式渲染 - 抽取 buildStudentOverviewData 等纯函数到 lib/student-overview-data.ts，便于单元测试 - 新增 settings.json 翻译文件（zh-CN + en），所有组件改用 useTranslations/getTranslations - 重构 profile/page.tsx：i18n 适配 + Suspense 分区加载 + 业务逻辑抽离 - 同步更新架构图 004/005
This commit is contained in:
SpecialX
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useActionState, useEffect, useMemo, useRef, useState } from "react"
|
||||
import { useFormStatus } from "react-dom"
|
||||
import { useTranslations } from "next-intl"
|
||||
import { Eye, EyeOff, KeyRound, Loader2 } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
@@ -18,25 +19,26 @@ import {
|
||||
} from "@/shared/lib/password-policy"
|
||||
import type { ActionState } from "@/shared/types/action-state"
|
||||
|
||||
const STRENGTH_META: Record<PasswordStrength, { value: number; label: string; barClassName: string; indicatorClassName: string }> = {
|
||||
weak: { value: 33, label: "Weak", barClassName: "h-2", indicatorClassName: "bg-red-500" },
|
||||
medium: { value: 66, label: "Medium", barClassName: "h-2", indicatorClassName: "bg-yellow-500" },
|
||||
strong: { value: 100, label: "Strong", barClassName: "h-2", indicatorClassName: "bg-green-500" },
|
||||
const STRENGTH_META: Record<PasswordStrength, { value: number; labelKey: string; barClassName: string; indicatorClassName: string }> = {
|
||||
weak: { value: 33, labelKey: "security.changePassword.strengthWeak", barClassName: "h-2", indicatorClassName: "bg-red-500" },
|
||||
medium: { value: 66, labelKey: "security.changePassword.strengthMedium", barClassName: "h-2", indicatorClassName: "bg-yellow-500" },
|
||||
strong: { value: 100, labelKey: "security.changePassword.strengthStrong", barClassName: "h-2", indicatorClassName: "bg-green-500" },
|
||||
}
|
||||
|
||||
function SubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
const t = useTranslations("settings.security.changePassword")
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Updating...
|
||||
{t("updating")}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<KeyRound className="mr-2 h-4 w-4" />
|
||||
Update Password
|
||||
{t("submit")}
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
@@ -44,6 +46,7 @@ function SubmitButton() {
|
||||
}
|
||||
|
||||
export function PasswordChangeForm() {
|
||||
const t = useTranslations("settings.security.changePassword")
|
||||
const [state, formAction] = useActionState<ActionState<null>, FormData>(
|
||||
changePasswordAction,
|
||||
{ success: false, data: null }
|
||||
@@ -59,31 +62,29 @@ export function PasswordChangeForm() {
|
||||
|
||||
useEffect(() => {
|
||||
if (state?.success) {
|
||||
toast.success(state.message ?? "Password changed successfully")
|
||||
toast.success(state.message ?? t("success"))
|
||||
formRef.current?.reset()
|
||||
} else if (state?.message) {
|
||||
toast.error(state.message)
|
||||
}
|
||||
}, [state])
|
||||
}, [state, t])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Change Password</CardTitle>
|
||||
<CardDescription>
|
||||
Choose a strong password to keep your account secure.
|
||||
</CardDescription>
|
||||
<CardTitle>{t("title")}</CardTitle>
|
||||
<CardDescription>{t("description")}</CardDescription>
|
||||
</CardHeader>
|
||||
<form ref={formRef} id="password-change-form" action={formAction} onReset={() => setNewPassword("")}>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentPassword">Current Password</Label>
|
||||
<Label htmlFor="currentPassword">{t("current")}</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="currentPassword"
|
||||
name="currentPassword"
|
||||
type={showCurrent ? "text" : "password"}
|
||||
placeholder="Enter current password"
|
||||
placeholder={t("currentPlaceholder")}
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
@@ -93,7 +94,7 @@ export function PasswordChangeForm() {
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowCurrent((v) => !v)}
|
||||
tabIndex={-1}
|
||||
aria-label={showCurrent ? "Hide password" : "Show password"}
|
||||
>
|
||||
{showCurrent ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
@@ -101,13 +102,13 @@ export function PasswordChangeForm() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="newPassword">New Password</Label>
|
||||
<Label htmlFor="newPassword">{t("new")}</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="newPassword"
|
||||
name="newPassword"
|
||||
type={showNew ? "text" : "password"}
|
||||
placeholder="Enter new password"
|
||||
placeholder={t("newPlaceholder")}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
value={newPassword}
|
||||
@@ -119,7 +120,7 @@ export function PasswordChangeForm() {
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowNew((v) => !v)}
|
||||
tabIndex={-1}
|
||||
aria-label={showNew ? "Hide password" : "Show password"}
|
||||
>
|
||||
{showNew ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
@@ -127,8 +128,8 @@ export function PasswordChangeForm() {
|
||||
{newPassword.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">Password strength</span>
|
||||
<span className="font-medium">{meta.label}</span>
|
||||
<span className="text-muted-foreground">{t("strength")}</span>
|
||||
<span className="font-medium">{t(meta.labelKey)}</span>
|
||||
</div>
|
||||
<Progress value={meta.value} className={meta.barClassName} indicatorClassName={meta.indicatorClassName} />
|
||||
</div>
|
||||
@@ -136,13 +137,13 @@ export function PasswordChangeForm() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm New Password</Label>
|
||||
<Label htmlFor="confirmPassword">{t("confirm")}</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type={showConfirm ? "text" : "password"}
|
||||
placeholder="Re-enter new password"
|
||||
placeholder={t("confirmPlaceholder")}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
@@ -152,7 +153,7 @@ export function PasswordChangeForm() {
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowConfirm((v) => !v)}
|
||||
tabIndex={-1}
|
||||
aria-label={showConfirm ? "Hide password" : "Show password"}
|
||||
>
|
||||
{showConfirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
@@ -160,7 +161,7 @@ export function PasswordChangeForm() {
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border bg-muted/30 p-3">
|
||||
<div className="text-xs font-medium text-muted-foreground">Password requirements:</div>
|
||||
<div className="text-xs font-medium text-muted-foreground">{t("requirements")}</div>
|
||||
<ul className="mt-1.5 grid gap-1 text-xs text-muted-foreground">
|
||||
{PASSWORD_REQUIREMENT_HINTS.map((hint) => (
|
||||
<li key={hint} className="flex items-center gap-1.5">
|
||||
|
||||
Reference in New Issue
Block a user