From 744a4cdbaa275733bd1b79a4ab991676da1277c0 Mon Sep 17 00:00:00 2001 From: dylkaw <37286651+dylkaw@users.noreply.github.com> Date: Wed, 16 Oct 2024 17:13:22 +0800 Subject: [PATCH 1/4] Add user delete confirmation --- .../admin-user-management.tsx | 29 ++++++++++++++++--- 1 file changed, 25 insertions(+), 4 deletions(-) diff --git a/frontend/components/admin-user-management/admin-user-management.tsx b/frontend/components/admin-user-management/admin-user-management.tsx index 39bef944b4..e781811d92 100644 --- a/frontend/components/admin-user-management/admin-user-management.tsx +++ b/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/user-settings/delete-account-modal"; import { PencilIcon, Trash2Icon } from "lucide-react"; import { User, UserArraySchema } from "@/lib/schemas/user-schema"; import { userServiceUri } from "@/lib/api-uri"; @@ -51,6 +52,9 @@ export default function AdminUserManagement() { const [users, setUsers] = useState([]); const [showModal, setShowModal] = useState(false); const [selectedUser, setSelectedUser] = useState(); + const [showDeleteModal, setShowDeleteModal] = useState(false); + const [confirmUsername, setConfirmUsername] = useState(""); + const [isDeleteButtonEnabled, setIsDeleteButtonEnabled] = useState(false); useEffect(() => { if (data) { @@ -58,18 +62,23 @@ export default function AdminUserManagement() { } }, [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 ; } - 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,15 @@ export default function AdminUserManagement() { user={selectedUser} onUserUpdate={onUserUpdate} /> + @@ -130,7 +148,10 @@ export default function AdminUserManagement() { From a1f17df8aaad6b683d52c854ad989b3770ea7c2b Mon Sep 17 00:00:00 2001 From: dylkaw <37286651+dylkaw@users.noreply.github.com> Date: Wed, 16 Oct 2024 17:22:53 +0800 Subject: [PATCH 2/4] Make delete account modal common --- .../admin-user-management.tsx | 3 ++- .../delete-account-modal.tsx | 14 ++++++++++++-- .../components/user-settings/user-settings.tsx | 3 ++- 3 files changed, 16 insertions(+), 4 deletions(-) rename frontend/components/{user-settings => common}/delete-account-modal.tsx (82%) diff --git a/frontend/components/admin-user-management/admin-user-management.tsx b/frontend/components/admin-user-management/admin-user-management.tsx index e781811d92..996c5d9b61 100644 --- a/frontend/components/admin-user-management/admin-user-management.tsx +++ b/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} />
diff --git a/frontend/components/user-settings/delete-account-modal.tsx b/frontend/components/common/delete-account-modal.tsx similarity index 82% rename from frontend/components/user-settings/delete-account-modal.tsx rename to frontend/components/common/delete-account-modal.tsx index ea10b9b5c8..be5f22ea27 100644 --- a/frontend/components/user-settings/delete-account-modal.tsx +++ b/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 = ({ @@ -27,6 +28,7 @@ const DeleteAccountModal: React.FC = ({ handleDeleteAccount, isDeleteButtonEnabled, setShowDeleteModal, + isAdmin, }) => { return ( <> @@ -37,10 +39,18 @@ const DeleteAccountModal: React.FC = ({ Confirm Delete Account
-

To confirm, please type your username ({originalUsername}):

+ {isAdmin ? ( +

+ To delete, please confirm the username ({originalUsername}): +

+ ) : ( +

+ To confirm, please type your username ({originalUsername}): +

+ )} setConfirmUsername(e.target.value)} /> diff --git a/frontend/components/user-settings/user-settings.tsx b/frontend/components/user-settings/user-settings.tsx index 21ddf01f78..95cb297f01 100644 --- a/frontend/components/user-settings/user-settings.tsx +++ b/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} /> From d483f9d8ad4a10bed723642ad8bf256f4da2f4ae Mon Sep 17 00:00:00 2001 From: dylkaw <37286651+dylkaw@users.noreply.github.com> Date: Wed, 16 Oct 2024 17:27:46 +0800 Subject: [PATCH 3/4] Close delete modal after delete confirmation --- frontend/components/common/delete-account-modal.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/components/common/delete-account-modal.tsx b/frontend/components/common/delete-account-modal.tsx index be5f22ea27..b1086641b9 100644 --- a/frontend/components/common/delete-account-modal.tsx +++ b/frontend/components/common/delete-account-modal.tsx @@ -67,7 +67,10 @@ const DeleteAccountModal: React.FC = ({