Implementado bloqueio de acesso por senha (PasscodeGuard) para fase de desenvolvimento

src/App.tsx

@@ -5,12 +5,13 @@ import { useEffect, Suspense, lazy } from 'react'
 import { supabase } from './lib/supabase'
 import { ThemeProvider } from './contexts/ThemeContext'
 import LoadingSpinner from './components/common/LoadingSpinner'
+import PasscodeGuard from './components/common/PasscodeGuard'
 
 // Layout
 import Layout from './components/layout/Layout'
 
 // Lazy load pages
-const Login = lazy(() => import('./pages/Login'))
+const Login = lazy(() => import('./pages/Login')) // Manter caso queiram voltar no futuro
 const Dashboard = lazy(() => import('./pages/Dashboard'))
 const Templates = lazy(() => import('./pages/Templates'))
 const TemplateCreate = lazy(() => import('./pages/TemplateCreate'))
@@ -38,77 +39,52 @@ const queryClient = new QueryClient({
   },
 })
 
-function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const user = useAuthStore((state) => state.user)
-  
-  if (!user) {
-    return <Navigate to="/login" replace />
-  }
-  
-  return <>{children}</>
-}
-
+// Bypassing Auth for development phase
 function App() {
   const setUser = useAuthStore((state) => state.setUser)
   const logout = useAuthStore((state) => state.logout)
 
-  // Verificar sessão ao carregar
+  // Opcional: manter uma sessão "fantasma" do admin fixo enquanto o login está desativado
   useEffect(() => {
-    const checkSession = async () => {
-      const { data } = await supabase.auth.getSession()
-      if (data.session?.user) {
-        setUser(data.session.user as any)
-      }
-    }
-    
-    checkSession()
-    
-    // Escutar mudanças de autenticação
-    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
-      if (session?.user) {
-        setUser(session.user as any)
-      } else {
-        logout()
-      }
-    })
-    
-    return () => subscription?.unsubscribe()
-  }, [setUser, logout])
+    // Definimos um usuário fake para não quebrar componentes que dependem de useAuthStore
+    setUser({ id: 'dev-user', email: 'admin@tracksteel.com.br' } as any)
+  }, [setUser])
 
   return (
     <ThemeProvider>
-      <QueryClientProvider client={queryClient}>
-        <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
-          <Suspense fallback={<div className="flex items-center justify-center h-screen"><LoadingSpinner size="lg" /></div>}>
-            <Routes>
-              <Route path="/login" element={<Login />} />
-              
-              <Route
-                path="/"
-                element={
-                  <ProtectedRoute>
+      <PasscodeGuard>
+        <QueryClientProvider client={queryClient}>
+          <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+            <Suspense fallback={<div className="flex items-center justify-center h-screen"><LoadingSpinner size="lg" /></div>}>
+              <Routes>
+                {/* Redirecionamos tudo para o dashboard diretamente */}
+                <Route path="/login" element={<Navigate to="/" replace />} />
+                
+                <Route
+                  path="/"
+                  element={
                     <Layout />
-                  </ProtectedRoute>
-                }
-              >
-                <Route index element={<Navigate to="/dashboard" replace />} />
-                <Route path="dashboard" element={<Dashboard />} />
-                <Route path="templates" element={<Templates />} />
-                <Route path="templates/criar" element={<TemplateCreate />} />
-                <Route path="templates/:id/editar" element={<TemplateEdit />} />
-                <Route path="topicos" element={<TopicosGestao />} />
-                <Route path="databooks" element={<Databooks />} />
-                <Route path="databook/novo" element={<DatabookNew />} />
-                <Route path="databook/:id/editar" element={<DatabookEdit />} />
-                <Route path="databook/:id" element={<DatabookView />} />
-                <Route path="design" element={<DesignDatabook />} />
-                <Route path="configuracoes" element={<Configuracoes />} />
-                <Route path="busca" element={<Busca />} />
-              </Route>
-            </Routes>
-          </Suspense>
-        </BrowserRouter>
-      </QueryClientProvider>
+                  }
+                >
+                  <Route index element={<Navigate to="/dashboard" replace />} />
+                  <Route path="dashboard" element={<Dashboard />} />
+                  <Route path="templates" element={<Templates />} />
+                  <Route path="templates/criar" element={<TemplateCreate />} />
+                  <Route path="templates/:id/editar" element={<TemplateEdit />} />
+                  <Route path="topicos" element={<TopicosGestao />} />
+                  <Route path="databooks" element={<Databooks />} />
+                  <Route path="databook/novo" element={<DatabookNew />} />
+                  <Route path="databook/:id/editar" element={<DatabookEdit />} />
+                  <Route path="databook/:id" element={<DatabookView />} />
+                  <Route path="design" element={<DesignDatabook />} />
+                  <Route path="configuracoes" element={<Configuracoes />} />
+                  <Route path="busca" element={<Busca />} />
+                </Route>
+              </Routes>
+            </Suspense>
+          </BrowserRouter>
+        </QueryClientProvider>
+      </PasscodeGuard>
     </ThemeProvider>
   )
 }

