add support to limit registration to invite codes

2 files changed, 210 insertions, 4 deletions

diff --git a/frontend/src/pages/Admin.tsx b/frontend/src/pages/Admin.tsx
index f494fc2..043a32e 100644
--- a/frontend/src/pages/Admin.tsx
+++ b/frontend/src/pages/Admin.tsx
@@ -8,12 +8,19 @@ import { useState } from "react";
 const Admin = () => {
   const { user, isLoading, logout } = useAuth();
   const [showAddGame, setShowAddGame] = useState(false);
+  const [showCreateInvite, setShowCreateInvite] = useState(false);
   const [formData, setFormData] = useState({
     gameInternalName: '',
     gameFormattedName: '',
     gameDescription: ''
   });
+  const [inviteFormData, setInviteFormData] = useState({
+    uses: '',
+    code: ''
+  });
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isCreatingInvite, setIsCreatingInvite] = useState(false);
+  const [createdInviteCode, setCreatedInviteCode] = useState<string | null>(null);
   const navigate = useNavigate();
 
   const handleLogout = async () => {
@@ -34,6 +41,14 @@ const Admin = () => {
     }));
   };
 
+  const handleInviteInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setInviteFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -75,6 +90,65 @@ const Admin = () => {
     }
   };
 
+  const handleInviteSubmit = 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;
+    }
+
+    setIsCreatingInvite(true);
+
+    try {
+      const requestBody: { uses: number; code?: string } = { uses };
+      if (inviteFormData.code.trim()) {
+        requestBody.code = inviteFormData.code.trim();
+      }
+
+      const response = await fetch(import.meta.env.VITE_API_URL + '/admin/createInvite', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify(requestBody),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to create invite code');
+      }
+
+      const result = await response.json();
+      setCreatedInviteCode(result.inviteCode.code);
+      setInviteFormData({
+        uses: '',
+        code: ''
+      });
+
+    } catch (error) {
+      console.error('Failed to create invite code:', error);
+      alert(error instanceof Error ? error.message : 'Failed to create invite code');
+    } finally {
+      setIsCreatingInvite(false);
+    }
+  };
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text).then(() => {
+      alert('Invite code copied to clipboard!');
+    }).catch(() => {
+      alert('Failed to copy to clipboard');
+    });
+  };
+
   if (isLoading) {
     return (
       <div className="min-h-screen bg-slate-950 flex items-center justify-center">
@@ -112,6 +186,96 @@ const Admin = () => {
             Welcome Mirage Webmaster! Here are a variety of settings and tools you can use to customize the experience
           </p>
         </div>
+
+        {/* Create Invite Code Section */}
+        <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={() => setShowCreateInvite(!showCreateInvite)}
+            >
+              <h2 className="text-xl font-semibold text-white">Create Invite Code</h2>
+              <svg
+                className={`w-5 h-5 text-slate-400 transform transition-transform ${
+                  showCreateInvite ? '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>
+            {showCreateInvite && (
+              <div className="px-6 pb-6">
+                <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={handleInviteSubmit}>
+                  <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>
+              </div>
+            )}
+          </div>
+        </div>
+
         {/* Add New Game Section */}
         <div className="mb-8">
           <div className="bg-slate-900 rounded-lg border border-slate-700">
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index 90edbfd..5b53f46 100644
--- a/frontend/src/pages/Register.tsx
+++ b/frontend/src/pages/Register.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router';
 import { useAuth } from '../contexts/AuthContext';
 
@@ -7,11 +7,26 @@ const Register = () => {
     username: '',
     email: '',
     password: '',
-    confirmPassword: ''
+    confirmPassword: '',
+    code: ''
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
+  const [requireInvite, setRequireInvite] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
+  useEffect(() => {
+    const fetchServerInfo = async () => {
+      try {
+        const response = await fetch(import.meta.env.VITE_API_URL + "/info");
+        const data = await response.json();
+        setRequireInvite(Boolean(data.requireInvite));
+      } catch (error) {
+        console.error('Error fetching server info:', error);
+      }
+    };
+    fetchServerInfo();
+  }, []);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData(prev => ({
@@ -53,6 +68,10 @@ const Register = () => {
       newErrors.confirmPassword = 'Passwords do not match';
     }
 
+    if (requireInvite && !formData.code.trim()) {
+      newErrors.code = 'Invite code is required';
+    }
+
     setErrors(newErrors);
     return Object.keys(newErrors).length === 0;
   };
@@ -67,11 +86,14 @@ const Register = () => {
 
     setIsLoading(true);
     try {
-      const result = await register({
+      const registrationData = {
         username: formData.username,
         email: formData.email,
         password: formData.password,
-      });
+        ...(requireInvite && { code: formData.code })
+      };
+
+      const result = await register(registrationData);
 
       if (!result.success) {
         setErrors({ general: result.error || 'Registration failed. Please try again.' });
@@ -131,6 +153,26 @@ const Register = () => {
           )}
 
           <form onSubmit={handleSubmit} className="space-y-6">
+            {requireInvite && (
+              <div>
+                <label htmlFor="code" className="block text-sm font-medium text-slate-300 mb-2">
+                  Invite code
+                </label>
+                <input
+                  type="text"
+                  id="code"
+                  name="code"
+                  value={formData.code}
+                  onChange={handleChange}
+                  className="block w-full px-3 py-2 border border-slate-600 rounded-md shadow-sm bg-slate-800 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition-colors"
+                  placeholder="Enter your invite code"
+                />
+                {errors.code && (
+                  <p className="mt-1 text-sm text-red-400">{errors.code}</p>
+                )}
+              </div>
+            )}
+
             <div>
               <label htmlFor="username" className="block text-sm font-medium text-slate-300 mb-2">
                 Username