implements login module

Author: JoaoGabrielOliveiraSilv

.env

@@ -1,3 +1,8 @@
 VITE_API_URL=http://localhost:3333
-# JWT com payload { sub: string }, mesmo secret do backend (ver README do repo estoquei-backend em bruno/)
-VITE_API_JWT=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWUsImlhdCI6MTUxNjIzOTAyMn0.yZXPPy3CA5RRZQaykE6HJK-M8-lMtqtiyqdKIHYULdk
+
+# Credenciais do único usuário do sistema
+VITE_LOGIN_USERNAME=admin
+VITE_LOGIN_PASSWORD=senha123
+
+# Secret para assinar o JWT (deve ser igual ao secret do backend)
+VITE_JWT_SECRET=change-me-in-production

package-lock.json

@@ -18,6 +18,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "focus-trap-react": "^12.0.0",
+    "jose": "^6.2.2",
     "lucide-react": "^0.577.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package.json

@@ -22,6 +22,15 @@ vi.mock('@/shared/api/products-api', () => ({
 }))
 
 describe('App', () => {
+  beforeEach(() => {
+    // ProtectedRoute exige token no localStorage para não redirecionar ao /login
+    localStorage.setItem('estoquei_token', 'test-token')
+  })
+
+  afterEach(() => {
+    localStorage.clear()
+  })
+
   it('renders home route content', async () => {
     render(
       <AppProviders>

src/app/App.test.tsx

@@ -0,0 +1,10 @@
+import { Navigate, Outlet } from 'react-router-dom'
+
+import { isAuthenticated } from '@/shared/utils/auth'
+
+export function ProtectedRoute() {
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" replace />
+  }
+  return <Outlet />
+}

src/app/components/ProtectedRoute.tsx

@@ -1,29 +1,41 @@
-import { PackagePlus } from 'lucide-react'
+import { LogOut, PackagePlus } from 'lucide-react'
 import { useCallback, useMemo } from 'react'
-import { Outlet } from 'react-router'
+import { Outlet, useNavigate } from 'react-router'
 
 import { useProductModal } from '@/features/produtos'
 import MobileFooter from '@/shared/components/layout/MobileFooter'
 import SideBar from '@/shared/components/layout/SideBar'
+import { clearToken } from '@/shared/utils/auth'
 
 import type { IAppLayoutProps } from './types'
 
 export function AppLayout({ headerTitle: _headerTitle }: IAppLayoutProps) {
   const { open: openProductModal } = useProductModal()
+  const navigate = useNavigate()
 
   const handleNewProductModalOpen = useCallback(() => {
     openProductModal()
   }, [openProductModal])
 
+  const handleLogout = useCallback(() => {
+    clearToken()
+    navigate('/login', { replace: true })
+  }, [navigate])
+
   const MENU_ITEMS = useMemo(
     () => [
       {
         label: 'Novo Produto',
         icon: PackagePlus,
         onClick: handleNewProductModalOpen,
       },
+      {
+        label: 'Sair',
+        icon: LogOut,
+        onClick: handleLogout,
+      },
     ],
-    [handleNewProductModalOpen]
+    [handleNewProductModalOpen, handleLogout]
   )
 
   return (

src/app/layouts/AppLayout/index.tsx

@@ -2,7 +2,9 @@
 import { Routes, Route } from 'react-router-dom'
 
 import ProductCatalogPage from '@/app/pages/ProductCatalogPage'
+import { LoginPage } from '@/features/auth'
 
+import { ProtectedRoute } from '../components/ProtectedRoute'
 import { AppLayout } from '../layouts/AppLayout'
 
 function NotFoundPage() {
@@ -20,11 +22,14 @@ const ROUTES = [
 export function AppRouter() {
   return (
     <Routes>
-      {ROUTES.map((route) => (
-        <Route key={route.path} path={route.path} element={<AppLayout headerTitle={route.headerTitle} />}>
-          <Route index element={route.element} />
-        </Route>
-      ))}
+      <Route path="/login" element={<LoginPage />} />
+      <Route element={<ProtectedRoute />}>
+        {ROUTES.map((route) => (
+          <Route key={route.path} path={route.path} element={<AppLayout headerTitle={route.headerTitle} />}>
+            <Route index element={route.element} />
+          </Route>
+        ))}
+      </Route>
       <Route path="*" element={<NotFoundPage />} />
     </Routes>
   )

src/app/router/index.tsx

@@ -0,0 +1,2 @@
+// Public exports for the auth feature boundary (consumers: app).
+export { default as LoginPage } from './pages/LoginPage'

src/features/auth/index.ts

@@ -0,0 +1,102 @@
+import { Package } from 'lucide-react'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { Button } from '@/shared/components/ui/Button'
+import { Input } from '@/shared/components/ui/Input'
+import { setToken } from '@/shared/utils/auth'
+import { generateToken } from '@/shared/utils/jwt'
+
+const VALID_USERNAME = import.meta.env.VITE_LOGIN_USERNAME ?? ''
+const VALID_PASSWORD = import.meta.env.VITE_LOGIN_PASSWORD ?? ''
+
+export default function LoginPage() {
+  const navigate = useNavigate()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+
+    if (username !== VALID_USERNAME || password !== VALID_PASSWORD) {
+      setError('Usuário ou senha inválidos.')
+      return
+    }
+
+    setLoading(true)
+    try {
+      const token = await generateToken()
+      setToken(token)
+      navigate('/', { replace: true })
+    } catch {
+      setError('Erro ao gerar sessão. Tente novamente.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-estoquei-bg flex items-center justify-center p-4">
+      <div className="w-full max-w-sm">
+        <div className="flex flex-col items-center gap-2 mb-8">
+          <div className="w-10 h-10 bg-estoquei-accent rounded-lg flex items-center justify-center">
+            <Package size={22} aria-hidden />
+          </div>
+          <h1 className="text-estoquei-text text-xl font-semibold">estoquei</h1>
+          <p className="text-estoquei-text3 text-sm">Faça login para continuar</p>
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="bg-estoquei-bg2 border border-estoquei-border rounded-lg p-6 flex flex-col gap-4"
+        >
+          {error && (
+            <p role="alert" className="text-estoquei-danger text-sm">
+              {error}
+            </p>
+          )}
+
+          <div className="flex flex-col gap-1">
+            <label htmlFor="username" className="text-estoquei-text3 text-xs font-medium uppercase tracking-[.08em]">
+              Usuário
+            </label>
+            <Input
+              id="username"
+              type="text"
+              placeholder="Digite seu usuário"
+              autoComplete="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1">
+            <label htmlFor="password" className="text-estoquei-text3 text-xs font-medium uppercase tracking-[.08em]">
+              Senha
+            </label>
+            <Input
+              id="password"
+              type="password"
+              placeholder="Digite sua senha"
+              autoComplete="current-password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+
+          <Button
+            type="submit"
+            variant="accent"
+            className="w-full mt-2"
+            loading={loading}
+          >
+            Entrar
+          </Button>
+        </form>
+      </div>
+    </div>
+  )
+}

src/features/auth/pages/LoginPage/index.tsx

@@ -1,11 +1,26 @@
 import axios from 'axios'
 
+import { clearToken, getToken } from '@/shared/utils/auth'
+
 const baseURL = import.meta.env.VITE_API_URL ?? ''
-const token = import.meta.env.VITE_API_JWT ?? ''
 
-export const api = axios.create({
-  baseURL,
-  headers: {
-    ...(token ? { Authorization: `Bearer ${token}` } : {}),
-  },
+export const api = axios.create({ baseURL })
+
+api.interceptors.request.use((config) => {
+  const token = getToken()
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
 })
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      clearToken()
+      window.location.href = '/login'
+    }
+    return Promise.reject(error)
+  }
+)