feat: Add client-side password confirmation to signup, localize validation messages, and refactor login form layout.

feat: Implement a new _auth layout with a dashboard map, refactor the login form, and add logout functionality.
2026-03-21 23:13:20 +01:00 · 2026-03-15 19:56:14 +01:00
16 changed files with 2428 additions and 2279 deletions
--- a/.env.development
+++ b/.env.development
@@ -6,4 +6,4 @@ APIKEY_MAPS="AIzaSyAwfOShBqkBcS46WqmlsIVWQJ8gpdOPk_4"
 SUPABASE_URL="https://qsssikzgwomudkwfmgad.supabase.co"
 SUPABASE_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFzc3Npa3pnd29tdWRrd2ZtZ2FkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQzMjY1NTQsImV4cCI6MjA2OTkwMjU1NH0.BTSscdTcPP1GVmMB-H5caLpWsfuAw1V6mXiqogF8TjU"
 VITE_LOGIN_USER="test@test.com"
-VITE_PASSWORD_USER=""
+VITE_PASSWORD_USER="test"
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,41 @@
+# AGENTS.md — findyourpilot
+
+Project context for AI coding agents. This file defines which skill files to load
+depending on the task at hand.
+
+<!-- intent-skills:start -->
+# Skill mappings - when working in these areas, load the linked skill file into context.
+skills:
+  - task: "Building or modifying routes, loaders, search params, or navigation with TanStack Router"
+    load: "node_modules/.pnpm/@tanstack+router-core@1.167.5/node_modules/@tanstack/router-core/skills/router-core/SKILL.md"
+
+  - task: "Working with route search params, type-safe URL state, or Zod-validated search params"
+    load: "node_modules/.pnpm/@tanstack+router-core@1.167.5/node_modules/@tanstack/router-core/skills/router-core/search-params/SKILL.md"
+
+  - task: "Implementing route guards, authentication redirects, or protected routes"
+    load: "node_modules/.pnpm/@tanstack+router-core@1.167.5/node_modules/@tanstack/router-core/skills/router-core/auth-and-guards/SKILL.md"
+
+  - task: "Loading data in routes, using loaders, or integrating with TanStack Query"
+    load: "node_modules/.pnpm/@tanstack+router-core@1.167.5/node_modules/@tanstack/router-core/skills/router-core/data-loading/SKILL.md"
+
+  - task: "Creating server functions, SSR patterns, full-stack logic, or the TanStack Start execution model"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/SKILL.md"
+
+  - task: "Creating or modifying createServerFn, input validation on server functions, or handling server errors"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/server-functions/SKILL.md"
+
+  - task: "Creating middleware, request middleware, or passing context between server functions"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/middleware/SKILL.md"
+
+  - task: "Creating API endpoints or server-only routes (server property on createFileRoute)"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/server-routes/SKILL.md"
+
+  - task: "Deploying the app to Cloudflare, Vercel, Netlify, Node.js/Docker, or configuring SSR/SPA/prerendering"
+    load: "node_modules/.pnpm/@tanstack+start-client-core@1.166.13/node_modules/@tanstack/start-client-core/skills/start-core/deployment/SKILL.md"
+
+  - task: "Writing, reviewing, or optimising Supabase/Postgres queries, schema design, RLS policies, or migrations"
+    load: ".agents/skills/supabase-postgres-best-practices/SKILL.md"
+
+  - task: "Designing or improving UI layouts, dashboards, component composition, or interactive product interfaces with HeroUI"
+    load: ".agents/skills/interface-design/SKILL.md"
+<!-- intent-skills:end -->
--- a/package.json
+++ b/package.json
@@ -14,42 +14,45 @@
    "machine-translate": "inlang machine translate --project project.inlang"
  },
  "dependencies": {
-    "@heroui/react": "^3.0.0-beta.8",
-    "@heroui/styles": "^3.0.0-beta.8",
-    "@sentry/tanstackstart-react": "^10.42.0",
+    "@heroui/react": "^3.0.0-rc.1",
+    "@heroui/styles": "^3.0.0-rc.1",
+    "@sentry/tanstackstart-react": "^10.45.0",
    "@supabase/ssr": "^0.9.0",
-    "@supabase/supabase-js": "^2.99.1",
-    "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router": "^1.166.7",
-    "@tanstack/react-router-ssr-query": "^1.166.7",
-    "@tanstack/react-start": "^1.166.8",
-    "@tanstack/router-plugin": "^1.166.7",
+    "@supabase/supabase-js": "^2.99.3",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-query": "^5.91.2",
+    "@tanstack/react-router": "^1.167.5",
+    "@tanstack/react-router-ssr-query": "^1.166.9",
+    "@tanstack/react-start": "^1.166.17",
+    "@tanstack/router-plugin": "^1.166.14",
+    "clsx": "^2.1.1",
    "lucide-react": "^0.577.0",
-    "maplibre-gl": "^5.19.0",
+    "maplibre-gl": "^5.20.2",
    "nitro": "^3.0.1-alpha.2",
    "react": "^19.2.4",
    "react-dom": "^19.2.4",
-    "tailwindcss": "^4.2.1",
-    "tw-animate-css": "^1.4.0"
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.3.6"
  },
  "devDependencies": {
-    "@biomejs/biome": "^2.4.6",
-    "@inlang/paraglide-js": "^2.13.1",
-    "@tanstack/devtools-vite": "^0.5.5",
-    "@tanstack/react-devtools": "^0.9.13",
-    "@tanstack/react-router-devtools": "^1.166.7",
+    "@biomejs/biome": "^2.4.8",
+    "@inlang/paraglide-js": "^2.15.0",
+    "@tanstack/devtools-vite": "^0.6.0",
+    "@tanstack/react-devtools": "^0.10.0",
    "@tanstack/react-query-devtools": "^5.91.3",
+    "@tanstack/react-router-devtools": "^1.166.9",
    "@testing-library/dom": "^10.4.1",
    "@testing-library/react": "^16.3.2",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.19.15",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
-    "jsdom": "^28.1.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "jsdom": "^29.0.0",
    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.1",
    "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/lib/hooks/useLogin.tsx
+++ b/src/lib/hooks/useLogin.tsx
@@ -14,13 +14,14 @@ export const useLogin = () => {
 		mutationKey: ["login"],
 		mutationFn: async (data: TLoginForm) => {
 			const response = await user.login({ data })
+
 			if (response.error) {
 				throw new Error(response.message)
 			}
 		},
 		onSuccess: () => {
 			navigate({
-				to: "/"
+				to: "/dashboard"
 			})
 		}
 	})
