Add delete confirmation to user management

frontend/components/admin-user-management/admin-user-management.tsx

@@ -14,6 +14,7 @@ import {
 } from "@/components/ui/table";
 import LoadingScreen from "@/components/common/loading-screen";
 import AdminEditUserModal from "@/components/admin-user-management/admin-edit-user-modal";
+import DeleteAccountModal from "@/components/common/delete-account-modal";
 import { PencilIcon, Trash2Icon } from "lucide-react";
 import { User, UserArraySchema } from "@/lib/schemas/user-schema";
 import { userServiceUri } from "@/lib/api-uri";
@@ -51,25 +52,33 @@ export default function AdminUserManagement() {
   const [users, setUsers] = useState<User[]>([]);
   const [showModal, setShowModal] = useState<boolean>(false);
   const [selectedUser, setSelectedUser] = useState<User>();
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+  const [confirmUsername, setConfirmUsername] = useState("");
+  const [isDeleteButtonEnabled, setIsDeleteButtonEnabled] = useState(false);
 
   useEffect(() => {
     if (data) {
       setUsers(data);
     }
   }, [data]);
 
+  // Enable delete button in the delete account modal only when the input username matches the original username
+  useEffect(() => {
+    setIsDeleteButtonEnabled(confirmUsername === selectedUser?.username);
+  }, [confirmUsername, selectedUser]);
+
   if (isLoading) {
     return <LoadingScreen />;
   }
 
-  const handleDelete = async (userId: string) => {
+  const handleDelete = async () => {
     const token = auth?.token;
     if (!token) {
       throw new Error("No authentication token found");
     }
 
     const response = await fetch(
-      `${userServiceUri(window.location.hostname)}/users/${userId}`,
+      `${userServiceUri(window.location.hostname)}/users/${selectedUser?.id}`,
       {
         method: "DELETE",
         headers: {
@@ -82,7 +91,7 @@ export default function AdminUserManagement() {
       throw new Error("Failed to delete user");
     }
 
-    setUsers(users.filter((user) => user.id !== userId));
+    setUsers(users.filter((user) => user.id !== selectedUser?.id));
   };
 
   const onUserUpdate = () => {
@@ -100,6 +109,16 @@ export default function AdminUserManagement() {
           user={selectedUser}
           onUserUpdate={onUserUpdate}
         />
+        <DeleteAccountModal
+          showDeleteModal={showDeleteModal}
+          originalUsername={selectedUser?.username || ""}
+          confirmUsername={confirmUsername}
+          setConfirmUsername={setConfirmUsername}
+          handleDeleteAccount={handleDelete}
+          isDeleteButtonEnabled={isDeleteButtonEnabled}
+          setShowDeleteModal={setShowDeleteModal}
+          isAdmin={true}
+        />
         <Table>
           <TableHeader>
             <TableRow>
@@ -130,7 +149,10 @@ export default function AdminUserManagement() {
                   </Button>
                   <Button
                     variant="destructive"
-                    onClick={() => handleDelete(user.id)}
+                    onClick={() => {
+                      setSelectedUser(user);
+                      setShowDeleteModal(true);
+                    }}
                   >
                     <Trash2Icon className="h-4 w-4" />
                   </Button>

frontend/components/user-settings/delete-account-modal.tsx → frontend/components/common/delete-account-modal.tsx

@@ -17,6 +17,7 @@ interface DeleteAccountModalProps {
   handleDeleteAccount: () => void;
   isDeleteButtonEnabled: boolean;
   setShowDeleteModal: (show: boolean) => void;
+  isAdmin: boolean;
 }
 
 const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
@@ -27,6 +28,7 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
   handleDeleteAccount,
   isDeleteButtonEnabled,
   setShowDeleteModal,
+  isAdmin,
 }) => {
   return (
     <>
@@ -37,10 +39,18 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
               <DialogTitle>Confirm Delete Account</DialogTitle>
             </DialogHeader>
             <div className="space-y-4">
-              <p>To confirm, please type your username ({originalUsername}):</p>
+              {isAdmin ? (
+                <p>
+                  To delete, please confirm the username ({originalUsername}):
+                </p>
+              ) : (
+                <p>
+                  To confirm, please type your username ({originalUsername}):
+                </p>
+              )}
               <Input
                 type="text"
-                placeholder="Enter your username"
+                placeholder="Confirm username"
                 value={confirmUsername}
                 onChange={(e) => setConfirmUsername(e.target.value)}
               />
@@ -57,7 +67,11 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
               </Button>
               <Button
                 variant="destructive"
-                onClick={handleDeleteAccount}
+                onClick={() => {
+                  setShowDeleteModal(false);
+                  setConfirmUsername("");
+                  handleDeleteAccount();
+                }}
                 disabled={!isDeleteButtonEnabled}
               >
                 Delete Account

frontend/components/user-settings/user-settings.tsx

@@ -18,7 +18,7 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { AlertCircle } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import DeleteAccountModal from "@/components/user-settings/delete-account-modal";
+import DeleteAccountModal from "@/components/common/delete-account-modal";
 import ProfileTab from "@/components/user-settings/profile-tab";
 import LoadingScreen from "@/components/common/loading-screen";
 import { useAuth } from "@/app/auth/auth-context";
@@ -461,6 +461,7 @@ export default function UserSettings({ userId }: { userId: string }) {
                 handleDeleteAccount={handleDeleteAccount}
                 isDeleteButtonEnabled={isDeleteButtonEnabled}
                 setShowDeleteModal={setShowDeleteModal}
+                isAdmin={false}
               />
 
               <Card className="mt-4">