Add bio management feature with UI and backend support

frontend/src/i18n.ts

@@ -148,6 +148,7 @@ export const i18nData = {
       "Create Tag": "Create Tag",
       "Search Tags": "Search Tags",
       "Edit Resource": "Edit Resource",
+      "Change Bio": "Change Bio",
     }
   },
   "zh-CN": {
@@ -299,6 +300,7 @@ export const i18nData = {
       "Create Tag": "创建标签",
       "Search Tags": "搜索标签",
       "Edit Resource": "编辑资源",
+      "Change Bio": "更改个人简介",
     }
   },
   "zh-TW": {
@@ -450,6 +452,7 @@ export const i18nData = {
       "Create Tag": "創建標籤",
       "Search Tags": "搜尋標籤",
       "Edit Resource": "編輯資源",
+      "Change Bio": "更改個人簡介",
     }
   }
 }

frontend/src/network/models.ts

@@ -7,6 +7,7 @@ export interface User {
   can_upload: boolean;
   uploads_count: number;
   comments_count: number;
+  bio: string;
 }
 
 export interface UserWithToken extends User {

frontend/src/network/network.ts

@@ -172,6 +172,21 @@ class Network {
     }
   }
 
+  async changeBio(bio: string): Promise<Response<User>> {
+    try {
+      const response = await axios.postForm(`${this.apiBaseUrl}/user/bio`, {
+        bio
+      })
+      return response.data
+    } catch (e: any) {
+      console.error(e)
+      return {
+        success: false,
+        message: e.toString(),
+      }
+    }
+  }
+
   getUserAvatar(user: User): string {
     return this.baseUrl + user.avatar_path
   }

frontend/src/pages/manage_me_page.tsx

@@ -7,6 +7,7 @@ import { MdOutlineAccountCircle, MdLockOutline, MdOutlineEditNote } from "react-
 import Button from "../components/button";
 import showToast from "../components/toast";
 import { useNavigator } from "../components/navigator";
+import Input from "../components/input.tsx";
 
 export function ManageMePage() {
   const { t } = useTranslation();
@@ -19,6 +20,7 @@ export function ManageMePage() {
     <ChangeAvatarDialog />
     <ChangeUsernameDialog />
     <ChangePasswordDialog />
+    <ChangeBioDialog />
   </div>;
 }
 
@@ -92,7 +94,7 @@ function ChangeAvatarDialog() {
         <div className="h-48 flex items-center justify-center">
           <div className="avatar">
             <div className="w-28 rounded-full cursor-pointer" onClick={selectAvatar}>
-              <img src={avatar ? URL.createObjectURL(avatar) : network.getUserAvatar(app.user!)} />
+              <img src={avatar ? URL.createObjectURL(avatar) : network.getUserAvatar(app.user!)} alt={"avatar"} />
             </div>
           </div>
         </div>
@@ -299,4 +301,69 @@ function ChangePasswordDialog() {
       </div>
     </dialog>
   </>;
+}
+
+function ChangeBioDialog() {
+  const [bio, setBio] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const { t } = useTranslation();
+
+  const handleSubmit = async () => {
+    if (!bio.trim()) {
+      setError(t("Bio cannot be empty"));
+      return;
+    } else if (bio.length > 200) {
+      setError(t("Bio cannot be longer than 200 characters"));
+      return;
+    }
+    setIsLoading(true);
+    const res = await network.changeBio(bio);
+    setIsLoading(false);
+    if (!res.success) {
+      setError(res.message);
+    } else {
+      app.user = res.data!;
+      showToast({
+        message: t("Bio changed successfully"),
+        type: "success",
+      });
+      const dialog = document.getElementById("change_bio_dialog") as HTMLDialogElement;
+      if (dialog) {
+        dialog.close();
+      }
+      setBio("");
+      setError(null);
+    }
+  };
+
+  return <>
+    <ListTile icon={<MdOutlineEditNote />} title={t("Change Bio")} onClick={() => {
+      const dialog = document.getElementById("change_bio_dialog") as HTMLDialogElement;
+      if (dialog) {
+        dialog.showModal();
+      }
+    }} />
+    <dialog id="change_bio_dialog" className="modal">
+      <div className="modal-box">
+        <h3 className="font-bold text-lg">{t("Change Bio")}</h3>
+        <Input value={bio} onChange={(e) => setBio(e.target.value)} label={"bio"} />
+        {error && <ErrorAlert message={error} className={"mt-4"} />}
+        <div className="modal-action">
+          <form method="dialog">
+            <Button>{t("Close")}</Button>
+          </form>
+          <Button
+            className="btn-primary"
+            onClick={handleSubmit}
+            isLoading={isLoading}
+            disabled={!bio.trim()}
+          >
+            {t("Save")}
+          </Button>
+        </div>
+      </div>
+    </dialog>
+  </>;
 }

frontend/src/pages/user_page.tsx

@@ -63,13 +63,16 @@ function UserCard({ user }: { user: User }) {
     <div>
       <h1 className="text-2xl font-bold">{user.username}</h1>
       <div className="h-4"></div>
-      <p>
-        <span className="text-sm font-bold mr-1"> {user.uploads_count}</span>
-        <span className="text-sm">Resources</span>
-        <span className="mx-2"></span>
-        <span className="text-sm font-bold mr-1"> {user.comments_count}</span>
-        <span className="text-base-content text-sm">Comments</span>
-      </p>
+      {user.bio.trim() !== ""
+        ? <p className="text-sm text-base-content/80">{user.bio.trim()}</p>
+        : <p>
+          <span className="text-sm font-bold mr-1"> {user.uploads_count}</span>
+          <span className="text-sm">Resources</span>
+          <span className="mx-2"></span>
+          <span className="text-sm font-bold mr-1"> {user.comments_count}</span>
+          <span className="text-base-content text-sm">Comments</span>
+        </p>
+      }
     </div>
   </div>
 }