From 9608610b0fef717c8f2d87ab518a077f4e0763cb Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sun, 9 Nov 2025 20:33:00 -0800 Subject: admin: implement user deletion --- frontend/src/components/CollapsibleSection.tsx | 40 ---- frontend/src/components/GameManager.tsx | 113 ----------- frontend/src/components/InviteCodeManager.tsx | 128 ------------ .../src/components/admin/CollapsibleSection.tsx | 40 ++++ frontend/src/components/admin/GameManager.tsx | 113 +++++++++++ .../src/components/admin/InviteCodeManager.tsx | 128 ++++++++++++ frontend/src/components/admin/UserDeletion.tsx | 218 +++++++++++++++++++++ frontend/src/pages/Admin.tsx | 24 ++- 8 files changed, 520 insertions(+), 284 deletions(-) delete mode 100644 frontend/src/components/CollapsibleSection.tsx delete mode 100644 frontend/src/components/GameManager.tsx delete mode 100644 frontend/src/components/InviteCodeManager.tsx create mode 100644 frontend/src/components/admin/CollapsibleSection.tsx create mode 100644 frontend/src/components/admin/GameManager.tsx create mode 100644 frontend/src/components/admin/InviteCodeManager.tsx create mode 100644 frontend/src/components/admin/UserDeletion.tsx (limited to 'frontend') diff --git a/frontend/src/components/CollapsibleSection.tsx b/frontend/src/components/CollapsibleSection.tsx deleted file mode 100644 index 08df24f..0000000 --- a/frontend/src/components/CollapsibleSection.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { ReactNode } from 'react'; - -interface CollapsibleSectionProps { - title: string; - isOpen: boolean; - onToggle: () => void; - children: ReactNode; -} - -const CollapsibleSection = ({ title, isOpen, onToggle, children }: CollapsibleSectionProps) => { - return ( -
-
- - {isOpen && ( -
- {children} -
- )} -
-
- ); -}; - -export default CollapsibleSection; \ No newline at end of file diff --git a/frontend/src/components/GameManager.tsx b/frontend/src/components/GameManager.tsx deleted file mode 100644 index 66782de..0000000 --- a/frontend/src/components/GameManager.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { useState } from 'react'; - -interface GameFormData { - gameInternalName: string; - gameFormattedName: string; - gameDescription: string; -} - -interface GameManagerProps { - onGameSubmit: (formData: GameFormData) => Promise; - isSubmitting: boolean; -} - -const GameManager = ({ onGameSubmit, isSubmitting }: GameManagerProps) => { - const [formData, setFormData] = useState({ - gameInternalName: '', - gameFormattedName: '', - gameDescription: '' - }); - - const handleInputChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setFormData(prev => ({ - ...prev, - [name]: value - })); - }; - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - - if (!formData.gameInternalName || !formData.gameFormattedName || !formData.gameDescription) { - alert('Please fill in all fields'); - return; - } - - await onGameSubmit(formData); - - // Reset form after successful submission - setFormData({ - gameInternalName: '', - gameFormattedName: '', - gameDescription: '' - }); - }; - - return ( - <> -

- This form allows you to add a new game to Mirage. By default, Mirage will attempt to derive a method of showing the game's score on its own. - You may override this behavior by writing your own custom score display logic. -

