From 91c737c907f174b5252877876126a8b81e6cb831 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Fri, 7 Nov 2025 22:46:34 -0800 Subject: add support to limit registration to invite codes --- frontend/src/pages/Admin.tsx | 164 ++++++++++++++++++++++++++++++++++++++++ frontend/src/pages/Register.tsx | 50 +++++++++++- 2 files changed, 210 insertions(+), 4 deletions(-) (limited to 'frontend') 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(null); const navigate = useNavigate(); const handleLogout = async () => { @@ -34,6 +41,14 @@ const Admin = () => { })); }; + const handleInviteInputChange = (e: React.ChangeEvent) => { + 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 (
@@ -112,6 +186,96 @@ const Admin = () => { Welcome Mirage Webmaster! Here are a variety of settings and tools you can use to customize the experience

+ + {/* Create Invite Code Section */} +
+
+ + {showCreateInvite && ( +
+

+ 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} + + +
+
+ )} + +
+
+ + +
+
+ + +
+
+ +
+
+
+ )} +
+
+ {/* Add New Game Section */}
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>({}); + 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) => { 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 = () => { )}
+ {requireInvite && ( +
+ + + {errors.code && ( +

{errors.code}

+ )} +
+ )} +