修改密码组件

src/api/user.ts

@@ -6,7 +6,7 @@ export function detail() {
 
 // 修改密码
 export function password(oldPassword: string, newPassword: string) {
-  return client.put("/api/v1/user/avatar", {
+  return client.put("/api/v1/user/password", {
     old_password: oldPassword,
     new_password: newPassword,
   });

src/compenents/change-password/index.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Select, Form, Input, message } from "antd";
+import styles from "./index.module.less";
+import { user } from "../../api/index";
+
+interface PropInterface {
+  open: boolean;
+  onCancel: () => void;
+}
+
+export const ChangePasswordModel: React.FC<PropInterface> = ({
+  open,
+  onCancel,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    form.setFieldsValue({
+      old_password: "",
+      new_password: "",
+      again_new_password: "",
+    });
+  }, [form, open]);
+
+  const onFinish = (values: any) => {
+    if (values.again_new_password !== values.new_password) {
+      message.error("再次输入的新密码错误");
+      return;
+    }
+    user.password(values.old_password, values.new_password).then((res: any) => {
+      message.success("保存成功！");
+      onCancel();
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  return (
+    <>
+      <Modal
+        title="修改密码"
+        centered
+        forceRender
+        open={open}
+        width={416}
+        onOk={() => form.submit()}
+        onCancel={() => onCancel()}
+        maskClosable={false}
+      >
+        <div className="float-left mt-24">
+          <Form
+            form={form}
+            name="change-password"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="请输入原密码"
+              name="old_password"
+              rules={[{ required: true, message: "请输入原密码!" }]}
+            >
+              <Input.Password
+                style={{ width: 200 }}
+                autoComplete="off"
+                placeholder="请输入原密码"
+              />
+            </Form.Item>
+            <Form.Item
+              label="输入新密码"
+              name="new_password"
+              rules={[{ required: true, message: "请输入新密码!" }]}
+            >
+              <Input.Password
+                style={{ width: 200 }}
+                autoComplete="off"
+                placeholder="请输入新密码"
+              />
+            </Form.Item>
+            <Form.Item
+              label="再次输入新密码"
+              name="again_new_password"
+              rules={[{ required: true, message: "再次输入新密码!" }]}
+            >
+              <Input.Password
+                style={{ width: 200 }}
+                autoComplete="off"
+                placeholder="再次输入新密码"
+              />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/compenents/header/index.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./index.module.scss";
 import { Button, Dropdown, MenuProps } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { logoutAction } from "../../store/user/loginUserSlice";
+import { ChangePasswordModel } from "../change-password";
 
 export const Header: React.FC = () => {
   const dispatch = useDispatch();
@@ -14,12 +15,15 @@ export const Header: React.FC = () => {
   );
   const config = useSelector((state: any) => state.systemConfig.value);
 
+  const [changePasswordVisiale, setChangePasswordVisiale] =
+    useState<boolean>(false);
+
   const onClick: MenuProps["onClick"] = ({ key }) => {
     if (key === "login_out") {
       dispatch(logoutAction());
       navigate("/login");
     } else if (key === "change_password") {
-      navigate("/change-password");
+      setChangePasswordVisiale(true);
     } else if (key === "user_info") {
       navigate("/user_info");
     }
@@ -82,6 +86,12 @@ export const Header: React.FC = () => {
               </div>
             </Dropdown>
           </Button.Group>
+          <ChangePasswordModel
+            open={changePasswordVisiale}
+            onCancel={() => {
+              setChangePasswordVisiale(false);
+            }}
+          ></ChangePasswordModel>
         </div>
       </div>
     </div>

src/compenents/index.ts

@@ -2,3 +2,4 @@ export * from "./footer";
 export * from "./no-footer";
 export * from "./no-header";
 export * from "./header";
+export * from "./change-password";

src/main.tsx

@@ -10,18 +10,16 @@ import App from "./App";
 import "./index.scss"; //全局样式
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <Provider store={store}>
-      <ConfigProvider
-        locale={zhCN}
-        theme={{ token: { colorPrimary: "#ff4d4f" } }}
-      >
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </ConfigProvider>
-    </Provider>
-  </React.StrictMode>
+  <Provider store={store}>
+    <ConfigProvider
+      locale={zhCN}
+      theme={{ token: { colorPrimary: "#ff4d4f" } }}
+    >
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </ConfigProvider>
+  </Provider>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/pages/change-password/index.tsx

@@ -1,64 +0,0 @@
-import { Row, Col, Form, Input, Button, message } from "antd";
-import styles from "./index.module.scss";
-import { user } from "../../api/index";
-import { useNavigate } from "react-router-dom";
-
-const ChangePasswordPage = () => {
-  const navigate = useNavigate();
-  const [form] = Form.useForm();
-
-  const onFinish = (values: any) => {
-    user.password(values.old_password, values.new_password).then((res: any) => {
-      message.success("保存成功！");
-      navigate(-1);
-    });
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log("Failed:", errorInfo);
-  };
-
-  return (
-    <>
-      <Row className="playedu-main-body">
-        <Col>
-          <div className="float-left">
-            <Form
-              form={form}
-              name="basic"
-              labelCol={{ span: 8 }}
-              wrapperCol={{ span: 16 }}
-              style={{ width: 600 }}
-              initialValues={{ remember: true }}
-              onFinish={onFinish}
-              onFinishFailed={onFinishFailed}
-              autoComplete="off"
-            >
-              <Form.Item
-                label="原密码"
-                name="old_password"
-                rules={[{ required: true, message: "请输入原密码!" }]}
-              >
-                <Input.Password placeholder="请输入原密码" />
-              </Form.Item>
-              <Form.Item
-                label="新密码"
-                name="new_password"
-                rules={[{ required: true, message: "请输入新密码!" }]}
-              >
-                <Input.Password placeholder="请输入新密码" />
-              </Form.Item>
-              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-                <Button type="primary" htmlType="submit">
-                  保存
-                </Button>
-              </Form.Item>
-            </Form>
-          </div>
-        </Col>
-      </Row>
-    </>
-  );
-};
-
-export default ChangePasswordPage;

src/pages/index/index.tsx

@@ -3,7 +3,7 @@ import { Row, Col, Empty, Spin, Tabs } from "antd";
 import type { TabsProps } from "antd";
 import { user } from "../../api/index";
 import styles from "./index.module.scss";
-import { AnyIfEmpty, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import { CoursesModel } from "./compenents/courses-model";
 import myLesoon from "../../assets/images/commen/icon-mylesoon.png";
 import studyTime from "../../assets/images/commen/icon-studytime.png";

src/routes/index.tsx

@@ -32,7 +32,6 @@ const Init = lazy(async () => {
 // 懒加载
 const LoginPage = lazy(() => import("../pages/login"));
 const IndexPage = lazy(() => import("../pages/index"));
-const ChangePasswordPage = lazy(() => import("../pages/change-password"));
 
 const routes: RouteObject[] = [
   {
@@ -47,10 +46,6 @@ const routes: RouteObject[] = [
         path: "/login",
         element: <LoginPage />,
       },
-      {
-        path: "/change-password",
-        element: <ChangePasswordPage />,
-      },
     ],
   },
 ];