feat: tRPC API route, client and login page with auth
This commit is contained in:
13
src/app/api/trpc/[trpc]/route.ts
Normal file
13
src/app/api/trpc/[trpc]/route.ts
Normal file
@@ -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 }
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import type { Metadata } from 'next'
|
import type { Metadata } from 'next'
|
||||||
import { Inter } from 'next/font/google'
|
import { Inter } from 'next/font/google'
|
||||||
import './globals.css'
|
import './globals.css'
|
||||||
|
import TrpcProvider from '@/components/providers/TrpcProvider'
|
||||||
|
|
||||||
const inter = Inter({ subsets: ['latin'] })
|
const inter = Inter({ subsets: ['latin'] })
|
||||||
|
|
||||||
@@ -20,7 +21,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="es" className="dark">
|
<html lang="es" className="dark">
|
||||||
<body className={`${inter.className} dark`}>
|
<body className={`${inter.className} dark`}>
|
||||||
{children}
|
<TrpcProvider>{children}</TrpcProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
|
|||||||
105
src/app/login/page.tsx
Normal file
105
src/app/login/page.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
4
src/lib/trpc-client.ts
Normal file
4
src/lib/trpc-client.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
import { createTRPCReact } from '@trpc/react-query'
|
||||||
|
import type { AppRouter } from '@/server/trpc/routers'
|
||||||
|
|
||||||
|
export const trpc = createTRPCReact<AppRouter>()
|
||||||
Reference in New Issue
Block a user