Make delete account modal common

Author: dylkaw

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

@@ -14,7 +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/user-settings/delete-account-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";
@@ -117,6 +117,7 @@ export default function AdminUserManagement() {
           handleDeleteAccount={handleDelete}
           isDeleteButtonEnabled={isDeleteButtonEnabled}
           setShowDeleteModal={setShowDeleteModal}
+          isAdmin={true}
         />
         <Table>
           <TableHeader>

frontend/components/user-settings/delete-account-modal.tsx renamed to 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)}
               />

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">