Made app more modular.
Fixed some bugs. Added some functionality.
This commit is contained in:
m0rph3us1987
482
Admin.tsx
Normal file
482
Admin.tsx
Normal file
@@ -0,0 +1,482 @@
|
||||
|
||||
import React, { useState, useEffect, useRef, useMemo } from 'react';
|
||||
import { X, Edit3, Trash2, Shield, ShieldCheck, ShieldAlert, Skull, Newspaper, Download, Upload, Database, Save, History, Plus, Globe, User, ShieldX, UserMinus, UserCheck } from 'lucide-react';
|
||||
import { useCTF } from './CTFContext';
|
||||
import { Challenge, Team, BlogPost, Difficulty, ChallengeFile } from './types';
|
||||
import { Button, Countdown, CategoryIcon } from './UIComponents';
|
||||
import { CATEGORIES, DIFFICULTIES } from './constants';
|
||||
|
||||
export const Admin: React.FC = () => {
|
||||
const { state, toggleCtf, resetScores, upsertChallenge, deleteChallenge, deleteAllChallenges, updateTeam, deleteTeam, createBlogPost, updateBlogPost, deleteBlogPost, updateConfig, exportChallenges, importChallenges, backupDatabase, restoreDatabase, refreshState } = useCTF();
|
||||
|
||||
const [editingChallenge, setEditingChallenge] = useState<Partial<Challenge> | null>(null);
|
||||
const [editingTeam, setEditingTeam] = useState<Partial<Team> & { newPassword?: string } | null>(null);
|
||||
const [editingBlogPost, setEditingBlogPost] = useState<Partial<BlogPost> | null>(null);
|
||||
const [newFiles, setNewFiles] = useState<File[]>([]);
|
||||
const [currentFiles, setCurrentFiles] = useState<ChallengeFile[]>([]);
|
||||
const [localConf, setLocalConf] = useState<Record<string, string>>({});
|
||||
const initialLoadDone = useRef(false);
|
||||
|
||||
// Sorted data for display
|
||||
const sortedChallenges = useMemo(() => {
|
||||
return [...state.challenges].sort((a, b) => a.title.localeCompare(b.title));
|
||||
}, [state.challenges]);
|
||||
|
||||
const sortedOperators = useMemo(() => {
|
||||
return state.teams
|
||||
.filter(t => t.id !== 'admin-0')
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
}, [state.teams]);
|
||||
|
||||
useEffect(() => {
|
||||
if (Object.keys(state.config).length > 0 && !initialLoadDone.current) {
|
||||
setLocalConf({ ...state.config });
|
||||
initialLoadDone.current = true;
|
||||
}
|
||||
}, [state.config]);
|
||||
|
||||
const importChalRef = useRef<HTMLInputElement>(null);
|
||||
const restoreDbRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleConfigSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const fd = new FormData();
|
||||
Object.entries(localConf).forEach(([k, v]) => {
|
||||
if (v !== undefined && v !== null && v !== 'NaN') fd.append(k, String(v));
|
||||
});
|
||||
const logoInput = (e.target as any).logo;
|
||||
const bgInput = (e.target as any).bgImage;
|
||||
if (logoInput && logoInput.files[0]) fd.append('logo', logoInput.files[0]);
|
||||
if (bgInput && bgInput.files[0]) fd.append('bgImage', bgInput.files[0]);
|
||||
try {
|
||||
await updateConfig(fd);
|
||||
await refreshState();
|
||||
initialLoadDone.current = false;
|
||||
alert('CONFIGURATION_SAVED_SUCCESSFULLY');
|
||||
} catch (err) { alert('SAVE_FAILED_CHECK_CONSOLE'); }
|
||||
};
|
||||
|
||||
const toUTCDisplay = (msStr: string) => {
|
||||
if (!msStr || msStr === 'undefined' || msStr === 'NaN') return "";
|
||||
const ms = parseInt(msStr);
|
||||
if (isNaN(ms)) return "";
|
||||
const d = new Date(ms);
|
||||
return d.toISOString().slice(0, 16);
|
||||
};
|
||||
|
||||
const fromUTCDisplay = (isoStr: string) => {
|
||||
if (!isoStr) return "";
|
||||
const d = new Date(isoStr + ":00Z");
|
||||
const ms = d.getTime();
|
||||
return isNaN(ms) ? "" : ms.toString();
|
||||
};
|
||||
|
||||
const eventStartTime = parseInt(state.config.eventStartTime || "0");
|
||||
const isBeforeStart = Date.now() < eventStartTime;
|
||||
|
||||
const handleDifficultyChange = (val: Difficulty) => {
|
||||
if (!editingChallenge) return;
|
||||
const points = val === 'Low' ? 100 : val === 'Medium' ? 200 : 300;
|
||||
setEditingChallenge({
|
||||
...editingChallenge,
|
||||
difficulty: val,
|
||||
initialPoints: points,
|
||||
minimumPoints: Math.floor(points / 2)
|
||||
});
|
||||
};
|
||||
|
||||
const handleInitialPointsChange = (p: number) => {
|
||||
if (!editingChallenge) return;
|
||||
setEditingChallenge({
|
||||
...editingChallenge,
|
||||
initialPoints: p,
|
||||
minimumPoints: Math.floor(p / 2)
|
||||
});
|
||||
};
|
||||
|
||||
const quickToggleAdmin = async (team: Team) => {
|
||||
if (team.id === 'admin-0') return;
|
||||
await updateTeam(team.id, { ...team, isAdmin: !team.isAdmin });
|
||||
};
|
||||
|
||||
const quickToggleStatus = async (team: Team) => {
|
||||
if (team.id === 'admin-0') return;
|
||||
await updateTeam(team.id, { ...team, isDisabled: !team.isDisabled });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto py-12 px-6">
|
||||
<div className="flex flex-wrap gap-4 justify-between items-center mb-12 border-b-4 border-[#ff0000] pb-6">
|
||||
<h2 className="text-5xl font-black italic text-white uppercase tracking-tighter">ADMIN_CONSOLE</h2>
|
||||
<div className="flex gap-4 items-center">
|
||||
{isBeforeStart && (
|
||||
<div className="px-4 py-2 hxp-border-purple bg-[#bf00ff]/10 hidden sm:flex items-center gap-3">
|
||||
<Countdown target={eventStartTime} label="STARTING IN" />
|
||||
</div>
|
||||
)}
|
||||
<Button onClick={toggleCtf} variant={state.isStarted ? 'secondary' : 'primary'}>{state.isStarted ? 'PAUSE_BOARD' : 'RESUME_BOARD'}</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
<div className="space-y-12">
|
||||
<section className="space-y-6">
|
||||
<h3 className="text-2xl font-black text-[#ffaa00] border-b-2 border-[#ffaa00] uppercase italic">GENERAL_CONFIG</h3>
|
||||
<form onSubmit={handleConfigSubmit} className="hxp-border p-6 bg-white/5 space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Competition Name</label>
|
||||
<input placeholder="Ex: HIPCTF '26" className="w-full bg-black hxp-border p-3 text-white font-black" value={localConf.conferenceName || ''} onChange={e => setLocalConf({...localConf, conferenceName: e.target.value})} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Event Start (UTC)</label>
|
||||
<input type="datetime-local" className="w-full bg-black hxp-border p-3 text-white font-black text-xs" value={toUTCDisplay(localConf.eventStartTime || "")} onChange={e => { const val = fromUTCDisplay(e.target.value); if (val) setLocalConf({...localConf, eventStartTime: val}); }} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Event End (UTC)</label>
|
||||
<input type="datetime-local" className="w-full bg-black hxp-border p-3 text-white font-black text-xs" value={toUTCDisplay(localConf.eventEndTime || "")} onChange={e => { const val = fromUTCDisplay(e.target.value); if (val) setLocalConf({...localConf, eventEndTime: val}); }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Central Node IP</label>
|
||||
<input placeholder="Ex: 10.0.0.5" className="w-full bg-black hxp-border p-3 text-white font-black" value={localConf.dockerIp || ''} onChange={e => setLocalConf({...localConf, dockerIp: e.target.value})} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Landing Page Text</label>
|
||||
<textarea placeholder="Welcome message..." className="w-full bg-black hxp-border p-3 text-white font-black h-24" value={localConf.landingText || ''} onChange={e => setLocalConf({...localConf, landingText: e.target.value})} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Custom Logo</label>
|
||||
<input type="file" name="logo" className="text-xs block w-full bg-black hxp-border p-2" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t-2 border-[#333] pt-6 space-y-4">
|
||||
<h4 className="text-sm font-black text-white italic uppercase tracking-tighter">Background Style</h4>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Type</label>
|
||||
<select className="w-full bg-black hxp-border p-3 text-white font-black" value={localConf.bgType || 'color'} onChange={e => setLocalConf({...localConf, bgType: e.target.value})}>
|
||||
<option value="color">SOLID_COLOR</option>
|
||||
<option value="image">IMAGE_DATA</option>
|
||||
</select>
|
||||
</div>
|
||||
{localConf.bgType === 'color' ? (
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Color</label>
|
||||
<input type="color" className="w-full bg-black hxp-border p-1 h-12" value={localConf.bgColor || '#000000'} onChange={e => setLocalConf({...localConf, bgColor: e.target.value})} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest">Upload</label>
|
||||
<input type="file" name="bgImage" className="text-xs block w-full bg-black hxp-border p-2" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{localConf.bgType === 'image' && (
|
||||
<div className="space-y-4 p-4 hxp-border-purple bg-white/5">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black uppercase text-slate-500 tracking-widest flex justify-between">Opacity <span>{localConf.bgOpacity}</span></label>
|
||||
<input type="range" min="0" max="1" step="0.1" className="w-full accent-[#bf00ff]" value={localConf.bgOpacity || '0.5'} onChange={e => setLocalConf({...localConf, bgOpacity: e.target.value})} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button type="submit" className="w-full py-3">Commit Configuration</Button>
|
||||
</form>
|
||||
</section>
|
||||
<section className="space-y-6">
|
||||
<div className="flex justify-between items-center border-b-2 border-[#bf00ff]"><h3 className="text-2xl font-black text-[#bf00ff] uppercase italic">CHALLENGES</h3><div className="flex gap-2"><Button onClick={() => { setEditingChallenge({ title: '', category: 'WEB', difficulty: 'Low', initialPoints: 100, minimumPoints: 50, decaySolves: 20, flag: '', description: '', files: [], port: 0, connectionType: 'nc', overrideIp: '' }); setCurrentFiles([]); setNewFiles([]); }} className="text-xs">NEW_CHAL</Button></div></div>
|
||||
<div className="space-y-2 max-h-[500px] overflow-y-auto custom-scrollbar">
|
||||
{sortedChallenges.map(c => {
|
||||
const diffColor = c.difficulty === 'Low' ? 'text-[#00ff00]' : c.difficulty === 'Medium' ? 'text-[#ffaa00]' : 'text-[#ff0000]';
|
||||
return (
|
||||
<div key={c.id} className="hxp-border-purple p-3 flex justify-between items-center bg-white/5 hover:bg-white/10 transition-colors gap-4">
|
||||
<div className="flex items-center gap-3 min-w-0 flex-1">
|
||||
<div className="shrink-0 opacity-70">
|
||||
<CategoryIcon category={c.category} size={14} />
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 min-w-0">
|
||||
<span className="font-black text-white uppercase italic whitespace-normal leading-tight">{c.title}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`text-[9px] font-black uppercase ${diffColor} px-1.5 border border-current opacity-80 h-4 flex items-center`}>{c.difficulty}</span>
|
||||
<span className="text-[9px] font-black uppercase text-[#00ccff] px-1.5 border border-[#00ccff]/50 h-4 flex items-center bg-[#00ccff]/5">
|
||||
{c.connectionType || 'nc'}{c.port && c.port > 0 ? `:${c.port}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<button onClick={() => { setEditingChallenge(c); setCurrentFiles(c.files || []); setNewFiles([]); }} className="text-[#bf00ff] hover:text-white transition-colors" title="Edit Challenge"><Edit3 size={16}/></button>
|
||||
<button onClick={() => deleteChallenge(c.id)} className="text-red-500 hover:text-white transition-colors" title="Delete Challenge"><Trash2 size={16}/></button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{sortedChallenges.length === 0 && (
|
||||
<div className="p-10 text-center text-slate-700 font-black italic uppercase tracking-widest text-xs">No challenges in database.</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className="space-y-12">
|
||||
<section className="space-y-6">
|
||||
<div className="flex justify-between items-center border-b-2 border-[#ff0000]"><h3 className="text-2xl font-black text-[#ff0000] uppercase italic">BLOGS</h3><Button onClick={() => setEditingBlogPost({ title: '', content: '' })} className="text-xs">NEW_POST</Button></div>
|
||||
<div className="space-y-2 max-h-48 overflow-y-auto custom-scrollbar">
|
||||
{state.blogs.map(post => (
|
||||
<div key={post.id} className="hxp-border p-3 flex justify-between bg-white/5 hover:bg-white/10 transition-colors"><span className="truncate w-40 font-black uppercase italic">{post.title}</span><div className="flex gap-2"><button onClick={() => setEditingBlogPost(post)} className="text-[#bf00ff] hover:text-white"><Edit3 size={16}/></button><button onClick={() => deleteBlogPost(post.id)} className="text-red-500 hover:text-white"><Trash2 size={16}/></button></div></div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h3 className="text-2xl font-black text-[#00ccff] border-b-2 border-[#00ccff] uppercase italic">BACKUP_RESTORE</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Button onClick={async () => {
|
||||
const data = await exportChallenges();
|
||||
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a'); a.href = url; a.download = `challenges-${Date.now()}.json`; a.click();
|
||||
}} className="w-full text-xs py-3">EXPORT_CHAL</Button>
|
||||
<Button onClick={() => importChalRef.current?.click()} className="w-full text-xs py-3" variant="secondary">IMPORT_CHAL</Button>
|
||||
<input type="file" ref={importChalRef} className="hidden" accept=".json" onChange={async e => { if (e.target.files?.[0]) { await importChallenges(e.target.files[0]); alert('CHALLENGES_IMPORTED'); } }} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Button onClick={async () => {
|
||||
const data = await backupDatabase();
|
||||
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a'); a.href = url; a.download = `ctf_backup-${Date.now()}.json`; a.click();
|
||||
}} className="w-full text-xs py-3 border-[#ffaa00] text-[#ffaa00] hover:bg-[#ffaa00] hover:text-black">BACKUP_DB</Button>
|
||||
<Button onClick={() => restoreDbRef.current?.click()} className="w-full text-xs py-3 border-[#00ff00] text-[#00ff00] hover:bg-[#00ff00] hover:text-black" variant="secondary">RESTORE_DB</Button>
|
||||
<input type="file" ref={restoreDbRef} className="hidden" accept=".json" onChange={async e => { if (e.target.files?.[0] && window.confirm("CRITICAL_OVERWRITE: RESTORE WILL WIPE CURRENT DATA. PROCEED?")) { await restoreDatabase(e.target.files[0]); window.location.reload(); } }} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<h3 className="text-2xl font-black text-[#bf00ff] border-b-2 border-[#bf00ff] uppercase italic">OPERATORS</h3>
|
||||
<div className="hxp-border border-2 overflow-hidden bg-black">
|
||||
<table className="w-full text-[10px] font-black">
|
||||
<thead className="bg-[#333] uppercase">
|
||||
<tr>
|
||||
<th className="p-3 text-left">TEAM_IDENTIFIER</th>
|
||||
<th className="p-3 text-center">ROLE</th>
|
||||
<th className="p-3 text-center">STATUS</th>
|
||||
<th className="p-3 text-right">ACTIONS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-white/10 italic">
|
||||
{sortedOperators.map(team => (
|
||||
<tr key={team.id} className="hover:bg-white/5 transition-colors group">
|
||||
<td className="p-3 text-white text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<User size={14} className="text-slate-500" />
|
||||
{team.name}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-3 text-center uppercase">
|
||||
<button
|
||||
onClick={() => quickToggleAdmin(team)}
|
||||
className={`flex items-center gap-1 mx-auto px-2 py-1 border transition-all ${team.isAdmin ? 'border-[#ffaa00] text-[#ffaa00] bg-[#ffaa00]/10' : 'border-slate-700 text-slate-500 hover:border-[#bf00ff] hover:text-[#bf00ff]'}`}
|
||||
title={team.isAdmin ? "Revoke Admin Privileges" : "Grant Admin Privileges"}
|
||||
>
|
||||
{team.isAdmin ? <ShieldCheck size={12} /> : <Shield size={12} />}
|
||||
<span>{team.isAdmin ? 'ADMIN' : 'OPERATOR'}</span>
|
||||
</button>
|
||||
</td>
|
||||
<td className="p-3 text-center uppercase">
|
||||
<button
|
||||
onClick={() => quickToggleStatus(team)}
|
||||
className={`flex items-center gap-1 mx-auto px-2 py-1 border transition-all ${team.isDisabled ? 'border-red-500 text-red-500 bg-red-500/10' : 'border-slate-700 text-[#00ff00] hover:bg-[#00ff00]/5'}`}
|
||||
title={team.isDisabled ? "Enable Account" : "Disable Account"}
|
||||
>
|
||||
{team.isDisabled ? <UserMinus size={12} /> : <UserCheck size={12} />}
|
||||
<span>{team.isDisabled ? 'BANNED' : 'ACTIVE'}</span>
|
||||
</button>
|
||||
</td>
|
||||
<td className="p-3 text-right">
|
||||
<div className="flex justify-end gap-3 opacity-60 group-hover:opacity-100 transition-opacity">
|
||||
<button onClick={() => setEditingTeam(team)} className="text-[#bf00ff] hover:text-white transition-colors" title="Full Edit"><Edit3 size={16} /></button>
|
||||
<button onClick={() => deleteTeam(team.id)} className="text-red-500 hover:text-white transition-colors" title="Delete Identity"><Trash2 size={16} /></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{sortedOperators.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={4} className="p-10 text-center text-slate-700 font-black italic uppercase tracking-widest text-xs">No registered operators detected.</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="space-y-6">
|
||||
<div className="flex items-center gap-3 border-b-2 border-[#ff0000]"><Skull className="text-[#ff0000]" size={24} /><h3 className="text-2xl font-black text-[#ff0000] uppercase italic">DANGER_ZONE</h3></div>
|
||||
<div className="hxp-border border-[#ff0000] bg-red-900/10 p-6 space-y-4">
|
||||
<Button onClick={resetScores} className="w-full text-xs py-3 bg-black text-[#ff0000] border-[#ff0000] hover:bg-[#ff0000] hover:text-black">RESET_ALL_SCORES</Button>
|
||||
<Button onClick={deleteAllChallenges} className="w-full text-xs py-3 bg-black text-[#ff0000] border-[#ff0000] hover:bg-[#ff0000] hover:text-black">WIPE_ALL_CHALLENGES</Button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editingChallenge && (
|
||||
<div className="fixed inset-0 bg-black/95 z-[400] flex items-center justify-center p-4">
|
||||
<div className="hxp-border border-4 max-w-2xl w-full bg-black p-8 overflow-y-auto max-h-[90vh] custom-scrollbar relative">
|
||||
<button onClick={() => setEditingChallenge(null)} className="absolute top-4 right-4 text-white hover:text-red-500 transition-colors"><X size={24}/></button>
|
||||
<h3 className="text-3xl font-black italic text-white mb-8 uppercase">MANAGE_CHALLENGE</h3>
|
||||
<form onSubmit={async e => {
|
||||
e.preventDefault();
|
||||
const fd = new FormData();
|
||||
Object.entries(editingChallenge).forEach(([k,v]) => { if (v !== null && v !== undefined && typeof v !== 'object') fd.append(k, String(v)); });
|
||||
fd.append('existingFiles', JSON.stringify(currentFiles));
|
||||
newFiles.forEach(f => fd.append('files', f));
|
||||
await upsertChallenge(fd, editingChallenge.id);
|
||||
setEditingChallenge(null);
|
||||
}} className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<input placeholder="CHALLENGE_TITLE" className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.title} onChange={e => setEditingChallenge({...editingChallenge, title: e.target.value})} required />
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase">Category</label>
|
||||
<select className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.category} onChange={e => setEditingChallenge({...editingChallenge, category: e.target.value})}>{CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}</select>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase">Difficulty</label>
|
||||
<select className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingChallenge.difficulty} onChange={e => handleDifficultyChange(e.target.value as Difficulty)}>{DIFFICULTIES.map(d => <option key={d} value={d}>{d}</option>)}</select>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase">Initial Pts</label>
|
||||
<input type="number" className="w-full bg-black hxp-border-purple p-2 text-white font-black" value={editingChallenge.initialPoints} onChange={e => handleInitialPointsChange(parseInt(e.target.value) || 0)} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest block mb-1">Minimum Points (50% Auto)</label>
|
||||
<input type="number" placeholder="MIN POINTS" className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingChallenge.minimumPoints} onChange={e => setEditingChallenge({...editingChallenge, minimumPoints: parseInt(e.target.value)})} />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase tracking-widest block mb-1">Decay Solves</label>
|
||||
<input type="number" placeholder="DECAY LIMIT" className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingChallenge.decaySolves} onChange={e => setEditingChallenge({...editingChallenge, decaySolves: parseInt(e.target.value)})} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hxp-border border-[#00ccff] p-4 bg-[#00ccff]/5 space-y-4">
|
||||
<h4 className="text-xs font-black text-[#00ccff] uppercase flex items-center gap-2"><Globe size={14}/> Connection Settings</h4>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-[#00ccff]/70 uppercase">Protocol</label>
|
||||
<select className="w-full bg-black hxp-border border-[#00ccff]/30 p-2 text-white font-black" value={editingChallenge.connectionType || 'nc'} onChange={e => setEditingChallenge({...editingChallenge, connectionType: e.target.value as any})}>
|
||||
<option value="nc">NC (NETCAT)</option>
|
||||
<option value="http">HTTP (WEB)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-[#00ccff]/70 uppercase">Port</label>
|
||||
<input type="number" placeholder="0 = None" className="w-full bg-black hxp-border border-[#00ccff]/30 p-2 text-white font-black" value={editingChallenge.port || 0} onChange={e => setEditingChallenge({...editingChallenge, port: parseInt(e.target.value) || 0})} />
|
||||
</div>
|
||||
<div className="space-y-1 col-span-2 md:col-span-1">
|
||||
<label className="text-[10px] font-black text-[#00ccff]/70 uppercase">Node IP Override</label>
|
||||
<input placeholder="Optional" className="w-full bg-black hxp-border border-[#00ccff]/30 p-2 text-white font-black" value={editingChallenge.overrideIp || ''} onChange={e => setEditingChallenge({...editingChallenge, overrideIp: e.target.value})} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase">Flag Protocol</label>
|
||||
<input placeholder="FLAG_PROTOCOL" className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingChallenge.flag} onChange={e => setEditingChallenge({...editingChallenge, flag: e.target.value})} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-slate-500 uppercase">Challenge Intel</label>
|
||||
<textarea placeholder="DESCRIPTION" className="w-full bg-black hxp-border-purple p-3 text-white font-black h-32" value={editingChallenge.description} onChange={e => setEditingChallenge({...editingChallenge, description: e.target.value})} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t-2 border-[#333] pt-6 space-y-4">
|
||||
<h4 className="text-sm font-black text-white italic uppercase tracking-tighter flex items-center gap-2"><Upload size={14} /> File Management</h4>
|
||||
<div className="space-y-3">
|
||||
{currentFiles.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<label className="text-[8px] font-black text-slate-500 uppercase">Existing Assets</label>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{currentFiles.map((f, i) => (
|
||||
<div key={i} className="flex justify-between items-center bg-white/5 hxp-border-purple p-2 text-[10px] font-bold">
|
||||
<span className="truncate flex-1 text-slate-300">{f.name}</span>
|
||||
<button type="button" onClick={() => setCurrentFiles(currentFiles.filter((_, idx) => idx !== i))} className="text-red-500 hover:text-white transition-colors ml-2"><Trash2 size={14}/></button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{newFiles.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<label className="text-[8px] font-black text-[#bf00ff] uppercase">Pending Uploads</label>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
{newFiles.map((f, i) => (
|
||||
<div key={i} className="flex justify-between items-center bg-[#bf00ff]/5 border border-[#bf00ff]/30 p-2 text-[10px] font-bold">
|
||||
<span className="truncate flex-1 text-[#bf00ff] italic">{f.name}</span>
|
||||
<button type="button" onClick={() => setNewFiles(newFiles.filter((_, idx) => idx !== i))} className="text-red-500 hover:text-white transition-colors ml-2"><Trash2 size={14}/></button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="flex-1 cursor-pointer bg-white/5 hxp-border-purple border-dashed p-4 flex flex-col items-center justify-center hover:bg-white/10 transition-colors">
|
||||
<Plus size={24} className="text-[#bf00ff] mb-2" />
|
||||
<span className="text-[10px] font-black text-[#bf00ff] uppercase">Select Assets</span>
|
||||
<input type="file" multiple className="hidden" onChange={e => { if (e.target.files) setNewFiles([...newFiles, ...Array.from(e.target.files)]); }} />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button type="submit" className="flex-1 py-4 uppercase text-lg">Commit Challenge</Button>
|
||||
<Button type="button" variant="secondary" onClick={() => { if(window.confirm("RESET_TO_DEFAULTS?")) handleDifficultyChange(editingChallenge.difficulty || 'Low'); }} className="px-4" title="Restore Defaults"><History size={20}/></Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editingTeam && (
|
||||
<div className="fixed inset-0 bg-black/95 z-[400] flex items-center justify-center p-4">
|
||||
<div className="hxp-border border-4 max-md w-full max-w-md bg-black p-8 relative">
|
||||
<button onClick={() => setEditingTeam(null)} className="absolute top-4 right-4 text-white hover:text-red-500 transition-colors"><X size={24}/></button>
|
||||
<h3 className="text-3xl font-black italic text-white mb-8 uppercase">OPERATOR_PROFILE</h3>
|
||||
<form onSubmit={async e => { e.preventDefault(); await updateTeam(editingTeam.id as string, { name: editingTeam.name, isDisabled: editingTeam.isDisabled, isAdmin: editingTeam.isAdmin, password: editingTeam.newPassword }); setEditingTeam(null); }} className="space-y-4">
|
||||
<input className="w-full bg-black hxp-border-purple p-3 text-white font-black" value={editingTeam.name} onChange={e => setEditingTeam({...editingTeam, name: e.target.value})} required />
|
||||
<input type="password" placeholder="UPDATE SECRET_KEY (OPTIONAL)" className="w-full bg-black hxp-border-purple p-3 text-white font-black" onChange={e => setEditingTeam({...editingTeam, newPassword: e.target.value})} />
|
||||
<div className="flex gap-8 py-2">
|
||||
<label className="flex items-center gap-2 cursor-pointer font-black text-xs uppercase"><input type="checkbox" className="w-4 h-4 bg-black border-2 border-[#bf00ff]" checked={!!editingTeam.isAdmin} onChange={e => setEditingTeam({...editingTeam, isAdmin: e.target.checked})} /> Elevate to Admin</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer font-black text-xs uppercase"><input type="checkbox" className="w-4 h-4 bg-black border-2 border-[#ff0000]" checked={!!editingTeam.isDisabled} onChange={e => setEditingTeam({...editingTeam, isDisabled: e.target.checked})} /> Disable Identity</label>
|
||||
</div>
|
||||
<Button type="submit" className="w-full py-4 uppercase">Update Identity</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{editingBlogPost && (
|
||||
<div className="fixed inset-0 bg-black/95 z-[400] flex items-center justify-center p-4">
|
||||
<div className="hxp-border border-4 max-w-2xl w-full bg-black p-8 relative">
|
||||
<button onClick={() => setEditingBlogPost(null)} className="absolute top-4 right-4 text-white hover:text-red-500 transition-colors"><X size={24}/></button>
|
||||
<h3 className="text-3xl font-black italic text-white mb-8 uppercase">GLOBAL_BROADCAST</h3>
|
||||
<form onSubmit={async e => { e.preventDefault(); if (editingBlogPost.id) await updateBlogPost(editingBlogPost.id, editingBlogPost as any); else await createBlogPost(editingBlogPost as any); setEditingBlogPost(null); }} className="space-y-4">
|
||||
<input placeholder="HEADLINE" className="w-full bg-black hxp-border-purple p-3 text-white font-black uppercase" value={editingBlogPost.title} onChange={e => setEditingBlogPost({...editingBlogPost, title: e.target.value})} required />
|
||||
<textarea placeholder="BROADCAST_CONTENT" className="w-full bg-black hxp-border-purple p-3 text-white font-black h-48 italic" value={editingBlogPost.content} onChange={e => setEditingBlogPost({...editingBlogPost, content: e.target.value})} required />
|
||||
<Button type="submit" className="w-full py-4 uppercase">Publish Broadcast</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user