initial version of the app

2025-09-21 17:11:02 +01:00
commit c8062cf96b
101 changed files with 23061 additions and 0 deletions
@@ -0,0 +1,191 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { useToast } from '@/hooks/use-toast';
+
+const registerSchema = z
+	.object({
+		email: z.string().email('Please enter a valid email address'),
+		name: z.string().min(2, 'Name must be at least 2 characters'),
+		surname: z.string().min(2, 'Surname must be at least 2 characters'),
+		password: z.string().min(6, 'Password must be at least 6 characters'),
+		confirmPassword: z.string(),
+	})
+	.refine((data) => data.password === data.confirmPassword, {
+		message: "Passwords don't match",
+		path: ['confirmPassword'],
+	});
+
+type RegisterForm = z.infer<typeof registerSchema>;
+
+export function RegisterForm() {
+	const [isLoading, setIsLoading] = useState(false);
+	const router = useRouter();
+	const { toast } = useToast();
+
+	const form = useForm<RegisterForm>({
+		resolver: zodResolver(registerSchema),
+		defaultValues: {
+			email: '',
+			name: '',
+			surname: '',
+			password: '',
+			confirmPassword: '',
+		},
+	});
+
+	const onSubmit = async (data: RegisterForm) => {
+		setIsLoading(true);
+
+		try {
+			const response = await fetch('/api/auth/register', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({
+					email: data.email,
+					name: data.name,
+					surname: data.surname,
+					password: data.password,
+				}),
+			});
+
+			const result = await response.json();
+
+			if (!response.ok) {
+				throw new Error(result.error || 'Registration failed');
+			}
+
+			toast({
+				title: 'Account created!',
+				description: 'Welcome to the table tennis booking system.',
+			});
+
+			// Redirect to dashboard after successful registration
+			router.push('/dashboard');
+			router.refresh();
+		} catch (error) {
+			toast({
+				title: 'Registration failed',
+				description: error instanceof Error ? error.message : 'An unexpected error occurred',
+				variant: 'destructive',
+			});
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return (
+		<Card className='w-full max-w-md mx-auto'>
+			<CardHeader className='space-y-1'>
+				<CardTitle className='text-2xl text-center'>Create an account</CardTitle>
+				<CardDescription className='text-center'>Enter your details to create your account</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
+						<div className='grid grid-cols-2 gap-4'>
+							<FormField
+								control={form.control}
+								name='name'
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>First Name</FormLabel>
+										<FormControl>
+											<Input placeholder='John' autoComplete='given-name' {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name='surname'
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel>Last Name</FormLabel>
+										<FormControl>
+											<Input placeholder='Doe' autoComplete='family-name' {...field} />
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						<FormField
+							control={form.control}
+							name='email'
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Email</FormLabel>
+									<FormControl>
+										<Input
+											placeholder='john@example.com'
+											type='email'
+											autoComplete='email'
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name='password'
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Password</FormLabel>
+									<FormControl>
+										<Input
+											placeholder='Create a password'
+											type='password'
+											autoComplete='new-password'
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name='confirmPassword'
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel>Confirm Password</FormLabel>
+									<FormControl>
+										<Input
+											placeholder='Confirm your password'
+											type='password'
+											autoComplete='new-password'
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<Button type='submit' className='w-full' disabled={isLoading}>
+							{isLoading ? 'Creating account...' : 'Create account'}
+						</Button>
+					</form>
+				</Form>
+			</CardContent>
+		</Card>
+	);
+}