-
-
- - -
-
- - -
-
- - -
-
- -
-
- - ); -}; - -export default GameManager; \ No newline at end of file diff --git a/frontend/src/components/InviteCodeManager.tsx b/frontend/src/components/InviteCodeManager.tsx deleted file mode 100644 index a281366..0000000 --- a/frontend/src/components/InviteCodeManager.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import { useState } from 'react'; - -interface InviteFormData { - uses: string; - code: string; -} - -interface InviteCodeManagerProps { - onInviteSubmit: (formData: InviteFormData) => Promise; - isCreatingInvite: boolean; - createdInviteCode: string | null; -} - -const InviteCodeManager = ({ onInviteSubmit, isCreatingInvite, createdInviteCode }: InviteCodeManagerProps) => { - const [inviteFormData, setInviteFormData] = useState({ - uses: '', - code: '' - }); - - const handleInviteInputChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setInviteFormData(prev => ({ - ...prev, - [name]: value - })); - }; - - const handleSubmit = async (e: React.FormEvent) => { - e.preventDefault(); - - if (!inviteFormData.uses) { - alert('Please specify the number of uses for the invite code'); - return; - } - - const uses = parseInt(inviteFormData.uses); - if (isNaN(uses) || uses <= 0) { - alert('Please enter a valid number of uses'); - return; - } - - await onInviteSubmit(inviteFormData); - - // Reset form after successful submission - setInviteFormData({ - uses: '', - code: '' - }); - }; - - const copyToClipboard = (text: string) => { - navigator.clipboard.writeText(text).then(() => { - alert('Invite code copied to clipboard!'); - }).catch(() => { - alert('Failed to copy to clipboard'); - }); - }; - - return ( - <> -

- Generate invite codes to allow new users to register. You can specify how many times the code can be used - and optionally set a custom code (otherwise one will be generated automatically). -

- - {createdInviteCode && ( -
-

Invite Code Created Successfully!

-
- - {createdInviteCode} - - -
-
- )} - -
-
- - -
-
- - -
-
- -
-
- - ); -}; - -export default InviteCodeManager; \ No newline at end of file diff --git a/frontend/src/components/admin/CollapsibleSection.tsx b/frontend/src/components/admin/CollapsibleSection.tsx new file mode 100644 index 0000000..ab72cc8 --- /dev/null +++ b/frontend/src/components/admin/CollapsibleSection.tsx @@ -0,0 +1,40 @@ +import type {ReactNode} from 'react'; + +interface CollapsibleSectionProps { + title: string; + isOpen: boolean; + onToggle: () => void; + children: ReactNode; +} + +const CollapsibleSection = ({ title, isOpen, onToggle, children }: CollapsibleSectionProps) => { + return ( +
+
+ + {isOpen && ( +
+ {children} +
+ )} +
+
+ ); +}; + +export default CollapsibleSection; diff --git a/frontend/src/components/admin/GameManager.tsx b/frontend/src/components/admin/GameManager.tsx new file mode 100644 index 0000000..66782de --- /dev/null +++ b/frontend/src/components/admin/GameManager.tsx @@ -0,0 +1,113 @@ +import { useState } from 'react'; + +interface GameFormData { + gameInternalName: string; + gameFormattedName: string; + gameDescription: string; +} + +interface GameManagerProps { + onGameSubmit: (formData: GameFormData) => Promise; + isSubmitting: boolean; +} + +const GameManager = ({ onGameSubmit, isSubmitting }: GameManagerProps) => { + const [formData, setFormData] = useState({ + gameInternalName: '', + gameFormattedName: '', + gameDescription: '' + }); + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!formData.gameInternalName || !formData.gameFormattedName || !formData.gameDescription) { + alert('Please fill in all fields'); + return; + } + + await onGameSubmit(formData); + + // Reset form after successful submission + setFormData({ + gameInternalName: '', + gameFormattedName: '', + gameDescription: '' + }); + }; + + return ( + <> +

+ This form allows you to add a new game to Mirage. By default, Mirage will attempt to derive a method of showing the game's score on its own. + You may override this behavior by writing your own custom score display logic. +

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + ); +}; + +export default GameManager; \ No newline at end of file diff --git a/frontend/src/components/admin/InviteCodeManager.tsx b/frontend/src/components/admin/InviteCodeManager.tsx new file mode 100644 index 0000000..a281366 --- /dev/null +++ b/frontend/src/components/admin/InviteCodeManager.tsx @@ -0,0 +1,128 @@ +import { useState } from 'react'; + +interface InviteFormData { + uses: string; + code: string; +} + +interface InviteCodeManagerProps { + onInviteSubmit: (formData: InviteFormData) => Promise; + isCreatingInvite: boolean; + createdInviteCode: string | null; +} + +const InviteCodeManager = ({ onInviteSubmit, isCreatingInvite, createdInviteCode }: InviteCodeManagerProps) => { + const [inviteFormData, setInviteFormData] = useState({ + uses: '', + code: '' + }); + + const handleInviteInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target; + setInviteFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!inviteFormData.uses) { + alert('Please specify the number of uses for the invite code'); + return; + } + + const uses = parseInt(inviteFormData.uses); + if (isNaN(uses) || uses <= 0) { + alert('Please enter a valid number of uses'); + return; + } + + await onInviteSubmit(inviteFormData); + + // Reset form after successful submission + setInviteFormData({ + uses: '', + code: '' + }); + }; + + const copyToClipboard = (text: string) => { + navigator.clipboard.writeText(text).then(() => { + alert('Invite code copied to clipboard!'); + }).catch(() => { + alert('Failed to copy to clipboard'); + }); + }; + + return ( + <> +

+ Generate invite codes to allow new users to register. You can specify how many times the code can be used + and optionally set a custom code (otherwise one will be generated automatically). +

