feat: enhance password management and improve logout functionality

cubxxw · cubxxw · commit b767545035a4 · 2025-05-15T14:37:54.000+08:00
- Implemented a direct API call for password updates in the ChangePassword component, with fallback to the existing service method on failure.
- Added error handling and user feedback for password update failures.
- Updated the logout function to ensure the authorization token is included in the API request.
- Enhanced the dashboard layout to dynamically generate deployment URLs based on environment variables, improving clarity and usability.
diff --git a/admin/src/components/UserSettings/ChangePassword.tsx b/admin/src/components/UserSettings/ChangePassword.tsx
@@ -3,7 +3,8 @@ import { useMutation } from "@tanstack/react-query"
 import { type SubmitHandler, useForm } from "react-hook-form"
 import { FiLock } from "react-icons/fi"
 
-import { type ApiError, type UpdatePassword, UsersService } from "@/client"
+import { type ApiError, type UpdatePassword, UsersService, OpenAPI } from "@/client"
+import { request } from "@/client/core/request"
 import useCustomToast from "@/hooks/useCustomToast"
 import { confirmPasswordRules, handleError, passwordRules } from "@/utils"
 import { PasswordInput } from "../ui/password-input"
@@ -12,8 +13,26 @@ interface UpdatePasswordForm extends UpdatePassword {
   confirm_password: string
 }
 
