实现修改密码，但引入了修改密码后无法点击窗口的bug

tone-page-server/src/user/dto/update-user-password.dto.ts

@@ -0,0 +1,10 @@
+import { IsString, Length, Matches } from "class-validator";
+
+export class UpdateUserPasswordDto {
+    @IsString({ message: '密码不得为空' })
+    @Length(6, 32, { message: '密码长度只能为6~32' })
+    @Matches(/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+\-=\[\]{};:'",.<>/?]{6,32}$/,
+        { message: '密码必须包含字母和数字，且长度在6~32之间' }
+    )
+    password: string;
+}

tone-page-server/src/user/user.controller.ts

@@ -1,21 +1,30 @@
-import { Controller, Get, Injectable, Request, UnauthorizedException, UseGuards } from '@nestjs/common';
+import { Body, Controller, Get, Put, Request, UseGuards } from '@nestjs/common';
 import { UserService } from './user.service';
 import { AuthGuard } from '@nestjs/passport';
+import { UpdateUserPasswordDto } from './dto/update-user-password.dto';
+import { AuthService } from 'src/auth/auth.service';
 
 @Controller('user')
 export class UserController {
 
     constructor(
-        private readonly userService: UserService
+        private readonly userService: UserService,
+        private readonly authService: AuthService,
     ) { }
 
     @UseGuards(AuthGuard('jwt'))
     @Get('me')
     async getMe(@Request() req) {
         const { user } = req;
-        if (!user || !user.userId) {
-            throw new UnauthorizedException('Unauthorized');
-        }
         return this.userService.findOne({ userId: user.userId });
     }
+
+    @UseGuards(AuthGuard('jwt'))
+    @Put('password')
+    async update(
+        @Request() req,
+        @Body() dto: UpdateUserPasswordDto,
+    ) {
+        return this.userService.setPassword(req.user.userId, dto.password);
+    }
 }

tone-page-web/components/nav-user.tsx

@@ -32,6 +32,8 @@ import { Skeleton } from "./ui/skeleton"
 import { toast } from "sonner"
 import { useRouter } from "next/navigation"
 import { ApiError } from "next/dist/server/api-utils"
+import SetPassword from "./nav-user/SetPassword"
+import { useState } from "react"
 
 export function NavUser({ }: {}) {
   const { isMobile } = useSidebar();
@@ -68,86 +70,92 @@ export function NavUser({ }: {}) {
     }
   }
 
+  const [passwordOpen, setPasswordOpen] = useState(false);
+
   return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+    <>
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                {
+                  user && <>
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage src={user.avatar} />
+                      <AvatarFallback className="rounded-lg">U</AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-medium">{user.nickname}</span>
+                      <span className="truncate text-xs">{user.username}</span>
+                    </div>
+                  </>
+                }
+                {
+                  isLoading && <div className="w-full flex items-center gap-2">
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                    <div className="flex-1 flex flex-col gap-1">
+                      <Skeleton className="w-full h-4" />
+                      <Skeleton className="w-full h-4" />
+                    </div>
+                  </div>
+                }
+                <ChevronsUpDown className="ml-auto size-4" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent
+              className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+              side={isMobile ? "bottom" : "right"}
+              align="end"
+              sideOffset={4}
             >
