Add: set user acitve

web/src/App.js

@@ -6,6 +6,7 @@ import SearchFiles from "./component/SearchFiles";
 import SearchFolders from "./component/SearchFolders";
 import FilesInFolder from "./component/FilesInFolder";
 import Manage from "./component/Manage";
+import ManageUser from "./component/ManageUser";
 import FileInfo from "./component/FileInfo";
 import Share from "./component/Share";
 import Login from "./component/Login";
@@ -89,6 +90,10 @@ function App() {
               path="/manage/reviews/:id"
               element={<EditReview user={user} />}
             />
+            <Route
+              path="/manage/users"
+              element={<ManageUser user={user} setUser={setUser} />}
+            />
             <Route
               path="/manage/users/:id"
               element={<UserProfile user={user} setUser={setUser} />}

web/src/component/Manage.js

@@ -36,6 +36,7 @@ function Manage(props) {
       )}
       <hr />
       <button onClick={() => navigate("/manage/tags")}>Tags</button>
+      <button onClick={() => navigate("/manage/users")}>Users</button>
       <Database />
     </div>
   );

web/src/component/ManageUser.js

@@ -0,0 +1,78 @@
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+
+function ManageUser() {
+  const [users, setUsers] = useState([]);
+  const roleDict = {
+    0: "Anonymous",
+    1: "Admin",
+    2: "Normal User",
+  };
+
+  function getUsers() {
+    fetch("/api/v1/get_users")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.error) {
+          alert(data.error);
+        } else {
+          setUsers(data.users);
+        }
+      });
+  }
+
+  useEffect(() => {
+    getUsers();
+  }, []);
+
+  return (
+    <div className="page">
+      <h3>Manage User</h3>
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Role</th>
+            <th>Active</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map((user) => (
+            <tr key={user.id}>
+              <td>
+                <Link to={`/manage/users/${user.id}`}>@{user.username}</Link>
+              </td>
+              <td>{roleDict[user.role]}</td>
+              <td>
+                <input
+                  type="checkbox"
+                  defaultChecked={user.active}
+                  onClick={(e) => {
+                    fetch("/api/v1/update_user_active", {
+                      method: "POST",
+                      headers: {
+                        "Content-Type": "application/json",
+                      },
+                      body: JSON.stringify({
+                        id: user.id,
+                        active: e.target.checked,
+                      }),
+                    }).then((res) => res.json()).then((data) => {
+                      if (data.error) {
+                        alert(data.error);
+                      } else {
+                        getUsers();
+                      }
+                    });
+                  }}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default ManageUser;

web/src/component/ReviewEntry.js

@@ -14,7 +14,7 @@ function ReviewEntry(props) {
       </h4>
       <p>{props.review.content}</p>
       {(props.user.role === 1 || props.review.user.id === props.user.id) &&
-        props.user.role != 0 && (
+        props.user.role !== 0 && (
           <button
             onClick={() => {
               navigate(`/manage/reviews/${props.review.id}`);