- Fixed Challenge Modal overlap issue by adjusting the main stacking context in App.tsx
- Implemented "click-outside-to-close" functionality for both the Challenge Modal and User Dropdown - Added protocol-specific action buttons for challenges: "Open in new tab" for HTTP and "Copy to clipboard" for NC - Enhanced Scoreboard rankings with significantly larger, consistent font sizes (text-2xl) for better readability - Rebranded "TEAM_IDENTIFIER" to "PLAYER" and "TOTAL_POINTS" to "POINTS" across the platform (Scoreboard, Matrix, User Menu) - Updated navigation: Renamed "SCOREBOARD" to "SCORES" in the nav bar and dynamic page titles - Modernized User Dropdown menu with a dedicated "PLAYER" header and "LOGOUT" action - Improved Score Matrix and Score Graph titles for consistency with the new "Player" terminology - Added CAPTCHA human verification (svg-captcha) to Login and Registration flows for enhanced security - Optimized frontend assets by migrating Tailwind and JetBrains Mono to local hosting - Refactored Admin panel: Renamed "Operators" to "Users" and improved layout alignment
This commit is contained in:
m0rph3us1987
124
Auth.tsx
124
Auth.tsx
@@ -6,34 +6,81 @@ import { useCTF } from './CTFContext';
|
||||
import { Button } from './UIComponents';
|
||||
|
||||
export const Login: React.FC = () => {
|
||||
const { login } = useCTF();
|
||||
const { login, getCaptcha } = useCTF();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [name, setName] = useState('');
|
||||
const [pass, setPass] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// CAPTCHA State
|
||||
const [captchaData, setCaptchaData] = useState<{ id: string, data: string } | null>(null);
|
||||
const [captchaInput, setCaptchaInput] = useState('');
|
||||
|
||||
const fetchCaptcha = async () => {
|
||||
try {
|
||||
const res = await getCaptcha();
|
||||
setCaptchaData(res);
|
||||
setCaptchaInput('');
|
||||
} catch (err) {
|
||||
setError('FAILED_TO_LOAD_CAPTCHA');
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchCaptcha();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (await login(name, pass)) {
|
||||
if (!captchaData) return;
|
||||
|
||||
if (await login(name, pass, captchaData.id, captchaInput)) {
|
||||
const from = (location.state as any)?.from?.pathname || '/';
|
||||
navigate(from, { replace: true });
|
||||
} else setError('ACCESS_DENIED: INVALID_CREDENTIALS');
|
||||
} else {
|
||||
setError('ACCESS_DENIED: INVALID_CREDENTIALS_OR_CAPTCHA');
|
||||
fetchCaptcha();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-[80vh] flex items-center justify-center px-6">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="hxp-border border-4 p-10 bg-black relative">
|
||||
<div className="absolute -top-4 -left-4 bg-[#ff0000] text-black font-black px-4 py-1 text-xs italic">AUTH_GATE_01</div>
|
||||
<h2 className="text-5xl font-black italic text-white mb-8 tracking-tighter uppercase">SIGN_IN</h2>
|
||||
<h2 className="text-5xl font-black italic text-white mb-8 tracking-tighter uppercase">LOGIN</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<input placeholder="TEAM_IDENTIFIER" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={name} onChange={e => setName(e.target.value)} required />
|
||||
<input type="password" placeholder="SECRET_KEY" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={pass} onChange={e => setPass(e.target.value)} required />
|
||||
<input placeholder="PLAYER" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={name} onChange={e => setName(e.target.value)} required />
|
||||
<input type="password" placeholder="PASSWORD" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={pass} onChange={e => setPass(e.target.value)} required />
|
||||
|
||||
<div className="space-y-2 border-t border-white/10 pt-4">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Human Verification</label>
|
||||
<button type="button" onClick={fetchCaptcha} className="text-[#bf00ff] hover:text-white transition-colors" title="Regenerate CAPTCHA">
|
||||
<RefreshCw size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{captchaData ? (
|
||||
<div
|
||||
className="bg-white/5 p-2 hxp-border-purple flex justify-center mb-4"
|
||||
dangerouslySetInnerHTML={{ __html: captchaData.data }}
|
||||
/>
|
||||
) : <div className="h-16 bg-white/5 animate-pulse mb-4" />}
|
||||
|
||||
<input
|
||||
placeholder="ENTER CODE"
|
||||
className="w-full bg-black hxp-border-purple p-4 text-white font-black"
|
||||
value={captchaInput}
|
||||
onChange={e => setCaptchaInput(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-500 font-black italic animate-pulse uppercase">{error}</p>}
|
||||
<Button type="submit" className="w-full py-4 text-xl uppercase">Initiate Session</Button>
|
||||
<Button type="submit" className="w-full py-4 text-xl uppercase">LOGIN</Button>
|
||||
</form>
|
||||
<p className="mt-8 text-center text-[10px] font-bold text-slate-500 tracking-widest uppercase">New operator? <Link to="/register" className="text-[#bf00ff] hover:underline">Register_Identity</Link></p>
|
||||
<p className="mt-8 text-center text-[10px] font-bold text-slate-500 tracking-widest uppercase">New user? <Link to="/register" className="text-[#bf00ff] hover:underline">REGISTER</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -41,46 +88,40 @@ export const Login: React.FC = () => {
|
||||
};
|
||||
|
||||
export const Register: React.FC = () => {
|
||||
const { register } = useCTF();
|
||||
const { register, getCaptcha } = useCTF();
|
||||
const navigate = useNavigate();
|
||||
const [name, setName] = useState('');
|
||||
const [pass, setPass] = useState('');
|
||||
const [error, setError] = useState('');
|
||||
|
||||
// CAPTCHA State
|
||||
const [captchaQ, setCaptchaQ] = useState('');
|
||||
const [captchaData, setCaptchaData] = useState<{ id: string, data: string } | null>(null);
|
||||
const [captchaInput, setCaptchaInput] = useState('');
|
||||
|
||||
const generateCaptcha = () => {
|
||||
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz0123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < 6; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
const fetchCaptcha = async () => {
|
||||
try {
|
||||
const res = await getCaptcha();
|
||||
setCaptchaData(res);
|
||||
setCaptchaInput('');
|
||||
} catch (err) {
|
||||
setError('FAILED_TO_LOAD_CAPTCHA');
|
||||
}
|
||||
setCaptchaQ(result);
|
||||
setCaptchaInput('');
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
generateCaptcha();
|
||||
fetchCaptcha();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// CAPTCHA Validation (Case-insensitive)
|
||||
if (captchaInput.toLowerCase() !== captchaQ.toLowerCase()) {
|
||||
setError('VALIDATION_ERROR: HUMAN_VERIFICATION_FAILED');
|
||||
generateCaptcha();
|
||||
return;
|
||||
}
|
||||
if (!captchaData) return;
|
||||
|
||||
try {
|
||||
await register(name, pass);
|
||||
await register(name, pass, captchaData.id, captchaInput);
|
||||
navigate('/challenges');
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'REGISTRATION_FAILED');
|
||||
generateCaptcha();
|
||||
fetchCaptcha();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -88,28 +129,35 @@ export const Register: React.FC = () => {
|
||||
<div className="min-h-[80vh] flex items-center justify-center px-6">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="hxp-border border-4 p-10 bg-black relative">
|
||||
<div className="absolute -top-4 -left-4 bg-[#bf00ff] text-black font-black px-4 py-1 text-xs italic">IDENTITY_GEN_01</div>
|
||||
<h2 className="text-5xl font-black italic text-white mb-8 tracking-tighter uppercase">REGISTER</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Team Identifier</label>
|
||||
<input placeholder="DESIRED_IDENTIFIER" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={name} onChange={e => setName(e.target.value)} required />
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Player name</label>
|
||||
<input placeholder="DESIRED NAME" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={name} onChange={e => setName(e.target.value)} required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Secret Key</label>
|
||||
<input type="password" placeholder="SECRET_KEY" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={pass} onChange={e => setPass(e.target.value)} required />
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">PASSWORD</label>
|
||||
<input type="password" placeholder="PASSWORD" className="w-full bg-black hxp-border-purple p-4 text-white font-black" value={pass} onChange={e => setPass(e.target.value)} required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t border-white/10 pt-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Human Verification: <span className="text-[#00ff00] font-mono tracking-widest bg-white/5 px-2 py-1">{captchaQ}</span></label>
|
||||
<button type="button" onClick={generateCaptcha} className="text-[#bf00ff] hover:text-white transition-colors" title="Regenerate CAPTCHA">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest">Human Verification</label>
|
||||
<button type="button" onClick={fetchCaptcha} className="text-[#bf00ff] hover:text-white transition-colors" title="Regenerate CAPTCHA">
|
||||
<RefreshCw size={14} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{captchaData ? (
|
||||
<div
|
||||
className="bg-white/5 p-2 hxp-border-purple flex justify-center mb-4"
|
||||
dangerouslySetInnerHTML={{ __html: captchaData.data }}
|
||||
/>
|
||||
) : <div className="h-16 bg-white/5 animate-pulse mb-4" />}
|
||||
|
||||
<input
|
||||
placeholder="ENTER_CODE"
|
||||
placeholder="ENTER CODE"
|
||||
className="w-full bg-black hxp-border-purple p-4 text-white font-black"
|
||||
value={captchaInput}
|
||||
onChange={e => setCaptchaInput(e.target.value)}
|
||||
@@ -118,7 +166,7 @@ export const Register: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red-500 font-black italic animate-pulse uppercase text-[10px]">{error}</p>}
|
||||
<Button type="submit" className="w-full py-4 text-xl uppercase">Create Identity</Button>
|
||||
<Button type="submit" className="w-full py-4 text-xl uppercase">REGISTER</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user