Implement password change functionality and initialize superuser

qwen3-tts-frontend/src/components/users/ChangePasswordDialog.tsx

@@ -0,0 +1,161 @@
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import * as z from 'zod'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import type { PasswordChangeRequest } from '@/types/auth'
+
+const passwordChangeSchema = z.object({
+  current_password: z.string().min(1, '请输入当前密码'),
+  new_password: z
+    .string()
+    .min(8, '密码至少8个字符')
+    .regex(/[A-Z]/, '密码必须包含至少一个大写字母')
+    .regex(/[a-z]/, '密码必须包含至少一个小写字母')
+    .regex(/\d/, '密码必须包含至少一个数字'),
+  confirm_password: z.string().min(1, '请确认新密码'),
+}).refine((data) => data.new_password === data.confirm_password, {
+  message: '两次输入的密码不一致',
+  path: ['confirm_password'],
+})
+
+type PasswordChangeFormValues = z.infer<typeof passwordChangeSchema>
+
+interface ChangePasswordDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSubmit: (data: PasswordChangeRequest) => Promise<void>
+  isLoading: boolean
+}
+
+export function ChangePasswordDialog({
+  open,
+  onOpenChange,
+  onSubmit,
+  isLoading,
+}: ChangePasswordDialogProps) {
+  const form = useForm<PasswordChangeFormValues>({
+    resolver: zodResolver(passwordChangeSchema),
+    defaultValues: {
+      current_password: '',
+      new_password: '',
+      confirm_password: '',
+    },
+  })
+
+  const handleSubmit = async (data: PasswordChangeFormValues) => {
+    await onSubmit(data)
+    form.reset()
+  }
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open && !isLoading) {
+      form.reset()
+    }
+    onOpenChange(open)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>修改密码</DialogTitle>
+          <DialogDescription>
+            请输入当前密码和新密码。新密码至少8个字符，包含大小写字母和数字。
+          </DialogDescription>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="current_password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>当前密码</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="请输入当前密码"
+                      disabled={isLoading}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="new_password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>新密码</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="请输入新密码"
+                      disabled={isLoading}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="confirm_password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>确认新密码</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="请再次输入新密码"
+                      disabled={isLoading}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <DialogFooter>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => handleOpenChange(false)}
+                disabled={isLoading}
+              >
+                取消
+              </Button>
+              <Button type="submit" disabled={isLoading}>
+                {isLoading ? '提交中...' : '确认修改'}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}