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.
This commit is contained in:
Jose Selesan
@@ -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>
|
||||
|
||||
228
apps/frontend/src/features/signup/signup-page.tsx
Normal file
228
apps/frontend/src/features/signup/signup-page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user