33import { Suspense , useEffect , useState } from 'react'
44import Link from 'next/link'
55import { useRouter , useSearchParams } from 'next/navigation'
6- import { Command , CornerDownLeft , Eye , EyeOff } from 'lucide-react'
6+ import { Eye , EyeOff } from 'lucide-react'
77import { Button } from '@/components/ui/button'
88import { Input } from '@/components/ui/input'
99import { Label } from '@/components/ui/label'
1010import { client } from '@/lib/auth-client'
11- import { useNotificationStore } from '@/stores/notifications/store '
11+ import { cn } from '@/lib/utils '
1212import { SocialLoginButtons } from '@/app/(auth)/components/social-login-buttons'
1313
1414const PASSWORD_VALIDATIONS = {
@@ -41,12 +41,12 @@ function SignupFormContent({
4141 const searchParams = useSearchParams ( )
4242 const [ isLoading , setIsLoading ] = useState ( false )
4343 const [ , setMounted ] = useState ( false )
44- const { addNotification } = useNotificationStore ( )
4544 const [ showPassword , setShowPassword ] = useState ( false )
4645 const [ password , setPassword ] = useState ( '' )
4746 const [ passwordErrors , setPasswordErrors ] = useState < string [ ] > ( [ ] )
4847 const [ showValidationError , setShowValidationError ] = useState ( false )
4948 const [ email , setEmail ] = useState ( '' )
49+ const [ emailError , setEmailError ] = useState ( '' )
5050 const [ waitlistToken , setWaitlistToken ] = useState ( '' )
5151 const [ redirectUrl , setRedirectUrl ] = useState ( '' )
5252 const [ isInviteFlow , setIsInviteFlow ] = useState ( false )
@@ -144,6 +144,14 @@ function SignupFormContent({
144144 setShowValidationError ( false )
145145 }
146146
147+ const handleEmailChange = ( e : React . ChangeEvent < HTMLInputElement > ) => {
148+ setEmail ( e . target . value )
149+ // Clear any previous email errors when the user starts typing
150+ if ( emailError ) {
151+ setEmailError ( '' )
152+ }
153+ }
154+
147155 async function onSubmit ( e : React . FormEvent < HTMLFormElement > ) {
148156 e . preventDefault ( )
149157 setIsLoading ( true )
@@ -163,7 +171,8 @@ function SignupFormContent({
163171 try {
164172 if ( errors . length > 0 ) {
165173 // Show first error as notification
166- addNotification ( 'error' , errors [ 0 ] , null )
174+ setPasswordErrors ( [ errors [ 0 ] ] )
175+ setShowValidationError ( true )
167176 setIsLoading ( false )
168177 return
169178 }
@@ -177,33 +186,42 @@ function SignupFormContent({
177186 {
178187 onError : ( ctx ) => {
179188 console . error ( 'Signup error:' , ctx . error )
180- let errorMessage = 'Failed to create account'
189+ let errorMessage : string [ ] = [ 'Failed to create account' ]
181190
182- // Handle all possible error cases from Better Auth
183- if ( ctx . error . status === 422 || ctx . error . message ?. includes ( 'already exists' ) ) {
184- errorMessage = 'An account with this email already exists. Please sign in instead.'
191+ if ( ctx . error . code ?. includes ( 'USER_ALREADY_EXISTS' ) ) {
192+ errorMessage . push (
193+ 'An account with this email already exists. Please sign in instead.'
194+ )
195+ setEmailError ( errorMessage [ 0 ] )
185196 } else if (
186- ctx . error . message ?. includes ( 'BAD_REQUEST' ) ||
197+ ctx . error . code ?. includes ( 'BAD_REQUEST' ) ||
187198 ctx . error . message ?. includes ( 'Email and password sign up is not enabled' )
188199 ) {
189- errorMessage = 'Email signup is currently disabled.'
190- } else if ( ctx . error . message ?. includes ( 'INVALID_EMAIL' ) ) {
191- errorMessage = 'Please enter a valid email address.'
192- } else if ( ctx . error . message ?. includes ( 'PASSWORD_TOO_SHORT' ) ) {
193- errorMessage = 'Password must be at least 8 characters long.'
194- } else if ( ctx . error . message ?. includes ( 'MISSING_CREDENTIALS' ) ) {
195- errorMessage = 'Please enter all required fields.'
196- } else if ( ctx . error . message ?. includes ( 'EMAIL_PASSWORD_DISABLED' ) ) {
197- errorMessage = 'Email and password signup is disabled.'
198- } else if ( ctx . error . message ?. includes ( 'FAILED_TO_CREATE_USER' ) ) {
199- errorMessage = 'Failed to create account. Please try again later.'
200- } else if ( ctx . error . message ?. includes ( 'network' ) ) {
201- errorMessage = 'Network error. Please check your connection and try again.'
202- } else if ( ctx . error . message ?. includes ( 'rate limit' ) ) {
203- errorMessage = 'Too many requests. Please wait a moment before trying again.'
200+ errorMessage . push ( 'Email signup is currently disabled.' )
201+ setEmailError ( errorMessage [ 0 ] )
202+ } else if ( ctx . error . code ?. includes ( 'INVALID_EMAIL' ) ) {
203+ errorMessage . push ( 'Please enter a valid email address.' )
204+ setEmailError ( errorMessage [ 0 ] )
205+ } else if ( ctx . error . code ?. includes ( 'PASSWORD_TOO_SHORT' ) ) {
206+ errorMessage . push ( 'Password must be at least 8 characters long.' )
207+ setPasswordErrors ( errorMessage )
208+ setShowValidationError ( true )
209+ } else if ( ctx . error . code ?. includes ( 'PASSWORD_TOO_LONG' ) ) {
210+ errorMessage . push ( 'Password must be less than 128 characters long.' )
211+ setPasswordErrors ( errorMessage )
212+ setShowValidationError ( true )
213+ } else if ( ctx . error . code ?. includes ( 'network' ) ) {
214+ errorMessage . push ( 'Network error. Please check your connection and try again.' )
215+ setPasswordErrors ( errorMessage )
216+ setShowValidationError ( true )
217+ } else if ( ctx . error . code ?. includes ( 'rate limit' ) ) {
218+ errorMessage . push ( 'Too many requests. Please wait a moment before trying again.' )
219+ setPasswordErrors ( errorMessage )
220+ setShowValidationError ( true )
221+ } else {
222+ setPasswordErrors ( errorMessage )
223+ setShowValidationError ( true )
204224 }
205-
206- addNotification ( 'error' , errorMessage , null )
207225 } ,
208226 }
209227 )
@@ -255,7 +273,8 @@ function SignupFormContent({
255273 router . push ( '/verify' )
256274 } catch ( error ) {
257275 console . error ( 'Failed to send verification code:' , error )
258- addNotification ( 'error' , 'Account created but failed to send verification code.' , null )
276+ setPasswordErrors ( [ 'Account created but failed to send verification code.' ] )
277+ setShowValidationError ( true )
259278 router . push ( '/login' )
260279 }
261280 } catch ( error ) {
@@ -304,9 +323,17 @@ function SignupFormContent({
304323 autoComplete = "email"
305324 autoCorrect = "off"
306325 value = { email }
307- onChange = { ( e ) => setEmail ( e . target . value ) }
308- className = "bg-neutral-900 border-neutral-700 text-white"
326+ onChange = { handleEmailChange }
327+ className = { cn (
328+ 'bg-neutral-900 border-neutral-700 text-white' ,
329+ emailError && 'border-red-500 focus-visible:ring-red-500'
330+ ) }
309331 />
332+ { emailError && (
333+ < div className = "text-xs text-red-400 mt-1" >
334+ < p > { emailError } </ p >
335+ </ div >
336+ ) }
310337 </ div >
311338 < div className = "space-y-2" >
312339 < Label htmlFor = "password" className = "text-neutral-300" >
0 commit comments