Made app more modular.

Fixed some bugs.
Added some functionality.

Auth.tsx

@@ -0,0 +1,127 @@
+
+import React, { useState, useEffect } from 'react';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
+import { RefreshCw } from 'lucide-react';
+import { useCTF } from './CTFContext';
+import { Button } from './UIComponents';
+
+export const Login: React.FC = () => {
+  const { login } = useCTF();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [name, setName] = useState('');
+  const [pass, setPass] = useState('');
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (await login(name, pass)) {
+      const from = (location.state as any)?.from?.pathname || '/';
+      navigate(from, { replace: true });
+    } else setError('ACCESS_DENIED: INVALID_CREDENTIALS');
+  };
+
+  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>
+          <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 />
+            {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>
+          </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>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Register: React.FC = () => {
+  const { register } = useCTF();
+  const navigate = useNavigate();
+  const [name, setName] = useState('');
+  const [pass, setPass] = useState('');
+  const [error, setError] = useState('');
+  
+  // CAPTCHA State
+  const [captchaQ, setCaptchaQ] = useState('');
+  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));
+    }
+    setCaptchaQ(result);
+    setCaptchaInput('');
+  };
+
+  useEffect(() => {
+    generateCaptcha();
+  }, []);
+
+  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;
+    }
+
+    try {
+      await register(name, pass);
+      navigate('/challenges');
+    } catch (err: any) { 
+      setError(err.message || 'REGISTRATION_FAILED'); 
+      generateCaptcha();
+    }
+  };
+
+  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-[#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 />
+            </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 />
+            </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">
+                  <RefreshCw size={14} />
+                </button>
+              </div>
+              <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 text-[10px]">{error}</p>}
+            <Button type="submit" className="w-full py-4 text-xl uppercase">Create Identity</Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};