--- a/src/lib/hooks/useSignup.tsx
+++ b/src/lib/hooks/useSignup.tsx
@@ -1,38 +1,44 @@
 import { toast } from "@heroui/react"
 import { useMutation } from "@tanstack/react-query"
-import { useNavigate } from "@tanstack/react-router"
 import type z from "zod"
 import { user } from "@/lib/server/user"
-import { signupFormSchema } from "@/lib/validation/user"
+import type { signupClientFormSchema } from "@/lib/validation/user"

-type TSignupForm = z.infer<typeof signupFormSchema>
+type TSignupClientForm = z.infer<typeof signupClientFormSchema>

 export const useSignup = () => {
-	const navigate = useNavigate()
-	const signup = useMutation({
+	const signupMutation = useMutation({
 		mutationKey: ["signup"],
-		mutationFn: async (data: TSignupForm) => user.signup({ data }),
-		onSuccess: () => {
-			navigate({
-				to: "/access/login"
-			})
+		mutationFn: async (data: TSignupClientForm) => {
+			const { confirmPassword: _, ...serverData } = data
+			const response = await user.signup({ data: serverData })
+
+			if (response && "error" in response && response.error) {
+				throw new Error(
+					"message" in response
+						? (response.message as string)
+						: "Error desconocido"
+				)
+			}
 		}
 	})

-	const validateSignup = (formData: TSignupForm) => {
-		if (!signupFormSchema.safeParse(formData).success) {
-			toast.danger("Signup failed. Please check your input.")
+	const validateSignup = (formData: TSignupClientForm) => {
+		if (formData.password !== formData.confirmPassword) {
+			toast.danger("Las contraseñas no coinciden")
+			return
 		}
-		const promise = signup.mutateAsync(formData)
+
+		const promise = signupMutation.mutateAsync(formData)
 		toast.promise(promise, {
-			loading: "Signing up...",
-			success: "Signup successful! Redirecting to login...",
-			error: "Signup failed!"
+			loading: "Creando tu cuenta...",
+			success: "¡Cuenta creada! Revisa tu correo para confirmarla.",
+			error: (error: Error) => error.message
 		})
 	}

 	return {
 		signup: validateSignup,
-		isPending: signup.isPending
+		isPending: signupMutation.isPending
 	}
 }
--- a/src/lib/validation/user.ts
+++ b/src/lib/validation/user.ts
@@ -1,18 +1,28 @@
 import * as z from "zod"

 export const loginFormSchema = z.object({
-	email: z.email("Invalid email address"),
-	password: z.string().min(1, "Password must be at least 1 character long")
+	email: z.email("Introduce un correo válido"),
+	password: z.string().min(1, "La contraseña es obligatoria")
 })

 export const signupFormSchema = z.object({
-	email: z.email("Invalid email address"),
-	password: z.string().min(6, "Password must be at least 6 characters long"),
-	name: z.string().min(1, "The field is required"),
-	location: z.string().min(1, "The field is required"),
+	email: z.email("Introduce un correo válido"),
+	password: z.string().min(6, "La contraseña debe tener al menos 6 caracteres"),
+	name: z.string().min(1, "El nombre es obligatorio"),
+	location: z.string().min(1, "La ubicación es obligatoria"),
 	redirectUrl: z.string().optional()
 })

+// Schema extendido para el formulario cliente (incluye confirmación de contraseña)
+export const signupClientFormSchema = signupFormSchema
+	.extend({
+		confirmPassword: z.string().min(6, "Confirma tu contraseña")
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: "Las contraseñas no coinciden",
+		path: ["confirmPassword"]
+	})
+
 export const profileFormSchema = z.object({
 	id: z.uuid(),
 	firstName: z.string().min(1, "First name is required"),
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -12,17 +12,13 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as LogoutRouteImport } from './routes/logout'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as AccessRouteImport } from './routes/access'
-import { Route as AuthedRouteImport } from './routes/_authed'
+import { Route as AuthRouteImport } from './routes/_auth'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as DemoTanstackQueryRouteImport } from './routes/demo/tanstack-query'
 import { Route as DemoI18nRouteImport } from './routes/demo.i18n'
-<<<<<<< HEAD
 import { Route as AccessRegisterRouteImport } from './routes/access.register'
 import { Route as AccessLoginRouteImport } from './routes/access.login'
-import { Route as AuthedDashboardRouteImport } from './routes/_authed/dashboard'
-=======
-import { Route as AuthDashboardRouteImport } from './routes/auth/dashboard'
->>>>>>> main
+import { Route as AuthDashboardRouteImport } from './routes/_auth/dashboard'
 import { Route as DemoSentryTestingRouteImport } from './routes/demo/sentry.testing'

 const LogoutRoute = LogoutRouteImport.update({
@@ -40,8 +36,8 @@ const AccessRoute = AccessRouteImport.update({
  path: '/access',
  getParentRoute: () => rootRouteImport,
 } as any)
-const AuthedRoute = AuthedRouteImport.update({
-  id: '/_authed',
+const AuthRoute = AuthRouteImport.update({
+  id: '/_auth',
  getParentRoute: () => rootRouteImport,
 } as any)
 const IndexRoute = IndexRouteImport.update({
@@ -59,7 +55,6 @@ const DemoI18nRoute = DemoI18nRouteImport.update({
  path: '/demo/i18n',
  getParentRoute: () => rootRouteImport,
 } as any)
-<<<<<<< HEAD
 const AccessRegisterRoute = AccessRegisterRouteImport.update({
  id: '/register',
  path: '/register',
@@ -70,16 +65,10 @@ const AccessLoginRoute = AccessLoginRouteImport.update({
  path: '/login',
  getParentRoute: () => AccessRoute,
 } as any)
-const AuthedDashboardRoute = AuthedDashboardRouteImport.update({
+const AuthDashboardRoute = AuthDashboardRouteImport.update({
  id: '/dashboard',
  path: '/dashboard',
-  getParentRoute: () => AuthedRoute,
-=======
-const AuthDashboardRoute = AuthDashboardRouteImport.update({
-  id: '/auth/dashboard',
-  path: '/auth/dashboard',
-  getParentRoute: () => rootRouteImport,
->>>>>>> main
+  getParentRoute: () => AuthRoute,
 } as any)
 const DemoSentryTestingRoute = DemoSentryTestingRouteImport.update({
  id: '/demo/sentry/testing',
@@ -89,34 +78,24 @@ const DemoSentryTestingRoute = DemoSentryTestingRouteImport.update({

 export interface FileRoutesByFullPath {
  '/': typeof IndexRoute
-<<<<<<< HEAD
  '/access': typeof AccessRouteWithChildren
  '/login': typeof LoginRoute
  '/logout': typeof LogoutRoute
-  '/dashboard': typeof AuthedDashboardRoute
+  '/dashboard': typeof AuthDashboardRoute
  '/access/login': typeof AccessLoginRoute
  '/access/register': typeof AccessRegisterRoute
-=======
-  '/login': typeof LoginRouteRoute
-  '/auth/dashboard': typeof AuthDashboardRoute
->>>>>>> main
  '/demo/i18n': typeof DemoI18nRoute
  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
  '/demo/sentry/testing': typeof DemoSentryTestingRoute
 }
 export interface FileRoutesByTo {
  '/': typeof IndexRoute
-<<<<<<< HEAD
  '/access': typeof AccessRouteWithChildren
  '/login': typeof LoginRoute
  '/logout': typeof LogoutRoute
-  '/dashboard': typeof AuthedDashboardRoute
+  '/dashboard': typeof AuthDashboardRoute
  '/access/login': typeof AccessLoginRoute
  '/access/register': typeof AccessRegisterRoute
-=======
-  '/login': typeof LoginRouteRoute
-  '/auth/dashboard': typeof AuthDashboardRoute
->>>>>>> main
  '/demo/i18n': typeof DemoI18nRoute
  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
  '/demo/sentry/testing': typeof DemoSentryTestingRoute
@@ -124,18 +103,13 @@ export interface FileRoutesByTo {
 export interface FileRoutesById {
  __root__: typeof rootRouteImport
  '/': typeof IndexRoute
-<<<<<<< HEAD
-  '/_authed': typeof AuthedRouteWithChildren
+  '/_auth': typeof AuthRouteWithChildren
  '/access': typeof AccessRouteWithChildren
  '/login': typeof LoginRoute
  '/logout': typeof LogoutRoute
-  '/_authed/dashboard': typeof AuthedDashboardRoute
+  '/_auth/dashboard': typeof AuthDashboardRoute
  '/access/login': typeof AccessLoginRoute
  '/access/register': typeof AccessRegisterRoute
-=======
-  '/login': typeof LoginRouteRoute
-  '/auth/dashboard': typeof AuthDashboardRoute
->>>>>>> main
  '/demo/i18n': typeof DemoI18nRoute
  '/demo/tanstack-query': typeof DemoTanstackQueryRoute
  '/demo/sentry/testing': typeof DemoSentryTestingRoute
@@ -146,14 +120,10 @@ export interface FileRouteTypes {
    | '/'
    | '/access'
    | '/login'
-<<<<<<< HEAD
    | '/logout'
    | '/dashboard'
    | '/access/login'
    | '/access/register'
-=======
-    | '/auth/dashboard'
->>>>>>> main
    | '/demo/i18n'
    | '/demo/tanstack-query'
    | '/demo/sentry/testing'
@@ -162,31 +132,23 @@ export interface FileRouteTypes {
    | '/'
    | '/access'
    | '/login'
-<<<<<<< HEAD
    | '/logout'
    | '/dashboard'
    | '/access/login'
    | '/access/register'
-=======
-    | '/auth/dashboard'
->>>>>>> main
    | '/demo/i18n'
    | '/demo/tanstack-query'
    | '/demo/sentry/testing'
  id:
    | '__root__'
    | '/'
-    | '/_authed'
+    | '/_auth'
    | '/access'
    | '/login'
-<<<<<<< HEAD
    | '/logout'
-    | '/_authed/dashboard'
+    | '/_auth/dashboard'
    | '/access/login'
    | '/access/register'
-=======
-    | '/auth/dashboard'
->>>>>>> main
    | '/demo/i18n'
    | '/demo/tanstack-query'
    | '/demo/sentry/testing'
@@ -194,15 +156,10 @@ export interface FileRouteTypes {
 }
 export interface RootRouteChildren {
  IndexRoute: typeof IndexRoute
-<<<<<<< HEAD
-  AuthedRoute: typeof AuthedRouteWithChildren
+  AuthRoute: typeof AuthRouteWithChildren
  AccessRoute: typeof AccessRouteWithChildren
  LoginRoute: typeof LoginRoute
  LogoutRoute: typeof LogoutRoute
-=======
-  LoginRouteRoute: typeof LoginRouteRoute
-  AuthDashboardRoute: typeof AuthDashboardRoute
->>>>>>> main
  DemoI18nRoute: typeof DemoI18nRoute
  DemoTanstackQueryRoute: typeof DemoTanstackQueryRoute
  DemoSentryTestingRoute: typeof DemoSentryTestingRoute
@@ -231,11 +188,11 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AccessRouteImport
      parentRoute: typeof rootRouteImport
    }
-    '/_authed': {
-      id: '/_authed'
+    '/_auth': {
+      id: '/_auth'
      path: ''
      fullPath: '/'
-      preLoaderRoute: typeof AuthedRouteImport
+      preLoaderRoute: typeof AuthRouteImport
      parentRoute: typeof rootRouteImport
    }
    '/': {
@@ -259,7 +216,6 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof DemoI18nRouteImport
      parentRoute: typeof rootRouteImport
    }
-<<<<<<< HEAD
    '/access/register': {
      id: '/access/register'
      path: '/register'
@@ -274,20 +230,12 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof AccessLoginRouteImport
      parentRoute: typeof AccessRoute
    }
-    '/_authed/dashboard': {
-      id: '/_authed/dashboard'
+    '/_auth/dashboard': {
+      id: '/_auth/dashboard'
      path: '/dashboard'
      fullPath: '/dashboard'
-      preLoaderRoute: typeof AuthedDashboardRouteImport
-      parentRoute: typeof AuthedRoute
-=======
-    '/auth/dashboard': {
-      id: '/auth/dashboard'
-      path: '/auth/dashboard'
-      fullPath: '/auth/dashboard'
      preLoaderRoute: typeof AuthDashboardRouteImport
-      parentRoute: typeof rootRouteImport
->>>>>>> main
+      parentRoute: typeof AuthRoute
    }
    '/demo/sentry/testing': {
      id: '/demo/sentry/testing'
@@ -299,16 +247,15 @@ declare module '@tanstack/react-router' {
  }
 }

-interface AuthedRouteChildren {
-  AuthedDashboardRoute: typeof AuthedDashboardRoute
+interface AuthRouteChildren {
+  AuthDashboardRoute: typeof AuthDashboardRoute
 }

-const AuthedRouteChildren: AuthedRouteChildren = {
-  AuthedDashboardRoute: AuthedDashboardRoute,
+const AuthRouteChildren: AuthRouteChildren = {
+  AuthDashboardRoute: AuthDashboardRoute,
 }

-const AuthedRouteWithChildren =
-  AuthedRoute._addFileChildren(AuthedRouteChildren)
+const AuthRouteWithChildren = AuthRoute._addFileChildren(AuthRouteChildren)

 interface AccessRouteChildren {
  AccessLoginRoute: typeof AccessLoginRoute
@@ -325,15 +272,10 @@ const AccessRouteWithChildren =

 const rootRouteChildren: RootRouteChildren = {
  IndexRoute: IndexRoute,
-<<<<<<< HEAD
-  AuthedRoute: AuthedRouteWithChildren,
+  AuthRoute: AuthRouteWithChildren,
  AccessRoute: AccessRouteWithChildren,
  LoginRoute: LoginRoute,
  LogoutRoute: LogoutRoute,
-=======
-  LoginRouteRoute: LoginRouteRoute,
-  AuthDashboardRoute: AuthDashboardRoute,
->>>>>>> main
  DemoI18nRoute: DemoI18nRoute,
  DemoTanstackQueryRoute: DemoTanstackQueryRoute,
  DemoSentryTestingRoute: DemoSentryTestingRoute,
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,3 +1,4 @@
+import { ToastProvider } from "@heroui/react"
 import type { QueryClient } from "@tanstack/react-query"
 import {
 	createRootRouteWithContext,
@@ -55,6 +56,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 				<HeadContent />
 			</head>
 			<body>
+				<ToastProvider />
 				{children}
 				<Devtools />
 				<Scripts />
--- a/src/routes/_authed.tsx
+++ b/src/routes/_authed.tsx
@@ -1,8 +1,8 @@
 import { createFileRoute, Link, Outlet } from "@tanstack/react-router"

-export const Route = createFileRoute("/_authed")({
+export const Route = createFileRoute("/_auth")({
 	beforeLoad: ({ context }) => {
-		if (context.error) {
+		if (context.user.error) {
 			throw new Error("Not authenticated")
 		}
 	},
--- a/src/routes/_auth/dashboard.tsx
+++ b/src/routes/_auth/dashboard.tsx
@@ -5,13 +5,13 @@ import { useState } from "react"
 import {
 	Map as MapComponent,
 	MapMarker,
-	MapViewport,
+	type MapViewport,
 	MarkerContent,
 	MarkerPopup,
 	MarkerTooltip
 } from "@/components/maps/map"

-export const Route = createFileRoute("/auth/dashboard")({
+export const Route = createFileRoute("/_auth/dashboard")({
 	component: RouteComponent
 })

@@ -44,7 +44,7 @@ function RouteComponent() {
 	})
 	return (
 		<div>
-			<Card className="h-[800px] p-0 overflow-hidden">
+			<Card className="h-200 p-0 overflow-hidden">
 				<MapComponent
 					center={[40.5874827, -1.7925343]}
 					zoom={10}
--- a/src/routes/_authed/dashboard.tsx
+++ b/src/routes/_authed/dashboard.tsx
@@ -1,9 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router'
-
-export const Route = createFileRoute('/_authed/dashboard')({
-  component: RouteComponent,
-})
-
-function RouteComponent() {
-  return <div>Hello "/_authed/dashboard"!</div>
-}
--- a/src/routes/access.login.tsx
+++ b/src/routes/access.login.tsx
@@ -1,4 +1,13 @@
-import { Button, Card, Form, Input, Label, Spinner } from "@heroui/react"
+import {
+	Button,
+	FieldError,
+	Fieldset,
+	Form,
+	Input,
+	Label,
+	Spinner,
+	TextField
+} from "@heroui/react"
 import { createFileRoute } from "@tanstack/react-router"
 import { LogIn } from "lucide-react"
 import { useLogin } from "@/lib/hooks/useLogin"
@@ -20,98 +29,105 @@ function RouteComponent() {
 	}

 	return (
-		<div>
-			<Card.Content>
-				<Form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
-					<Label isRequired className="ml-4 text-lg">
-						Correo
-					</Label>
-					<Input
-						placeholder="Introduce tu correo"
-						type="email"
-						name="email"
-						variant="secondary"
-						className="py-4 text-lg "
-						required
-					/>
-					<Label isRequired className="ml-4 text-lg">
-						Contraseña
-					</Label>
-					<Input
-						placeholder="Introduce tu contraseña"
-						type="password"
-						name="password"
-						variant="secondary"
-						className="py-4 text-lg "
-						required
-					/>
-					<div className="flex justify-end">
-						<Button
-							type="submit"
-							className="py-6 px-8 w-full text-white text-lg"
-							size="lg"
-							isPending={isPending}
+		<>
+			<Form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
+				<Fieldset>
+					<Fieldset.Group>
+						<TextField
+							type="email"
+							name="email"
+							variant="secondary"
+							className="py-4 text-lg"
+							isRequired
+							defaultValue={import.meta.env.VITE_LOGIN_USER}
 						>
-							{isPending ? <Spinner /> : <LogIn size={18} />}
-							Entrar
-						</Button>
-					</div>
-				</Form>
-			</Card.Content>
-			<Card.Footer>
-				<div className="flex justify-evenly w-full gap-4">
-					<Button size="lg" className="w-full" variant="secondary">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-						>
-							<g fill="none" fillRule="evenodd" clipRule="evenodd">
-								<path
-									fill="#f44336"
-									d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86"
-									opacity="0.987"
-								/>
-								<path
-									fill="#ffc107"
-									d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92"
-									opacity="0.997"
-								/>
-								<path
-									fill="#448aff"
-									d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49"
-									opacity="0.999"
-								/>
-								<path
-									fill="#43a047"
-									d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z"
-									opacity="0.993"
-								/>
-							</g>
-						</svg>
-						Google
-					</Button>
-					<Button size="lg" className="w-full" variant="secondary">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="256"
-							height="256"
-							viewBox="0 0 256 256"
+							<Label isRequired className="ml-4 text-lg">
+								Correo
+							</Label>
+							<Input placeholder="Introduce tu correo" />
+							<FieldError />
+						</TextField>
+						<TextField
+							type="password"
+							name="password"
+							variant="secondary"
+							className="py-4 text-lg"
+							isRequired
+							defaultValue={import.meta.env.VITE_PASSWORD_USER}
 						>
+							<Label isRequired className="ml-4 text-lg">
+								Contraseña
+							</Label>
+							<Input placeholder="Introduce tu contraseña" />
+							<FieldError />
+						</TextField>
+					</Fieldset.Group>
+				</Fieldset>
+
+				<Button
+					type="submit"
+					className="py-6 px-8 w-full text-white text-lg"
+					size="lg"
+					isPending={isPending}
+				>
+					{isPending ? <Spinner /> : <LogIn size={18} />}
+					Entrar
+				</Button>
+			</Form>
+			<div className="flex justify-evenly w-full gap-4 mt-2">
+				<Button size="lg" className="w-full" variant="secondary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+						viewBox="0 0 16 16"
+						aria-hidden="true"
+					>
+						<g fill="none" fillRule="evenodd" clipRule="evenodd">
 							<path
-								fill="#1877f2"
-								d="M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445"
+								fill="#f44336"
+								d="M7.209 1.061c.725-.081 1.154-.081 1.933 0a6.57 6.57 0 0 1 3.65 1.82a100 100 0 0 0-1.986 1.93q-1.876-1.59-4.188-.734q-1.696.78-2.362 2.528a78 78 0 0 1-2.148-1.658a.26.26 0 0 0-.16-.027q1.683-3.245 5.26-3.86"
+								opacity="0.987"
 							/>
 							<path
-								fill="#fff"
-								d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z"
+								fill="#ffc107"
+								d="M1.946 4.92q.085-.013.161.027a78 78 0 0 0 2.148 1.658A7.6 7.6 0 0 0 4.04 7.99q.037.678.215 1.331L2 11.116Q.527 8.038 1.946 4.92"
+								opacity="0.997"
 							/>
-						</svg>
-						Facebook
-					</Button>
-				</div>
-			</Card.Footer>
-		</div>
+							<path
+								fill="#448aff"
+								d="M12.685 13.29a26 26 0 0 0-2.202-1.74q1.15-.812 1.396-2.228H8.122V6.713q3.25-.027 6.497.055q.616 3.345-1.423 6.032a7 7 0 0 1-.51.49"
+								opacity="0.999"
+							/>
+							<path
+								fill="#43a047"
+								d="M4.255 9.322q1.23 3.057 4.51 2.854a3.94 3.94 0 0 0 1.718-.626q1.148.812 2.202 1.74a6.62 6.62 0 0 1-4.027 1.684a6.4 6.4 0 0 1-1.02 0Q3.82 14.524 2 11.116z"
+								opacity="0.993"
+							/>
+						</g>
+					</svg>
+					Google
+				</Button>
+				<Button size="lg" className="w-full" variant="secondary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="16"
+						height="16"
+						viewBox="0 0 256 256"
+						aria-hidden="true"
+					>
+						<path
+							fill="#1877f2"
+							d="M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445"
+						/>
+						<path
+							fill="#fff"
+							d="m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z"
+						/>
+					</svg>
+					Facebook
+				</Button>
+			</div>
+		</>
 	)
 }
--- a/src/routes/access.register.tsx
+++ b/src/routes/access.register.tsx
@@ -9,7 +9,7 @@ import {
 	TextField
 } from "@heroui/react"
 import { createFileRoute } from "@tanstack/react-router"
-import { LogIn } from "lucide-react"
+import { UserPlus } from "lucide-react"
 import { useSignup } from "@/lib/hooks/useSignup"

 export const Route = createFileRoute("/access/register")({
@@ -22,67 +22,105 @@ function RouteComponent() {
 	const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault()
 		const formData = new FormData(e.currentTarget)
-		const email = formData.get("email") as string
-		const password = formData.get("password") as string
-		const location = formData.get("location") as string
-		const name = formData.get("name") as string
-
 		signup({
-			email,
-			password,
-			location,
-			name
+			email: formData.get("email") as string,
+			password: formData.get("password") as string,
+			confirmPassword: formData.get("confirmPassword") as string,
+			location: formData.get("location") as string,
+			name: formData.get("name") as string
 		})
 	}

 	return (
-		<div>
+		<>
 			<Form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
 				<Fieldset>
 					<Fieldset.Group>
+						<TextField
+							type="text"
+							name="name"
+							variant="secondary"
+							className="py-2 text-lg"
+							isRequired
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Nombre completo
+							</Label>
+							<Input placeholder="Tu nombre y apellidos" />
+							<FieldError />
+						</TextField>
 						<TextField
 							type="email"
 							name="email"
 							variant="secondary"
-							className="py-4 text-lg"
+							className="py-2 text-lg"
 							isRequired
 						>
-							<Label>Correo</Label>
-							<Input placeholder="Introduce tu correo" />
+							<Label isRequired className="ml-4 text-lg">
+								Correo electrónico
+							</Label>
+							<Input placeholder="tu@correo.com" />
+							<FieldError />
+						</TextField>
+						<TextField
+							type="text"
+							name="location"
+							variant="secondary"
+							className="py-2 text-lg"
+							isRequired
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Ubicación
+							</Label>
+							<Input placeholder="Ciudad, País" />
+							<FieldError />
+						</TextField>
+						<TextField
+							type="password"
+							name="password"
+							variant="secondary"
+							className="py-2 text-lg"
+							isRequired
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Contraseña
+							</Label>
+							<Input placeholder="Mínimo 6 caracteres" />
+							<FieldError />
+						</TextField>
+						<TextField
+							type="password"
+							name="confirmPassword"
+							variant="secondary"
+							className="py-2 text-lg"
+							isRequired
+						>
+							<Label isRequired className="ml-4 text-lg">
+								Confirmar contraseña
+							</Label>
+							<Input placeholder="Repite tu contraseña" />
 							<FieldError />
 						</TextField>
 					</Fieldset.Group>
 				</Fieldset>
-				<TextField
-					type="password"
-					name="password"
-					variant="secondary"
-					className="py-4 text-lg"
-					isRequired
+				<Button
+					type="submit"
+					className="py-6 px-8 w-full text-white text-lg"
+					size="lg"
+					isPending={isPending}
 				>
-					<Label>Contraseña</Label>
-					<Input placeholder="Introduce tu contraseña" />
-					<FieldError />
-				</TextField>
-				<div className="flex justify-end">
-					<Button
-						type="submit"
-						className="py-6 px-8 w-full text-white text-lg"
-						size="lg"
-						isPending={isPending}
-					>
-						{isPending ? <Spinner /> : <LogIn size={18} />}
-						Entrar
-					</Button>
-				</div>
+					{isPending ? <Spinner /> : <UserPlus size={18} />}
+					Crear cuenta
+				</Button>
 			</Form>
-			<div className="flex justify-evenly w-full gap-4">
+			<div className="flex justify-evenly w-full gap-4 mt-2">
 				<Button size="lg" className="w-full" variant="secondary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						width="16"
 						height="16"
 						viewBox="0 0 16 16"
+						aria-hidden="true"
 					>
 						<g fill="none" fillRule="evenodd" clipRule="evenodd">
 							<path
@@ -112,9 +150,10 @@ function RouteComponent() {
 				<Button size="lg" className="w-full" variant="secondary">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
-						width="256"
-						height="256"
+						width="16"
+						height="16"
 						viewBox="0 0 256 256"
+						aria-hidden="true"
 					>
 						<path
 							fill="#1877f2"
@@ -128,6 +167,6 @@ function RouteComponent() {
 					Facebook
 				</Button>
 			</div>
-		</div>
+		</>
 	)
 }
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -12,6 +12,8 @@ import {
 export const Route = createFileRoute("/")({ component: App })

 function App() {
+	const navigate = Route.useNavigate()
+
 	const features = [
 		{
 			icon: <Zap className="w-12 h-12 text-cyan-400" />,
@@ -53,7 +55,17 @@ function App() {

 	return (
 		<div className="min-h-screen bg-linear-to-b from-slate-900 via-slate-800 to-slate-900">
-			<Button> Hola</Button>
+			<Button
+				onPress={() => {
+					navigate({
+						to: "/login",
+						viewTransition: true
+					})
+				}}
+			>
+				{" "}
+				Hola
+			</Button>
 			<section className="relative py-20 px-6 text-center overflow-hidden">
 				<div className="absolute inset-0 bg-linear-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
 				<div className="relative max-w-5xl mx-auto">
--- a/src/routes/logout.tsx
+++ b/src/routes/logout.tsx
@@ -1,5 +1,9 @@
 import { createFileRoute } from "@tanstack/react-router"
+import { user } from "@/lib/server/user"

 export const Route = createFileRoute("/logout")({
-	beforeLoad: async ({ context }) => {}
+	beforeLoad: async () => {
+		await user.logout()
+	},
+	preload: false
 })
Author	SHA1	Message	Date
Jrodenas	cf8c592c78	feat: Add client-side password confirmation to signup, localize validation messages, and refactor login form layout.	2026-03-21 23:13:20 +01:00
Jrodenas	08d0a5a099	feat: Implement a new `_auth` layout with a dashboard map, refactor the login form, and add logout functionality.	2026-03-15 19:56:14 +01:00