ar-saas 0.4.3 → 0.5.0

package/templates/frontend/src/app/(dashboard)/tasks/page.tsx

@@ -0,0 +1,366 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { CheckSquare, Plus, Trash2, X } from 'lucide-react'
+import { createTaskColumn as createColumn, deleteTaskColumn as deleteColumn, getTaskColumns as getColumns } from '@/lib/api/task-columns'
+import { createTask, deleteTask, getTask, getTasks, moveTask, updateTask } from '@/lib/api/tasks'
+import type { TaskColumn } from '@/types/tasks'
+import type { Task, CreateTaskDto } from '@/types/tasks'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Badge } from '@/components/ui/badge'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form'
+import { Checkbox } from '@/components/ui/checkbox'
+import { useToast } from '@/hooks/use-toast'
+
+const PRIORITY_COLORS: Record<string, 'secondary' | 'default' | 'destructive' | 'outline'> = {
+  low: 'secondary', medium: 'default', high: 'destructive', urgent: 'destructive',
+}
+const PRIORITY_LABELS: Record<string, string> = {
+  low: 'Baja', medium: 'Media', high: 'Alta', urgent: 'Urgente',
+}
+
+export default function TasksPage() {
+  const { toast } = useToast()
+  const [columns, setColumns] = useState<TaskColumn[]>([])
+  const [tasksByColumn, setTasksByColumn] = useState<Record<string, Task[]>>({})
+  const [loading, setLoading] = useState(true)
+  const [newColName, setNewColName] = useState('')
+  const [addingCol, setAddingCol] = useState(false)
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [selectedTask, setSelectedTask] = useState<Task | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<{ type: 'col' | 'task'; id: string; name: string } | null>(null)
+  const [draggingTask, setDraggingTask] = useState<{ id: string; fromCol: string } | null>(null)
+
+  const form = useForm<CreateTaskDto>({
+    defaultValues: { title: '', columnId: '', description: '', priority: 'medium', dueDate: '', labels: [], checklist: [] },
+  })
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    try {
+      const cols = await getColumns()
+      setColumns(cols)
+      const entries = await Promise.all(
+        cols.map(async (col) => {
+          const res = await getTasks({ columnId: col._id, limit: 200 })
+          return [col._id, res.data] as [string, Task[]]
+        })
+      )
+      setTasksByColumn(Object.fromEntries(entries))
+    } catch { toast({ title: 'Error al cargar tareas', variant: 'destructive' }) }
+    finally { setLoading(false) }
+  }, [toast])
+
+  useEffect(() => { load() }, [load])
+
+  const handleAddColumn = async () => {
+    if (!newColName.trim()) return
+    try {
+      const col = await createColumn({ name: newColName.trim(), order: columns.length })
+      setColumns(prev => [...prev, col])
+      setTasksByColumn(prev => ({ ...prev, [col._id]: [] }))
+      setNewColName('')
+      setAddingCol(false)
+    } catch { toast({ title: 'Error al crear columna', variant: 'destructive' }) }
+  }
+
+  const handleDeleteColumn = async () => {
+    if (!deleteTarget || deleteTarget.type !== 'col') return
+    try {
+      await deleteColumn(deleteTarget.id)
+      setColumns(prev => prev.filter(c => c._id !== deleteTarget.id))
+      setTasksByColumn(prev => { const n = { ...prev }; delete n[deleteTarget.id]; return n })
+      setDeleteTarget(null)
+    } catch { toast({ title: 'Error al eliminar columna', variant: 'destructive' }) }
+  }
+
+  const handleDeleteTask = async () => {
+    if (!deleteTarget || deleteTarget.type !== 'task') return
+    try {
+      await deleteTask(deleteTarget.id)
+      setTasksByColumn(prev => {
+        const n = { ...prev }
+        for (const colId of Object.keys(n)) n[colId] = n[colId].filter(t => t._id !== deleteTarget.id)
+        return n
+      })
+      setDeleteTarget(null)
+      if (selectedTask?._id === deleteTarget.id) { setSelectedTask(null); setSheetOpen(false) }
+    } catch { toast({ title: 'Error al eliminar tarea', variant: 'destructive' }) }
+  }
+
+  const openTask = async (task: Task) => {
+    try {
+      const full = await getTask(task._id)
+      setSelectedTask(full)
+      form.reset({ title: full.title, columnId: full.columnId ?? '', description: full.description ?? '', priority: full.priority ?? 'medium', dueDate: full.dueDate?.split('T')[0] ?? '', labels: full.labels ?? [], checklist: full.checklist ?? [] })
+      setSheetOpen(true)
+    } catch { toast({ title: 'Error', variant: 'destructive' }) }
+  }
+
+  const openCreate = (columnId: string) => {
+    setSelectedTask(null)
+    form.reset({ title: '', columnId, description: '', priority: 'medium', dueDate: '', labels: [], checklist: [] })
+    setSheetOpen(true)
+  }
+
+  const onSubmit = async (data: CreateTaskDto) => {
+    try {
+      if (selectedTask) {
+        const updated = await updateTask(selectedTask._id, data)
+        setTasksByColumn(prev => {
+          const n = { ...prev }
+          for (const colId of Object.keys(n)) n[colId] = n[colId].map(t => t._id === selectedTask._id ? updated : t)
+          return n
+        })
+        toast({ title: 'Tarea actualizada' })
+      } else {
+        const task = await createTask(data)
+        const colId = data.columnId ?? ''
+        if (colId) setTasksByColumn(prev => ({ ...prev, [colId]: [...(prev[colId] ?? []), task] }))
+        toast({ title: 'Tarea creada' })
+      }
+      setSheetOpen(false)
+    } catch { toast({ title: 'Error al guardar', variant: 'destructive' }) }
+  }
+
+  const handleDrop = async (e: React.DragEvent, targetCol: string) => {
+    e.preventDefault()
+    if (!draggingTask || draggingTask.fromCol === targetCol) return
+    const { id, fromCol } = draggingTask
+    const task = tasksByColumn[fromCol]?.find(t => t._id === id)
+    if (!task) return
+    setTasksByColumn(prev => ({
+      ...prev,
+      [fromCol]: prev[fromCol].filter(t => t._id !== id),
+      [targetCol]: [...(prev[targetCol] ?? []), { ...task, columnId: targetCol }],
+    }))
+    try {
+      await moveTask(id, { columnId: targetCol })
+    } catch {
+      toast({ title: 'Error al mover tarea', variant: 'destructive' })
+      load()
+    }
+    setDraggingTask(null)
+  }
+
+  const toggleCheckItem = async (task: Task, idx: number) => {
+    const checklist = (task.checklist ?? []).map((item, i) =>
+      i === idx ? { ...item, done: !item.completed } : item
+    )
+    try {
+      const updated = await updateTask(task._id, { checklist } as Partial<CreateTaskDto>)
+      setTasksByColumn(prev => {
+        const n = { ...prev }
+        for (const colId of Object.keys(n)) n[colId] = n[colId].map(t => t._id === task._id ? updated : t)
+        return n
+      })
+      setSelectedTask(updated)
+    } catch { toast({ title: 'Error', variant: 'destructive' }) }
+  }
+
+  const checklistFields = form.watch('checklist') ?? []
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <CheckSquare className="size-5" />
+          <h1 className="text-xl font-semibold">Tareas</h1>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="flex gap-4">
+          {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-64 w-64 shrink-0 rounded-xl" />)}
+        </div>
+      ) : (
+        <div className="flex gap-4 overflow-x-auto pb-4">
+          {columns.map(col => (
+            <div
+              key={col._id}
+              className="flex flex-col gap-2 rounded-xl bg-muted/30 p-3 w-64 shrink-0 min-h-[200px]"
+              onDragOver={e => e.preventDefault()}
+              onDrop={e => handleDrop(e, col._id)}
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-xs font-semibold">{col.name}</span>
+                <div className="flex gap-1">
+                  <span className="text-xs text-muted-foreground">{(tasksByColumn[col._id] ?? []).length}</span>
+                  <Button variant="ghost" size="icon" className="size-5" onClick={() => setDeleteTarget({ type: 'col', id: col._id, name: col.name })}>
+                    <X className="size-3 text-muted-foreground" />
+                  </Button>
+                </div>
+              </div>
+
+              {(tasksByColumn[col._id] ?? []).map(task => {
+                const done = (task.checklist ?? []).filter(i => i.completed).length
+                const total = (task.checklist ?? []).length
+                return (
+                  <div
+                    key={task._id}
+                    draggable
+                    onDragStart={() => setDraggingTask({ id: task._id, fromCol: col._id })}
+                    onDragEnd={() => setDraggingTask(null)}
+                    className="rounded-lg border bg-card p-3 shadow-sm cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
+                    onClick={() => openTask(task)}
+                  >
+                    <div className="flex items-start justify-between gap-1">
+                      <p className="text-sm font-medium line-clamp-2 flex-1">{task.title}</p>
+                      <Button variant="ghost" size="icon" className="size-5 shrink-0" onClick={e => { e.stopPropagation(); setDeleteTarget({ type: 'task', id: task._id, name: task.title }) }}>
+                        <Trash2 className="size-3 text-destructive" />
+                      </Button>
+                    </div>
+                    {task.priority && (
+                      <Badge variant={PRIORITY_COLORS[task.priority]} className="mt-1 text-xs">
+                        {PRIORITY_LABELS[task.priority]}
+                      </Badge>
+                    )}
+                    {total > 0 && (
+                      <div className="mt-2">
+                        <div className="flex items-center justify-between text-xs text-muted-foreground mb-1">
+                          <span>Checklist</span><span>{done}/{total}</span>
+                        </div>
+                        <div className="h-1 rounded-full bg-muted">
+                          <div className="h-1 rounded-full bg-primary transition-all" style={{ width: `${total > 0 ? (done / total) * 100 : 0}%` }} />
+                        </div>
+                      </div>
+                    )}
+                    {task.dueDate && (
+                      <p className="mt-1 text-xs text-muted-foreground">
+                        Vence: {new Date(task.dueDate).toLocaleDateString('es-AR')}
+                      </p>
+                    )}
+                  </div>
+                )
+              })}
+
+              <Button variant="ghost" size="sm" className="mt-auto text-xs text-muted-foreground" onClick={() => openCreate(col._id)}>
+                <Plus className="mr-1 size-3" />Nueva tarea
+              </Button>
+            </div>
+          ))}
+
+          {/* Agregar columna */}
+          <div className="w-56 shrink-0">
+            {addingCol ? (
+              <div className="rounded-xl border bg-card p-3 flex flex-col gap-2">
+                <Input placeholder="Nombre de la columna" value={newColName} onChange={e => setNewColName(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') handleAddColumn(); if (e.key === 'Escape') setAddingCol(false) }} autoFocus />
+                <div className="flex gap-2">
+                  <Button size="sm" onClick={handleAddColumn}>Crear</Button>
+                  <Button size="sm" variant="outline" onClick={() => setAddingCol(false)}>Cancelar</Button>
+                </div>
+              </div>
+            ) : (
+              <Button variant="outline" className="w-full" onClick={() => setAddingCol(true)}>
+                <Plus className="mr-2 size-4" />Columna
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Sheet detalle tarea */}
+      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+        <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+          <SheetHeader>
+            <SheetTitle>{selectedTask ? 'Detalle de tarea' : 'Nueva tarea'}</SheetTitle>
+          </SheetHeader>
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="mt-6 flex flex-col gap-4">
+              <FormField control={form.control} name="title" rules={{ required: 'Requerido' }} render={({ field }) => (
+                <FormItem><FormLabel>Título *</FormLabel><FormControl><Input {...field} /></FormControl></FormItem>
+              )} />
+              <FormField control={form.control} name="columnId" render={({ field }) => (
+                <FormItem><FormLabel>Columna</FormLabel>
+                  <Select value={field.value ?? ''} onValueChange={field.onChange}>
+                    <FormControl><SelectTrigger><SelectValue /></SelectTrigger></FormControl>
+                    <SelectContent>{columns.map(c => <SelectItem key={c._id} value={c._id}>{c.name}</SelectItem>)}</SelectContent>
+                  </Select></FormItem>
+              )} />
+              <FormField control={form.control} name="priority" render={({ field }) => (
+                <FormItem><FormLabel>Prioridad</FormLabel>
+                  <Select value={field.value ?? 'medium'} onValueChange={field.onChange}>
+                    <FormControl><SelectTrigger><SelectValue /></SelectTrigger></FormControl>
+                    <SelectContent>
+                      <SelectItem value="low">Baja</SelectItem>
+                      <SelectItem value="medium">Media</SelectItem>
+                      <SelectItem value="high">Alta</SelectItem>
+                    </SelectContent>
+                  </Select></FormItem>
+              )} />
+              <FormField control={form.control} name="dueDate" render={({ field }) => (
+                <FormItem><FormLabel>Fecha límite</FormLabel><FormControl><Input type="date" {...field} /></FormControl></FormItem>
+              )} />
+              <FormField control={form.control} name="description" render={({ field }) => (
+                <FormItem><FormLabel>Descripción</FormLabel><FormControl>
+                  <textarea className="w-full rounded-md border px-3 py-2 text-sm" rows={3} {...field} />
+                </FormControl></FormItem>
+              )} />
+
+              {/* Checklist */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <p className="text-sm font-medium">Checklist</p>
+                  <Button type="button" variant="outline" size="sm" onClick={() => {
+                    const curr = form.getValues('checklist') ?? []
+                    form.setValue('checklist', [...curr, { text: '', completed: false }])
+                  }}>
+                    <Plus className="mr-1 size-3" />Ítem
+                  </Button>
+                </div>
+                {checklistFields.map((item, i) => (
+                  <div key={i} className="flex items-center gap-2">
+                    <Checkbox
+                      checked={item.completed}
+                      onCheckedChange={checked => {
+                        const curr = form.getValues('checklist') ?? []
+                        form.setValue(`checklist.${i}.completed`, !!checked)
+                        if (selectedTask) toggleCheckItem({ ...selectedTask, checklist: curr }, i)
+                      }}
+                    />
+                    <FormField control={form.control} name={`checklist.${i}.text`} render={({ field }) => (
+                      <FormItem className="flex-1"><FormControl><Input className={item.completed ? 'line-through text-muted-foreground' : ''} {...field} /></FormControl></FormItem>
+                    )} />
+                    <Button type="button" variant="ghost" size="icon" className="size-7" onClick={() => {
+                      const curr = form.getValues('checklist') ?? []
+                      form.setValue('checklist', curr.filter((_, j) => j !== i))
+                    }}><X className="size-3" /></Button>
+                  </div>
+                ))}
+              </div>
+
+              <div className="flex justify-end gap-2 pt-2">
+                <Button type="button" variant="outline" onClick={() => setSheetOpen(false)}>Cancelar</Button>
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                  {form.formState.isSubmitting ? 'Guardando...' : 'Guardar'}
+                </Button>
+              </div>
+            </form>
+          </Form>
+        </SheetContent>
+      </Sheet>
+
+      <AlertDialog open={!!deleteTarget} onOpenChange={open => !open && setDeleteTarget(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>¿Eliminar {deleteTarget?.type === 'col' ? 'columna' : 'tarea'}?</AlertDialogTitle>
+            <AlertDialogDescription>Se eliminará <strong>{deleteTarget?.name}</strong>.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancelar</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={deleteTarget?.type === 'col' ? handleDeleteColumn : handleDeleteTask}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >Eliminar</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/templates/frontend/src/app/auth/github/callback/page.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { Suspense, useEffect, useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { authApi } from '@/lib/api/auth'
+import { useAuth } from '@/lib/hooks/use-auth'
+
+type Status = 'loading' | 'error'
+
+function GithubCallbackInner() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const { refreshUser } = useAuth()
+  const [status, setStatus] = useState<Status>('loading')
+  const [errorMsg, setErrorMsg] = useState('')
+
+  useEffect(() => {
+    const code = searchParams.get('code')
+    const error = searchParams.get('error')
+
+    if (error || !code) {
+      setErrorMsg('No pudimos completar el inicio de sesión con GitHub. Intentá de nuevo.')
+      setStatus('error')
+      return
+    }
+
+    authApi
+      .exchangeGithubCode(code)
+      .then(() => refreshUser())
+      .then(() => router.replace('/dashboard'))
+      .catch(() => {
+        setErrorMsg('El código expiró o es inválido. Intentá iniciar sesión nuevamente.')
+        setStatus('error')
+      })
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (status === 'error') {
+    return (
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="max-w-sm space-y-4 text-center">
+          <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-destructive/10">
+            <svg className="size-6 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </div>
+          <h1 className="text-lg font-semibold">Error al autenticar</h1>
+          <p className="text-sm text-muted-foreground">{errorMsg}</p>
+          <button
+            onClick={() => router.replace('/login')}
+            className="text-sm underline underline-offset-4 hover:text-foreground text-muted-foreground"
+          >
+            Volver al login
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center p-4">
+      <div className="space-y-4 text-center">
+        <div className="mx-auto size-8 animate-spin rounded-full border-4 border-muted border-t-foreground" />
+        <p className="text-sm text-muted-foreground">Autenticando con GitHub...</p>
+      </div>
+    </div>
+  )
+}
+
+export default function GithubCallbackPage() {
+  return (
+    <Suspense fallback={
+      <div className="flex min-h-screen items-center justify-center p-4">
+        <div className="space-y-4 text-center">
+          <div className="mx-auto size-8 animate-spin rounded-full border-4 border-muted border-t-foreground" />
+          <p className="text-sm text-muted-foreground">Cargando...</p>
+        </div>
+      </div>
+    }>
+      <GithubCallbackInner />
+    </Suspense>
+  )
+}

package/templates/frontend/src/app/landing/page.tsx

@@ -0,0 +1,21 @@
+import { LandingNavbar } from '@/components/landing/navbar'
+import { LandingHero } from '@/components/landing/hero'
+import { LandingFeatures } from '@/components/landing/features'
+import { LandingPricing } from '@/components/landing/pricing'
+import { LandingFaq } from '@/components/landing/faq'
+import { LandingFooter } from '@/components/landing/footer'
+
+export default function LandingPage() {
+  return (
+    <>
+      <LandingNavbar />
+      <main>
+        <LandingHero />
+        <LandingFeatures />
+        <LandingPricing />
+        <LandingFaq />
+      </main>
+      <LandingFooter />
+    </>
+  )
+}

package/templates/frontend/src/app/page.tsx

@@ -1,5 +1,5 @@
-import { redirect } from 'next/navigation'
-
-export default function RootPage() {
-  redirect('/login')
-}
+import { redirect } from 'next/navigation'
+
+export default function RootPage() {
+  redirect('/setup')
+}

package/templates/frontend/src/app/setup/page.tsx

@@ -31,18 +31,18 @@ const BACKEND_REQUIRED = [
   },
   {
     key: 'APP_URL',
-    example: 'http://localhost:3001',
+    example: 'http://localhost:3000',
     desc: 'URL del frontend. Se usa en los links de los emails de verificación y reset.',
   },
   {
     key: 'CORS_ORIGINS',
-    example: 'http://localhost:3001',
+    example: 'http://localhost:3000',
     desc: 'URL del frontend separada por coma. Debe coincidir con APP_URL.',
   },
 ]
 
 const BACKEND_OPTIONAL = [
-  { key: 'PORT', example: '3000', desc: 'Puerto del servidor (default: 3000).' },
+  { key: 'PORT', example: '3001', desc: 'Puerto del servidor (default: 3001).' },
   { key: 'JWT_ACCESS_EXPIRES_IN', example: '15m', desc: 'Duración del access token (default: 15m).' },
   { key: 'JWT_REFRESH_EXPIRES_IN', example: '7d', desc: 'Duración del refresh token (default: 7d).' },
   { key: 'RESEND_FROM_NAME', example: '"Mi SaaS"', desc: 'Nombre del remitente que ven los destinatarios.' },
@@ -52,7 +52,7 @@ const BACKEND_OPTIONAL = [
 const FRONTEND_REQUIRED = [
   {
     key: 'NEXT_PUBLIC_API_URL',
-    example: 'http://localhost:3000',
+    example: 'http://localhost:3001',
     desc: 'URL base del backend. Debe coincidir con el PORT del backend.',
   },
 ]
@@ -119,14 +119,14 @@ export default function SetupPage() {
   useEffect(() => {
     setMounted(true)
     if (typeof window !== 'undefined' && localStorage.getItem('setup_dismissed') === 'true') {
-      router.replace('/login')
+      router.replace('/landing')
     }
   }, [router])
 
   const handleDone = () => {
     localStorage.setItem('setup_dismissed', 'true')
     setDismissed(true)
-    router.push('/login')
+    router.push('/landing')
   }
 
   if (!mounted || dismissed) return null
@@ -282,8 +282,8 @@ openssl rand -hex 64`}</CodeBlock>
 npm install
 npm run start:dev`}</CodeBlock>
               <p className="text-xs text-zinc-400">
-                El servidor levanta en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3000</code>.
-                Swagger en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3000/api/docs</code>.
+                El servidor levanta en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3001</code>.
+                Swagger en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3001/api/docs</code>.
               </p>
             </div>
           </div>
@@ -318,7 +318,7 @@ npm run start:dev`}</CodeBlock>
 npm install
 npm run dev`}</CodeBlock>
               <p className="text-xs text-zinc-400">
-                El frontend levanta en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3001</code> (o el puerto que indique Next.js).
+                El frontend levanta en <code className="bg-zinc-100 px-1 py-0.5 rounded">http://localhost:3000</code> (puerto default de Next.js).
               </p>
             </div>
           </div>
@@ -335,9 +335,9 @@ npm run dev`}</CodeBlock>
             {[
               { label: 'MongoDB corriendo', hint: 'docker ps muestra el contenedor activo, o verificá que el proceso mongod esté levantado. Si el backend da ECONNREFUSED, MongoDB no está corriendo.' },
               { label: 'Backend corre sin errores', hint: 'npm run start:dev no muestra errores rojos. Errores de JWT_SECRET faltante o MONGODB_URI indican variables sin completar.' },
-              { label: 'Swagger disponible', hint: 'http://localhost:3000/api/docs carga correctamente y lista los endpoints de auth.' },
+              { label: 'Swagger disponible', hint: 'http://localhost:3001/api/docs carga correctamente y lista los endpoints de auth.' },
               { label: 'MongoDB conectado', hint: 'El log del backend dice "Connected to MongoDB successfully". Si no aparece, verificá MONGODB_URI en backend/.env.' },
-              { label: 'Registro funciona', hint: 'Ir a http://localhost:3001/register y crear una cuenta. Si falla con CORS, verificar que CORS_ORIGINS en backend/.env incluya http://localhost:3001.' },
+              { label: 'Registro funciona', hint: 'Ir a http://localhost:3000/register y crear una cuenta. Si falla con CORS, verificar que CORS_ORIGINS en backend/.env incluya http://localhost:3000.' },
               { label: 'Email de verificación llega', hint: 'Revisar spam si no aparece en inbox. Si no llega, verificar RESEND_API_KEY y RESEND_FROM_EMAIL en backend/.env.' },
             ].map((item) => (
               <div key={item.label} className="flex items-start gap-3 py-1.5">
@@ -354,14 +354,15 @@ npm run dev`}</CodeBlock>
         {/* CTA */}
         <div className="flex items-center justify-between">
           <p className="text-xs text-zinc-400">
-            Esta pantalla no vuelve a aparecer. Podés volver desde{' '}
-            <code className="bg-zinc-100 px-1 py-0.5 rounded">/setup</code>.
+            Esta pantalla no vuelve a aparecer. Podés acceder nuevamente desde{' '}
+            <code className="bg-zinc-100 px-1 py-0.5 rounded">/setup</code>{' '}
+            (borrá el localStorage si querés verla de nuevo).
           </p>
           <button
             onClick={handleDone}
             className="bg-zinc-900 hover:bg-zinc-700 text-white font-medium text-sm px-6 py-2.5 rounded-lg transition-colors"
           >
-            Todo listo, ir al login →
+            Todo listo, ver la app →
           </button>
         </div>
 

package/templates/frontend/src/components/auth/github-button.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3001'
+
+export function GitHubButton() {
+  function handleClick() {
+    window.location.href = `${API_URL}/api/auth/github`
+  }
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className="w-full gap-2"
+      onClick={handleClick}
+    >
+      <svg viewBox="0 0 24 24" className="size-4 fill-current" aria-hidden="true">
+        <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.385-1.335-1.755-1.335-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 21.795 24 17.295 24 12c0-6.63-5.37-12-12-12" />
+      </svg>
+      Continuar con GitHub
+    </Button>
+  )
+}