|
| 1 | +import React, { useState } from 'react' |
| 2 | +import { FaGithub, FaGoogle, FaEnvelope, FaLock, FaUser } from 'react-icons/fa' |
| 3 | +import { useNavigate } from 'react-router-dom' |
| 4 | +import toast, { Toaster } from 'react-hot-toast' |
| 5 | + |
| 6 | +import Button from '../common/Button' |
| 7 | +import Input from '../common/Input' |
| 8 | +import { signUp, login } from '../../services/auth.service' |
| 9 | +import { signUpValidator, loginValidator } from '../../validators/auth.validators' |
| 10 | +import { useUserStore } from '../../store/users' |
| 11 | +import { useValidate } from '../../hooks/useValidate' |
| 12 | + |
| 13 | +const AuthForm: React.FC = () => { |
| 14 | + const [isSignUp, setIsSignUp] = useState(false) |
| 15 | + const [formData, setFormData] = useState({ |
| 16 | + name: '', |
| 17 | + email: '', |
| 18 | + password: '', |
| 19 | + }) |
| 20 | + const [errors, setErrors] = useState<{ name?: string; email?: string; password?: string }>({}) |
| 21 | + const [loading, setLoading] = useState(false) |
| 22 | + const navigate = useNavigate() |
| 23 | + const setUser = useUserStore(state => state.setUser) |
| 24 | + |
| 25 | + const validator = isSignUp ? signUpValidator : loginValidator |
| 26 | + |
| 27 | + const { validateField, validateForm } = useValidate(validator, setErrors, isSignUp, formData) |
| 28 | + |
| 29 | + const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
| 30 | + setFormData({ ...formData, [e.target.name]: e.target.value }) |
| 31 | + validateField(e.target.name as 'name' | 'email' | 'password') |
| 32 | + } |
| 33 | + |
| 34 | + const handleSubmit = async (e: React.FormEvent) => { |
| 35 | + e.preventDefault() |
| 36 | + if (!validateForm()) { |
| 37 | + toast.error('Please fix the errors!', { style: { background: '#171717', color: '#ff8800' } }) |
| 38 | + return |
| 39 | + } |
| 40 | + setLoading(true) |
| 41 | + try { |
| 42 | + const res = isSignUp |
| 43 | + ? await signUp({ name: formData.name, email: formData.email, password: formData.password }) |
| 44 | + : await login({ email: formData.email, password: formData.password }) |
| 45 | + |
| 46 | + if (res.error) { |
| 47 | + const errorMessage = |
| 48 | + typeof res.error === 'string' |
| 49 | + ? res.error |
| 50 | + : res.error.prettyMessage || res.error.message || 'An error occurred' |
| 51 | + toast.error(errorMessage, { style: { background: '#171717', color: '#ff8800' } }) |
| 52 | + } else if (res.data?.token) { |
| 53 | + setUser({ id: 0, name: formData.name, email: formData.email }) |
| 54 | + toast.success('Success!', { style: { background: '#171717', color: '#ff8800' } }) |
| 55 | + navigate('/dash') |
| 56 | + } |
| 57 | + } catch (error) { |
| 58 | + console.error('Auth error:', error) |
| 59 | + toast.error('Something went wrong!', { style: { background: '#171717', color: '#ff8800' } }) |
| 60 | + } finally { |
| 61 | + setLoading(false) |
| 62 | + } |
| 63 | + } |
| 64 | + |
| 65 | + return ( |
| 66 | + <div className="h-full bg-neutral-950 p-12 flex flex-col justify-center"> |
| 67 | + <Toaster position="top-center" /> |
| 68 | + <div className="max-w-md w-full mx-auto"> |
| 69 | + <div className="mb-8"> |
| 70 | + <h1 className="text-4xl font-bold text-white mb-2"> |
| 71 | + {isSignUp ? 'Create Account' : 'Welcome Back'} |
| 72 | + </h1> |
| 73 | + <p className="text-gray-400 font-light"> |
| 74 | + {isSignUp |
| 75 | + ? 'Sign up to start transforming your meetings' |
| 76 | + : 'Sign in to continue to Verse'} |
| 77 | + </p> |
| 78 | + </div> |
| 79 | + |
| 80 | + <div className="space-y-3 mb-8"> |
| 81 | + <Button |
| 82 | + variant="secondary" |
| 83 | + className="w-full flex items-center justify-center gap-3 px-6 py-3" |
| 84 | + > |
| 85 | + <FaGithub size={20} /> |
| 86 | + Continue with GitHub |
| 87 | + </Button> |
| 88 | + |
| 89 | + <Button |
| 90 | + variant="secondary" |
| 91 | + className="w-full flex items-center justify-center gap-3 px-6 py-3" |
| 92 | + > |
| 93 | + <FaGoogle size={20} /> |
| 94 | + Continue with Google |
| 95 | + </Button> |
| 96 | + </div> |
| 97 | + |
| 98 | + <div className="relative mb-8"> |
| 99 | + <div className="absolute inset-0 flex items-center"> |
| 100 | + <div className="w-full border-t border-neutral-800"></div> |
| 101 | + </div> |
| 102 | + <div className="relative flex justify-center text-sm"> |
| 103 | + <span className="px-4 bg-neutral-950 text-gray-400">or</span> |
| 104 | + </div> |
| 105 | + </div> |
| 106 | + |
| 107 | + <form onSubmit={handleSubmit} className="space-y-4"> |
| 108 | + {isSignUp && ( |
| 109 | + <div className="relative"> |
| 110 | + <FaUser className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" /> |
| 111 | + <Input |
| 112 | + type="text" |
| 113 | + name="name" |
| 114 | + placeholder="Full Name" |
| 115 | + value={formData.name} |
| 116 | + onChange={handleChange} |
| 117 | + className="pl-12" |
| 118 | + required |
| 119 | + onBlur={() => validateField('name')} |
| 120 | + /> |
| 121 | + {errors.name && <p className="text-xs text-orange-500 mt-1">{errors.name}</p>} |
| 122 | + </div> |
| 123 | + )} |
| 124 | + |
| 125 | + <div className="relative"> |
| 126 | + <FaEnvelope className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" /> |
| 127 | + <Input |
| 128 | + type="email" |
| 129 | + name="email" |
| 130 | + placeholder="Email Address" |
| 131 | + value={formData.email} |
| 132 | + onChange={handleChange} |
| 133 | + className="pl-12" |
| 134 | + required |
| 135 | + onBlur={() => validateField('email')} |
| 136 | + /> |
| 137 | + {errors.email && <p className="text-xs text-orange-500 mt-1">{errors.email}</p>} |
| 138 | + </div> |
| 139 | + |
| 140 | + <div className="relative"> |
| 141 | + <FaLock className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" /> |
| 142 | + <Input |
| 143 | + type="password" |
| 144 | + name="password" |
| 145 | + placeholder="Password" |
| 146 | + value={formData.password} |
| 147 | + onChange={handleChange} |
| 148 | + className="pl-12" |
| 149 | + required |
| 150 | + onBlur={() => validateField('password')} |
| 151 | + /> |
| 152 | + {errors.password && <p className="text-xs text-orange-500 mt-1">{errors.password}</p>} |
| 153 | + </div> |
| 154 | + |
| 155 | + {!isSignUp && ( |
| 156 | + <div className="flex justify-end"> |
| 157 | + <a |
| 158 | + href="#" |
| 159 | + className="text-sm text-secondary hover:text-orange-500 transition-colors" |
| 160 | + > |
| 161 | + Forgot password? |
| 162 | + </a> |
| 163 | + </div> |
| 164 | + )} |
| 165 | + |
| 166 | + <Button type="submit" variant="primary" className="w-full" disabled={loading}> |
| 167 | + {loading ? 'Loading...' : isSignUp ? 'Sign Up' : 'Sign In'} |
| 168 | + </Button> |
| 169 | + </form> |
| 170 | + |
| 171 | + <div className="mt-6 text-center"> |
| 172 | + <p className="text-gray-400 font-light"> |
| 173 | + {isSignUp ? 'Already have an account?' : "Don't have an account?"}{' '} |
| 174 | + <button |
| 175 | + type="button" |
| 176 | + onClick={() => setIsSignUp(!isSignUp)} |
| 177 | + className="text-secondary hover:text-orange-500 font-normal transition-colors" |
| 178 | + > |
| 179 | + {isSignUp ? 'Sign In' : 'Sign Up'} |
| 180 | + </button> |
| 181 | + </p> |
| 182 | + </div> |
| 183 | + |
| 184 | + {isSignUp && ( |
| 185 | + <p className="mt-6 text-center text-xs text-gray-500"> |
| 186 | + By signing up, you agree to our{' '} |
| 187 | + <a href="#" className="text-secondary hover:text-orange-500"> |
| 188 | + Terms of Service |
| 189 | + </a>{' '} |
| 190 | + and{' '} |
| 191 | + <a href="#" className="text-secondary hover:text-orange-500"> |
| 192 | + Privacy Policy |
| 193 | + </a> |
| 194 | + </p> |
| 195 | + )} |
| 196 | + </div> |
| 197 | + </div> |
| 198 | + ) |
| 199 | +} |
| 200 | + |
| 201 | +export default AuthForm |
0 commit comments