TSM.ID
321 lines
17 KiB
TypeScript
321 lines
17 KiB
TypeScript
/* eslint-disable */
|
|
// @ts-nocheck
|
|
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useDictionary } from "@/lib/dictionary";
|
|
import { io, Socket } from "@/lib/zero-socket";
|
|
import { useOmni } from "@/components/OmniSyncProvider";
|
|
|
|
export default function Home() {
|
|
const { t } = useDictionary();
|
|
const { theme, setTheme, locale, setLocale } = useOmni();
|
|
|
|
const [isRegister, setIsRegister] = useState(false);
|
|
const [loginMode, setLoginMode] = useState<'email' | 'qr'>('email');
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [errorMsg, setErrorMsg] = useState("");
|
|
const [successMsg, setSuccessMsg] = useState("");
|
|
const [qrScanned, setQrScanned] = useState(false);
|
|
const [qrSessionId, setQrSessionId] = useState("");
|
|
|
|
// 1. Quantum QR Sync
|
|
useEffect(() => {
|
|
if (loginMode === 'qr' && !qrSessionId) {
|
|
const sessionId = (crypto.getRandomValues(new Uint32Array(1))[0] % 900000 + 100000).toString();
|
|
setQrSessionId(sessionId);
|
|
|
|
const socket: Socket = io(typeof window !== 'undefined' ? window.location.origin : '');
|
|
|
|
socket.on("connect", () => {
|
|
socket.emit("qr_auth_init", { sessionId });
|
|
});
|
|
|
|
socket.on("qr_auth_approved", async (data: unknown) => {
|
|
const payload = data as { signature: string; email: string };
|
|
setQrScanned(true);
|
|
setSuccessMsg("Quantum Sync Approved! Verifying Handshake...");
|
|
|
|
try {
|
|
const res = await fetch('/api/auth/qr-auth', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
sessionId: sessionId,
|
|
signature: payload.signature,
|
|
email: payload.email
|
|
})
|
|
});
|
|
const verifyData = await res.json();
|
|
|
|
if (verifyData.token) {
|
|
setSuccessMsg("Handshake Valid! Accessing Multiverse...");
|
|
setTimeout(() => {
|
|
window.location.href = `/${locale}/dashboard?auth_token=${verifyData.token}`;
|
|
}, 1000);
|
|
} else {
|
|
setErrorMsg("Verification Failed: Invalid Quantum Signature.");
|
|
setQrScanned(false);
|
|
}
|
|
} catch (_e) {
|
|
setErrorMsg("Connection to Crypto Vault Interrupted.");
|
|
setQrScanned(false);
|
|
}
|
|
});
|
|
|
|
return () => { socket.disconnect(); };
|
|
}
|
|
}, [loginMode, qrSessionId, locale]);
|
|
|
|
// 2. Auth Actions
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setErrorMsg("");
|
|
setSuccessMsg("");
|
|
|
|
const endpoint = isRegister ? '/api/auth/register' : '/api/auth/login';
|
|
|
|
try {
|
|
const res = await fetch(endpoint, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password })
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
setErrorMsg(data.error || 'Authentication Failed');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
setSuccessMsg(isRegister ? "Registration Successful! Constructing Identity..." : "Identity Verified! Syncing Neural Path...");
|
|
|
|
setTimeout(() => {
|
|
if (data.user && data.user.role === 'superadmin') {
|
|
window.location.href = '/supreme-admin';
|
|
} else if (data.user && data.user.role === 'admin') {
|
|
window.location.href = '/admin';
|
|
} else {
|
|
window.location.href = '/dashboard';
|
|
}
|
|
}, 800);
|
|
|
|
} catch (_err) {
|
|
setErrorMsg('Quantum Tunnel to Database Lost.');
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen relative overflow-hidden flex flex-col items-center justify-center p-6 selection:bg-emerald-500/30">
|
|
|
|
{/* 🌌 QUANTUM MESH BACKGROUND (Innovative Technology) */}
|
|
<div className="quantum-mesh" />
|
|
|
|
{/* Header Bar - Zoom Style Minimalist */}
|
|
<header className="fixed top-0 w-full h-20 px-8 flex items-center justify-between z-50 bg-black/10 backdrop-blur-md border-b border-white/5">
|
|
<div className="flex items-center gap-3 group cursor-pointer">
|
|
<div className="w-10 h-10 bg-emerald-600 rounded-xl flex items-center justify-center shadow-[0_0_20px_rgba(16,185,129,0.4)] group-hover:scale-110 transition-transform">
|
|
<svg className="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M4 4h10a2 2 0 0 1 2 2v3.5l4-3v11l-4-3V18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"></path></svg>
|
|
</div>
|
|
<span className="text-xl font-black tracking-tighter text-white uppercase italic">JUMPA.ID <span className="text-emerald-500 not-italic">MESH</span></span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6">
|
|
{/* Multi-Language Switcher */}
|
|
<div className="flex bg-white/5 p-1 rounded-xl border border-white/10">
|
|
<button onClick={() => setLocale('id')} className={`px-3 py-1 text-[10px] font-black rounded-lg transition-all ${locale === 'id' ? 'bg-emerald-600 text-black shadow-lg' : 'text-white/40 hover:text-white'}`}>ID</button>
|
|
<button onClick={() => setLocale('en')} className={`px-3 py-1 text-[10px] font-black rounded-lg transition-all ${locale === 'en' ? 'bg-emerald-600 text-black shadow-lg' : 'text-white/40 hover:text-white'}`}>EN</button>
|
|
</div>
|
|
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} className="text-white/40 hover:text-white transition-colors">
|
|
{theme === 'dark' ? (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clipRule="evenodd"></path></svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* 🛡️ MAIN LOGIN CARD - SPECTACULAR WEDDING OF DESIGN */}
|
|
<div className="relative z-10 w-full max-w-[440px] animate-in fade-in slide-in-from-bottom-8 duration-700">
|
|
|
|
{/* Top Status Indicators (WhatsApp Style) */}
|
|
<div className="flex justify-center mb-8">
|
|
<div className="bg-emerald-950/30 border border-emerald-500/20 backdrop-blur-xl px-4 py-1.5 rounded-full flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_10px_#10b981]"></div>
|
|
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-emerald-500">Quantum Vault Synchronized</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="glass-card p-10">
|
|
<div className="text-center mb-10">
|
|
<h2 className="text-4xl font-black text-white tracking-tighter mb-2">
|
|
{isRegister ? t("Index.initialize_account") : t("Index.title")}
|
|
</h2>
|
|
<p className="text-slate-400 text-sm font-medium">{t("Index.subtitle")}</p>
|
|
</div>
|
|
|
|
{!isRegister && (
|
|
<div className="flex bg-white/5 p-1 rounded-2xl border border-white/10 mb-8">
|
|
<button
|
|
onClick={() => setLoginMode('email')}
|
|
className={`flex-1 py-3 text-xs font-black uppercase tracking-widest rounded-xl transition-all ${loginMode === 'email' ? 'bg-white text-black shadow-xl scale-100' : 'text-slate-500 hover:text-white'}`}
|
|
>
|
|
{t("Index.credentials")}
|
|
</button>
|
|
<button
|
|
onClick={() => setLoginMode('qr')}
|
|
className={`flex-1 py-3 text-xs font-black uppercase tracking-widest rounded-xl transition-all flex items-center justify-center gap-2 ${loginMode === 'qr' ? 'bg-white text-black shadow-xl scale-100' : 'text-slate-500 hover:text-white'}`}
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm14 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path></svg>
|
|
{t("Index.quantum_qr")}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{loginMode === 'email' || isRegister ? (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{errorMsg && (
|
|
<div className="bg-red-500/10 border border-red-500/20 text-red-500 p-4 rounded-2xl text-xs text-center font-bold uppercase tracking-widest animate-shake">
|
|
{errorMsg}
|
|
</div>
|
|
)}
|
|
{successMsg && (
|
|
<div className="bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 p-4 rounded-2xl text-xs text-center font-bold uppercase tracking-widest animate-pulse">
|
|
{successMsg}
|
|
</div>
|
|
)}
|
|
|
|
<div className="group relative">
|
|
<input
|
|
type="email" required
|
|
className="w-full input-ambient rounded-2xl px-5 py-4 text-[15px] placeholder-slate-500 font-medium"
|
|
placeholder={t("Index.email_placeholder")}
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
<div className="absolute right-5 top-1/2 -translate-y-1/2 text-slate-600 group-focus-within:text-emerald-500 transition-colors">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="group relative">
|
|
<input
|
|
type="password" required minLength={6}
|
|
className="w-full input-ambient rounded-2xl px-5 py-4 text-[15px] placeholder-slate-500 font-medium"
|
|
placeholder={t("Index.password_placeholder")}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
<div className="absolute right-5 top-1/2 -translate-y-1/2 text-slate-600 group-focus-within:text-emerald-500 transition-colors">
|
|
<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd"></path></svg>
|
|
</div>
|
|
</div>
|
|
|
|
{!isRegister && (
|
|
<div className="flex items-center justify-between text-[11px] px-1 font-black uppercase tracking-widest">
|
|
<label className="flex items-center text-slate-500 gap-3 cursor-pointer hover:text-white transition-colors">
|
|
<input type="checkbox" className="rounded-lg border-white/10 bg-white/5 text-emerald-500 focus:ring-emerald-500 w-5 h-5 transition-all" />
|
|
<span>{t("Index.persistent_session")}</span>
|
|
</label>
|
|
<a href="#" className="text-emerald-500 hover:text-white transition-colors">{t("Index.reset_key")}</a>
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className={`w-full btn-ultra rounded-2xl py-5 flex items-center justify-center gap-3 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
|
|
>
|
|
{loading ? (
|
|
<div className="w-6 h-6 border-4 border-black/20 border-t-black rounded-full animate-spin"></div>
|
|
) : (
|
|
<>
|
|
<span>{isRegister ? t("Index.initialize_account") : t("Index.enter_multiverse")}</span>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center py-4 animate-in fade-in zoom-in duration-500">
|
|
<div className="relative w-56 h-56 p-4 rounded-[40px] bg-white/5 border border-white/10 mb-8 flex items-center justify-center overflow-hidden group">
|
|
{/* SCANNING LASER EFFECT */}
|
|
<div className="absolute top-0 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_#10b981] animate-[scan_3s_linear_infinite] z-20"></div>
|
|
|
|
<div className="w-full h-full rounded-[30px] bg-black/40 flex flex-col items-center justify-center relative z-10 border border-white/5">
|
|
{!qrScanned ? (
|
|
<>
|
|
<div className="text-[10px] text-emerald-500 mb-2 font-black tracking-[0.4em] uppercase">QUANTUM SESSION</div>
|
|
<div className="text-3xl text-white font-black tracking-[0.2em]">{qrSessionId || '••••••'}</div>
|
|
<div className="mt-4 flex gap-1">
|
|
{[...Array(6)].map((_,i) => <div key={i} className="w-1.5 h-1.5 bg-emerald-500/20 rounded-full animate-pulse" style={{animationDelay: `${i*0.2}s`}}></div>)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center text-emerald-500 animate-in zoom-in scale-110">
|
|
<svg className="w-20 h-20 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
<span className="font-black tracking-[0.5em] text-xs uppercase">CONNECTED</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-2xl font-black text-white mb-2 tracking-tighter">{t("Index.instant_sync")}</h3>
|
|
<p className="text-slate-500 text-[13px] text-center max-w-[280px] leading-relaxed font-medium">
|
|
{t("Index.scan_instructions")}
|
|
</p>
|
|
{qrScanned && <p className="text-emerald-500 font-black text-[10px] mt-6 animate-pulse uppercase tracking-[0.3em]">Neural Handshake in Progress...</p>}
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-12 pt-8 border-t border-white/5 text-center text-[11px] font-black uppercase tracking-widest">
|
|
<span className="text-slate-600">
|
|
{isRegister ? t("Index.known_identity") : t("Index.new_to_multiverse")}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => { setIsRegister(!isRegister); setErrorMsg(""); setSuccessMsg(""); setLoginMode('email'); }}
|
|
className="ml-3 text-emerald-500 hover:text-white transition-all hover:scale-105"
|
|
>
|
|
{isRegister ? t("Index.sign_in") : t("Index.access_now")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer Info */}
|
|
<div className="mt-12 text-center text-[10px] text-slate-600 font-black uppercase tracking-[0.4em] space-y-4">
|
|
<p className="hover:text-slate-400 transition-colors">Enterprise Quantum Mesh Node #Alpha</p>
|
|
<div className="flex justify-center gap-8 text-slate-700">
|
|
<a href="#" className="hover:text-emerald-500 transition-colors">Protocol</a>
|
|
<a href="#" className="hover:text-emerald-500 transition-colors">Sovereignty</a>
|
|
<a href="#" className="hover:text-emerald-500 transition-colors">Neural Sync</a>
|
|
</div>
|
|
<p className="opacity-30">© 2026 JUMPA.ID | XCom Ultra Engine v2.0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<style jsx>{`
|
|
@keyframes scan {
|
|
0%, 100% { top: 0; }
|
|
50% { top: 100%; }
|
|
}
|
|
@keyframes shake {
|
|
0%, 100% { transform: translateX(0); }
|
|
25% { transform: translateX(-5px); }
|
|
75% { transform: translateX(5px); }
|
|
}
|
|
.animate-shake {
|
|
animation: shake 0.4s ease-in-out;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
}
|