feat: member management enhancement (#617)

* feat: member management enhancement

* update

* update

* update

* update

web/src/components/ChangeMemberPasswordDialog.tsx

+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { validate, ValidatorConfig } from "../helpers/validator";
+import { userService } from "../services";
+import Icon from "./Icon";
+import { generateDialog } from "./Dialog";
+import toastHelper from "./Toast";
+
+const validateConfig: ValidatorConfig = {
+  minLength: 4,
+  maxLength: 320,
+  noSpace: true,
+  noChinese: true,
+};
+
+interface Props extends DialogProps {
+  user: User;
+}
+
+const ChangeMemberPasswordDialog: React.FC<Props> = (props: Props) => {
+  const { user: propsUser, destroy } = props;
+  const { t } = useTranslation();
+  const [newPassword, setNewPassword] = useState("");
+  const [newPasswordAgain, setNewPasswordAgain] = useState("");
+
+  useEffect(() => {
+    // do nth
+  }, []);
+
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  const handleNewPasswordChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setNewPassword(text);
+  };
+
+  const handleNewPasswordAgainChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setNewPasswordAgain(text);
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (newPassword === "" || newPasswordAgain === "") {
+      toastHelper.error(t("message.fill-all"));
+      return;
+    }
+
+    if (newPassword !== newPasswordAgain) {
+      toastHelper.error(t("message.new-password-not-match"));
+      setNewPasswordAgain("");
+      return;
+    }
+
+    const passwordValidResult = validate(newPassword, validateConfig);
+    if (!passwordValidResult.result) {
+      toastHelper.error(`${t("common.password")} ${passwordValidResult.reason}`);
+      return;
+    }
+
+    try {
+      await userService.patchUser({
+        id: propsUser.id,
+        password: newPassword,
+      });
+      toastHelper.info(t("message.password-changed"));
+      handleCloseBtnClick();
+    } catch (error: any) {
+      console.error(error);
+      toastHelper.error(error.response.data.message);
+    }
+  };
+
+  return (
+    <>
+      <div className="dialog-header-container !w-64">
+        <p className="title-text">
+          {t("setting.account-section.change-password")} ({propsUser.username})
+        </p>
+        <button className="btn close-btn" onClick={handleCloseBtnClick}>
+          <Icon.X />
+        </button>
+      </div>
+      <div className="dialog-content-container">
+        <p className="text-sm mb-1">{t("common.new-password")}</p>
+        <input
+          type="password"
+          className="input-text"
+          placeholder={t("common.repeat-new-password")}
+          value={newPassword}
+          onChange={handleNewPasswordChanged}
+        />
+        <p className="text-sm mb-1 mt-2">{t("common.repeat-new-password")}</p>
+        <input
+          type="password"
+          className="input-text"
+          placeholder={t("common.repeat-new-password")}
+          value={newPasswordAgain}
+          onChange={handleNewPasswordAgainChanged}
+        />
+        <div className="mt-4 w-full flex flex-row justify-end items-center space-x-2">
+          <span className="btn-text" onClick={handleCloseBtnClick}>
+            {t("common.cancel")}
+          </span>
+          <span className="btn-primary" onClick={handleSaveBtnClick}>
+            {t("common.save")}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function showChangeMemberPasswordDialog(user: User) {
+  generateDialog(
+    {
+      className: "change-member-password-dialog",
+    },
+    ChangeMemberPasswordDialog,
+    { user }
+  );
+}
+
+export default showChangeMemberPasswordDialog;

web/src/components/Settings/MemberSection.tsx

@@ -4,8 +4,10 @@ import { userService } from "../../services";
 import { useAppSelector } from "../../store";
 import * as api from "../../helpers/api";
 import toastHelper from "../Toast";
+import Icon from "../Icon";
 import Dropdown from "../common/Dropdown";
 import { showCommonDialog } from "../Dialog/CommonDialog";
+import showChangeMemberPasswordDialog from "../ChangeMemberPasswordDialog";
 import "../../less/settings/member-section.less";
 
 interface State {
@@ -22,8 +24,13 @@ const PreferencesSection = () => {
     createUserPassword: "",
     repeatUserPassword: "",
   });
+  const [userNameQueryText, setUserNameQueryText] = useState("");
   const [userList, setUserList] = useState<User[]>([]);
 
+  const showUserList = userList.filter((user: User) => {
+    return user.username.toLowerCase().includes(userNameQueryText.toLowerCase());
+  });
+
   useEffect(() => {
     fetchUserList();
   }, []);
@@ -83,6 +90,15 @@ const PreferencesSection = () => {
     });
   };
 
+  const handleUserNameQueryInput = (event: React.FormEvent<HTMLInputElement>) => {
+    const text = event.currentTarget.value;
+    setUserNameQueryText(text);
+  };
+
+  const handleChangePasswordClick = (user: User) => {
+    showChangeMemberPasswordDialog(user);
+  };
+
   const handleArchiveUserClick = (user: User) => {
     showCommonDialog({
       title: `Archive Member`,
@@ -145,13 +161,29 @@ const PreferencesSection = () => {
           <button onClick={handleCreateUserBtnClick}>{t("common.create")}</button>
         </div>
       </div>
-      <p className="title-text">{t("setting.member-list")}</p>
+      <div className="section-header-container">
+        <div className="title-text">{t("setting.member-list")}</div>
+        <div className="search-bar">
+          <div className="search-bar-container">
+            <div className="search-bar-inputer">
+              <Icon.Search className="icon-img" />
+              <input
+                className="text-input"
+                type="text"
+                placeholder={t("common.username")}
+                value={userNameQueryText}
+                onChange={handleUserNameQueryInput}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
       <div className="member-container field-container">
         <span className="field-text">ID</span>
         <span className="field-text username-field">{t("common.username")}</span>
         <span></span>
       </div>
-      {userList.map((user) => (
+      {showUserList.map((user) => (
         <div key={user.id} className={`member-container ${user.rowStatus === "ARCHIVED" ? "archived" : ""}`}>
           <span className="field-text id-text">{user.id}</span>
           <span className="field-text username-text">{user.username}</span>
@@ -163,6 +195,12 @@ const PreferencesSection = () => {
                 actionsClassName="!w-24"
                 actions={
                   <>
+                    <button
+                      className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"
+                      onClick={() => handleChangePasswordClick(user)}
+                    >
+                      {t("setting.account-section.change-password")}
+                    </button>
                     {user.rowStatus === "NORMAL" ? (
                       <button
                         className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100"

web/src/less/common-dialog.less

@@ -9,7 +9,7 @@
         @apply flex flex-row justify-end items-center w-full mt-4;
 
         > .btn {
-          @apply text-sm py-1 px-3 mr-2 rounded-md hover:opacity-80;
+          @apply text-sm py-1 px-3 mr-2 rounded-md hover:opacity-80 cursor-pointer;
 
           &.confirm-btn {
             @apply bg-red-100 border border-solid border-blue-600 text-blue-600;

web/src/less/setting-dialog.less

@@ -41,7 +41,19 @@
         > .section-container {
           @apply flex flex-col justify-start items-start w-full my-2;
 
-          > .title-text {
+          > .section-header-container{
+            @apply flex bg-white;
+
+            > .text-text {
+              @apply w-20;
+            }
+
+            > .search-bar{
+              @apply w-48;
+            }
+          }
+
+          .title-text {
             @apply text-sm mt-4 first:mt-2 mb-3 font-mono text-gray-500;
           }