From 9dafed72eb55fe58b3f04991a6ee90dacdbac2ee Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Tue, 31 Mar 2026 08:31:40 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20sistema=20de=20autenticaci=C3=B3n=20con?=
 =?UTF-8?q?=20login,=20logout=20y=20guard=20de=20rutas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Agrega LoginView con formulario de acceso
- Agrega store de auth (Pinia) con estado isAuthenticated
- Protege todas las rutas con beforeEach, redirige a /login si no autenticado
- App.vue oculta nav/sidebar en rutas públicas
- TopAppBar incluye botón de cerrar sesión

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.vue                  | 35 ++++++----
 frontend/src/components/TopAppBar.vue | 17 +++++
 frontend/src/router/index.js          | 22 +++++-
 frontend/src/stores/auth.js           | 26 ++++++++
 frontend/src/views/LoginView.vue      | 96 +++++++++++++++++++++++++++
 5 files changed, 183 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/stores/auth.js
 create mode 100644 frontend/src/views/LoginView.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1ff9d3e..de8f91d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,24 +1,35 @@
 <template>
   <div class="bg-canvas min-h-screen text-ink selection:bg-accent/20 selection:text-accent">
-    <SideNavBar />
-    <TopAppBar />
 
-    <!-- Área principal -->
-    <main class="ml-60 pt-16 pb-12 px-8 min-h-screen">
-      <div class="max-w-7xl mx-auto pt-8">
-        <router-view v-slot="{ Component }">
-          <transition name="fade" mode="out-in">
-            <component :is="Component" />
-          </transition>
-        </router-view>
-      </div>
-    </main>
+    <template v-if="isAuthenticated">
+      <SideNavBar />
+      <TopAppBar />
+      <main class="ml-60 pt-16 pb-12 px-8 min-h-screen">
+        <div class="max-w-7xl mx-auto pt-8">
+          <router-view v-slot="{ Component }">
+            <transition name="fade" mode="out-in">
+              <component :is="Component" />
+            </transition>
+          </router-view>
+        </div>
+      </main>
+    </template>
+
+    <template v-else>
+      <router-view />
+    </template>
+
   </div>
 </template>
 
 <script setup>
+import { storeToRefs } from 'pinia'
+import { useAuthStore } from './stores/auth.js'
 import SideNavBar from './components/SideNavBar.vue'
 import TopAppBar from './components/TopAppBar.vue'
+
+const auth = useAuthStore()
+const { isAuthenticated } = storeToRefs(auth)
 </script>
 
 <style>
diff --git a/frontend/src/components/TopAppBar.vue b/frontend/src/components/TopAppBar.vue
index 7799a05..c8f37b4 100644
--- a/frontend/src/components/TopAppBar.vue
+++ b/frontend/src/components/TopAppBar.vue
@@ -26,10 +26,27 @@
           <p class="text-xs font-semibold text-ink leading-none">Marketing Pro</p>
           <p class="text-[10px] text-ink-3 mt-0.5">Administrador</p>
         </div>
+        <button
+          @click="handleLogout"
+          title="Cerrar sesión"
+          class="ml-1 text-ink-3 hover:text-red-400 transition-colors p-1.5 rounded-lg hover:bg-surface-muted"
+        >
+          <span class="material-symbols-outlined text-[20px]">logout</span>
+        </button>
       </div>
     </div>
   </header>
 </template>
 
 <script setup>
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth.js'
+
+const router = useRouter()
+const auth   = useAuthStore()
+
+function handleLogout() {
+  auth.logout()
+  router.push('/login')
+}
 </script>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index b95652e..7dad1e5 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,12 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '../stores/auth.js'
 import DashboardView      from '../views/DashboardView.vue'
 import AnalysisCreateView from '../views/AnalysisCreateView.vue'
 import AnalysisDetailView from '../views/AnalysisDetailView.vue'
 import AnalysisListView   from '../views/AnalysisListView.vue'
 import ScriptsView        from '../views/ScriptsView.vue'
 import GenerateView       from '../views/GenerateView.vue'
+import LoginView          from '../views/LoginView.vue'
 
 const routes = [
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginView,
+    meta: { public: true }
+  },
   {
     path: '/',
     name: 'Dashboard',
@@ -39,7 +47,19 @@ const routes = [
   },
 ]
 
