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 --- .../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 +++++++++++++++++++++ 4 files changed, 499 insertions(+) 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/src/components/admin') 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; -- cgit v1.2.3