feat: change password modal

src/app/services/auth.js

@@ -83,6 +83,13 @@ export const authApi = createApi({
         body: { magic_token: token },
       }),
     }),
+    updatePassword: builder.mutation({
+      query: ({ old_password, new_password }) => ({
+        url: "user/change_password",
+        method: "POST",
+        body: { old_password, new_password },
+      }),
+    }),
     getMetamaskNonce: builder.query({
       query: (address) => ({
         url: `/token/metamask/nonce?public_address=${address}`,
@@ -102,4 +109,5 @@ export const {
   useLoginMutation,
   useLazyLogoutQuery,
   useCheckInviteTokenValidMutation,
+  useUpdatePasswordMutation,
 } = authApi;

src/routes/setting/MyAccount.js

@@ -5,6 +5,7 @@ import toast from "react-hot-toast";
 import { useUpdateAvatarMutation } from "../../app/services/contact";
 import AvatarUploader from "../../common/component/AvatarUploader";
 import ProfileBasicEditModal from "./ProfileBasicEditModal";
+import UpdatePasswordModal from "./UpdatePasswordModal";
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -109,6 +110,7 @@ const EditModalInfo = {
   },
 };
 export default function MyAccount() {
+  const [passwordModal, setPasswordModal] = useState(false);
   const [editModal, setEditModal] = useState(null);
   const [
     uploadAvatar,
@@ -129,6 +131,9 @@ export default function MyAccount() {
   const closeBasicEditModal = () => {
     setEditModal(null);
   };
+  const togglePasswordModal = () => {
+    setPasswordModal((prev) => !prev);
+  };
   if (!loginUser) return null;
   const { uid, avatar, name, email } = loginUser;
   return (
@@ -146,22 +151,27 @@ export default function MyAccount() {
                 {name} <span className="gray"> #{uid}</span>
               </span>
             </div>
-            {/* <div className="right"> */}
             <button data-edit="name" onClick={handleBasicEdit} className="btn">
               Edit
             </button>
-            {/* </div> */}
           </div>
           <div className="row">
             <div className="info">
               <span className="label">email</span>
               <span className="txt">{email}</span>
             </div>
-            {/* <div className="right"> */}
             <button data-edit="email" onClick={handleBasicEdit} className="btn">
               Edit
             </button>
-            {/* </div> */}
+          </div>
+          <div className="row">
+            <div className="info">
+              <span className="label">password</span>
+              <span className="txt">*********</span>
+            </div>
+            <button onClick={togglePasswordModal} className="btn">
+              Edit
+            </button>
           </div>
         </div>
         <div className="danger">
@@ -181,6 +191,9 @@ export default function MyAccount() {
           closeModal={closeBasicEditModal}
         />
       )}
+      {passwordModal && (
+        <UpdatePasswordModal closeModal={togglePasswordModal} />
+      )}
     </>
   );
 }

src/routes/setting/UpdatePasswordModal.js

@@ -0,0 +1,119 @@
+// import React from "react";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+import Input from "../../common/component/styled/Input";
+import { useUpdatePasswordMutation } from "../../app/services/auth";
+import StyledModal from "../../common/component/styled/Modal";
+import Button from "../../common/component/styled/Button";
+const StyledEdit = styled(StyledModal)`
+  .input {
+    margin: 16px 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    label {
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+      color: #6b7280;
+    }
+  }
+`;
+import Modal from "../../common/component/Modal";
+import toast from "react-hot-toast";
+export default function ProfileBasicEditModal({ closeModal }) {
+  const [input, setInput] = useState({
+    current: "",
+    newPassword: "",
+    confirmPassword: "",
+  });
+  // const dispatch = useDispatch();
+  const [
+    updatePassword,
+    { isLoading, isSuccess },
+  ] = useUpdatePasswordMutation();
+  const handleChange = (evt) => {
+    const { type } = evt.target.dataset;
+    setInput((prev) => {
+      return { ...prev, [type]: evt.target.value };
+    });
+  };
+  const handleUpdate = () => {
+    console.log("pwd", input);
+    const { current, newPassword } = input;
+    updatePassword({ old_password: current, new_password: newPassword });
+    // update({ [valueKey]: input });
+  };
+  const handleCompare = () => {
+    const { newPassword, confirmPassword } = input;
+    if (newPassword !== confirmPassword) {
+      toast.error("Not same with new password");
+    }
+  };
+  useEffect(() => {
+    if (isSuccess) {
+      // todo
+      toast.success("update password successfully");
+      closeModal();
+    }
+  }, [isSuccess]);
+  const { current, newPassword, confirmPassword } = input;
+  const disableBtn =
+    !current ||
+    !newPassword ||
+    !confirmPassword ||
+    newPassword !== confirmPassword ||
+    isLoading;
+  return (
+    <Modal id="modal-modal">
+      <StyledEdit
+        title={"Change your password"}
+        description={"Enter current password and new password."}
+        buttons={
+          <>
+            <Button className="cancel" onClick={closeModal}>
+              Cancel
+            </Button>
+            <Button disabled={disableBtn} onClick={handleUpdate}>
+              {isLoading ? "Updating" : `Update`}
+            </Button>
+          </>
+        }
+      >
+        <div className="input">
+          <label htmlFor={"current"}>Current Password</label>
+          <Input
+            type="password"
+            id="current"
+            name="current"
+            value={current}
+            data-type="current"
+            onChange={handleChange}
+          ></Input>
+        </div>
+        <div className="input">
+          <label htmlFor={"newPassword"}>New Password</label>
+          <Input
+            type="password"
+            name={"newPassword"}
+            value={newPassword}
+            data-type="newPassword"
+            onChange={handleChange}
+          ></Input>
+        </div>
+        <div className="input">
+          <label htmlFor={"confirmPassword"}>Confirm New Password</label>
+          <Input
+            onBlur={handleCompare}
+            type="password"
+            name={"confirmPassword"}
+            value={confirmPassword}
+            data-type="confirmPassword"
+            onChange={handleChange}
+          ></Input>
+        </div>
+      </StyledEdit>
+    </Modal>
+  );
+}