Add bio field to user (#3346)

* add bio to users table

* lint

* add bio field to edit user admin page

* fix bio saving on new user

* simplify updating localstorage user

* linting

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { X } from "@phosphor-icons/react";
 import Admin from "@/models/admin";
 import { MessageLimitInput, RoleHintDisplay } from "../..";
+import { AUTH_USER } from "@/utils/constants";
 
 export default function EditUserModal({ currentUser, user, closeModal }) {
   const [role, setRole] = useState(user.role);
@@ -27,7 +28,17 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
     }
 
     const { success, error } = await Admin.updateUser(user.id, data);
-    if (success) window.location.reload();
+    if (success) {
+      // Update local storage if we're editing our own user
+      if (currentUser && currentUser.id === user.id) {
+        currentUser.username = data.username;
+        currentUser.bio = data.bio;
+        currentUser.role = data.role;
+        localStorage.setItem(AUTH_USER, JSON.stringify(currentUser));
+      }
+
+      window.location.reload();
+    }
     setError(error);
   };
 
@@ -92,6 +103,22 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
                   Password must be at least 8 characters long
                 </p>
               </div>
+              <div>
+                <label
+                  htmlFor="bio"
+                  className="block mb-2 text-sm font-medium text-white"
+                >
+                  Bio
+                </label>
+                <textarea
+                  name="bio"
+                  className="border-none bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                  placeholder="User's bio"
+                  defaultValue={user.bio}
+                  autoComplete="off"
+                  rows={3}
+                />
+              </div>
               <div>
                 <label
                   htmlFor="role"