src/components/common/PasscodeGuard.tsx

@@ -0,0 +1,112 @@
+import { useState, useEffect } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Lock, ChevronRight, AlertCircle } from 'lucide-react'
+
+interface PasscodeGuardProps {
+  children: React.ReactNode
+}
+
+const CORRECT_PASSCODE = '@@Gi05Br;;'
+
+export default function PasscodeGuard({ children }: PasscodeGuardProps) {
+  const [passcode, setPasscode] = useState('')
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const [error, setError] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    const saved = localStorage.getItem('app_access_granted')
+    if (saved === 'true') {
+      setIsAuthenticated(true)
+    }
+    setIsLoading(false)
+  }, [])
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (passcode === CORRECT_PASSCODE) {
+      localStorage.setItem('app_access_granted', 'true')
+      setIsAuthenticated(true)
+      setError(false)
+    } else {
+      setError(true)
+      setPasscode('')
+      // Shake animation effect could be added here
+    }
+  }
+
+  if (isLoading) return null
+
+  if (isAuthenticated) return <>{children}</>
+
+  return (
+    <div className="min-h-screen w-full bg-slate-950 flex items-center justify-center p-4 selection:bg-blue-500/30">
+      {/* Background Glow */}
+      <div className="fixed inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/10 blur-[120px] rounded-full" />
+        <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-indigo-600/10 blur-[120px] rounded-full" />
+      </div>
+
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        className="w-full max-w-md relative z-10"
+      >
+        <div className="bg-slate-900/80 backdrop-blur-xl border border-slate-800 rounded-3xl p-8 shadow-2xl shadow-black/50 overflow-hidden group">
+          <div className="absolute inset-0 bg-gradient-to-tr from-blue-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
+          
+          <div className="text-center mb-10">
+            <motion.div 
+              initial={{ rotate: -10 }}
+              animate={{ rotate: 0 }}
+              className="inline-flex p-4 bg-blue-600/10 rounded-2xl mb-6 ring-1 ring-blue-500/20 shadow-inner"
+            >
+              <Lock className="text-blue-500 w-8 h-8" />
+            </motion.div>
+            <h1 className="text-3xl font-extrabold text-white tracking-tight mb-2">Acesso Restrito</h1>
+            <p className="text-slate-400 font-medium">O aplicativo está em fase de desenvolvimento.</p>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="relative group/input">
+              <input
+                type="password"
+                placeholder="Insira a senha de acesso"
+                value={passcode}
+                onChange={(e) => setPasscode(e.target.value)}
+                autoFocus
+                className={`w-full bg-slate-800/50 border ${error ? 'border-red-500/50 ring-2 ring-red-500/10' : 'border-slate-700/50 group-hover/input:border-slate-600 focus:border-blue-500'} h-14 rounded-2xl px-6 outline-none text-white text-lg transition-all duration-300 placeholder:text-slate-600`}
+              />
+              
+              <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-500 text-sm mt-3 font-medium px-2"
+                  >
+                    <AlertCircle size={14} />
+                    Senha incorreta
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
+            <button
+              type="submit"
+              className="w-full h-14 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-2xl font-bold shadow-lg shadow-blue-600/20 active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2 group/btn"
+            >
+              Entrar no sistema
+              <ChevronRight className="w-5 h-5 group-hover/btn:translate-x-1 transition-transform" />
+            </button>
+          </form>
+
+          <div className="mt-8 pt-6 border-t border-slate-800/50 text-center">
+            <span className="text-xs text-slate-500 font-medium uppercase tracking-[0.2em]">TrackSteel DBMaker v1.0</span>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  )
+}