feat: tRPC API route, client and login page with auth

2026-02-12 15:25:43 -06:00
parent d88baefdf9
commit 32314228c4
4 changed files with 124 additions and 1 deletions
--- a/src/app/api/trpc/[trpc]/route.ts
+++ b/src/app/api/trpc/[trpc]/route.ts
@@ -0,0 +1,13 @@
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { appRouter } from '@/server/trpc/routers'
+import { createContext } from '@/server/trpc/trpc'
+
+const handler = (request: Request) =>
+  fetchRequestHandler({
+    endpoint: '/api/trpc',
+    req: request,
+    router: appRouter,
+    createContext: () => createContext(),
+  })
+
+export { handler as GET, handler as POST }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import TrpcProvider from '@/components/providers/TrpcProvider'

 const inter = Inter({ subsets: ['latin'] })

@@ -20,7 +21,7 @@ export default function RootLayout({
  return (
    <html lang="es" className="dark">
      <body className={`${inter.className} dark`}>
-        {children}
+        <TrpcProvider>{children}</TrpcProvider>
      </body>
    </html>
  )
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { trpc } from '@/lib/trpc-client'
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  const meQuery = trpc.auth.me.useQuery(undefined, { retry: false })
+  useEffect(() => {
+    if (meQuery.data) router.push('/')
+  }, [meQuery.data, router])
+
+  const loginMutation = trpc.auth.login.useMutation({
+    onSuccess: () => {
+      router.push('/')
+      router.refresh()
+    },
+    onError: (err) => {
+      setError(err.message ?? 'Credenciales inválidas')
+    },
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    loginMutation.mutate({ email, password })
+  }
+
+  if (meQuery.isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-dark-500">
+        <div className="text-gray-400">Cargando...</div>
+      </div>
+    )
+  }
+  if (meQuery.data) return null
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-dark-500 p-4">
+      <div className="w-full max-w-sm space-y-6">
+        <div className="text-center">
+          <h1 className="text-2xl font-bold text-white">MSP Monitor</h1>
+          <p className="text-gray-400 mt-1">Iniciar sesión</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4 bg-dark-400 p-6 rounded-lg border border-dark-100">
+          {error && (
+            <div className="p-3 rounded bg-danger/20 text-danger text-sm">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-1">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              autoComplete="email"
+              className="input w-full"
+              placeholder="admin@example.com"
+            />
+          </div>
+
+          <div>
+            <label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-1">
+              Contraseña
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              autoComplete="current-password"
+              className="input w-full"
+            />
+          </div>
+
+          <button
+            type="submit"
+            disabled={loginMutation.isPending}
+            className="btn btn-primary w-full"
+          >
+            {loginMutation.isPending ? 'Entrando...' : 'Entrar'}
+          </button>
+        </form>
+
+        {/*<p className="text-center text-gray-500 text-sm">
+          Por defecto: admin@example.com / Admin123!
+        </p>
+        */}
+      </div>
+    </div>
+  )
+}
--- a/src/lib/trpc-client.ts
+++ b/src/lib/trpc-client.ts
@@ -0,0 +1,4 @@
+import { createTRPCReact } from '@trpc/react-query'
+import type { AppRouter } from '@/server/trpc/routers'
+
+export const trpc = createTRPCReact<AppRouter>()