feat: add workspace setting section

web/src/components/Header.tsx

@@ -32,10 +32,10 @@ const Header: React.FC = () => {
             actions={
               <>
                 <Link
-                  to="/account"
+                  to="/setting"
                   className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
                 >
-                  <Icon.User className="w-4 h-auto mr-2" /> My Account
+                  <Icon.Settings className="w-4 h-auto mr-2" /> Setting
                 </Link>
                 <button
                   className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"

web/src/components/setting/AccountSection.tsx

@@ -0,0 +1,38 @@
+import { Button } from "@mui/joy";
+import { useState } from "react";
+import { useAppSelector } from "../../stores";
+import ChangePasswordDialog from "../ChangePasswordDialog";
+import EditUserinfoDialog from "../EditUserinfoDialog";
+
+const AccountSection: React.FC = () => {
+  const user = useAppSelector((state) => state.user).user as User;
+  const [showEditUserinfoDialog, setShowEditUserinfoDialog] = useState<boolean>(false);
+  const [showChangePasswordDialog, setShowChangePasswordDialog] = useState<boolean>(false);
+
+  return (
+    <>
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+        <p className="text-gray-400">Account</p>
+        <p className="text-3xl my-2">{user.nickname}</p>
+        <p className="leading-8 flex flex-row justify-start items-center">
+          <span className="mr-3 text-gray-500 font-mono">Email: </span>
+          {user.email}
+        </p>
+        <div className="flex flex-row justify-start items-center gap-2">
+          <Button variant="outlined" color="neutral" onClick={() => setShowEditUserinfoDialog(true)}>
+            Edit
+          </Button>
+          <Button variant="outlined" color="neutral" onClick={() => setShowChangePasswordDialog(true)}>
+            Change password
+          </Button>
+        </div>
+      </div>
+
+      {showEditUserinfoDialog && <EditUserinfoDialog onClose={() => setShowEditUserinfoDialog(false)} />}
+
+      {showChangePasswordDialog && <ChangePasswordDialog onClose={() => setShowChangePasswordDialog(false)} />}
+    </>
+  );
+};
+
+export default AccountSection;

web/src/components/setting/WorkspaceSection.tsx

@@ -0,0 +1,32 @@
+import { Switch } from "@mui/joy";
+import { useEffect, useState } from "react";
+import { getSystemStatus, upsertWorkspaceSetting } from "../../helpers/api";
+
+const WorkspaceSection: React.FC = () => {
+  const [disallowSignUp, setDisallowSignUp] = useState<boolean>(false);
+
+  useEffect(() => {
+    getSystemStatus().then(({ data }) => {
+      setDisallowSignUp(data.disallowSignUp);
+    });
+  }, []);
+
+  const handleDisallowSignUpChange = async (value: boolean) => {
+    await upsertWorkspaceSetting("disallow-signup", JSON.stringify(value));
+    setDisallowSignUp(value);
+  };
+
+  return (
+    <>
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+        <p className="text-gray-400">Workspace settings</p>
+        <div className="w-full flex flex-row justify-between items-center">
+          <span>Allow sign up</span>
+          <Switch checked={disallowSignUp} onChange={(event) => handleDisallowSignUpChange(event.target.checked)} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default WorkspaceSection;