145 lines
6.8 KiB
TypeScript
145 lines
6.8 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import { Hexagon, UploadCloud, Mail, Lock, User, ShieldCheck } from 'lucide-react';
|
|
import Head from 'next/head';
|
|
|
|
export default function RegisterPage() {
|
|
const router = useRouter();
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
|
|
const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError('');
|
|
|
|
const formData = new FormData(e.currentTarget);
|
|
const username = formData.get('username') as string;
|
|
const email = formData.get('email') as string;
|
|
const password = formData.get('password') as string;
|
|
const confirmPassword = formData.get('confirmPassword') as string;
|
|
|
|
if (password !== confirmPassword) {
|
|
setError('Passwords do not match');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/v1/auth/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, email, password })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// Also set REAL mode after successful registration
|
|
localStorage.setItem('NEXUS_DATA_MODE', 'REAL');
|
|
router.push('/');
|
|
} else {
|
|
setError(data.error || 'Registration failed');
|
|
}
|
|
} catch (err) {
|
|
setError('Network error. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center relative overflow-hidden bg-[#020202]">
|
|
<Head>
|
|
<title>NEXUS_MAT.OS</title>
|
|
</Head>
|
|
|
|
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"></div>
|
|
<div className="absolute bottom-0 right-0 w-[600px] h-[600px] bg-cyber-pink/5 rounded-full blur-[100px] pointer-events-none"></div>
|
|
|
|
<div className="w-full max-w-lg p-8 relative z-10">
|
|
<div className="mb-8 text-center">
|
|
<h1 className="text-3xl font-mono font-bold text-white mb-2">JOIN_NETWORK</h1>
|
|
<p className="text-xs text-gray-500 font-mono">ESTABLISH NEW NEURAL LINK</p>
|
|
</div>
|
|
|
|
<div className="bg-cyber-panel/40 backdrop-blur-md border border-white/10 p-8 rounded-lg shadow-2xl">
|
|
<form onSubmit={handleRegister} className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-mono text-gray-400">USERNAME</label>
|
|
<div className="relative">
|
|
<input
|
|
name="username"
|
|
type="text"
|
|
className="w-full bg-black/50 border border-gray-800 focus:border-cyber-pink text-white p-2.5 pl-8 rounded-sm outline-none font-mono text-sm"
|
|
required
|
|
/>
|
|
<User className="absolute left-2.5 top-3 text-gray-600 w-3 h-3" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-mono text-gray-400">EMAIL</label>
|
|
<div className="relative">
|
|
<input
|
|
name="email"
|
|
type="email"
|
|
className="w-full bg-black/50 border border-gray-800 focus:border-cyber-pink text-white p-2.5 pl-8 rounded-sm outline-none font-mono text-sm"
|
|
required
|
|
/>
|
|
<Mail className="absolute left-2.5 top-3 text-gray-600 w-3 h-3" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-mono text-gray-400">PASSWORD</label>
|
|
<div className="relative">
|
|
<input
|
|
name="password"
|
|
type="password"
|
|
className="w-full bg-black/50 border border-gray-800 focus:border-cyber-pink text-white p-2.5 pl-8 rounded-sm outline-none font-mono text-sm"
|
|
required
|
|
/>
|
|
<Lock className="absolute left-2.5 top-3 text-gray-600 w-3 h-3" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-[10px] font-mono text-gray-400">CONFIRM_PASSWORD</label>
|
|
<div className="relative">
|
|
<input
|
|
name="confirmPassword"
|
|
type="password"
|
|
className="w-full bg-black/50 border border-gray-800 focus:border-cyber-pink text-white p-2.5 pl-8 rounded-sm outline-none font-mono text-sm"
|
|
required
|
|
/>
|
|
<ShieldCheck className="absolute left-2.5 top-3 text-gray-600 w-3 h-3" />
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-900/20 border border-red-500 text-red-500 p-3 rounded text-xs font-mono">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full bg-cyber-pink text-white font-bold py-3 mt-4 hover:bg-white hover:text-black transition-colors font-mono uppercase tracking-wider shadow-[0_0_15px_rgba(255,0,85,0.3)]"
|
|
>
|
|
{loading ? 'PROCESSING...' : 'CREATE_ACCOUNT'}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-6 text-center text-xs font-mono text-gray-500">
|
|
ALREADY LINKED? <Link href="/auth/login" className="text-cyber-pink hover:underline">ACCESS_TERMINAL</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|