m0rph3us1987/hipctf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- Redesigned the Admin panel with a new sidebar-based layout for streamlined management

Browse Source 
- Organized Admin functionality into dedicated tabs: GENERAL, CHALLENGES, BLOG, PLAYERS, and TOOLS
- Integrated "Backup & Restore" and "Danger Zone" into the new Admin TOOLS section
- Fixed page title clipping by adding right-padding to the navigation bar's dynamic title
- Updated Authentication UI: Renamed "New user?" to "NEW PLAYER?", capitalized registration labels, and added "PLAYER ALREADY?" navigation
This commit is contained in:
m0rph3us1987
2026-03-11 18:08:58 +01:00
parent 0d07264788
commit 91bd5e97f2
4 changed files with 378 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
Auth.tsx
View File

@@ -80,62 +80,62 @@ export const Login: React.FC = () => {
{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">LOGIN</Button>
</form>
<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>
);
};
<p className="mt-8 text-center text-[10px] font-bold text-slate-500 tracking-widest uppercase">NEW PLAYER? <Link to="/register" className="text-[#bf00ff] hover:underline">REGISTER</Link></p>
</div>
</div>
</div>
);
};
export const Register: React.FC = () => {
const { register, getCaptcha } = useCTF();
const navigate = useNavigate();
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('');
export const Register: React.FC = () => {
const { register, getCaptcha } = useCTF();
const navigate = useNavigate();
const [name, setName] = useState('');
const [pass, setPass] = useState('');
const [error, setError] = useState('');
const fetchCaptcha = async () => {
try {
const res = await getCaptcha();
setCaptchaData(res);
setCaptchaInput('');
} catch (err) {
setError('FAILED_TO_LOAD_CAPTCHA');
}
};
// CAPTCHA State
const [captchaData, setCaptchaData] = useState<{ id: string, data: string } | null>(null);
const [captchaInput, setCaptchaInput] = useState('');
useEffect(() => {
fetchCaptcha();
}, []);
const fetchCaptcha = async () => {
try {
const res = await getCaptcha();
setCaptchaData(res);
setCaptchaInput('');
} catch (err) {
setError('FAILED_TO_LOAD_CAPTCHA');
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!captchaData) return;
useEffect(() => {
fetchCaptcha();
}, []);
try {
await register(name, pass, captchaData.id, captchaInput);
navigate('/challenges');
} catch (err: any) {
setError(err.message || 'REGISTRATION_FAILED');
fetchCaptcha();
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!captchaData) return;
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">
try {
await register(name, pass, captchaData.id, captchaInput);
navigate('/challenges');
} catch (err: any) {
setError(err.message || 'REGISTRATION_FAILED');
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">
<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">Player name</label>
<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">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 />
@@ -148,7 +148,7 @@ export const Register: React.FC = () => {
<RefreshCw size={14} />
</button>
</div>
{captchaData ? (
<div
className="bg-white/5 p-2 hxp-border-purple flex justify-center mb-4"
@@ -168,8 +168,9 @@ export const Register: React.FC = () => {
{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">REGISTER</Button>
</form>
</div>
</div>
</div>
);
};
<p className="mt-8 text-center text-[10px] font-bold text-slate-500 tracking-widest uppercase">PLAYER ALREADY? <Link to="/login" className="text-[#bf00ff] hover:underline">LOGIN</Link></p>
</div>
</div>
</div>
);
};