From d074edbbf12896c726279e3c832b9e8729e598f5 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Mon, 23 Sep 2024 16:52:07 +0800
Subject: [PATCH 1/5] Add switch component to edit modal

---
 .../admin-edit-user-modal.tsx                 | 30 +++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/components/admin-user-management/admin-edit-user-modal.tsx b/frontend/components/admin-user-management/admin-edit-user-modal.tsx
index 19f1f1774b..f752b9e630 100644
--- a/frontend/components/admin-user-management/admin-edit-user-modal.tsx
+++ b/frontend/components/admin-user-management/admin-edit-user-modal.tsx
@@ -14,11 +14,12 @@ import { Label } from "../ui/label";
 import { updateUser } from "@/lib/update-user";
 import { useAuth } from "@/app/auth/auth-context";
 import { useToast } from "@/components/hooks/use-toast";
+import { Switch } from "../ui/switch";
 
 interface AdminEditUserModalProps extends React.HTMLProps<HTMLDivElement> {
   showModal?: boolean;
   setShowModal: (show: boolean) => void;
-  user: { id: string; username: string; email: string } | undefined;
+  user: { id: string; username: string; email: string, isAdmin: boolean } | undefined;
   onUserUpdate: () => void;
 }
 
@@ -32,6 +33,7 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
         id?: string;
         username?: string;
         email?: string;
+        isAdmin?: boolean;
       }
     | undefined
   >();
@@ -43,6 +45,15 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
 
+    updateUserInfo().then(() => updateUserPrivilege());
+
+    // Remove old states, update UI and close modal
+    setEditingUser(undefined);
+    props.onUserUpdate();
+    props.setShowModal(false);
+  };
+
+  const updateUserInfo = async () => {
     if (!auth?.token) {
       // Will not reach this point as button is disabled
       // when token is missing
@@ -127,11 +138,10 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
         });
         return;
     }
