feat: 完成 P1 全部功能 + 修复 proxy 导出 + 切换 MySQL 端口至 14013
## P1 功能(20 项) - 站内消息系统、家长仪表盘、学生考勤管理 - Excel 导入导出、用户批量导入、成绩导出 - 排课规则+自动排课+课表调整 - 成绩趋势+对比分析、密码安全策略、速率限制 - 数据变更日志、文件预览+存储策略、全文检索 - 依赖审计集成 CI、数据库定时备份、E2E 测试完善 - 通知偏好管理 ## 基础设施修复 - src/proxy.ts: 将 middleware 导出重命名为 proxy(Next.js 16 要求) - .env: MySQL 端口从 13002 切换至 14013 - scripts/create-db.ts: 新增数据库初始化脚本 ## 架构文档同步 - 004_architecture_impact_map.md 和 005_architecture_data.json 完整记录所有新增表、模块、路由、权限、依赖关系
This commit is contained in:
113
src/modules/settings/actions-password.ts
Normal file
113
src/modules/settings/actions-password.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
"use server"
|
||||
|
||||
import { revalidatePath } from "next/cache"
|
||||
import { eq } from "drizzle-orm"
|
||||
import { compare, hash } from "bcryptjs"
|
||||
|
||||
import { db } from "@/shared/db"
|
||||
import { users, passwordSecurity } from "@/shared/db/schema"
|
||||
import type { ActionState } from "@/shared/types/action-state"
|
||||
import { requireAuth, PermissionDeniedError } from "@/shared/lib/auth-guard"
|
||||
import { validatePassword } from "@/shared/lib/password-policy"
|
||||
import { rateLimit, rateLimitKey, RATE_LIMIT_RULES } from "@/shared/lib/rate-limit"
|
||||
|
||||
const normalizeBcryptHash = (value: string) => {
|
||||
if (value.startsWith("$2")) return value
|
||||
if (value.startsWith("$")) return `$2b${value}`
|
||||
return `$2b$${value}`
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the current user's password. Requires only authentication
|
||||
* (no specific permission) since every user can manage their own
|
||||
* credentials. Rate-limited to slow brute-force of the current password.
|
||||
*/
|
||||
export async function changePasswordAction(
|
||||
prevState: ActionState<null>,
|
||||
formData: FormData
|
||||
): Promise<ActionState<null>> {
|
||||
try {
|
||||
const ctx = await requireAuth()
|
||||
const userId = ctx.userId
|
||||
|
||||
const limitKey = rateLimitKey("pwd-change", userId)
|
||||
const limit = rateLimit({ key: limitKey, ...RATE_LIMIT_RULES.PASSWORD_CHANGE })
|
||||
if (!limit.success) {
|
||||
return { success: false, message: "Too many attempts. Please try again later." }
|
||||
}
|
||||
|
||||
const currentPassword = String(formData.get("currentPassword") ?? "")
|
||||
const newPassword = String(formData.get("newPassword") ?? "")
|
||||
const confirmPassword = String(formData.get("confirmPassword") ?? "")
|
||||
|
||||
if (!currentPassword || !newPassword || !confirmPassword) {
|
||||
return { success: false, message: "All fields are required" }
|
||||
}
|
||||
if (newPassword !== confirmPassword) {
|
||||
return { success: false, message: "New passwords do not match" }
|
||||
}
|
||||
if (newPassword === currentPassword) {
|
||||
return { success: false, message: "New password must be different from current password" }
|
||||
}
|
||||
|
||||
const validation = validatePassword(newPassword)
|
||||
if (!validation.valid) {
|
||||
return { success: false, message: validation.errors[0] ?? "Password does not meet requirements" }
|
||||
}
|
||||
|
||||
const [user] = await db
|
||||
.select({ id: users.id, password: users.password })
|
||||
.from(users)
|
||||
.where(eq(users.id, userId))
|
||||
.limit(1)
|
||||
if (!user || !user.password) {
|
||||
return { success: false, message: "User not found or no password set" }
|
||||
}
|
||||
|
||||
const storedHash = normalizeBcryptHash(user.password)
|
||||
if (!storedHash.startsWith("$2")) {
|
||||
return { success: false, message: "Stored password is invalid" }
|
||||
}
|
||||
const ok = await compare(currentPassword, storedHash)
|
||||
if (!ok) {
|
||||
return { success: false, message: "Current password is incorrect" }
|
||||
}
|
||||
|
||||
const newHash = await hash(newPassword, 10)
|
||||
const now = new Date()
|
||||
await db
|
||||
.update(users)
|
||||
.set({ password: newHash, updatedAt: now })
|
||||
.where(eq(users.id, userId))
|
||||
|
||||
const [existing] = await db
|
||||
.select({ id: passwordSecurity.id })
|
||||
.from(passwordSecurity)
|
||||
.where(eq(passwordSecurity.userId, userId))
|
||||
.limit(1)
|
||||
if (existing) {
|
||||
await db
|
||||
.update(passwordSecurity)
|
||||
.set({
|
||||
lastPasswordChange: now,
|
||||
passwordChangedAt: now,
|
||||
mustChangePassword: false,
|
||||
updatedAt: now,
|
||||
})
|
||||
.where(eq(passwordSecurity.userId, userId))
|
||||
} else {
|
||||
await db.insert(passwordSecurity).values({
|
||||
userId,
|
||||
lastPasswordChange: now,
|
||||
passwordChangedAt: now,
|
||||
mustChangePassword: false,
|
||||
})
|
||||
}
|
||||
|
||||
revalidatePath("/settings")
|
||||
return { success: true, message: "Password changed successfully", data: null }
|
||||
} catch (error) {
|
||||
if (error instanceof PermissionDeniedError) return { success: false, message: error.message }
|
||||
return { success: false, message: "Failed to change password" }
|
||||
}
|
||||
}
|
||||
@@ -5,10 +5,11 @@ import { revalidatePath } from "next/cache"
|
||||
import { createId } from "@paralleldrive/cuid2"
|
||||
import { count, desc, eq } from "drizzle-orm"
|
||||
|
||||
import { auth } from "@/auth"
|
||||
import { db } from "@/shared/db"
|
||||
import { aiProviders } from "@/shared/db/schema"
|
||||
import type { ActionState } from "@/shared/types/action-state"
|
||||
import { requirePermission, PermissionDeniedError } from "@/shared/lib/auth-guard"
|
||||
import { Permissions } from "@/shared/types/permissions"
|
||||
import { encryptAiApiKey, getAiErrorMessage, testAiProviderById, testAiProviderConfig } from "@/shared/lib/ai"
|
||||
|
||||
const ProviderSchema = z.enum(["zhipu", "openai", "gemini", "custom"])
|
||||
@@ -45,10 +46,8 @@ export type AiProviderSummary = {
|
||||
}
|
||||
|
||||
const ensureUser = async () => {
|
||||
const session = await auth()
|
||||
const userId = String(session?.user?.id ?? "").trim()
|
||||
if (!userId) throw new Error("Unauthorized")
|
||||
return { id: userId }
|
||||
const ctx = await requirePermission(Permissions.AI_CONFIGURE)
|
||||
return { id: ctx.userId }
|
||||
}
|
||||
|
||||
const normalizeBaseUrl = (value: string | undefined) => {
|
||||
@@ -171,7 +170,8 @@ export async function upsertAiProviderAction(
|
||||
|
||||
revalidatePath("/settings")
|
||||
return { success: true, message: "AI provider created", data: id }
|
||||
} catch {
|
||||
} catch (error) {
|
||||
if (error instanceof PermissionDeniedError) return { success: false, message: error.message }
|
||||
return { success: false, message: "Failed to save AI provider" }
|
||||
}
|
||||
}
|
||||
@@ -199,6 +199,7 @@ export async function testAiProviderAction(
|
||||
}
|
||||
return { success: true, message: "AI connection ok", data: null }
|
||||
} catch (error) {
|
||||
if (error instanceof PermissionDeniedError) return { success: false, message: error.message }
|
||||
return { success: false, message: getAiErrorMessage(error) }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { Shield, User, Building2, Lock } from "lucide-react"
|
||||
import { Shield, User, Building2, Lock, Bell } from "lucide-react"
|
||||
import { signOut } from "next-auth/react"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
@@ -12,9 +12,17 @@ import { Separator } from "@/shared/components/ui/separator"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
|
||||
import { ThemePreferencesCard } from "./theme-preferences-card"
|
||||
import { ProfileSettingsForm } from "@/modules/settings/components/profile-settings-form"
|
||||
import { PasswordChangeForm } from "@/modules/settings/components/password-change-form"
|
||||
import { NotificationPreferencesForm } from "@/modules/settings/components/notification-preferences-form"
|
||||
import { UserProfile } from "@/modules/users/data-access"
|
||||
import type { NotificationPreferences } from "@/modules/messaging/types"
|
||||
|
||||
export function AdminSettingsView({ user }: { user: UserProfile }) {
|
||||
interface AdminSettingsViewProps {
|
||||
user: UserProfile
|
||||
notificationPreferences: NotificationPreferences
|
||||
}
|
||||
|
||||
export function AdminSettingsView({ user, notificationPreferences }: AdminSettingsViewProps) {
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-8 p-8">
|
||||
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
|
||||
@@ -35,6 +43,10 @@ export function AdminSettingsView({ user }: { user: UserProfile }) {
|
||||
<User className="h-4 w-4" />
|
||||
General
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="notifications" className="gap-2">
|
||||
<Bell className="h-4 w-4" />
|
||||
Notifications
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="appearance" className="gap-2">
|
||||
<Shield className="h-4 w-4" />
|
||||
Appearance
|
||||
@@ -85,11 +97,16 @@ export function AdminSettingsView({ user }: { user: UserProfile }) {
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="notifications" className="mt-6 space-y-6">
|
||||
<NotificationPreferencesForm preferences={notificationPreferences} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="appearance" className="mt-6 space-y-6">
|
||||
<ThemePreferencesCard />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="security" className="mt-6 space-y-6">
|
||||
<PasswordChangeForm />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Session</CardTitle>
|
||||
|
||||
@@ -0,0 +1,260 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { useActionState } from "react"
|
||||
import { useFormStatus } from "react-dom"
|
||||
import { Loader2, Save, Bell, Mail, MessageSquare, Megaphone, GraduationCap, BookOpen, CalendarCheck } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Switch } from "@/shared/components/ui/switch"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import { Separator } from "@/shared/components/ui/separator"
|
||||
import { updateNotificationPreferencesAction } from "@/modules/messaging/actions"
|
||||
import type { NotificationPreferences } from "@/modules/messaging/types"
|
||||
|
||||
interface NotificationPreferencesFormProps {
|
||||
preferences: NotificationPreferences
|
||||
}
|
||||
|
||||
interface ChannelItem {
|
||||
key: keyof Pick<
|
||||
NotificationPreferences,
|
||||
"emailEnabled" | "smsEnabled" | "pushEnabled"
|
||||
>
|
||||
label: string
|
||||
description: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
interface CategoryItem {
|
||||
key: keyof Pick<
|
||||
NotificationPreferences,
|
||||
| "homeworkNotifications"
|
||||
| "gradeNotifications"
|
||||
| "announcementNotifications"
|
||||
| "messageNotifications"
|
||||
| "attendanceNotifications"
|
||||
>
|
||||
label: string
|
||||
description: string
|
||||
icon: React.ComponentType<{ className?: string }>
|
||||
}
|
||||
|
||||
const CHANNELS: ChannelItem[] = [
|
||||
{
|
||||
key: "pushEnabled",
|
||||
label: "Push Notifications",
|
||||
description: "Receive in-app and browser push notifications.",
|
||||
icon: Bell,
|
||||
},
|
||||
{
|
||||
key: "emailEnabled",
|
||||
label: "Email",
|
||||
description: "Send notifications to my registered email address.",
|
||||
icon: Mail,
|
||||
},
|
||||
{
|
||||
key: "smsEnabled",
|
||||
label: "SMS",
|
||||
description: "Send critical notifications via SMS (charges may apply).",
|
||||
icon: MessageSquare,
|
||||
},
|
||||
]
|
||||
|
||||
const CATEGORIES: CategoryItem[] = [
|
||||
{
|
||||
key: "messageNotifications",
|
||||
label: "Messages",
|
||||
description: "New direct messages and replies.",
|
||||
icon: MessageSquare,
|
||||
},
|
||||
{
|
||||
key: "announcementNotifications",
|
||||
label: "Announcements",
|
||||
description: "School, grade, and class announcements.",
|
||||
icon: Megaphone,
|
||||
},
|
||||
{
|
||||
key: "homeworkNotifications",
|
||||
label: "Homework",
|
||||
description: "New assignments and submission reminders.",
|
||||
icon: BookOpen,
|
||||
},
|
||||
{
|
||||
key: "gradeNotifications",
|
||||
label: "Grades",
|
||||
description: "Exam and assignment grade releases.",
|
||||
icon: GraduationCap,
|
||||
},
|
||||
{
|
||||
key: "attendanceNotifications",
|
||||
label: "Attendance",
|
||||
description: "Attendance records and absence alerts.",
|
||||
icon: CalendarCheck,
|
||||
},
|
||||
]
|
||||
|
||||
function SubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
Save Preferences
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function NotificationPreferencesForm({ preferences }: NotificationPreferencesFormProps) {
|
||||
const [state, formAction] = useActionState(updateNotificationPreferencesAction, null)
|
||||
|
||||
// 本地状态用于即时反馈 Switch 切换
|
||||
const [channels, setChannels] = React.useState({
|
||||
emailEnabled: preferences.emailEnabled,
|
||||
smsEnabled: preferences.smsEnabled,
|
||||
pushEnabled: preferences.pushEnabled,
|
||||
})
|
||||
const [categories, setCategories] = React.useState({
|
||||
homeworkNotifications: preferences.homeworkNotifications,
|
||||
gradeNotifications: preferences.gradeNotifications,
|
||||
announcementNotifications: preferences.announcementNotifications,
|
||||
messageNotifications: preferences.messageNotifications,
|
||||
attendanceNotifications: preferences.attendanceNotifications,
|
||||
})
|
||||
|
||||
React.useEffect(() => {
|
||||
if (state?.success) {
|
||||
toast.success(state.message ?? "Preferences updated")
|
||||
} else if (state?.success === false && state.message) {
|
||||
toast.error(state.message)
|
||||
}
|
||||
}, [state])
|
||||
|
||||
const toggleChannel = (key: keyof typeof channels) => {
|
||||
setChannels((prev) => ({ ...prev, [key]: !prev[key] }))
|
||||
}
|
||||
|
||||
const toggleCategory = (key: keyof typeof categories) => {
|
||||
setCategories((prev) => ({ ...prev, [key]: !prev[key] }))
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Notification Preferences</CardTitle>
|
||||
<CardDescription>
|
||||
Choose how and when you want to be notified.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<form action={formAction}>
|
||||
<CardContent className="space-y-6">
|
||||
{/* 通知渠道 */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium">Delivery Channels</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Select the channels through which you want to receive notifications.
|
||||
</p>
|
||||
</div>
|
||||
{CHANNELS.map((item) => {
|
||||
const Icon = item.icon
|
||||
const checked = channels[item.key]
|
||||
return (
|
||||
<div key={item.key} className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor={item.key} className="text-sm font-medium cursor-pointer">
|
||||
{item.label}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 隐藏的 checkbox 用于表单提交 */}
|
||||
<input
|
||||
type="checkbox"
|
||||
name={item.key}
|
||||
checked={checked}
|
||||
onChange={() => toggleChannel(item.key)}
|
||||
className="sr-only"
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<Switch
|
||||
id={item.key}
|
||||
checked={checked}
|
||||
onCheckedChange={() => toggleChannel(item.key)}
|
||||
aria-label={item.label}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* 通知类别 */}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium">Notification Categories</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Choose which types of events should trigger notifications.
|
||||
</p>
|
||||
</div>
|
||||
{CATEGORIES.map((item) => {
|
||||
const Icon = item.icon
|
||||
const checked = categories[item.key]
|
||||
return (
|
||||
<div key={item.key} className="flex items-center justify-between gap-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-9 w-9 items-center justify-center rounded-md bg-muted">
|
||||
<Icon className="h-4 w-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor={item.key} className="text-sm font-medium cursor-pointer">
|
||||
{item.label}
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">{item.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name={item.key}
|
||||
checked={checked}
|
||||
onChange={() => toggleCategory(item.key)}
|
||||
className="sr-only"
|
||||
tabIndex={-1}
|
||||
/>
|
||||
<Switch
|
||||
id={item.key}
|
||||
checked={checked}
|
||||
onCheckedChange={() => toggleCategory(item.key)}
|
||||
aria-label={item.label}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end border-t px-6 py-4">
|
||||
<SubmitButton />
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
180
src/modules/settings/components/password-change-form.tsx
Normal file
180
src/modules/settings/components/password-change-form.tsx
Normal file
@@ -0,0 +1,180 @@
|
||||
"use client"
|
||||
|
||||
import { useActionState, useEffect, useMemo, useState } from "react"
|
||||
import { useFormStatus } from "react-dom"
|
||||
import { Eye, EyeOff, KeyRound, Loader2 } from "lucide-react"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Input } from "@/shared/components/ui/input"
|
||||
import { Label } from "@/shared/components/ui/label"
|
||||
import { Progress } from "@/shared/components/ui/progress"
|
||||
import { changePasswordAction } from "@/modules/settings/actions-password"
|
||||
import {
|
||||
getPasswordStrength,
|
||||
PASSWORD_REQUIREMENT_HINTS,
|
||||
type PasswordStrength,
|
||||
} from "@/shared/lib/password-policy"
|
||||
import type { ActionState } from "@/shared/types/action-state"
|
||||
|
||||
const STRENGTH_META: Record<PasswordStrength, { value: number; label: string; color: string }> = {
|
||||
weak: { value: 33, label: "Weak", color: "bg-red-500" },
|
||||
medium: { value: 66, label: "Medium", color: "bg-yellow-500" },
|
||||
strong: { value: 100, label: "Strong", color: "bg-green-500" },
|
||||
}
|
||||
|
||||
function SubmitButton() {
|
||||
const { pending } = useFormStatus()
|
||||
return (
|
||||
<Button type="submit" disabled={pending}>
|
||||
{pending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Updating...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<KeyRound className="mr-2 h-4 w-4" />
|
||||
Update Password
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function PasswordChangeForm() {
|
||||
const [state, formAction] = useActionState<ActionState<null>, FormData>(
|
||||
changePasswordAction,
|
||||
{ success: false, data: null }
|
||||
)
|
||||
const [newPassword, setNewPassword] = useState("")
|
||||
const [showCurrent, setShowCurrent] = useState(false)
|
||||
const [showNew, setShowNew] = useState(false)
|
||||
const [showConfirm, setShowConfirm] = useState(false)
|
||||
|
||||
const strength = useMemo(() => getPasswordStrength(newPassword), [newPassword])
|
||||
const meta = STRENGTH_META[strength]
|
||||
|
||||
useEffect(() => {
|
||||
if (state?.success) {
|
||||
toast.success(state.message ?? "Password changed successfully")
|
||||
const form = document.getElementById("password-change-form") as HTMLFormElement | null
|
||||
form?.reset()
|
||||
} else if (state?.message) {
|
||||
toast.error(state.message)
|
||||
}
|
||||
}, [state])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Change Password</CardTitle>
|
||||
<CardDescription>
|
||||
Choose a strong password to keep your account secure.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<form id="password-change-form" action={formAction} onReset={() => setNewPassword("")}>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="currentPassword">Current Password</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="currentPassword"
|
||||
name="currentPassword"
|
||||
type={showCurrent ? "text" : "password"}
|
||||
placeholder="Enter current password"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowCurrent((v) => !v)}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showCurrent ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="newPassword">New Password</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="newPassword"
|
||||
name="newPassword"
|
||||
type={showNew ? "text" : "password"}
|
||||
placeholder="Enter new password"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowNew((v) => !v)}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showNew ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
{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>
|
||||
</div>
|
||||
<Progress value={meta.value} className={`h-2 [&>div]:${meta.color}`} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="confirmPassword">Confirm New Password</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
name="confirmPassword"
|
||||
type={showConfirm ? "text" : "password"}
|
||||
placeholder="Re-enter new password"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-full px-3 hover:bg-transparent"
|
||||
onClick={() => setShowConfirm((v) => !v)}
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showConfirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-md border bg-muted/30 p-3">
|
||||
<div className="text-xs font-medium text-muted-foreground">Password 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">
|
||||
<span className="h-1 w-1 rounded-full bg-muted-foreground" />
|
||||
{hint}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end border-t px-6 py-4">
|
||||
<SubmitButton />
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
@@ -1,17 +1,25 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { User, Palette, Lock, LayoutDashboard, PenTool, CalendarDays } from "lucide-react"
|
||||
import { User, Palette, Lock, LayoutDashboard, PenTool, CalendarDays, Bell } from "lucide-react"
|
||||
import { signOut } from "next-auth/react"
|
||||
|
||||
import { ThemePreferencesCard } from "@/modules/settings/components/theme-preferences-card"
|
||||
import { ProfileSettingsForm } from "@/modules/settings/components/profile-settings-form"
|
||||
import { PasswordChangeForm } from "@/modules/settings/components/password-change-form"
|
||||
import { NotificationPreferencesForm } from "@/modules/settings/components/notification-preferences-form"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
|
||||
import { UserProfile } from "@/modules/users/data-access"
|
||||
import type { NotificationPreferences } from "@/modules/messaging/types"
|
||||
|
||||
export function StudentSettingsView({ user }: { user: UserProfile }) {
|
||||
interface StudentSettingsViewProps {
|
||||
user: UserProfile
|
||||
notificationPreferences: NotificationPreferences
|
||||
}
|
||||
|
||||
export function StudentSettingsView({ user, notificationPreferences }: StudentSettingsViewProps) {
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-8 p-8">
|
||||
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
|
||||
@@ -32,6 +40,10 @@ export function StudentSettingsView({ user }: { user: UserProfile }) {
|
||||
<User className="h-4 w-4" />
|
||||
General
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="notifications" className="gap-2">
|
||||
<Bell className="h-4 w-4" />
|
||||
Notifications
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="appearance" className="gap-2">
|
||||
<Palette className="h-4 w-4" />
|
||||
Appearance
|
||||
@@ -76,11 +88,16 @@ export function StudentSettingsView({ user }: { user: UserProfile }) {
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="notifications" className="mt-6 space-y-6">
|
||||
<NotificationPreferencesForm preferences={notificationPreferences} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="appearance" className="mt-6 space-y-6">
|
||||
<ThemePreferencesCard />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="security" className="mt-6 space-y-6">
|
||||
<PasswordChangeForm />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Session</CardTitle>
|
||||
|
||||
@@ -1,17 +1,25 @@
|
||||
"use client"
|
||||
|
||||
import Link from "next/link"
|
||||
import { User, Palette, Lock, LayoutDashboard, PenTool, CalendarDays, Library, FileQuestion } from "lucide-react"
|
||||
import { User, Palette, Lock, LayoutDashboard, PenTool, CalendarDays, Library, FileQuestion, Bell } from "lucide-react"
|
||||
import { signOut } from "next-auth/react"
|
||||
|
||||
import { ThemePreferencesCard } from "@/modules/settings/components/theme-preferences-card"
|
||||
import { ProfileSettingsForm } from "@/modules/settings/components/profile-settings-form"
|
||||
import { PasswordChangeForm } from "@/modules/settings/components/password-change-form"
|
||||
import { NotificationPreferencesForm } from "@/modules/settings/components/notification-preferences-form"
|
||||
import { Button } from "@/shared/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
|
||||
import { UserProfile } from "@/modules/users/data-access"
|
||||
import type { NotificationPreferences } from "@/modules/messaging/types"
|
||||
|
||||
export function TeacherSettingsView({ user }: { user: UserProfile }) {
|
||||
interface TeacherSettingsViewProps {
|
||||
user: UserProfile
|
||||
notificationPreferences: NotificationPreferences
|
||||
}
|
||||
|
||||
export function TeacherSettingsView({ user, notificationPreferences }: TeacherSettingsViewProps) {
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-8 p-8">
|
||||
<div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
|
||||
@@ -32,6 +40,10 @@ export function TeacherSettingsView({ user }: { user: UserProfile }) {
|
||||
<User className="h-4 w-4" />
|
||||
General
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="notifications" className="gap-2">
|
||||
<Bell className="h-4 w-4" />
|
||||
Notifications
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="appearance" className="gap-2">
|
||||
<Palette className="h-4 w-4" />
|
||||
Appearance
|
||||
@@ -88,11 +100,16 @@ export function TeacherSettingsView({ user }: { user: UserProfile }) {
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="notifications" className="mt-6 space-y-6">
|
||||
<NotificationPreferencesForm preferences={notificationPreferences} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="appearance" className="mt-6 space-y-6">
|
||||
<ThemePreferencesCard />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="security" className="mt-6 space-y-6">
|
||||
<PasswordChangeForm />
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Session</CardTitle>
|
||||
|
||||
Reference in New Issue
Block a user