229 lines
11 KiB
JavaScript
229 lines
11 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
Lock,
|
|
ChevronRight,
|
|
ShieldCheck,
|
|
AlertCircle,
|
|
Eye,
|
|
EyeOff,
|
|
User,
|
|
Zap
|
|
} from 'lucide-react';
|
|
import { useAuthContext } from '@/components/shared/AuthProvider';
|
|
import logo from '@/assets/Img/Util/iT_Guys/logo1.png';
|
|
|
|
/**
|
|
* LoginView - Versão Premium para o Workspace iTGUYS
|
|
* Inspirado no design "Reproduced" com split-screen e alta fidelidade visual.
|
|
*/
|
|
export const LoginView = () => {
|
|
const [password, setPassword] = useState('');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [step, setStep] = useState(1); // 1: Login, 2: Verification (Visual Demo)
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogin = async (e) => {
|
|
e.preventDefault();
|
|
setIsLoading(true);
|
|
setError('');
|
|
|
|
// Senhas de teste permitidas
|
|
const allowedPasswords = ['itguys@2026', 'teste@finance', 'admin'];
|
|
|
|
setTimeout(() => {
|
|
if (allowedPasswords.includes(password)) {
|
|
sessionStorage.setItem('workspace_access', 'granted');
|
|
setStep(2); // Muda para o passo de verificação visual
|
|
setIsLoading(false);
|
|
} else {
|
|
setError('Chave de acesso inválida ou expirada.');
|
|
setIsLoading(false);
|
|
}
|
|
}, 800);
|
|
};
|
|
|
|
const handleFinalize = () => {
|
|
navigate('/plataforma/workspace');
|
|
window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<div className="workspace-theme flex h-screen w-full bg-[var(--workspace-sec-5-dark)] overflow-hidden font-lato select-none text-white">
|
|
{/* Left Panel - Brand & Identity */}
|
|
<div className="hidden lg:flex flex-1 relative items-center justify-center overflow-hidden border-r border-white/5 bg-[var(--workspace-sec-5-dark)]">
|
|
{/* Background Effects */}
|
|
<div className="absolute inset-0 z-0">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-[#003153]/40 to-transparent mix-blend-overlay" />
|
|
<div className="absolute top-[-10%] right-[-10%] w-[50%] h-[50%] bg-[#22bb6c]/10 blur-[120px] rounded-full" />
|
|
<div className="absolute bottom-[-10%] left-[-10%] w-[50%] h-[50%] bg-[#003153]/20 blur-[120px] rounded-full" />
|
|
</div>
|
|
|
|
{/* Logo Area */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
transition={{ duration: 1 }}
|
|
className="relative z-10 flex flex-col items-center text-center px-12"
|
|
>
|
|
<img
|
|
src={logo}
|
|
alt="iTGUYS Logo"
|
|
className="w-full max-w-[400px] mb-8 drop-shadow-[0_0_25px_rgba(34,187,108,0.2)]"
|
|
/>
|
|
<div className="h-[2px] w-24 bg-gradient-to-r from-transparent via-[#22bb6c] to-transparent mb-6" />
|
|
<h2 className="text-3xl font-black italic tracking-tighter text-white/90">
|
|
WORKSPACE <span className="text-[#22bb6c]">EXPERIENCE</span>
|
|
</h2>
|
|
<p className="mt-4 text-white/40 max-w-sm text-sm font-medium uppercase tracking-[0.3em]">
|
|
Gestão Estratégica & Inteligência Financeira
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Floating Badges */}
|
|
<div className="absolute bottom-10 left-10 flex gap-4 z-10 opacity-30">
|
|
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-[10px] font-bold uppercase tracking-widest text-[#22bb6c]">
|
|
<ShieldCheck size={12} /> Encrypted
|
|
</div>
|
|
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-white/10 bg-white/5 text-[10px] font-bold uppercase tracking-widest text-slate-400">
|
|
Versão 2026.1
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Panel - Interactive Form */}
|
|
<div className="flex-[0.8] flex items-center justify-center p-8 bg-[#0a0a0a] relative overflow-hidden">
|
|
{/* Decorative Grid */}
|
|
<div className="absolute inset-0 opacity-[0.02] pointer-events-none"
|
|
style={{ backgroundImage: 'radial-gradient(#fff 1px, transparent 0)', backgroundSize: '40px 40px' }}
|
|
/>
|
|
|
|
<AnimatePresence mode="wait">
|
|
{step === 1 ? (
|
|
<motion.div
|
|
key="step1"
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -50 }}
|
|
className="w-full max-w-[420px] space-y-8 relative z-10"
|
|
>
|
|
<div className="space-y-2">
|
|
<div className="inline-flex items-center gap-2 text-[#22bb6c] font-black text-xs uppercase tracking-[0.3em] mb-2 bg-[#22bb6c]/10 px-3 py-1 rounded-full">
|
|
<Lock size={12} /> Restricted Access
|
|
</div>
|
|
<h1 className="text-4xl font-extrabold tracking-tighter text-white">Identifique-se</h1>
|
|
<p className="text-white/40 text-sm font-medium">Insira sua chave mestra para acessar o sistema.</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleLogin} className="space-y-6">
|
|
<div className="space-y-4">
|
|
{/* User field (Readonly for Context) */}
|
|
<div className="relative group">
|
|
<User className="absolute left-4 top-1/2 -translate-y-1/2 text-white/20 group-focus-within:text-[#22bb6c] transition-colors" size={20} />
|
|
<input
|
|
type="text"
|
|
value="PLATAFORMA SISTEMAS"
|
|
disabled
|
|
className="w-full bg-white/[0.03] border border-white/10 rounded-2xl py-4 pl-12 pr-4 text-white/40 text-sm font-bold opacity-60 cursor-not-allowed uppercase tracking-wider"
|
|
/>
|
|
</div>
|
|
|
|
{/* Password Field */}
|
|
<div className="relative group">
|
|
<Lock className="absolute left-4 top-1/2 -translate-y-1/2 text-white/20 group-focus-within:text-[#22bb6c] transition-colors" size={20} />
|
|
<input
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Chave de Acesso"
|
|
autoFocus
|
|
className="w-full bg-white/[0.05] border border-white/10 rounded-2xl py-4 pl-12 pr-12 text-white text-sm font-bold focus:ring-2 focus:ring-[#22bb6c]/50 focus:border-[#22bb6c] focus:bg-white/[0.08] outline-none transition-all placeholder:text-white/20 tracking-[0.2em]"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-4 top-1/2 -translate-y-1/2 text-white/20 hover:text-white transition-colors"
|
|
>
|
|
{showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="flex items-center gap-2 p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500 text-xs font-bold"
|
|
>
|
|
<AlertCircle size={14} /> {error}
|
|
</motion.div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isLoading || !password}
|
|
className="w-full relative overflow-hidden group bg-gradient-to-r from-[#22bb6c] to-[#22c0a3] disabled:from-zinc-800 disabled:to-zinc-900 text-[#050505] rounded-2xl py-4 font-black text-sm uppercase tracking-[0.2em] shadow-xl shadow-[#22bb6c]/20 hover:scale-[1.02] active:scale-[0.98] transition-all"
|
|
>
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center gap-3">
|
|
<div className="w-4 h-4 border-2 border-[#050505]/30 border-t-[#050505] rounded-full animate-spin" />
|
|
<span>Validando...</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center justify-center gap-2">
|
|
Acessar Ambiente <ChevronRight size={18} className="group-hover:translate-x-1 transition-transform" />
|
|
</div>
|
|
)}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="pt-8 flex items-center justify-center gap-8 border-t border-white/5 opacity-40">
|
|
<img src={logo} alt="Logo" className="h-4 grayscale hover:grayscale-0 transition-all cursor-crosshair" />
|
|
<span className="text-[10px] text-zinc-500 uppercase tracking-widest font-bold">iTGUYS Core Systems v4</span>
|
|
</div>
|
|
</motion.div>
|
|
) : (
|
|
/* Verification Step (Image 1 reference) */
|
|
<motion.div
|
|
key="step2"
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
className="bg-[#0f1d2b] border border-[#22bb6c]/30 p-12 rounded-[40px] shadow-2xl shadow-emerald-950/40 flex flex-col items-center text-center max-w-[480px] w-full"
|
|
>
|
|
<div className="w-20 h-20 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] rounded-3xl flex items-center justify-center mb-8 shadow-lg shadow-emerald-500/30">
|
|
<ShieldCheck size={42} className="text-[#050505]" />
|
|
</div>
|
|
<h2 className="text-3xl font-black text-white italic tracking-tighter mb-4 uppercase">Chave Confirmada</h2>
|
|
<p className="text-white/50 text-sm font-medium mb-12">O ambiente de teste do Workspace está liberado para o seu perfil administrativo.</p>
|
|
|
|
{/* Decorative numeric placeholders (Image 1 style) */}
|
|
<div className="flex gap-3 mb-12">
|
|
{[1,2,3,4,5,6].map(i => (
|
|
<div key={i} className="w-12 h-16 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center">
|
|
<div className="w-2 h-2 bg-[#22bb6c] rounded-full animate-pulse" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleFinalize}
|
|
className="w-full bg-white text-[#050505] rounded-[20px] py-4 font-black uppercase tracking-widest hover:bg-[#22bb6c] hover:text-white transition-all shadow-xl"
|
|
>
|
|
Entrar no Sistema
|
|
</button>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
|
|
{/* Decorative Blur and Logo Overlay for Mobile (if any) */}
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden z--1 opacity-20">
|
|
<div className="absolute top-[-20%] left-[-10%] w-[60%] h-[60%] bg-[#003153] blur-[150px] rounded-full" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|