+// 直接调用MCP API更新密码
+const updatePasswordAPI = async (data: UpdatePassword): Promise<void> => {
+  const token = localStorage.getItem("access_token")
+  if (!token) {
+    throw new Error("No access token found")
+  }
+
+  return request(OpenAPI, {
+    method: "POST",
+    url: "/api/v1/users/me/password",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  })
+}
+
 const ChangePassword = () => {
-  const { showSuccessToast } = useCustomToast()
+  const { showSuccessToast, showErrorToast } = useCustomToast()
   const {
     register,
     handleSubmit,
@@ -26,14 +45,23 @@ const ChangePassword = () => {
   })
 
   const mutation = useMutation({
-    mutationFn: (data: UpdatePassword) =>
-      UsersService.updatePasswordMe({ requestBody: data }),
+    mutationFn: (data: UpdatePassword) => {
+      // 尝试直接使用定制的API调用
+      try {
+        return updatePasswordAPI(data)
+      } catch (error) {
+        console.error("直接API调用失败，回退到服务方法", error)
+        // 回退到默认服务方法
+        return UsersService.updatePasswordMe({ requestBody: data })
+      }
+    },
     onSuccess: () => {
       showSuccessToast("Password updated successfully.")
       reset()
     },
     onError: (err: ApiError) => {
       handleError(err)
+      showErrorToast("Password update failed", err.message || "Please try again")
     },
   })
 
diff --git a/admin/src/hooks/useAuth.ts b/admin/src/hooks/useAuth.ts
@@ -18,11 +18,19 @@ const isLoggedIn = () => {
   return localStorage.getItem("access_token") !== null
 }
 
-// 自定义logout API调用
+// 自定义logout API调用，确保包含授权令牌
 const callLogoutAPI = async (): Promise<void> => {
+  const token = localStorage.getItem("access_token")
+  if (!token) {
+    throw new Error("No access token found")
+  }
+
   return request(OpenAPI, {
     method: "POST",
     url: "/api/v1/logout",
+    headers: {
+      Authorization: `Bearer ${token}`
+    },
   })
 }
 
@@ -70,8 +78,9 @@ const useAuth = () => {
 
   const logout = async () => {
     try {
-      // 尝试调用后端的logout接口
+      // 尝试调用后端的logout接口，确保请求完成
       await callLogoutAPI()
+      console.log("成功调用登出API")
     } catch (error) {
       console.error("登出API调用失败:", error)
     } finally {
diff --git a/admin/src/routes/_layout/index.tsx b/admin/src/routes/_layout/index.tsx
@@ -1,4 +1,4 @@
-import { Box, Container, Text, Grid, Heading, Link, Flex, Icon } from "@chakra-ui/react"
+import { Box, Container, Text, Grid, Heading, Link, Flex, Icon, Badge } from "@chakra-ui/react"
 import { createFileRoute } from "@tanstack/react-router"
 import { FiDatabase, FiServer, FiMonitor, FiCpu, FiExternalLink } from "react-icons/fi"
 import { useColorModeValue } from "@/components/ui/color-mode"
@@ -14,16 +14,18 @@ function Dashboard() {
   const cardBg = useColorModeValue("white", "gray.800")
   const borderColor = useColorModeValue("gray.200", "gray.700")
   const statBg = useColorModeValue("blue.50", "blue.900")
+  const domain = import.meta.env.VITE_DOMAIN || 'localhost.nip.io'
+  const protocol = import.meta.env.VITE_USE_HTTPS === 'false' ? 'http' : 'https'
 
-  // Deployment information from environment
+  // Deployment information from environment - updated format
   const deploymentTools = [
-    { name: "Admin Dashboard", url: `https://admin.${import.meta.env.VITE_DOMAIN || 'localhost.nip.io'}`, description: "Admin management interface" },
-    { name: "User Dashboard", url: `https://dashboard.${import.meta.env.VITE_DOMAIN || 'localhost.nip.io'}`, description: "User-facing dashboard" },
-    { name: "API Backend", url: `https://api.${import.meta.env.VITE_DOMAIN || 'localhost.nip.io'}`, description: "Backend API server" },
-    { name: "Adminer", url: `https://adminer.${import.meta.env.VITE_DOMAIN || 'localhost.nip.io'}`, description: "Database management" },
-    { name: "PG Admin", url: `https://pgadmin.${import.meta.env.VITE_DOMAIN || 'localhost.nip.io'}`, description: "PostgreSQL administration" },
-    { name: "LiteLLM", url: `https://llm.${import.meta.env.VITE_DOMAIN || 'localhost.nip.io'}`, description: "LLM proxy service" },
-    { name: "Prometheus", url: `https://prometheus.${import.meta.env.VITE_DOMAIN || 'localhost.nip.io'}`, description: "Monitoring and metrics" },
+    { name: "Admin Dashboard", subdomain: "admin", description: "Admin management interface" },
+    { name: "User Dashboard", subdomain: "dashboard", description: "User-facing dashboard" },
+    { name: "API Backend", subdomain: "api", description: "Backend API server" },
+    { name: "Adminer", subdomain: "adminer", description: "Database management" },
+    { name: "PG Admin", subdomain: "pgadmin", description: "PostgreSQL administration" },
+    { name: "LiteLLM", subdomain: "llm", description: "LLM proxy service" },
+    { name: "Prometheus", subdomain: "prometheus", description: "Monitoring and metrics" },
   ]
 
   // System information
@@ -75,38 +77,48 @@ function Dashboard() {
           
           <Box h="1px" bg={borderColor} my={6} />
           
-          <Heading size="md" mb={4}>Project Deployment Resources</Heading>
+          <Heading size="md" mb={4}>
+            Project Deployment Resources
+            <Badge ml={2} colorScheme={domain === 'localhost.nip.io' ? 'yellow' : 'green'}>
+              {domain === 'localhost.nip.io' ? 'Local' : 'Production'}
+            </Badge>
+          </Heading>
           
           <Grid templateColumns={{ base: "repeat(1, 1fr)", md: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" }} gap={4}>
-            {deploymentTools.map((tool) => (
-              <Box 
-                key={tool.name}
-                p={4}
-                borderWidth="1px"
-                borderRadius="lg"
-                borderColor={borderColor}
-                bg={cardBg}
-                boxShadow="sm"
-                transition="all 0.2s"
-                _hover={{ transform: "translateY(-2px)", boxShadow: "md" }}
-              >
-                <Heading size="sm" mb={2}>{tool.name}</Heading>
-                <Text fontSize="sm" color="gray.500" mb={3}>{tool.description}</Text>
-                <Link 
-                  href={tool.url} 
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  color="blue.500" 
-                  fontSize="sm"
-                  display="flex"
-                  alignItems="center"
-                  _hover={{ textDecoration: "underline", color: "blue.600" }}
+            {deploymentTools.map((tool) => {
+              const url = `${protocol}://${tool.subdomain}.${domain}`;
+              return (
+                <Box 
+                  key={tool.name}
+                  p={4}
+                  borderWidth="1px"
+                  borderRadius="lg"
+                  borderColor={borderColor}
+                  bg={cardBg}
+                  boxShadow="sm"
+                  transition="all 0.2s"
+                  _hover={{ transform: "translateY(-2px)", boxShadow: "md" }}
                 >
-                  {tool.url.replace(/^https?:\/\//, '')} 
-                  <Icon as={FiExternalLink} ml={1} />
-                </Link>
-              </Box>
-            ))}
+                  <Heading size="sm" mb={2}>{tool.name}</Heading>
+                  <Text fontSize="sm" color="gray.500" mb={3}>{tool.description}</Text>
+                  <Box title={url}>
+                    <Link 
+                      href={url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      color="blue.500" 
+                      fontSize="sm"
+                      display="flex"
+                      alignItems="center"
+                      _hover={{ textDecoration: "underline", color: "blue.600" }}
+                    >
+                      {tool.subdomain}.{domain}
+                      <Icon as={FiExternalLink} ml={1} />
+                    </Link>
+                  </Box>
+                </Box>
+              );
+            })}
           </Grid>
         </Box>
       </Container>