+ + {createdInviteCode && ( +
+

Invite Code Created Successfully!

+
+ + {createdInviteCode} + + +
+
+ )} + +
+
+ + +
+
+ + +
+
+ +
+
+ + ); +}; + +export default InviteCodeManager; \ No newline at end of file diff --git a/frontend/src/components/admin/UserDeletion.tsx b/frontend/src/components/admin/UserDeletion.tsx new file mode 100644 index 0000000..2de7b50 --- /dev/null +++ b/frontend/src/components/admin/UserDeletion.tsx @@ -0,0 +1,218 @@ +import { useState } from 'react'; + +interface User { + id: number; + username: string; + isAdmin: boolean; +} + +interface UserDeletionProps { + onUserDeleted?: () => void; +} + +const UserDeletion = ({ onUserDeleted }: UserDeletionProps) => { + const [userId, setUserId] = useState(''); + const [userToDelete, setUserToDelete] = useState(null); + const [isSearching, setIsSearching] = useState(false); + const [isDeleting, setIsDeleting] = useState(false); + const [showConfirmation, setShowConfirmation] = useState(false); + const [error, setError] = useState(null); + + const handleSearchUser = async () => { + if (!userId.trim()) { + setError('Please enter a user ID'); + return; + } + + const id = parseInt(userId); + if (isNaN(id) || id <= 0) { + setError('Please enter a valid user ID'); + return; + } + + setIsSearching(true); + setError(null); + setUserToDelete(null); + + try { + const response = await fetch(`${import.meta.env.VITE_API_URL}/me?userId=${id}`, { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + credentials: 'include', + }); + + if (!response.ok) { + if (response.status === 404) { + throw new Error('User not found'); + } + const error = await response.json(); + throw new Error(error.error || 'Failed to find user'); + } + + const data = await response.json(); + setUserToDelete(data.user); + } catch (error) { + console.error('Failed to search user:', error); + setError(error instanceof Error ? error.message : 'Failed to search user'); + } finally { + setIsSearching(false); + } + }; + + const handleDeleteUser = async () => { + if (!userToDelete) return; + + setIsDeleting(true); + setError(null); + + try { + const response = await fetch(`${import.meta.env.VITE_API_URL}/admin/user/${userToDelete.id}`, { + method: 'DELETE', + headers: { + 'Content-Type': 'application/json', + }, + credentials: 'include', + }); + + if (!response.ok) { + const error = await response.json(); + throw new Error(error.error || 'Failed to delete user'); + } + + alert(`User "${userToDelete.username}" has been successfully deleted.`); + + // Reset form + setUserId(''); + setUserToDelete(null); + setShowConfirmation(false); + + // Call callback if provided + onUserDeleted?.(); + + } catch (error) { + console.error('Failed to delete user:', error); + setError(error instanceof Error ? error.message : 'Failed to delete user'); + } finally { + setIsDeleting(false); + } + }; + + const resetForm = () => { + setUserId(''); + setUserToDelete(null); + setShowConfirmation(false); + setError(null); + }; + + return ( + <> +

+ Warning: This action is irreversible. Deleting a user will permanently remove their account and all associated data including scores and statistics. +

+ + {error && ( +
+

{error}

+
+ )} + +
+ {/* Search User Section */} +
+
+ +
+ setUserId(e.target.value)} + className="flex-1 px-3 py-2 bg-slate-800 border border-slate-600 rounded-md text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent" + placeholder="Enter user ID to search" + min="1" + disabled={isSearching} + /> + +
+
+
+ + {/* User Details Section */} + {userToDelete && !showConfirmation && ( +
+

User Found

+
+

+ ID: {userToDelete.id} +

+

+ Username: {userToDelete.username} +

+

+ Admin Status:{' '} + + {userToDelete.isAdmin ? 'Admin' : 'Regular User'} + +

+
+
+ + +
+
+ )} + + {/* Confirmation Section */} + {showConfirmation && userToDelete && ( +
+

Confirm Deletion

+

+ Are you absolutely sure you want to delete the user "{userToDelete.username}"? +

+

+ This action cannot be undone. All user data, scores, and statistics will be permanently deleted. +

+
+ + +
+
+ )} +
+ + ); +}; + +export default UserDeletion; diff --git a/frontend/src/pages/Admin.tsx b/frontend/src/pages/Admin.tsx index d4cbcb3..776f78e 100644 --- a/frontend/src/pages/Admin.tsx +++ b/frontend/src/pages/Admin.tsx @@ -3,9 +3,10 @@ import { NavBar } from "../components/NavBar"; import { useAuth } from "../contexts/AuthContext"; import SessionExpiredPopup from "../components/SessionExpiredPopup"; import UnauthorizedAccess from "../components/UnauthorizedAccess"; -import CollapsibleSection from "../components/CollapsibleSection"; -import InviteCodeManager from "../components/InviteCodeManager"; -import GameManager from "../components/GameManager"; +import CollapsibleSection from "../components/admin/CollapsibleSection"; +import InviteCodeManager from "../components/admin/InviteCodeManager"; +import GameManager from "../components/admin/GameManager"; +import UserDeletion from "../components/admin/UserDeletion"; import { useState } from "react"; interface GameFormData { @@ -23,6 +24,7 @@ const Admin = () => { const { user, isLoading, logout } = useAuth(); const [showAddGame, setShowAddGame] = useState(false); const [showCreateInvite, setShowCreateInvite] = useState(false); + const [showUserDeletion, setShowUserDeletion] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [isCreatingInvite, setIsCreatingInvite] = useState(false); const [createdInviteCode, setCreatedInviteCode] = useState(null); @@ -107,6 +109,11 @@ const Admin = () => { } }; + const handleUserDeleted = () => { + // Optional: Add any additional logic after user deletion + console.log('User deleted successfully'); + }; + if (isLoading) { return
@@ -161,6 +168,17 @@ const Admin = () => { isSubmitting={isSubmitting} /> + + {/* User Deletion Section */} + setShowUserDeletion(!showUserDeletion)} + > + +
); -- cgit v1.2.3