-export default createRouter({
+const router = createRouter({
   history: createWebHistory(),
   routes
 })
+
+router.beforeEach((to) => {
+  const auth = useAuthStore()
+  if (!to.meta.public && !auth.isAuthenticated) {
+    return { name: 'Login' }
+  }
+  if (to.name === 'Login' && auth.isAuthenticated) {
+    return { name: 'Dashboard' }
+  }
+})
+
+export default router
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
new file mode 100644
index 0000000..c315f0a
--- /dev/null
+++ b/frontend/src/stores/auth.js
@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+const ADMIN_EMAIL    = 'admin@gmail.com'
+const ADMIN_PASSWORD = 'admin123'
+const STORAGE_KEY    = 'auth_session'
+
+export const useAuthStore = defineStore('auth', () => {
+  const isAuthenticated = ref(!!localStorage.getItem(STORAGE_KEY))
+
+  function login(email, password) {
+    if (email === ADMIN_EMAIL && password === ADMIN_PASSWORD) {
+      localStorage.setItem(STORAGE_KEY, '1')
+      isAuthenticated.value = true
+      return true
+    }
+    return false
+  }
+
+  function logout() {
+    localStorage.removeItem(STORAGE_KEY)
+    isAuthenticated.value = false
+  }
+
+  return { isAuthenticated, login, logout }
+})
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
new file mode 100644
index 0000000..036606f
--- /dev/null
+++ b/frontend/src/views/LoginView.vue
@@ -0,0 +1,96 @@
+<template>
+  <div class="min-h-screen bg-canvas flex items-center justify-center px-4">
+    <div class="w-full max-w-sm">
+
+      <!-- Logo / título -->
+      <div class="text-center mb-10">
+        <div class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-accent/10 border border-accent/20 mb-4">
+          <span class="material-icons text-accent text-2xl">edit_note</span>
+        </div>
+        <h1 class="text-xl font-semibold text-ink">Generador de Guiones</h1>
+        <p class="text-sm text-ink/40 mt-1">Inicia sesión para continuar</p>
+      </div>
+
+      <!-- Formulario -->
+      <form @submit.prevent="handleLogin" class="space-y-4">
+        <div>
+          <label class="block text-xs font-medium text-ink/50 mb-1.5 uppercase tracking-wide">
+            Correo electrónico
+          </label>
+          <input
+            v-model="email"
+            type="email"
+            placeholder="admin@gmail.com"
+            autocomplete="email"
+            class="w-full bg-surface border border-border rounded-lg px-4 py-2.5 text-sm text-ink placeholder-ink/25
+                   focus:outline-none focus:border-accent/60 focus:ring-1 focus:ring-accent/30 transition"
+          />
+        </div>
+
+        <div>
+          <label class="block text-xs font-medium text-ink/50 mb-1.5 uppercase tracking-wide">
+            Contraseña
+          </label>
+          <div class="relative">
+            <input
+              v-model="password"
+              :type="showPassword ? 'text' : 'password'"
+              placeholder="••••••••"
+              autocomplete="current-password"
+              class="w-full bg-surface border border-border rounded-lg px-4 py-2.5 text-sm text-ink placeholder-ink/25
+                     focus:outline-none focus:border-accent/60 focus:ring-1 focus:ring-accent/30 transition pr-10"
+            />
+            <button
+              type="button"
+              @click="showPassword = !showPassword"
+              class="absolute right-3 top-1/2 -translate-y-1/2 text-ink/30 hover:text-ink/60 transition"
+            >
+              <span class="material-icons text-lg">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Error -->
+        <p v-if="error" class="text-red-400 text-xs text-center">{{ error }}</p>
+
+        <button
+          type="submit"
+          :disabled="loading"
+          class="w-full bg-accent hover:bg-accent/90 disabled:opacity-50 text-white font-medium
+                 rounded-lg py-2.5 text-sm transition mt-2"
+        >
+          {{ loading ? 'Entrando…' : 'Entrar' }}
+        </button>
+      </form>
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/auth.js'
+
+const router   = useRouter()
+const auth     = useAuthStore()
+const email    = ref('')
+const password = ref('')
+const error    = ref('')
+const loading  = ref(false)
+const showPassword = ref(false)
+
+async function handleLogin() {
+  error.value   = ''
+  loading.value = true
+  // pequeño delay para feedback visual
+  await new Promise(r => setTimeout(r, 300))
+  const ok = auth.login(email.value.trim(), password.value)
+  loading.value = false
+  if (ok) {
+    router.push('/')
+  } else {
+    error.value = 'Correo o contraseña incorrectos.'
+  }
+}
+</script>