+  };
+
+  const updateUserPrivilege = async () => {
 
-    // Remove old states, update UI and close modal
-    setEditingUser(undefined);
-    props.onUserUpdate();
-    props.setShowModal(false);
   };
 
   return (
@@ -172,6 +182,16 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
                   required
                 />
               </div>
+              <div className="grid gap-2 mt-5">
+              <div className="flex items-center">
+                <Label htmlFor="email">Admin</Label>
+                </div>
+                <Switch
+                  checked={editingUser?.isAdmin}
+                  onCheckedChange={(e) => setEditingUser({ ...editingUser, isAdmin: e })}
+                  required
+                />
+              </div>
             </form>
             <DialogFooter>
               <Button

From 86cf8374fe6c2d4b989a6a8bc73f679187dc916d Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Mon, 23 Sep 2024 16:55:00 +0800
Subject: [PATCH 2/5] Add update-user-privilege.ts

---
 frontend/lib/update-user-privilege.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 frontend/lib/update-user-privilege.ts

diff --git a/frontend/lib/update-user-privilege.ts b/frontend/lib/update-user-privilege.ts
new file mode 100644
index 0000000000..7f973976f4
--- /dev/null
+++ b/frontend/lib/update-user-privilege.ts
@@ -0,0 +1,18 @@
+export const updateUserPrivilege = async (
+    jwtToken: string,
+    id: string,
+    isAdmin: boolean,
+  ) => {
+    const body = { isAdmin };
+  
+    const response = await fetch(`http://localhost:3001/users/${id}`, {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${jwtToken}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(body),
+    });
+    return response;
+  };
+  
\ No newline at end of file

From 34f23637f936fb247eeab29690e2bc78c90cb22c Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Mon, 23 Sep 2024 17:22:27 +0800
Subject: [PATCH 3/5] Fix user privilege request

---
 frontend/lib/update-user-privilege.ts | 2 +-
 user-service/README.md                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/lib/update-user-privilege.ts b/frontend/lib/update-user-privilege.ts
index 7f973976f4..54b02f6b74 100644
--- a/frontend/lib/update-user-privilege.ts
+++ b/frontend/lib/update-user-privilege.ts
@@ -5,7 +5,7 @@ export const updateUserPrivilege = async (
   ) => {
     const body = { isAdmin };
   
-    const response = await fetch(`http://localhost:3001/users/${id}`, {
+    const response = await fetch(`http://localhost:3001/users/${id}/privilege`, {
       method: "PATCH",
       headers: {
         Authorization: `Bearer ${jwtToken}`,
diff --git a/user-service/README.md b/user-service/README.md
index a655f7a9a2..0528d5ab91 100644
--- a/user-service/README.md
+++ b/user-service/README.md
@@ -171,7 +171,7 @@
 
 - HTTP Method: `PATCH`
 
-- Endpoint: http://localhost:3001/users/{userId}
+- Endpoint: http://localhost:3001/users/{userId}/privilege
 
 - Parameters
   - Required: `userId` path parameter

From e61e5ed5ad99e566b93a76b2d1a8a644db484aac Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Mon, 23 Sep 2024 17:48:03 +0800
Subject: [PATCH 4/5] Add user privilege update

---
 .../admin-edit-user-modal.tsx                 | 131 ++++++++++++++----
 frontend/lib/update-user-privilege.ts         |  33 +++--
 2 files changed, 117 insertions(+), 47 deletions(-)

diff --git a/frontend/components/admin-user-management/admin-edit-user-modal.tsx b/frontend/components/admin-user-management/admin-edit-user-modal.tsx
index 095e9c5049..ea06eaadec 100644
--- a/frontend/components/admin-user-management/admin-edit-user-modal.tsx
+++ b/frontend/components/admin-user-management/admin-edit-user-modal.tsx
@@ -15,11 +15,14 @@ import { updateUser } from "@/lib/update-user";
 import { useAuth } from "@/app/auth/auth-context";
 import { useToast } from "@/components/hooks/use-toast";
 import { Switch } from "../ui/switch";
+import { updateUserPrivilege } from "@/lib/update-user-privilege";
 
 interface AdminEditUserModalProps extends React.HTMLProps<HTMLDivElement> {
   showModal?: boolean;
   setShowModal: (show: boolean) => void;
-  user: { id: string; username: string; email: string, isAdmin: boolean } | undefined;
+  user:
+    | { id: string; username: string; email: string; isAdmin: boolean }
+    | undefined;
   onUserUpdate: () => void;
 }
 
@@ -50,16 +53,19 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
 
-    updateUserInfo()
-      .then(() => updateUserPrivilege())
+    updateInfo()
+      .then(() => updatePrivilege())
       .then(() => {
-        // Remove old states, update UI and close modal
-        props.onUserUpdate();
+        toast({
+          title: "Success",
+          description: "User updated successfully!",
+        });
         closeModal();
-      });
+      })
+      .catch(() => null);
   };
 
-  const updateUserInfo = async () => {
+  const updateInfo = async () => {
     if (!auth?.token) {
       // Will not reach this point as button is disabled
       // when token is missing
@@ -86,19 +92,10 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
       editingUser?.username,
       editingUser?.email
     );
-    if (!response.ok) {
-      toast({
-        title: "Unknown Error",
-        description: "An unexpected error has occurred",
-      });
-    }
     switch (response.status) {
       case 200:
-        toast({
-          title: "Success",
-          description: "User updated successfully!",
-        });
-        break;
+        props.onUserUpdate();
+        return;
       case 400:
         // In theory, they should never be able to send out a request
         // with missing fields due to disabled submission button
@@ -106,47 +103,118 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
           title: "Missing Fields",
           description: "Please fill in at least 1 field",
         });
-        return;
+        break;
       case 401:
         toast({
           title: "Access denied",
           description: "Invalid session",
         });
-        return;
+        break;
       case 403:
         toast({
           title: "Access denied",
           description: "Only admins can update other user",
         });
-        return;
+        break;
       case 404:
         toast({
           title: "User not found",
           description: "User with specified ID not found",
         });
-        return;
+        break;
       case 409:
         toast({
           title: "Duplicated Username or Email",
           description: "The username or email you entered is already in use",
         });
-        return;
+        break;
       case 500:
         toast({
           title: "Server Error",
           description: "The server encountered an error",
         });
-        return;
+        break;
       default:
         toast({
           title: "Unknown Error",
           description: "An unexpected error has occured",
         });
-        return;
+        break;
     }
+    throw new Error("Update user info request failed");
   };
 
-  const updateUserPrivilege = async () => {
+  const updatePrivilege = async () => {
+    if (!auth?.token) {
+      // Will not reach this point as button is disabled
+      // when token is missing
+      toast({
+        title: "Access denied",
+        description: "No authentication token found",
+      });
+      return;
+    }
+
+    if (!editingUser?.id) {
+      // Will not reach this point as button is disabled
+      // when editing user's id is missing
+      toast({
+        title: "Invalid selection",
+        description: "No user selected",
+      });
+      return;
+    }
+
+    if (editingUser?.isAdmin == null) {
+      // Will not reach this point as button is disabled
+      // when field is missing
+      toast({
+        title: "Invalid selection",
+        description: "No user selected",
+      });
+      return;
+    }
+
+    const response = await updateUserPrivilege(
+      auth.token,
+      editingUser?.id,
+      editingUser?.isAdmin
+    );
+
+    switch (response.status) {
+      case 200:
+        props.onUserUpdate();
+        return;
+      case 400:
+        // In theory, they should never be able to send out a request
+        // with missing fields due to disabled submission button
+        break;
+      case 401:
+        toast({
+          title: "Access denied",
+          description: "Invalid session",
+        });
+        break;
+      case 403:
+        toast({
+          title: "Access denied",
+          description: "Only admins can update other user",
+        });
+        break;
+      case 404:
+        toast({
+          title: "User not found",
+          description: "User with specified ID not found",
+        });
+        break;
+      default:
+        toast({
+          title: "Unknown Error",
+          description: "An unexpected error has occured",
+        });
+        break;
+    }
+    throw new Error("Update user privilege request failed");
   };
 
   return (
@@ -188,12 +256,14 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
                 />
               </div>
               <div className="grid gap-2 mt-5">
-              <div className="flex items-center">
-                <Label htmlFor="email">Admin</Label>
+                <div className="flex items-center">
+                  <Label htmlFor="email">Admin</Label>
                 </div>
                 <Switch
                   checked={editingUser?.isAdmin}
-                  onCheckedChange={(e) => setEditingUser({ ...editingUser, isAdmin: e })}
+                  onCheckedChange={(e) =>
+                    setEditingUser({ ...editingUser, isAdmin: e })
+                  }
                   required
                 />
               </div>
@@ -204,7 +274,8 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
                 disabled={
                   !auth?.token ||
                   !editingUser?.id ||
-                  (!editingUser?.email && !editingUser?.username)
+                  (!editingUser?.email && !editingUser?.username) ||
+                  editingUser?.isAdmin == null
                 }
               >
                 Save changes
diff --git a/frontend/lib/update-user-privilege.ts b/frontend/lib/update-user-privilege.ts
index 54b02f6b74..70b3221d3a 100644
--- a/frontend/lib/update-user-privilege.ts
+++ b/frontend/lib/update-user-privilege.ts
@@ -1,18 +1,17 @@
 export const updateUserPrivilege = async (
-    jwtToken: string,
-    id: string,
-    isAdmin: boolean,
-  ) => {
-    const body = { isAdmin };
-  
-    const response = await fetch(`http://localhost:3001/users/${id}/privilege`, {
-      method: "PATCH",
-      headers: {
-        Authorization: `Bearer ${jwtToken}`,
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    });
-    return response;
-  };
-  
\ No newline at end of file
+  jwtToken: string,
+  id: string,
+  isAdmin: boolean
+) => {
+  const body = { isAdmin };
+
+  const response = await fetch(`http://localhost:3001/users/${id}/privilege`, {
+    method: "PATCH",
+    headers: {
+      Authorization: `Bearer ${jwtToken}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+  });
+  return response;
+};

From e9b4ecc9d7245fc691a9180ca3ff5a27016f8278 Mon Sep 17 00:00:00 2001
From: jq1836 <95712150+jq1836@users.noreply.github.com>
Date: Thu, 26 Sep 2024 15:39:31 +0800
Subject: [PATCH 5/5] Make admin button more visible

---
 .../admin-user-management/admin-edit-user-modal.tsx           | 3 ++-
 frontend/components/ui/switch.tsx                             | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/components/admin-user-management/admin-edit-user-modal.tsx b/frontend/components/admin-user-management/admin-edit-user-modal.tsx
index 05eaab09d1..c99d9cb820 100644
--- a/frontend/components/admin-user-management/admin-edit-user-modal.tsx
+++ b/frontend/components/admin-user-management/admin-edit-user-modal.tsx
@@ -256,9 +256,10 @@ const AdminEditUserModal: React.FC<AdminEditUserModalProps> = ({
               </div>
               <div className="grid gap-2 mt-5">
                 <div className="flex items-center">
-                  <Label htmlFor="email">Admin</Label>
+                  <Label htmlFor="isAdmin">Admin</Label>
                 </div>
                 <Switch
+                  id="isAdmin"
                   checked={editingUser?.isAdmin}
                   onCheckedChange={(e) =>
                     setEditingUser({ ...editingUser, isAdmin: e })
diff --git a/frontend/components/ui/switch.tsx b/frontend/components/ui/switch.tsx
index 83a6dc1a14..e36b27d6e3 100644
--- a/frontend/components/ui/switch.tsx
+++ b/frontend/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-green-500 data-[state=unchecked]:bg-gray-500",
       className
     )}
     {...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-6 w-6 rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 ease-in-out data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>