🚀 Auto-deploy: DBMaker atualizado em 27/07/2026 11:16:09

src/pages/Login.tsx

@@ -1,55 +1,112 @@
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuthStore } from '@/lib/store'
+import { supabase } from '@/lib/supabase'
 import Button from '@/components/common/Button'
 import { BeamsBackground } from '@/components/ui/beams-background'
+import { AlertCircle, Mail, Lock } from 'lucide-react'
+import { motion, AnimatePresence } from 'framer-motion'
 
 export default function Login() {
   const navigate = useNavigate()
   const setUser = useAuthStore((state) => state.setUser)
   
-  const handleSkipLogin = () => {
-    // Entrar direto sem credenciais
-    setUser({
-      id: 'guest-user',
-      email: 'guest@steelbook.com',
-      nome_completo: 'Visitante',
-    } as any)
-    navigate('/dashboard')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+    
+    try {
+      const { data, error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      })
+      
+      if (error) {
+        throw error
+      }
+      
+      if (data.user) {
+        setUser(data.user)
+        navigate('/dashboard')
+      }
+    } catch (err: any) {
+      setError(err.message || 'Erro ao realizar login')
+    } finally {
+      setLoading(false)
+    }
   }
   
   return (
     <BeamsBackground intensity="strong">
-      <div className="bg-white rounded-lg shadow-2xl p-8 w-full max-w-md">
+      <div className="bg-white rounded-lg shadow-2xl p-8 w-full max-w-md relative z-10">
         <div className="text-center mb-8">
           <h1 className="text-3xl font-bold text-primary mb-2">SteelBook</h1>
           <p className="text-gray-600">Gestão Inteligente de Databooks</p>
         </div>
         
-        <div className="space-y-4">
-          <Button
-            onClick={handleSkipLogin}
-            variant="primary"
-            className="w-full"
-          >
-            Entrar
-          </Button>
-          
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-gray-300"></div>
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="px-2 bg-white text-gray-500">Modo Desenvolvimento</span>
+        <form onSubmit={handleLogin} className="space-y-4">
+          <div className="space-y-1">
+            <label className="block text-sm font-medium text-gray-700">E-mail</label>
+            <div className="relative">
+              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-gray-50"
+                placeholder="seu@email.com"
+              />
             </div>
           </div>
-          
-          <p className="text-xs text-center text-gray-500">
-            Autenticação desabilitada para desenvolvimento
-          </p>
-        </div>
+
+          <div className="space-y-1">
+            <label className="block text-sm font-medium text-gray-700">Senha</label>
+            <div className="relative">
+              <Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
+              <input
+                type="password"
+                required
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-gray-50"
+                placeholder="••••••••"
+              />
+            </div>
+          </div>
+
+          <AnimatePresence>
+            {error && (
+              <motion.div 
+                initial={{ opacity: 0, y: -5 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0 }}
+                className="flex items-center gap-2 text-red-600 bg-red-50 p-3 rounded-lg text-sm font-medium"
+              >
+                <AlertCircle size={16} />
+                {error}
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <Button
+            type="submit"
+            variant="primary"
+            className="w-full mt-4"
+            disabled={loading}
+          >
+            {loading ? 'Autenticando...' : 'Entrar'}
+          </Button>
+        </form>
         
         <div className="mt-6 text-center text-sm text-gray-600">
-          <p>Versão 1.0.0 - 2025</p>
+          <p>Versão 1.0.0 - 2026</p>
         </div>
       </div>
     </BeamsBackground>