blah-mcp

"use client"; import { useState } from 'react'; import { useRouter } from 'next/navigation'; import Link from 'next/link'; import { Button } from '@repo/ui/button'; import { Card } from '@repo/ui/card'; export default function RegisterPage() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); const [error, setError] = useState(''); const [isLoading, setIsLoading] = useState(false); const router = useRouter(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(''); if (password !== confirmPassword) { setError('Passwords do not match'); return; } setIsLoading(true); try { const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name, email, password }), }); const data = await response.json(); if (!response.ok) { throw new Error(data.error || 'Failed to register'); } // Redirect to login page router.push('/login?registered=true'); } catch (error) { setError(error instanceof Error ? error.message : 'An error occurred'); } finally { setIsLoading(false); } }; return ( <div className="flex justify-center items-center min-h-[calc(100vh-200px)]"> <Card className="w-full max-w-md p-8"> <h1 className="text-2xl font-bold mb-6 text-center">Create an Account</h1> {error && ( <div className="mb-4 p-3 bg-red-100 text-red-700 rounded-md"> {error} </div> )} <form onSubmit={handleSubmit} className="space-y-4"> <div> <label htmlFor="name" className="block text-sm font-medium mb-1"> Name </label> <input id="name" type="text" value={name} onChange={(e) => setName(e.target.value)} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-gray-800" required /> </div> <div> <label htmlFor="email" className="block text-sm font-medium mb-1"> Email </label> <input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-gray-800" required /> </div> <div> <label htmlFor="password" className="block text-sm font-medium mb-1"> Password </label> <input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-gray-800" required minLength={8} /> </div> <div> <label htmlFor="confirmPassword" className="block text-sm font-medium mb-1"> Confirm Password </label> <input id="confirmPassword" type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:outline-none dark:bg-gray-800" required /> </div> <Button type="submit" variant="default" className="w-full" disabled={isLoading} > {isLoading ? 'Creating account...' : 'Register'} </Button> </form> <div className="mt-6 text-center"> <p> Already have an account?{' '} <Link href="/login" className="text-blue-500 hover:underline"> Sign In </Link> </p> </div> </Card> </div> ); }