咒語:請幫我用mui 幫我完成會員頁面 包含 更改密碼(fetch("http://localhost:3310/users") 包含邏輯 以及登出按鈕
其中內容要繁體中文

import React, { useState, useEffect } from "react";
import {
  Button,
  Container,
  CssBaseline,
  Grid,
  Paper,
  TextField,
  Typography,
} from "@mui/material";
import { useNavigate } from "react-router-dom";

const Member = () => {
  const navigate = useNavigate();
  const [password, setPassword] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [confirmNewPassword, setConfirmNewPassword] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [message, setMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // 在此處添加獲取用戶信息的邏輯，可以使用 fetch 請求獲取用戶數據
    // 範例：fetchUserData();
  }, []);
  const updatedUser = {
    password: newPassword, // 更新新密碼
    // 這裡可以包含其他字段，例如 email
  };
  const handleChangePassword = async () => {
    // 驗證密碼是否為空
    if (!password || !newPassword || !confirmNewPassword) {
      setPasswordError("所有字段都必填");
      return;
    }

    // 驗證新密碼和確認密碼是否匹配
    if (newPassword !== confirmNewPassword) {
      setPasswordError("新密碼和確認密碼不匹配");
      return;
    }

    // 獲取當前用戶的 ID，你可以使用 localStorage 中的 token 來識別當前用戶
    const userId = localStorage.getItem("token");

    // 發送更改密碼請求
    try {
      setIsLoading(true);
      const response = await fetch(`http://localhost:3310/users/${userId}`, {
        method: "PUT", // 使用 PUT 請求來更新密碼
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(updatedUser),
      });

      if (response.status === 200) {
        setMessage("密碼已成功更改");
        setPassword("");
        setNewPassword("");
        setConfirmNewPassword("");
        setPasswordError("");
      } else {
        const data = await response.json();
        setMessage(`更改密碼失敗: ${data.message}`);
      }
    } catch (error) {
      console.error("更改密碼時出錯:", error);
      setMessage("更改密碼時出錯");
    } finally {
      setIsLoading(false);
    }
  };

  const handleLogout = () => {
    // 移除本地存儲中的 token
    localStorage.removeItem("token");
    navigate("/");
    // 在此處可以執行其他登出操作，例如重定向到登入頁面等
  };

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <Paper
        elevation={3}
        sx={{
          padding: 4,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Typography variant="h5" gutterBottom>
          會員頁面
        </Typography>
        <Grid container spacing={2}>
          <Grid item xs={12}>
            <TextField
              fullWidth
              name="password"
              label="當前密碼"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              fullWidth
              name="newPassword"
              label="新密碼"
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
            />
          </Grid>
          <Grid item xs={12}>
            <TextField
              fullWidth
              name="confirmNewPassword"
              label="確認新密碼"
              type="password"
              value={confirmNewPassword}
              onChange={(e) => setConfirmNewPassword(e.target.value)}
              error={passwordError !== ""}
              helperText={passwordError}
            />
          </Grid>
        </Grid>
        <Button
          fullWidth
          variant="contained"
          color="primary"
          onClick={handleChangePassword}
          disabled={isLoading}
        >
          更改密碼
        </Button>
        <Typography variant="body2" color="textSecondary" sx={{ marginTop: 2 }}>
          {message}
        </Typography>
        <Button
          fullWidth
          variant="contained"
          color="secondary"
          onClick={handleLogout}
          sx={{ marginTop: 2 }}
        >
          登出
        </Button>
      </Paper>
    </Container>
  );
};

export default Member;

UI建構好了 發現邏輯有問題沒辦法發送
咒語:根據localStorage 的token 為Json的Id 要去更改相對應的password

const handleChangePassword = async () => {
  // 驗證密碼是否為空
  if (!password || !newPassword || !confirmNewPassword) {
    setPasswordError("所有字段都必填");
    return;
  }

  // 驗證新密碼和確認密碼是否匹配
  if (newPassword !== confirmNewPassword) {
    setPasswordError("新密碼和確認密碼不匹配");
    return;
  }

  // 獲取當前用戶的 ID，你可以使用 localStorage 中的 token 來識別當前用戶
  const userId = localStorage.getItem("token");

  // 構建要更新的用戶對象
  const updatedUser = {
    password: newPassword, // 更新新密碼
    // 這裡可以包含其他字段，例如 email
  };

  // 發送更改密碼請求
  try {
    setIsLoading(true);
    const response = await fetch(`http://localhost:3310/users/${userId}`, {
      method: "PUT", // 使用 PUT 請求來更新密碼
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(updatedUser), // 傳遞整個用戶對象
    });

    if (response.status === 200) {
      setMessage("密碼已成功更改");
      setPassword("");
      setNewPassword("");
      setConfirmNewPassword("");
      setPasswordError("");
    } else {
      const data = await response.json();
      setMessage(`更改密碼失敗: ${data.message}`);
    }
  } catch (error) {
    console.error("更改密碼時出錯:", error);
    setMessage("更改密碼時出錯");
  } finally {
    setIsLoading(false);
  }
};

這樣的邏輯就可以更改JSON裡的密碼了