admin: implement user deletion

4 files changed, 499 insertions, 0 deletions

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 (
+    <div className="mb-8">
+      <div className="bg-slate-900 rounded-lg border border-slate-700">
+        <button
+          className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-slate-800 transition-colors rounded-lg"
+          onClick={onToggle}
+        >
+          <h2 className="text-xl font-semibold text-white">{title}</h2>
+          <svg
+            className={`w-5 h-5 text-slate-400 transform transition-transform ${
+              isOpen ? 'rotate-180' : ''
+            }`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        {isOpen && (
+          <div className="px-6 pb-6">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+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<void>;
+  isSubmitting: boolean;
+}
+
+const GameManager = ({ onGameSubmit, isSubmitting }: GameManagerProps) => {
+  const [formData, setFormData] = useState<GameFormData>({
+    gameInternalName: '',
+    gameFormattedName: '',
+    gameDescription: ''
+  });
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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 (
+    <>
+      <p className="text-slate-300 leading-relaxed mb-6 p-4 bg-slate-800/50 rounded-md border-l-4 border-violet-500">
+        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.
+      </p>
+      <form className="space-y-4" onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="gameInternalName" className="block text-sm font-medium text-slate-300 mb-2">
+            Game Internal Name
+          </label>
+          <input
+            type="text"
+            id="gameInternalName"
+            name="gameInternalName"
+            value={formData.gameInternalName}
+            onChange={handleInputChange}
+            className="w-full 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="The unique internal identifier for the game (i.e. dancerush)"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="formattedName" className="block text-sm font-medium text-slate-300 mb-2">
+            Formatted Name
+          </label>
+          <input
+            type="text"
+            id="gameFormattedName"
+            name="gameFormattedName"
+            value={formData.gameFormattedName}
+            onChange={handleInputChange}
+            className="w-full 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="The formatted/stylized name users will see (i.e DANCERUSH STARDOM)"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="formattedName" className="block text-sm font-medium text-slate-300 mb-2">
+            Game Description
+          </label>
+          <input
+            type="text"
+            id="gameDescription"
+            name="gameDescription"
+            value={formData.gameDescription}
+            onChange={handleInputChange}
+            className="w-full 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="A brief description of the game"
+            required
+          />
+        </div>
+        <div className="pt-4">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="bg-violet-600 hover:bg-violet-700 disabled:bg-violet-800 disabled:cursor-not-allowed text-white font-medium py-2 px-4 rounded-md transition-colors"
+          >
+            {isSubmitting ? 'Adding Game...' : 'Add Game'}
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+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<void>;
+  isCreatingInvite: boolean;
+  createdInviteCode: string | null;
+}
+
+const InviteCodeManager = ({ onInviteSubmit, isCreatingInvite, createdInviteCode }: InviteCodeManagerProps) => {
+  const [inviteFormData, setInviteFormData] = useState<InviteFormData>({
+    uses: '',
+    code: ''
+  });
+
+  const handleInviteInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    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 (
+    <>
+      <p className="text-slate-300 leading-relaxed mb-6 p-4 bg-slate-800/50 rounded-md border-l-4 border-violet-500">
+        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).
+      </p>
+
+      {createdInviteCode && (
+        <div className="mb-6 p-4 bg-green-900/30 border border-green-700 rounded-md">
+          <h3 className="text-green-400 font-semibold mb-2">Invite Code Created Successfully!</h3>
+          <div className="flex items-center gap-2">
+            <code className="bg-slate-800 px-3 py-2 rounded text-green-300 font-mono">
+              {createdInviteCode}
+            </code>
+            <button
+              onClick={() => copyToClipboard(createdInviteCode)}
+              className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-sm transition-colors"
+            >
+              Copy
+            </button>
+          </div>
+        </div>
+      )}
+
+      <form className="space-y-4" onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="uses" className="block text-sm font-medium text-slate-300 mb-2">
+            Number of Uses
+          </label>
+          <input
+            type="number"
+            id="uses"
+            name="uses"
+            value={inviteFormData.uses}
+            onChange={handleInviteInputChange}
+            className="w-full 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="How many times this code can be used"
+            min="1"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="code" className="block text-sm font-medium text-slate-300 mb-2">
+            Custom Code (Optional)
+          </label>
+          <input
+            type="text"
+            id="code"
+            name="code"
+            value={inviteFormData.code}
+            onChange={handleInviteInputChange}
+            className="w-full 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="Leave blank to generate automatically"
+          />
+        </div>
+        <div className="pt-4">
+          <button
+            type="submit"
+            disabled={isCreatingInvite}
+            className="bg-violet-600 hover:bg-violet-700 disabled:bg-violet-800 disabled:cursor-not-allowed text-white font-medium py-2 px-4 rounded-md transition-colors"
+          >
+            {isCreatingInvite ? 'Creating Invite Code...' : 'Create Invite Code'}
+          </button>
+        </div>
+      </form>
+    </>
+  );
+};
+
+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<User | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
+  const [error, setError] = useState<string | null>(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 (
+    <>
+      <p className="text-slate-300 leading-relaxed mb-6 p-4 bg-slate-800/50 rounded-md border-l-4 border-red-500">
+        <strong className="text-red-400">Warning:</strong> This action is irreversible. Deleting a user will permanently remove their account and all associated data including scores and statistics.
+      </p>
+
+      {error && (
+        <div className="mb-6 p-4 bg-red-900/30 border border-red-700 rounded-md">
+          <p className="text-red-400">{error}</p>
+        </div>
+      )}
+
+      <div className="space-y-6">
+        {/* Search User Section */}
+        <div className="space-y-4">
+          <div>
+            <label htmlFor="userId" className="block text-sm font-medium text-slate-300 mb-2">
+              User ID
+            </label>
+            <div className="flex gap-3">
+              <input
+                type="number"
+                id="userId"
+                value={userId}
+                onChange={(e) => 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}
+              />
+              <button
+                onClick={handleSearchUser}
+                disabled={isSearching || !userId.trim()}
+                className="bg-violet-600 hover:bg-violet-700 disabled:bg-violet-800 disabled:cursor-not-allowed text-white font-medium px-4 py-2 rounded-md transition-colors"
+              >
+                {isSearching ? 'Searching...' : 'Search'}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* User Details Section */}
+        {userToDelete && !showConfirmation && (
+          <div className="p-4 bg-slate-800 border border-slate-600 rounded-md">
+            <h3 className="text-lg font-semibold text-white mb-3">User Found</h3>
+            <div className="space-y-2 text-sm">
+              <p className="text-slate-300">
+                <span className="text-slate-400">ID:</span> {userToDelete.id}
+              </p>
+              <p className="text-slate-300">
+                <span className="text-slate-400">Username:</span> {userToDelete.username}
+              </p>
+              <p className="text-slate-300">
+                <span className="text-slate-400">Admin Status:</span>{' '}
+                <span className={userToDelete.isAdmin ? 'text-yellow-400' : 'text-green-400'}>
+                  {userToDelete.isAdmin ? 'Admin' : 'Regular User'}
+                </span>
+              </p>
+            </div>
+            <div className="flex gap-3 mt-4">
+              <button
+                onClick={() => setShowConfirmation(true)}
+                className="bg-red-600 hover:bg-red-700 text-white font-medium px-4 py-2 rounded-md transition-colors"
+              >
+                Delete User
+              </button>
+              <button
+                onClick={resetForm}
+                className="bg-slate-600 hover:bg-slate-700 text-white font-medium px-4 py-2 rounded-md transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Confirmation Section */}
+        {showConfirmation && userToDelete && (
+          <div className="p-4 bg-red-900/20 border border-red-600 rounded-md">
+            <h3 className="text-lg font-semibold text-red-400 mb-3">Confirm Deletion</h3>
+            <p className="text-slate-300 mb-4">
+              Are you absolutely sure you want to delete the user <strong className="text-white">"{userToDelete.username}"</strong>?
+            </p>
+            <p className="text-sm text-red-300 mb-4">
+              This action cannot be undone. All user data, scores, and statistics will be permanently deleted.
+            </p>
+            <div className="flex gap-3">
+              <button
+                onClick={handleDeleteUser}
+                disabled={isDeleting}
+                className="bg-red-600 hover:bg-red-700 disabled:bg-red-800 disabled:cursor-not-allowed text-white font-medium px-4 py-2 rounded-md transition-colors"
+              >
+                {isDeleting ? 'Deleting...' : 'Yes, Delete User'}
+              </button>
+              <button
+                onClick={() => setShowConfirmation(false)}
+                disabled={isDeleting}
+                className="bg-slate-600 hover:bg-slate-700 disabled:bg-slate-700 disabled:cursor-not-allowed text-white font-medium px-4 py-2 rounded-md transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default UserDeletion;