593 lines
24 KiB
TypeScript
593 lines
24 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { useAuth } from '../store/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { ShieldCheck, Mail, Lock, Sparkles, ArrowRight, Eye, EyeOff, RefreshCw } from 'lucide-react';
|
|
|
|
/* ── Floating Particle ─────────────────────────────────────── */
|
|
interface Particle {
|
|
id: number;
|
|
x: number;
|
|
y: number;
|
|
size: number;
|
|
opacity: number;
|
|
delay: number;
|
|
duration: number;
|
|
}
|
|
|
|
const generateParticles = (count: number): Particle[] =>
|
|
Array.from({ length: count }, (_, i) => ({
|
|
id: i,
|
|
x: Math.random() * 100,
|
|
y: Math.random() * 100,
|
|
size: Math.random() * 4 + 2,
|
|
opacity: Math.random() * 0.4 + 0.1,
|
|
delay: Math.random() * 6,
|
|
duration: Math.random() * 4 + 5,
|
|
}));
|
|
|
|
/* ── Animated Background ───────────────────────────────────── */
|
|
const AnimatedBackground: React.FC = () => {
|
|
const [particles] = useState(() => generateParticles(25));
|
|
|
|
return (
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
{/* Mesh gradient base */}
|
|
<div className="absolute inset-0 gradient-mesh" />
|
|
|
|
{/* Large glowing orbs */}
|
|
<div
|
|
className="orb orb-primary absolute w-[500px] h-[500px] -top-32 -right-32 opacity-60"
|
|
style={{ animationDuration: '9s' }}
|
|
/>
|
|
<div
|
|
className="orb orb-secondary absolute w-[400px] h-[400px] -bottom-20 -left-20 opacity-50"
|
|
style={{ animationDuration: '7s', animationDelay: '-4s' }}
|
|
/>
|
|
<div
|
|
className="orb orb-accent absolute w-[300px] h-[300px] top-1/2 left-1/3 opacity-40"
|
|
style={{ animationDuration: '11s', animationDelay: '-2s' }}
|
|
/>
|
|
|
|
{/* Morphing blob */}
|
|
<div
|
|
className="absolute top-1/4 right-1/4 w-64 h-64 opacity-20 animate-morph"
|
|
style={{
|
|
background: 'linear-gradient(135deg, rgba(162,231,113,0.5), rgba(117,191,70,0.3))',
|
|
filter: 'blur(40px)',
|
|
}}
|
|
/>
|
|
|
|
{/* Grid overlay */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.025]"
|
|
style={{
|
|
backgroundImage: `linear-gradient(var(--color-ink-800) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--color-ink-800) 1px, transparent 1px)`,
|
|
backgroundSize: '60px 60px',
|
|
}}
|
|
/>
|
|
|
|
{/* Floating particles */}
|
|
{particles.map(p => (
|
|
<div
|
|
key={p.id}
|
|
className="absolute rounded-full animate-float"
|
|
style={{
|
|
left: `${p.x}%`,
|
|
top: `${p.y}%`,
|
|
width: `${p.size}px`,
|
|
height: `${p.size}px`,
|
|
opacity: p.opacity,
|
|
background: `radial-gradient(circle, var(--color-primary-400), var(--color-primary-600))`,
|
|
animationDelay: `${-p.delay}s`,
|
|
animationDuration: `${p.duration}s`,
|
|
filter: 'blur(0.5px)',
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/* ── 3D Orbiting Ring ──────────────────────────────────────── */
|
|
const OrbitingRing: React.FC = () => (
|
|
<div className="relative w-28 h-28 mx-auto">
|
|
{/* Center icon */}
|
|
<div className="absolute inset-0 flex items-center justify-center z-10">
|
|
<div
|
|
className="w-16 h-16 rounded-2xl flex items-center justify-center animate-pulse-glow bg-white border border-ink-200 shadow-sm p-2"
|
|
style={{
|
|
transform: 'perspective(300px) rotateY(-8deg) rotateX(4deg)',
|
|
}}
|
|
>
|
|
<img src="/logo.png" alt="Tech4Biz" className="w-full h-full object-contain" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Orbiting ring 1 */}
|
|
<div
|
|
className="absolute inset-0 rounded-full"
|
|
style={{
|
|
border: '1.5px solid rgba(162,231,113,0.3)',
|
|
animation: 'spin 6s linear infinite',
|
|
}}
|
|
>
|
|
<div
|
|
className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full"
|
|
style={{ background: 'var(--color-primary-400)', boxShadow: '0 0 8px rgba(162,231,113,0.8)' }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Orbiting ring 2 */}
|
|
<div
|
|
className="absolute inset-3 rounded-full"
|
|
style={{
|
|
border: '1px solid rgba(162,231,113,0.2)',
|
|
animation: 'spin 4s linear infinite reverse',
|
|
}}
|
|
>
|
|
<div
|
|
className="absolute -top-1 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full"
|
|
style={{ background: 'var(--color-primary-600)' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
/* ── Main LoginForm ────────────────────────────────────────── */
|
|
export const LoginForm: React.FC = () => {
|
|
const { login, register, verifyMfa, mfaPendingEmail } = useAuth();
|
|
const navigate = useNavigate();
|
|
|
|
const [isRegister, setIsRegister] = useState(false);
|
|
const [email, setEmail] = useState('');
|
|
const [showPass, setShowPass] = useState(false);
|
|
const [otp, setOtp] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
|
|
const cardRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Client Profile Registration States
|
|
const [companyName, setCompanyName] = useState('');
|
|
const [website, setWebsite] = useState('');
|
|
const [sector, setSector] = useState('Technology');
|
|
const [companySize, setCompanySize] = useState('1-10');
|
|
|
|
/* 3D tilt effect on card */
|
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (!cardRef.current) return;
|
|
const rect = cardRef.current.getBoundingClientRect();
|
|
const x = (e.clientX - rect.left) / rect.width - 0.5;
|
|
const y = (e.clientY - rect.top) / rect.height - 0.5;
|
|
setMousePos({ x, y });
|
|
};
|
|
const handleMouseLeave = () => setMousePos({ x: 0, y: 0 });
|
|
|
|
const cardTransform = `perspective(1200px) rotateY(${mousePos.x * 8}deg) rotateX(${-mousePos.y * 6}deg) translateZ(0)`;
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
setLoading(true);
|
|
if (!email) { setError('Email address is required.'); setLoading(false); return; }
|
|
try {
|
|
if (isRegister) {
|
|
if (!companyName.trim() || !website.trim()) {
|
|
setError('Please fill in all company information.');
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
await register(email, { companyName, website, sector, companySize });
|
|
} else {
|
|
await login(email);
|
|
}
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : 'Authentication failed.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleMfaSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError('');
|
|
setLoading(true);
|
|
if (otp.length !== 6) { setError('Enter the 6-digit verification code.'); setLoading(false); return; }
|
|
try {
|
|
const loggedUser = await verifyMfa(otp);
|
|
navigate(loggedUser.role === 'ADMIN' ? '/admin' : '/client');
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : 'MFA validation failed.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const [mounted, setMounted] = useState(false);
|
|
useEffect(() => { setTimeout(() => setMounted(true), 50); }, []);
|
|
|
|
return (
|
|
<div className="relative min-h-screen flex items-center justify-center overflow-hidden p-4">
|
|
<AnimatedBackground />
|
|
|
|
{/* Card wrapper with 3D tilt */}
|
|
<div
|
|
ref={cardRef}
|
|
onMouseMove={handleMouseMove}
|
|
onMouseLeave={handleMouseLeave}
|
|
className="relative w-full max-w-md z-10"
|
|
style={{
|
|
transform: cardTransform,
|
|
transition: 'transform 0.15s cubic-bezier(0.16,1,0.3,1)',
|
|
transformStyle: 'preserve-3d',
|
|
opacity: mounted ? 1 : 0,
|
|
animation: mounted ? 'scale-up 0.6s cubic-bezier(0.16,1,0.3,1) forwards' : 'none',
|
|
}}
|
|
>
|
|
{/* Glow behind card */}
|
|
<div
|
|
className="absolute -inset-4 rounded-3xl opacity-40 blur-3xl"
|
|
style={{ background: 'linear-gradient(135deg, rgba(162,231,113,0.3), rgba(117,191,70,0.2))' }}
|
|
/>
|
|
|
|
{/* Main glass card */}
|
|
<div
|
|
className="relative rounded-3xl overflow-hidden"
|
|
style={{
|
|
background: 'rgba(255,255,255,0.85)',
|
|
backdropFilter: 'blur(40px) saturate(200%)',
|
|
WebkitBackdropFilter: 'blur(40px) saturate(200%)',
|
|
border: '1px solid rgba(255,255,255,0.9)',
|
|
boxShadow: `
|
|
0 30px 80px -10px rgba(35,43,33,0.15),
|
|
0 0 0 1px rgba(162,231,113,0.15),
|
|
inset 0 1px 0 rgba(255,255,255,0.9)
|
|
`,
|
|
}}
|
|
>
|
|
{/* Top accent bar */}
|
|
<div
|
|
className="h-1 w-full"
|
|
style={{ background: 'linear-gradient(90deg, var(--color-primary-400), var(--color-primary-600), var(--color-primary-400))' }}
|
|
/>
|
|
|
|
<div className="p-8 space-y-7">
|
|
{/* Brand Header */}
|
|
<div className="text-center space-y-4 animate-fade-in">
|
|
<OrbitingRing />
|
|
|
|
<div>
|
|
<h1 className="text-2xl login-form-title font-extrabold tracking-tight" style={{ color: 'var(--color-ink-800)' }}>
|
|
{mfaPendingEmail ? 'Verify Identity' : 'Tech4Biz Portal'}
|
|
</h1>
|
|
<p className="text-sm login-form-subtitle mt-1.5" style={{ color: 'var(--color-ink-600)' }}>
|
|
{mfaPendingEmail
|
|
? `Code sent to ${mfaPendingEmail}`
|
|
: 'Enterprise hardware & software asset distribution'}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Mode toggle */}
|
|
{!mfaPendingEmail && (
|
|
<div
|
|
className="inline-flex rounded-xl p-1 gap-1"
|
|
style={{ background: 'var(--color-ink-100)' }}
|
|
>
|
|
{(['Login', 'Sign Up'] as const).map(label => {
|
|
const active = label === 'Login' ? !isRegister : isRegister;
|
|
return (
|
|
<button
|
|
key={label}
|
|
type="button"
|
|
onClick={() => { setIsRegister(label === 'Sign Up'); setError(''); }}
|
|
className="px-5 py-1.5 rounded-lg text-xs font-bold transition-all duration-300"
|
|
style={{
|
|
background: active ? 'white' : 'transparent',
|
|
color: active ? 'var(--color-ink-800)' : 'var(--color-ink-500)',
|
|
boxShadow: active ? '0 1px 4px rgba(35,43,33,0.08)' : 'none',
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Error message */}
|
|
{error && (
|
|
<div
|
|
className="flex items-center gap-2.5 rounded-xl px-4 py-3 text-sm font-medium animate-slide-up"
|
|
style={{
|
|
background: 'rgba(229,72,77,0.07)',
|
|
border: '1px solid rgba(229,72,77,0.2)',
|
|
color: 'var(--color-danger)',
|
|
}}
|
|
>
|
|
<div className="w-1.5 h-1.5 rounded-full bg-current shrink-0" />
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Credentials Form ── */}
|
|
{!mfaPendingEmail ? (
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{/* Email field */}
|
|
<div className="animate-slide-up" style={{ animationDelay: '0.05s' }}>
|
|
<label
|
|
className="block text-xs font-bold mb-2 uppercase tracking-widest"
|
|
style={{ color: 'var(--color-ink-600)' }}
|
|
>
|
|
Email Address
|
|
</label>
|
|
<div className="relative">
|
|
<div
|
|
className="absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none"
|
|
style={{ color: 'var(--color-ink-400)' }}
|
|
>
|
|
<Mail className="w-4 h-4" />
|
|
</div>
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={e => setEmail(e.target.value)}
|
|
placeholder="client@tech4biz.com"
|
|
className="input-field has-left-icon"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Password field (mock) */}
|
|
<div className="animate-slide-up" style={{ animationDelay: '0.1s' }}>
|
|
<label
|
|
className="block text-xs font-bold mb-2 uppercase tracking-widest"
|
|
style={{ color: 'var(--color-ink-600)' }}
|
|
>
|
|
Password
|
|
</label>
|
|
<div className="relative">
|
|
<div
|
|
className="absolute left-3.5 top-1/2 -translate-y-1/2 pointer-events-none"
|
|
style={{ color: 'var(--color-ink-400)' }}
|
|
>
|
|
<Lock className="w-4 h-4" />
|
|
</div>
|
|
<input
|
|
type={showPass ? 'text' : 'password'}
|
|
defaultValue="password"
|
|
readOnly
|
|
className="input-field has-left-icon has-right-icon"
|
|
style={{ background: 'var(--color-ink-50)', cursor: 'default' }}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPass(v => !v)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 transition-premium"
|
|
style={{ color: 'var(--color-ink-400)' }}
|
|
>
|
|
{showPass ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
<p className="mt-1.5 text-xs" style={{ color: 'var(--color-ink-500)' }}>
|
|
Mock password preset:{' '}
|
|
<code
|
|
className="px-1.5 py-0.5 rounded font-mono text-xs font-bold"
|
|
style={{ background: 'var(--color-primary-50)', color: 'var(--color-primary-800)' }}
|
|
>
|
|
password
|
|
</code>
|
|
</p>
|
|
</div>
|
|
|
|
{/* Register Profile Fields */}
|
|
{isRegister && (
|
|
<>
|
|
<div className="animate-slide-up" style={{ animationDelay: '0.12s' }}>
|
|
<label
|
|
className="block text-xs font-bold mb-2 uppercase tracking-widest"
|
|
style={{ color: 'var(--color-ink-600)' }}
|
|
>
|
|
Company Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={companyName}
|
|
onChange={e => setCompanyName(e.target.value)}
|
|
placeholder="e.g. Acme Corporation"
|
|
className="input-field"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="animate-slide-up" style={{ animationDelay: '0.14s' }}>
|
|
<label
|
|
className="block text-xs font-bold mb-2 uppercase tracking-widest"
|
|
style={{ color: 'var(--color-ink-600)' }}
|
|
>
|
|
Corporate Website
|
|
</label>
|
|
<input
|
|
type="url"
|
|
value={website}
|
|
onChange={e => setWebsite(e.target.value)}
|
|
placeholder="https://example.com"
|
|
className="input-field"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="animate-slide-up" style={{ animationDelay: '0.16s' }}>
|
|
<label
|
|
className="block text-xs font-bold mb-2 uppercase tracking-widest"
|
|
style={{ color: 'var(--color-ink-600)' }}
|
|
>
|
|
Sector
|
|
</label>
|
|
<select
|
|
value={sector}
|
|
onChange={e => setSector(e.target.value)}
|
|
className="input-field bg-white"
|
|
>
|
|
<option value="Technology">Technology</option>
|
|
<option value="Automotive">Automotive</option>
|
|
<option value="Telecommunications">Telecommunications</option>
|
|
<option value="Defense">Defense</option>
|
|
<option value="Semiconductors">Semiconductors</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="animate-slide-up" style={{ animationDelay: '0.16s' }}>
|
|
<label
|
|
className="block text-xs font-bold mb-2 uppercase tracking-widest"
|
|
style={{ color: 'var(--color-ink-600)' }}
|
|
>
|
|
Company Size
|
|
</label>
|
|
<select
|
|
value={companySize}
|
|
onChange={e => setCompanySize(e.target.value)}
|
|
className="input-field bg-white"
|
|
>
|
|
<option value="1-10">1-10</option>
|
|
<option value="10-50">10-50</option>
|
|
<option value="50-250">50-250</option>
|
|
<option value="250-1000">250-1000</option>
|
|
<option value="1000+">1000+</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Quick fill hints */}
|
|
{!isRegister && (
|
|
<div
|
|
className="rounded-xl p-3 animate-slide-up"
|
|
style={{ background: 'var(--color-ink-50)', border: '1px solid var(--color-ink-100)', animationDelay: '0.15s' }}
|
|
>
|
|
<p className="text-xs font-bold mb-2" style={{ color: 'var(--color-ink-600)' }}>
|
|
Quick Access Accounts
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{[
|
|
{ label: 'Admin', email: 'admin@tech4biz.com' },
|
|
{ label: 'Client', email: 'client@tech4biz.com' },
|
|
].map(acc => (
|
|
<button
|
|
key={acc.label}
|
|
type="button"
|
|
onClick={() => setEmail(acc.email)}
|
|
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold transition-premium"
|
|
style={{
|
|
background: email === acc.email ? 'var(--color-primary-100)' : 'white',
|
|
color: email === acc.email ? 'var(--color-primary-800)' : 'var(--color-ink-600)',
|
|
border: `1px solid ${email === acc.email ? 'var(--color-primary-200)' : 'var(--color-ink-200)'}`,
|
|
}}
|
|
>
|
|
<Sparkles className="w-3 h-3" />
|
|
{acc.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Submit */}
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="btn-primary w-full py-3 text-sm flex items-center justify-center gap-2 animate-slide-up"
|
|
style={{ animationDelay: '0.2s' }}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<RefreshCw className="w-4 h-4 animate-spin-slow" />
|
|
Processing…
|
|
</>
|
|
) : (
|
|
<>
|
|
{isRegister ? 'Create Account' : 'Authenticate'} <ArrowRight className="w-4 h-4" />
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
) : (
|
|
/* ── MFA Form ── */
|
|
<form onSubmit={handleMfaSubmit} className="space-y-5">
|
|
<div
|
|
className="text-center p-4 rounded-2xl animate-fade-in"
|
|
style={{ background: 'var(--color-primary-50)', border: '1px solid var(--color-primary-100)' }}
|
|
>
|
|
<p className="text-xs font-bold mb-1" style={{ color: 'var(--color-primary-700)' }}>
|
|
Development Mode
|
|
</p>
|
|
<p className="text-sm" style={{ color: 'var(--color-ink-700)' }}>
|
|
Use code{' '}
|
|
<code
|
|
className="px-2 py-0.5 rounded font-mono font-bold text-base"
|
|
style={{ background: 'var(--color-primary-100)', color: 'var(--color-primary-800)' }}
|
|
>
|
|
123456
|
|
</code>
|
|
</p>
|
|
</div>
|
|
|
|
{/* OTP input */}
|
|
<div>
|
|
<label className="block text-xs font-bold mb-3 text-center uppercase tracking-widest" style={{ color: 'var(--color-ink-600)' }}>
|
|
Verification Code
|
|
</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
maxLength={6}
|
|
value={otp}
|
|
onChange={e => setOtp(e.target.value.replace(/\D/g, ''))}
|
|
placeholder="000000"
|
|
className="input-field text-center font-mono text-2xl tracking-[0.5em] py-4"
|
|
required
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || otp.length !== 6}
|
|
className="btn-primary w-full py-3 text-sm flex items-center justify-center gap-2"
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<RefreshCw className="w-4 h-4 animate-spin-slow" />
|
|
Verifying…
|
|
</>
|
|
) : (
|
|
<>
|
|
<ShieldCheck className="w-4 h-4" />
|
|
Verify Code
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
|
|
{/* Bottom accent */}
|
|
<div
|
|
className="px-8 py-4 text-center"
|
|
style={{ borderTop: '1px solid var(--color-ink-50)', background: 'rgba(247,249,246,0.5)' }}
|
|
>
|
|
<p className="text-xs" style={{ color: 'var(--color-ink-400)' }}>
|
|
© 2026 Tech4Biz Solutions Inc. · Enterprise Security Portal
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|