feat: add phone field to User model and update authentication flow

- Added phone field to User model in Prisma schema and generated types. - Updated backend authentication to include phone as an additional field. - Implemented phone input in the signup form with validation. - Created a new SignupPage component for user registration. - Updated routing to include signup path and redirect authenticated users. - Modified login page to reference Playzer and added link to signup.
2026-06-01 16:43:52 -03:00
parent 4d3867614d
commit 2aaa91444d
14 changed files with 352 additions and 9 deletions
--- a/apps/frontend/src/features/login/login-page.tsx
+++ b/apps/frontend/src/features/login/login-page.tsx
@@ -91,7 +91,7 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
      <section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
        <h1 className="mb-2 text-2xl font-semibold">Iniciar sesión</h1>
        <p className="mb-4 text-sm text-muted-foreground">
-          Ingresá con tu cuenta para acceder a Home.
+          Ingresá con tu cuenta para acceder a Playzer.
        </p>

        <Button type="button" variant="outline" className="w-full" onClick={handleGoogleSignIn}>
@@ -161,6 +161,10 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
          <Link to="/reset-password" className="text-primary hover:underline">
            ¿Olvidaste tu contraseña?
          </Link>
+          <span className="mx-3 text-muted-foreground">|</span>
+          <Link to="/signup" className="text-primary hover:underline">
+            Crear cuenta
+          </Link>
        </p>
      </section>
    </main>
