1 files changed, 26 insertions, 0 deletions
diff --git a/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
new file mode 100644
index 00000000..912f554f
--- /dev/null
+++ b/FrontEnd/src/pages/setting/ChangeNicknameDialog.tsx
@@ -0,0 +1,26 @@
+import { getHttpUserClient } from "~src/http/user";
+import { useUserLoggedIn } from "~src/services/user";
+
+import { OperationDialog } from "~src/components/dialog";
+
+export default function ChangeNicknameDialog() {
+  const user = useUserLoggedIn();
+
+  return (
+    <OperationDialog
+      title="settings.dialogChangeNickname.title"
+      inputs={[
+        {
+          key: "newNickname",
+          type: "text",
+          label: "settings.dialogChangeNickname.inputLabel",
+        },
+      ]}
+      onProcess={({ newNickname }) => {
+        return getHttpUserClient().patch(user.username, {
+          nickname: newNickname,
+        });
+      }}
+    />
+  );
+}