2 files changed, 61 insertions, 47 deletions

diff --git a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
index 58bbac5f..5606ce94 100644
--- a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
@@ -1,6 +1,5 @@
 import { getHttpUserClient } from "@/http/user";
-import { useUser } from "@/services/user";
-import * as React from "react";
+import { useUserLoggedIn } from "@/services/user";
 
 import OperationDialog from "@/views/common/dialog/OperationDialog";
 
@@ -9,26 +8,28 @@ export interface ChangeNicknameDialogProps {
   close: () => void;
 }
 
-const ChangeNicknameDialog: React.FC<ChangeNicknameDialogProps> = (props) => {
-  const user = useUser();
+export default function ChangeNicknameDialog(props: ChangeNicknameDialogProps) {
+  const { open, close } = props;
 
-  if (user == null) return null;
+  const user = useUserLoggedIn();
 
   return (
     <OperationDialog
-      open={props.open}
+      open={open}
       title="settings.dialogChangeNickname.title"
-      inputScheme={[
-        { type: "text", label: "settings.dialogChangeNickname.inputLabel" },
+      inputs={[
+        {
+          key: "newNickname",
+          type: "text",
+          label: "settings.dialogChangeNickname.inputLabel",
+        },
       ]}
-      onProcess={([newNickname]) => {
+      onProcess={({ newNickname }) => {
         return getHttpUserClient().patch(user.username, {
-          nickname: newNickname,
+          nickname: newNickname as string,
         });
       }}
-      close={props.close}
+      close={close}
     />
   );
-};
-
-export default ChangeNicknameDialog;
+}
diff --git a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
index 9ca95168..407f3051 100644
--- a/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
+++ b/FrontEnd/src/pages/setting/ChangePasswordDialog.tsx
@@ -3,7 +3,9 @@ import { useNavigate } from "react-router-dom";
 
 import { userService } from "@/services/user";
 
-import OperationDialog from "@/views/common/dialog/OperationDialog";
+import OperationDialog, {
+  InputErrorDict,
+} from "@/views/common/dialog/OperationDialog";
 
 interface ChangePasswordDialogProps {
   open: boolean;
@@ -20,45 +22,56 @@ export function ChangePasswordDialog(props: ChangePasswordDialogProps) {
   return (
     <OperationDialog
       open={open}
+      close={close}
       title="settings.dialogChangePassword.title"
       color="danger"
       inputPrompt="settings.dialogChangePassword.prompt"
-      inputScheme={[
-        {
-          type: "text",
-          label: "settings.dialogChangePassword.inputOldPassword",
-          password: true,
+      inputs={{
+        inputs: [
+          {
+            key: "oldPassword",
+            type: "text",
+            label: "settings.dialogChangePassword.inputOldPassword",
+            password: true,
+          },
+          {
+            key: "newPassword",
+            type: "text",
+            label: "settings.dialogChangePassword.inputNewPassword",
+            password: true,
+          },
+          {
+            key: "retypedNewPassword",
+            type: "text",
+            label: "settings.dialogChangePassword.inputRetypeNewPassword",
+            password: true,
+          },
+        ],
+        validator: ({ oldPassword, newPassword, retypedNewPassword }) => {
+          const result: InputErrorDict = {};
+          if (oldPassword === "") {
+            result["oldPassword"] =
+              "settings.dialogChangePassword.errorEmptyOldPassword";
+          }
+          if (newPassword === "") {
+            result["newPassword"] =
+              "settings.dialogChangePassword.errorEmptyNewPassword";
+          }
+          if (retypedNewPassword !== newPassword) {
+            result["retypedNewPassword"] =
+              "settings.dialogChangePassword.errorRetypeNotMatch";
+          }
+          return result;
         },
-        {
-          type: "text",
-          label: "settings.dialogChangePassword.inputNewPassword",
-          password: true,
-        },
-        {
-          type: "text",
-          label: "settings.dialogChangePassword.inputRetypeNewPassword",
-          password: true,
-        },
-      ]}
-      inputValidator={([oldPassword, newPassword, retypedNewPassword]) => {
-        const result: Record<number, string> = {};
-        if (oldPassword === "") {
-          result[0] = "settings.dialogChangePassword.errorEmptyOldPassword";
-        }
-        if (newPassword === "") {
-          result[1] = "settings.dialogChangePassword.errorEmptyNewPassword";
-        }
-        if (retypedNewPassword !== newPassword) {
-          result[2] = "settings.dialogChangePassword.errorRetypeNotMatch";
-        }
-        return result;
       }}
-      onProcess={async ([oldPassword, newPassword]) => {
-        await userService.changePassword(oldPassword, newPassword);
+      onProcess={async ({ oldPassword, newPassword }) => {
+        await userService.changePassword(
+          oldPassword as string,
+          newPassword as string,
+        );
         setRedirect(true);
       }}
-      close={() => {
-        props.close();
+      onSuccessAndClose={() => {
         if (redirect) {
           navigate("/login");
         }