--- a/apps/frontend/src/features/signup/signup-page.tsx
+++ b/apps/frontend/src/features/signup/signup-page.tsx
@@ -0,0 +1,228 @@
+import PlayzerIcon from '@/assets/playzer-favicon-512-transparent.png';
+import { Button } from '@/components/ui/button';
+import { Field, FieldError, FieldLabel } from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { authClient } from '@/lib/api-client';
+import { useAuth } from '@/lib/auth';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const signupSchema = z
+  .object({
+    fullName: z.string().min(2, 'El nombre debe tener al menos 2 caracteres.'),
+    email: z.string().email('Ingresá un email válido.'),
+    phone: z
+      .string()
+      .optional()
+      .refine(
+        (val) => !val || val.replace(/\D/g, '').length >= 7,
+        'El teléfono debe tener al menos 7 dígitos.'
+      ),
+    password: z.string().min(6, 'La contraseña debe tener al menos 6 caracteres.'),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Las contraseñas no coinciden.',
+    path: ['confirmPassword'],
+  });
+
+type SignupForm = z.infer<typeof signupSchema>;
+
+const STORAGE_KEY = 'signup-form-pending';
+
+function loadFormState(): Partial<SignupForm> {
+  try {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) return JSON.parse(saved);
+  } catch {}
+  return {};
+}
+
+export function SignupPage() {
+  const navigate = useNavigate();
+  const { signUp } = useAuth();
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+    watch,
+  } = useForm<SignupForm>({
+    resolver: zodResolver(signupSchema),
+    mode: 'onChange',
+    defaultValues: loadFormState(),
+  });
+
+  useEffect(() => {
+    const sub = watch((values) => {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(values));
+    });
+    return () => sub.unsubscribe();
+  }, [watch]);
+
+  const handleGoogleSignIn = async () => {
+    setSubmitError(null);
+
+    try {
+      await authClient.signIn.social({
+        provider: 'google',
+        callbackURL: `${window.location.origin}/auth-callback`,
+      });
+    } catch {
+      setSubmitError('No pudimos iniciar sesión con Google.');
+    }
+  };
+
+  const onSubmit = async (values: SignupForm) => {
+    setSubmitError(null);
+    setIsSubmitting(true);
+
+    try {
+      await signUp({
+        email: values.email,
+        password: values.password,
+        fullName: values.fullName,
+        phone: values.phone || undefined,
+      });
+
+      sessionStorage.removeItem(STORAGE_KEY);
+      await navigate({ to: '/' });
+    } catch {
+      setSubmitError('No pudimos crear la cuenta. Intenta nuevamente.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <main className="flex min-h-screen w-full flex-col items-center justify-center gap-6 px-3 sm:px-6">
+      <Link to="/" className="group flex items-center gap-3">
+        <div className="flex size-10 items-center justify-center">
+          <img src={PlayzerIcon} alt="Playzer" className="size-7" />
+        </div>
+        <span className="bg-gradient-to-r from-primary via-primary to-reserved bg-clip-text text-xl font-bold tracking-tight text-transparent">
+          Playzer
+        </span>
+      </Link>
+      <section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
+        <h1 className="mb-2 text-2xl font-semibold">Crear cuenta</h1>
+        <p className="mb-4 text-sm text-muted-foreground">
+          Creá tu cuenta para comenzar a usar Playzer.
+        </p>
+
+        <Button type="button" variant="outline" className="w-full" onClick={handleGoogleSignIn}>
+          <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
+            <path
+              fill="currentColor"
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+            />
+            <path
+              fill="currentColor"
+              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+            />
+            <path
+              fill="currentColor"
+              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+            />
+          </svg>
+          Continuar con Google
+        </Button>
+
+        <div className="relative my-4">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-card px-2 text-muted-foreground">O</span>
+          </div>
+        </div>
+
+        <form className="space-y-3" onSubmit={handleSubmit(onSubmit)}>
+          <Field data-invalid={Boolean(errors.fullName)}>
+            <FieldLabel htmlFor="fullName">Nombre completo</FieldLabel>
+            <Input
+              id="fullName"
+              type="text"
+              placeholder="Juan Pérez"
+              aria-invalid={Boolean(errors.fullName)}
+              {...register('fullName')}
+            />
+            <FieldError errors={[errors.fullName]} />
+          </Field>
+
+          <Field data-invalid={Boolean(errors.email)}>
+            <FieldLabel htmlFor="email">Email</FieldLabel>
+            <Input
+              id="email"
+              type="email"
+              placeholder="tu@email.com"
+              aria-invalid={Boolean(errors.email)}
+              {...register('email')}
+            />
+            <FieldError errors={[errors.email]} />
+          </Field>
+
+          <Field data-invalid={Boolean(errors.phone)}>
+            <FieldLabel htmlFor="phone">
+              Teléfono <span className="text-muted-foreground">(opcional)</span>
+            </FieldLabel>
+            <Input
+              id="phone"
+              type="tel"
+              placeholder="+54 11 1234-5678"
+              aria-invalid={Boolean(errors.phone)}
+              {...register('phone')}
+            />
+            <FieldError errors={[errors.phone]} />
+          </Field>
+
+          <Field data-invalid={Boolean(errors.password)}>
+            <FieldLabel htmlFor="password">Contraseña</FieldLabel>
+            <Input
+              id="password"
+              type="password"
+              placeholder="••••••••"
+              aria-invalid={Boolean(errors.password)}
+              {...register('password')}
+            />
+            <FieldError errors={[errors.password]} />
+          </Field>
+
+          <Field data-invalid={Boolean(errors.confirmPassword)}>
+            <FieldLabel htmlFor="confirmPassword">Confirmar contraseña</FieldLabel>
+            <Input
+              id="confirmPassword"
+              type="password"
+              placeholder="••••••••"
+              aria-invalid={Boolean(errors.confirmPassword)}
+              {...register('confirmPassword')}
+            />
+            <FieldError errors={[errors.confirmPassword]} />
+          </Field>
+
+          {submitError && <p className="text-sm text-destructive">{submitError}</p>}
+
+          <Button type="submit" className="w-full" disabled={!isValid || isSubmitting}>
+            {isSubmitting ? 'Creando cuenta...' : 'Crear cuenta'}
+          </Button>
+        </form>
+
+        <p className="mt-4 text-center text-sm text-muted-foreground">
+          ¿Ya tenés cuenta?{' '}
+          <Link to="/login" className="text-primary hover:underline">
+            Iniciar sesión
+          </Link>
+        </p>
+      </section>
+    </main>
+  );
+}
--- a/apps/frontend/src/lib/api-client.ts
+++ b/apps/frontend/src/lib/api-client.ts
@@ -1,10 +1,21 @@
 import { sentinelClient } from '@better-auth/infra/client';
+import { inferAdditionalFields } from 'better-auth/client/plugins';
 import { createAuthClient } from 'better-auth/react';
 import * as api from './api';

 const apiBaseUrl = api.apiBaseUrl;

-const plugins = [sentinelClient()];
+const plugins = [
+  sentinelClient(),
+  inferAdditionalFields({
+    user: {
+      phone: {
+        type: 'string',
+        required: false,
+      },
+    },
+  }),
+];

 export const authClient = createAuthClient({
  baseURL: apiBaseUrl,
--- a/apps/frontend/src/lib/auth.tsx
+++ b/apps/frontend/src/lib/auth.tsx
@@ -13,6 +13,7 @@ type SignUpParams = {
  email: string;
  password: string;
  fullName: string;
+  phone?: string;
 };

 type UpdateProfileParams = {
@@ -162,11 +163,12 @@ export function AuthProvider({ children }: PropsWithChildren) {
          throw error;
        }
      },
-      signUp: async ({ email, password, fullName }) => {
+      signUp: async ({ email, password, fullName, phone }) => {
        const { data: signUpData, error } = await authClient.signUp.email({
          email,
          password,
          name: fullName,
+          phone,
        });

        if (error) {
--- a/apps/frontend/src/routeTree.gen.ts
+++ b/apps/frontend/src/routeTree.gen.ts
@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.

 import { Route as rootRouteImport } from './routes/__root'
+import { Route as SignupRouteImport } from './routes/signup'
 import { Route as SelectComplexRouteImport } from './routes/select-complex'
 import { Route as ResetPasswordRouteImport } from './routes/reset-password'
 import { Route as OnboardRouteImport } from './routes/onboard'
@@ -29,6 +30,11 @@ import { Route as ComplexSlugBookingIndexRouteImport } from './routes/$complexSl
 import { Route as ComplexSlugBookingConfirmedBookingCodeRouteImport } from './routes/$complexSlug/booking/confirmed/$bookingCode'
 import { Route as AppAuthenticatedComplexSlugEditRouteImport } from './routes/_app/_authenticated/complex/$slug/edit'

+const SignupRoute = SignupRouteImport.update({
+  id: '/signup',
+  path: '/signup',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const SelectComplexRoute = SelectComplexRouteImport.update({
  id: '/select-complex',
  path: '/select-complex',
@@ -133,6 +139,7 @@ export interface FileRoutesByFullPath {
  '/onboard': typeof OnboardRouteWithChildren
  '/reset-password': typeof ResetPasswordRoute
  '/select-complex': typeof SelectComplexRoute
+  '/signup': typeof SignupRoute
  '/$complexSlug/booking': typeof ComplexSlugBookingRouteWithChildren
  '/profile': typeof AppProfileRoute
  '/onboard/complete': typeof OnboardCompleteRoute
@@ -151,6 +158,7 @@ export interface FileRoutesByTo {
  '/login': typeof LoginRoute
  '/reset-password': typeof ResetPasswordRoute
  '/select-complex': typeof SelectComplexRoute
+  '/signup': typeof SignupRoute
  '/profile': typeof AppProfileRoute
  '/onboard/complete': typeof OnboardCompleteRoute
  '/onboard/create-complex': typeof OnboardCreateComplexRoute
@@ -170,6 +178,7 @@ export interface FileRoutesById {
  '/onboard': typeof OnboardRouteWithChildren
  '/reset-password': typeof ResetPasswordRoute
  '/select-complex': typeof SelectComplexRoute
+  '/signup': typeof SignupRoute
  '/_app/_authenticated': typeof AppAuthenticatedRouteRouteWithChildren
  '/$complexSlug/booking': typeof ComplexSlugBookingRouteWithChildren
  '/_app/profile': typeof AppProfileRoute
@@ -193,6 +202,7 @@ export interface FileRouteTypes {
    | '/onboard'
    | '/reset-password'
    | '/select-complex'
+    | '/signup'
    | '/$complexSlug/booking'
    | '/profile'
    | '/onboard/complete'
@@ -211,6 +221,7 @@ export interface FileRouteTypes {
    | '/login'
    | '/reset-password'
    | '/select-complex'
+    | '/signup'
    | '/profile'
    | '/onboard/complete'
    | '/onboard/create-complex'
@@ -229,6 +240,7 @@ export interface FileRouteTypes {
    | '/onboard'
    | '/reset-password'
    | '/select-complex'
+    | '/signup'
    | '/_app/_authenticated'
    | '/$complexSlug/booking'
    | '/_app/profile'
@@ -251,11 +263,19 @@ export interface RootRouteChildren {
  OnboardRoute: typeof OnboardRouteWithChildren
  ResetPasswordRoute: typeof ResetPasswordRoute
  SelectComplexRoute: typeof SelectComplexRoute
+  SignupRoute: typeof SignupRoute
  ComplexSlugBookingRoute: typeof ComplexSlugBookingRouteWithChildren
 }

 declare module '@tanstack/react-router' {
  interface FileRoutesByPath {
+    '/signup': {
+      id: '/signup'
+      path: '/signup'
+      fullPath: '/signup'
+      preLoaderRoute: typeof SignupRouteImport
+      parentRoute: typeof rootRouteImport
+    }
    '/select-complex': {
      id: '/select-complex'
      path: '/select-complex'
@@ -462,6 +482,7 @@ const rootRouteChildren: RootRouteChildren = {
  OnboardRoute: OnboardRouteWithChildren,
  ResetPasswordRoute: ResetPasswordRoute,
  SelectComplexRoute: SelectComplexRoute,
+  SignupRoute: SignupRoute,
  ComplexSlugBookingRoute: ComplexSlugBookingRouteWithChildren,
 }
 export const routeTree = rootRouteImport
--- a/apps/frontend/src/routes/__root.tsx
+++ b/apps/frontend/src/routes/__root.tsx
@@ -18,7 +18,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 });

 const AUTH_PAGE_REGEX =
-  /^\/(login|select-complex|reset-password|onboard|invite|auth-callback)(?:\/|$)/;
+  /^\/(login|signup|select-complex|reset-password|onboard|invite|auth-callback)(?:\/|$)/;

 function RootRoute() {
  const location = useLocation();
--- a/apps/frontend/src/routes/signup.tsx
+++ b/apps/frontend/src/routes/signup.tsx
@@ -0,0 +1,11 @@
+import { SignupPage } from '@/features/signup/signup-page';
+import { createFileRoute, redirect } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/signup')({
+  beforeLoad: ({ context }) => {
+    if (context.auth.isAuthenticated) {
+      throw redirect({ to: '/' });
+    }
+  },
+  component: SignupPage,
+});