Auto-deploy: 2026-01-13 13:35:23 | 1 arquivo(s) alterado(s)
This commit is contained in:
parent
aefc458eb2
commit
c10d7b23e6
|
|
@ -1,83 +1,151 @@
|
|||
import React, { useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Lock, Eye, EyeOff, Zap, ArrowRight, ShieldCheck } from 'lucide-react';
|
||||
import { motion } from 'framer-motion';
|
||||
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 [loading, setLoading] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [step, setStep] = useState(1); // 1: Login, 2: Verification (Visual Demo)
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Senhas de teste autorizadas
|
||||
const TEST_PASSWORDS = ['itguys@2026', 'teste@finance', 'admin'];
|
||||
|
||||
const handleLogin = (e) => {
|
||||
const handleLogin = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
// Simula uma pequena latência para efeito visual premium
|
||||
// Senhas de teste permitidas
|
||||
const allowedPasswords = ['itguys@2026', 'teste@finance', 'admin'];
|
||||
|
||||
setTimeout(() => {
|
||||
if (TEST_PASSWORDS.includes(password)) {
|
||||
sessionStorage.setItem('workspace_access', 'true');
|
||||
navigate('/plataforma/workspace');
|
||||
if (allowedPasswords.includes(password)) {
|
||||
sessionStorage.setItem('workspace_access', 'granted');
|
||||
setStep(2); // Muda para o passo de verificação visual
|
||||
setIsLoading(false);
|
||||
} else {
|
||||
setError('Senha de acesso inválida ou expirada.');
|
||||
setError('Chave de acesso inválida ou expirada.');
|
||||
setIsLoading(false);
|
||||
}
|
||||
setLoading(false);
|
||||
}, 800);
|
||||
};
|
||||
|
||||
const handleFinalize = () => {
|
||||
navigate('/plataforma/workspace');
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="workspace-theme min-h-screen bg-[#050914] flex items-center justify-center p-6 relative overflow-hidden font-sans">
|
||||
{/* Background Decorativo */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<div className="absolute top-[20%] right-[10%] w-[30%] h-[30%] bg-[#22c0a3]/10 rounded-full blur-[120px] animate-pulse" />
|
||||
<div className="absolute bottom-[20%] left-[10%] w-[30%] h-[30%] bg-[#26b1c7]/10 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} />
|
||||
<div className="flex h-screen w-full bg-[#0a0a0a] 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-[#050505]">
|
||||
{/* 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, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-md w-full z-10"
|
||||
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"
|
||||
>
|
||||
<div className="bg-white/5 backdrop-blur-2xl border border-white/10 rounded-[2.5rem] p-10 shadow-2xl space-y-8">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#22c0a3]/10 text-[#22c0a3] text-[0.65rem] font-black uppercase tracking-widest mb-2 border border-[#22c0a3]/20">
|
||||
<ShieldCheck size={14} className="fill-[#22c0a3]" /> Acesso Restrito
|
||||
<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 flex-col items-center gap-4">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] rounded-3xl flex items-center justify-center shadow-2xl shadow-[#22c0a3]/20">
|
||||
<Zap size={40} className="text-white fill-white" />
|
||||
<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>
|
||||
<h1 className="text-3xl font-black text-white tracking-tighter">Workspace <span className="text-[#22c0a3]">Finance</span></h1>
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm font-medium">Ambiente em fase de ajuste. Insira a chave de acesso para continuar.</p>
|
||||
</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-2 group">
|
||||
<label className="text-[0.7rem] font-bold uppercase tracking-widest text-slate-500 ml-1 group-focus-within:text-[#22c0a3] transition-colors">
|
||||
Chave de Acesso
|
||||
</label>
|
||||
<div className="relative">
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-[#22c0a3] transition-colors">
|
||||
<Lock size={18} />
|
||||
</div>
|
||||
<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={showPassword ? "text" : "password"}
|
||||
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="••••••••"
|
||||
className="w-full pl-12 pr-12 py-4 bg-white/5 border-none rounded-2xl ring-1 ring-white/10 focus:ring-2 focus:ring-[#22c0a3] outline-none transition-all text-white font-medium shadow-sm placeholder:text-slate-600"
|
||||
required
|
||||
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-slate-500 hover:text-white transition-colors"
|
||||
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>
|
||||
|
|
@ -86,36 +154,75 @@ export const LoginView = () => {
|
|||
|
||||
{error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="p-4 bg-red-500/10 border border-red-500/20 rounded-2xl text-red-500 text-[0.7rem] font-bold text-center uppercase tracking-tight"
|
||||
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"
|
||||
>
|
||||
{error}
|
||||
<AlertCircle size={14} /> {error}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full py-5 bg-[#22c0a3] hover:bg-[#22bb6c] text-white font-black rounded-2xl shadow-xl shadow-[#22c0a3]/20 transform active:scale-[0.98] transition-all flex items-center justify-center gap-3 text-sm uppercase tracking-[0.2em]"
|
||||
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"
|
||||
>
|
||||
{loading ? (
|
||||
<div className="w-5 h-5 border-3 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
{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>
|
||||
) : (
|
||||
<>
|
||||
Entrar no Workspace <ArrowRight size={20} />
|
||||
</>
|
||||
<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-6 border-t border-white/5 text-center">
|
||||
<span className="text-[10px] text-slate-500 uppercase tracking-[0.4em] font-black opacity-60">
|
||||
© 2026 iTGUYS • SISTEMAS DE ALTA PERFORMANCE
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue