MCP Chat Support System

import React, { useState } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { MessageSquare, Mail, Lock, User, Building, ArrowLeft } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { useAuth } from '@/context/AuthContext'; const SignupPage: React.FC = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [name, setName] = useState(''); const [companyName, setCompanyName] = useState(''); const [error, setError] = useState(''); const [isLoading, setIsLoading] = useState(false); const { signupWithEmail, signupWithGoogle } = useAuth(); const navigate = useNavigate(); const handleEmailSignup = async (e: React.FormEvent) => { e.preventDefault(); setError(''); if (!name || !email || !password || !companyName) { setError('All fields are required'); return; } setIsLoading(true); try { await signupWithEmail(name, email, password, companyName); navigate('/dashboard'); } catch (error) { setError('Failed to create account. Please try again.'); } finally { setIsLoading(false); } }; const handleGoogleSignup = async () => { setError(''); try { await signupWithGoogle(); navigate('/dashboard'); } catch (error) { setError('Failed to sign up with Google. Please try again.'); } }; return ( <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8"> <div className="sm:mx-auto sm:w-full sm:max-w-md"> <Link to="/" className="flex items-center justify-center"> <div className="bg-primary text-white p-2 rounded-md"> <MessageSquare className="h-6 w-6" /> </div> <span className="ml-2 text-xl font-bold">MCP Chat Support</span> </Link> <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900"> Create your account </h2> <p className="mt-2 text-center text-sm text-gray-600"> Or{' '} <Link to="/login" className="font-medium text-primary hover:text-primary-dark"> sign in to existing account </Link> </p> </div> <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md"> <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10"> {error && ( <div className="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md"> {error} </div> )} <form className="space-y-6" onSubmit={handleEmailSignup}> <div> <label htmlFor="name" className="block text-sm font-medium text-gray-700"> Full Name </label> <div className="mt-1 relative rounded-md shadow-sm"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <User className="h-5 w-5 text-gray-400" /> </div> <input id="name" name="name" type="text" autoComplete="name" required value={name} onChange={(e) => setName(e.target.value)} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary" placeholder="Your full name" /> </div> </div> <div> <label htmlFor="company" className="block text-sm font-medium text-gray-700"> Company Name </label> <div className="mt-1 relative rounded-md shadow-sm"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <Building className="h-5 w-5 text-gray-400" /> </div> <input id="company" name="company" type="text" autoComplete="organization" required value={companyName} onChange={(e) => setCompanyName(e.target.value)} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary" placeholder="Your company name" /> </div> </div> <div> <label htmlFor="email" className="block text-sm font-medium text-gray-700"> Email address </label> <div className="mt-1 relative rounded-md shadow-sm"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <Mail className="h-5 w-5 text-gray-400" /> </div> <input id="email" name="email" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary" placeholder="Email address" /> </div> </div> <div> <label htmlFor="password" className="block text-sm font-medium text-gray-700"> Password </label> <div className="mt-1 relative rounded-md shadow-sm"> <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <Lock className="h-5 w-5 text-gray-400" /> </div> <input id="password" name="password" type="password" autoComplete="new-password" required value={password} onChange={(e) => setPassword(e.target.value)} className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary focus:border-primary" placeholder="Password" /> </div> <p className="mt-1 text-xs text-gray-500">Password must be at least 8 characters</p> </div> <div className="flex items-center"> <input id="terms" name="terms" type="checkbox" required className="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded" /> <label htmlFor="terms" className="ml-2 block text-sm text-gray-700"> I agree to the{' '} <a href="#" className="text-primary hover:text-primary-dark">Terms of Service</a> {' '}and{' '} <a href="#" className="text-primary hover:text-primary-dark">Privacy Policy</a> </label> </div> <div> <Button type="submit" className="w-full flex justify-center" disabled={isLoading} > {isLoading ? ( <div className="animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-white"></div> ) : 'Create Account'} </Button> </div> </form> <div className="mt-6"> <div className="relative"> <div className="absolute inset-0 flex items-center"> <div className="w-full border-t border-gray-300"></div> </div> <div className="relative flex justify-center text-sm"> <span className="px-2 bg-white text-gray-500">Or continue with</span> </div> </div> <div className="mt-6"> <Button variant="outline" className="w-full" onClick={handleGoogleSignup} > <svg className="h-5 w-5 mr-2" viewBox="0 0 24 24"> <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)"> <path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z" /> <path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z" /> <path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z" /> <path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z" /> </g> </svg> Sign up with Google </Button> </div> </div> <div className="mt-6 flex items-center justify-center"> <Link to="/" className="text-sm text-gray-600 hover:text-gray-900 flex items-center"> <ArrowLeft className="h-4 w-4 mr-1" /> Back to home </Link> </div> </div> </div> </div> ); }; export default SignupPage;