From a96f0652a000b633b1c4ba20c792951dc7c6196a Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Sun, 13 Oct 2024 22:52:25 +0800
Subject: [PATCH] feat: update pwd

---
 package.json                                  |  2 +-
 public/locales/en/common.json                 |  3 +-
 public/locales/zh/common.json                 |  3 +-
 src/components/ManageMembers/MemberList.tsx   | 12 ++++-
 .../ManageMembers/UpdatePassword.tsx          | 49 +++++++++++++++++++
 src/hooks/useUserOperation.ts                 | 10 +++-
 src/routes/setting/Overview/index.tsx         |  2 +-
 7 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ManageMembers/UpdatePassword.tsx

diff --git a/package.json b/package.json
index 03301951..70a3ab0a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vocechat-web",
-  "version": "0.7.44",
+  "version": "0.7.46",
   "homepage": "https://voce.chat",
   "dependencies": {
     "@metamask/onboarding": "^1.0.1",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 779fa631..3f23b3e6 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -50,7 +50,8 @@
     "install": "Install",
     "download_origin": "Download original",
     "close": "Close",
-    "view_pwd": "View Password"
+    "view_pwd": "View Password",
+    "change_pwd": "Update Password"
   },
   "status": {
     "uploading": "Uploading"
diff --git a/public/locales/zh/common.json b/public/locales/zh/common.json
index ed8ff4a2..e8fc6bee 100644
--- a/public/locales/zh/common.json
+++ b/public/locales/zh/common.json
@@ -50,7 +50,8 @@
     "install": "安装",
     "download_origin": "下载原图",
     "close": "关闭",
-    "view_pwd": "查看密码"
+    "view_pwd": "查看密码",
+    "change_pwd": "修改密码"
   },
   "status": {
     "uploading": "上传中"
diff --git a/src/components/ManageMembers/MemberList.tsx b/src/components/ManageMembers/MemberList.tsx
index 4bbdf026..2a47f657 100644
--- a/src/components/ManageMembers/MemberList.tsx
+++ b/src/components/ManageMembers/MemberList.tsx
@@ -16,7 +16,8 @@ import IconMore from "@/assets/icons/more.svg";
 import IconOwner from "@/assets/icons/owner.svg";
 import User from "../User";
 import { shallowEqual } from "react-redux";
-import ViewPassword from "./ViewPassword";
+// import ViewPassword from "./ViewPassword";
+import UpdatePassword from "./UpdatePassword";
 
 interface Props {
   cid?: number;
@@ -32,6 +33,7 @@ const MemberList: FC<Props> = ({ cid }) => {
   const { uids, input, updateInput } = useFilteredUsers();
   const {
     // canViewPassword,
+    canUpdatePassword,
     copyEmail,
     canCopyEmail,
     removeFromChannel,
@@ -168,6 +170,11 @@ const MemberList: FC<Props> = ({ cid }) => {
                               {ct("action.view_pwd")}
                             </li>
                           )} */}
+                          {canUpdatePassword && (
+                            <li className="item danger" onClick={setCurrentUid.bind(null, uid)}>
+                              {ct("action.change_pwd")}
+                            </li>
+                          )}
                           {canRemove && (
                             <li className="item danger" onClick={removeUser.bind(null, uid)}>
                               {ct("action.remove")}
@@ -187,7 +194,8 @@ const MemberList: FC<Props> = ({ cid }) => {
           }}
         </ViewportList>
       </ul>
-      <ViewPassword uid={currentUid} onClose={setCurrentUid.bind(null, undefined)} />
+      {/* <ViewPassword uid={currentUid} onClose={setCurrentUid.bind(null, undefined)} /> */}
+      <UpdatePassword uid={currentUid} onClose={setCurrentUid.bind(null, undefined)} />
     </>
   );
 };
diff --git a/src/components/ManageMembers/UpdatePassword.tsx b/src/components/ManageMembers/UpdatePassword.tsx
new file mode 100644
index 00000000..ac245d12
--- /dev/null
+++ b/src/components/ManageMembers/UpdatePassword.tsx
@@ -0,0 +1,49 @@
+// import React from "react";
+import Modal from "../Modal";
+import Input from "../styled/Input";
+import StyledButton from "../styled/Button";
+import useUserOperation from "@/hooks/useUserOperation";
+import { ChangeEvent, useState } from "react";
+import toast from "react-hot-toast";
+
+type Props = {
+  uid?: number;
+  onClose: () => void;
+};
+
+const UpdatePassword = ({ uid, onClose }: Props) => {
+  const [pwd, setPwd] = useState("");
+  const { updatePassword } = useUserOperation({ uid });
+  const handleUpdate = () => {
+    if (pwd.length < 6) {
+      toast.error("Min length is 6");
+      return;
+    }
+    updatePassword(pwd);
+    setPwd("");
+  };
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    setPwd(evt.target.value);
+  };
+  if (!uid) return null;
+  return (
+    <Modal>
+      <div className="flex flex-col gap-3 py-4 px-6 rounded-md bg-slate-100 dark:bg-slate-900 relative">
+        <label htmlFor="pwd" className="dark:text-slate-200">
+          Password:
+        </label>
+        <Input id="pwd" value={pwd} onChange={handleChange} placeholder="Input New Password" />
+        <div className="flex items-center gap-2">
+          <StyledButton disabled={!pwd} className="small" onClick={handleUpdate}>
+            Update
+          </StyledButton>
+          <StyledButton className="small cancel" onClick={onClose}>
+            Close
+          </StyledButton>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default UpdatePassword;
diff --git a/src/hooks/useUserOperation.ts b/src/hooks/useUserOperation.ts
index 79d46bea..921fe44b 100644
--- a/src/hooks/useUserOperation.ts
+++ b/src/hooks/useUserOperation.ts
@@ -118,6 +118,11 @@ const useUserOperation = ({ uid, cid }: IProps) => {
       updateUser({ id: uid, is_admin: !user?.is_admin });
     }
   };
+  const updatePassword = (password: string) => {
+    if (uid) {
+      updateUser({ id: uid, password });
+    }
+  };
   const removeFromContact = () => {
     if (uid) {
       updateContactStatus({ target_uid: uid, action: "remove" });
@@ -145,11 +150,13 @@ const useUserOperation = ({ uid, cid }: IProps) => {
   const canRemoveFromContact: boolean = loginUid != uid;
   const canInviteChannel = !!cid && (loginUser?.is_admin || channel?.owner == loginUser?.uid);
   const canViewPassword: boolean = !!loginUser?.is_admin && isPro;
+  const canUpdatePassword: boolean = !!loginUser?.is_admin && loginUid != uid && uid !== 1;
   return {
     showEmailInChannel: show_email,
     isChannelOwner: loginUser?.uid == channel?.owner || (channel?.is_public && loginUserIsAdmin),
     isAdmin: !!user?.is_admin,
     updateRole,
+    updatePassword,
     canUpdateRole: loginUserIsAdmin && loginUid != uid && uid != 1,
     removeFromContact,
     canBlock,
@@ -168,7 +175,8 @@ const useUserOperation = ({ uid, cid }: IProps) => {
     copyEmail,
     canDM: dm_to_member,
     startCall,
-    canViewPassword
+    canViewPassword,
+    canUpdatePassword
   };
 };
 export default useUserOperation;
diff --git a/src/routes/setting/Overview/index.tsx b/src/routes/setting/Overview/index.tsx
index 8ab2a1f3..9f700e75 100644
--- a/src/routes/setting/Overview/index.tsx
+++ b/src/routes/setting/Overview/index.tsx
@@ -59,7 +59,6 @@ export default function Overview() {
           {/* 只有 admin 能创建群组 */}
 
           <EnableURLPreviewInMsg />
-          <OnlyAdminCreateGroup />
           <OnlyAdminCanSeeChannelMembers />
           {/* 访客模式 */}
           <SettingBlock title={t("overview.guest_mode.title")} desc={t("overview.guest_mode.desc")}>
@@ -86,6 +85,7 @@ export default function Overview() {
       <DarkMode />
       {/* 新消息声音 */}
       <MessageSound />
+      <OnlyAdminCreateGroup />
     </div>
   );
 }