-              {
-                user && <>
-                  <Avatar className="h-8 w-8 rounded-lg">
-                    <AvatarImage src={user.avatar} />
-                    <AvatarFallback className="rounded-lg">U</AvatarFallback>
-                  </Avatar>
-                  <div className="grid flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-medium">{user.nickname}</span>
-                    <span className="truncate text-xs">{user.username}</span>
+              <DropdownMenuLabel className="p-0 font-normal">
+                {
+                  user &&
+                  <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                    <Avatar className="h-8 w-8 rounded-lg">
+                      <AvatarImage src={user.avatar} />
+                      <AvatarFallback className="rounded-lg">U</AvatarFallback>
+                    </Avatar>
+                    <div className="grid flex-1 text-left text-sm leading-tight">
+                      <span className="truncate font-medium">{user.nickname}</span>
+                      <span className="truncate text-xs">{user.username}</span>
+                    </div>
                   </div>
-                </>
-              }
-              {
-                isLoading && <div className="w-full flex items-center gap-2">
-                  <Skeleton className="h-8 w-8 rounded-full" />
-                  <div className="flex-1 flex flex-col gap-1">
-                    <Skeleton className="w-full h-4" />
-                    <Skeleton className="w-full h-4" />
+                }
+                {
+                  isLoading && <div className="flex items-center gap-2">
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                    <div className="flex-1 flex flex-col gap-1">
+                      <Skeleton className="w-full h-4" />
+                      <Skeleton className="w-full h-4" />
+                    </div>
                   </div>
-                </div>
-              }
-              <ChevronsUpDown className="ml-auto size-4" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
-            align="end"
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="p-0 font-normal">
-              {
-                user &&
-                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                  <Avatar className="h-8 w-8 rounded-lg">
-                    <AvatarImage src={user.avatar} />
-                    <AvatarFallback className="rounded-lg">U</AvatarFallback>
-                  </Avatar>
-                  <div className="grid flex-1 text-left text-sm leading-tight">
-                    <span className="truncate font-medium">{user.nickname}</span>
-                    <span className="truncate text-xs">{user.username}</span>
-                  </div>
-                </div>
-              }
-              {
-                isLoading && <div className="flex items-center gap-2">
-                  <Skeleton className="h-8 w-8 rounded-full" />
-                  <div className="flex-1 flex flex-col gap-1">
-                    <Skeleton className="w-full h-4" />
-                    <Skeleton className="w-full h-4" />
-                  </div>
-                </div>
-              }
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <UserRoundCog />
-              账户信息
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <KeyRound />
-              修改密码
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={logout}>
-              <LogOut />
-              登出
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
+                }
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <UserRoundCog />
+                账户信息
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setPasswordOpen(true)}>
+                <KeyRound />
+                修改密码
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={logout}>
+                <LogOut />
+                登出
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarMenuItem>
+      </SidebarMenu >
+
+      <SetPassword open={passwordOpen} onOpenChange={setPasswordOpen} />
+    </>
   )
 }

tone-page-web/components/nav-user/SetPassword.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { SeparatorProps } from "@radix-ui/react-separator";
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { FC } from "react";
+import { DialogProps } from "@radix-ui/react-dialog";
+import { toast } from "sonner";
+import { UserApi } from "@/lib/api";
+import { ApiError } from "next/dist/server/api-utils";
+
+export default function SetPassword({ onOpenChange, ...props }: React.ComponentProps<FC<DialogProps>>) {
+    async function handleSetPassword(password: string) {
+        if (! /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+\-=\[\]{};:'",.<>/?]{6,32}$/.test(password)) {
+            toast.error('新密码不符合规范，请重新输入');
+            return;
+        }
+
+        try {
+            await UserApi.updatePassword(password);
+            toast.success('新密码设置成功');
+            onOpenChange?.(false);
+        } catch (error) {
+            toast.error((error as ApiError).message || '新密码设置失败');
+        }
+    }
+
+    return (
+        <Dialog onOpenChange={onOpenChange} {...props}>
+            <DialogContent className="sm:max-w-[425px]">
+                <DialogHeader>
+                    <DialogTitle>修改密码</DialogTitle>
+                    <DialogDescription>
+                        新密码长度在6-32位之间，且至少包含一个字母和一个数字，可以包含特殊字符
+                    </DialogDescription>
+                </DialogHeader>
+
+                <form onSubmit={e => {
+                    e.preventDefault();
+                    const formData = new FormData(e.currentTarget);
+                    const password = formData.get('password') as string;
+
+                    handleSetPassword(password);
+                }}>
+                    <div className="grid gap-4 py-4">
+                        <div className="grid grid-cols-4 items-center gap-4">
+                            <Label htmlFor="password" className="text-right">
+                                新密码
+                            </Label>
+                            <Input
+                                id="password"
+                                name="password"
+                                defaultValue=""
+                                className="col-span-3"
+                            />
+                        </div>
+                    </div>
+                    <DialogFooter>
+                        <Button type="button" variant='secondary' onClick={() => onOpenChange?.(false)}>取消</Button>
+                        <Button type="submit">保存密码</Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog >
+    )
+}

tone-page-web/lib/api/user/index.ts

@@ -1 +1,2 @@
 export * from './me';
+export * from './updatePassword';

tone-page-web/lib/api/user/updatePassword.ts

@@ -0,0 +1,10 @@
+import fetcher from "../fetcher";
+
+export async function updatePassword(password: string) {
+    return fetcher(`/api/user/password`, {
+        method: 'PUT',
+        body: JSON.stringify({
+            password: password,
+        }),
+    })
+}