@@ -52,10 +52,6 @@ export default function LoginPrompt(props: LoginPromptProps) {
52
52
53
53
const [ useEmailSignIn , setUseEmailSignIn ] = useState ( false ) ;
54
54
55
- const [ email , setEmail ] = useState ( "" ) ;
56
- const [ checkEmail , setCheckEmail ] = useState ( false ) ;
57
- const [ recheckEmail , setRecheckEmail ] = useState ( false ) ;
58
-
59
55
useEffect ( ( ) => {
60
56
const google = ( window as any ) . google ;
61
57
@@ -118,49 +114,13 @@ export default function LoginPrompt(props: LoginPromptProps) {
118
114
} ) ;
119
115
} ;
120
116
121
- function handleMagicLinkSignIn ( ) {
122
- fetch ( "/auth/magic" , {
123
- method : "POST" ,
124
- headers : {
125
- "Content-Type" : "application/json" ,
126
- } ,
127
- body : JSON . stringify ( { email : email } ) ,
128
- } )
129
- . then ( ( res ) => {
130
- if ( res . ok ) {
131
- setCheckEmail ( true ) ;
132
- if ( checkEmail ) {
133
- setRecheckEmail ( true ) ;
134
- }
135
- return res . json ( ) ;
136
- } else {
137
- throw new Error ( "Failed to send magic link" ) ;
138
- }
139
- } )
140
- . then ( ( data ) => {
141
- console . log ( data ) ;
142
- } )
143
- . catch ( ( err ) => {
144
- console . error ( err ) ;
145
- } ) ;
146
- }
147
-
148
117
if ( props . isMobileWidth ) {
149
118
return (
150
119
< Drawer open = { true } onOpenChange = { props . onOpenChange } >
151
120
< DrawerContent className = { `flex flex-col gap-4 w-full mb-4` } >
152
121
< div >
153
122
{ useEmailSignIn ? (
154
- < EmailSignInContext
155
- email = { email }
156
- setEmail = { setEmail }
157
- checkEmail = { checkEmail }
158
- setCheckEmail = { setCheckEmail }
159
- setUseEmailSignIn = { setUseEmailSignIn }
160
- recheckEmail = { recheckEmail }
161
- setRecheckEmail = { setRecheckEmail }
162
- handleMagicLinkSignIn = { handleMagicLinkSignIn }
163
- />
123
+ < EmailSignInContext setUseEmailSignIn = { setUseEmailSignIn } />
164
124
) : (
165
125
< MainSignInContext
166
126
handleGoogleScriptLoad = { handleGoogleScriptLoad }
@@ -187,16 +147,7 @@ export default function LoginPrompt(props: LoginPromptProps) {
187
147
</ VisuallyHidden . Root >
188
148
< div >
189
149
{ useEmailSignIn ? (
190
- < EmailSignInContext
191
- email = { email }
192
- setEmail = { setEmail }
193
- checkEmail = { checkEmail }
194
- setCheckEmail = { setCheckEmail }
195
- setUseEmailSignIn = { setUseEmailSignIn }
196
- recheckEmail = { recheckEmail }
197
- setRecheckEmail = { setRecheckEmail }
198
- handleMagicLinkSignIn = { handleMagicLinkSignIn }
199
- />
150
+ < EmailSignInContext setUseEmailSignIn = { setUseEmailSignIn } />
200
151
) : (
201
152
< MainSignInContext
202
153
handleGoogleScriptLoad = { handleGoogleScriptLoad }
@@ -214,26 +165,17 @@ export default function LoginPrompt(props: LoginPromptProps) {
214
165
}
215
166
216
167
function EmailSignInContext ( {
217
- email,
218
- setEmail,
219
- checkEmail,
220
- setCheckEmail,
221
168
setUseEmailSignIn,
222
- recheckEmail,
223
- handleMagicLinkSignIn,
224
169
} : {
225
- email : string ;
226
- setEmail : ( email : string ) => void ;
227
- checkEmail : boolean ;
228
- setCheckEmail : ( checkEmail : boolean ) => void ;
229
170
setUseEmailSignIn : ( useEmailSignIn : boolean ) => void ;
230
- recheckEmail : boolean ;
231
- setRecheckEmail : ( recheckEmail : boolean ) => void ;
232
- handleMagicLinkSignIn : ( ) => void ;
233
171
} ) {
234
172
const [ otp , setOTP ] = useState ( "" ) ;
235
173
const [ otpError , setOTPError ] = useState ( "" ) ;
236
174
const [ numFailures , setNumFailures ] = useState ( 0 ) ;
175
+ const [ email , setEmail ] = useState ( "" ) ;
176
+ const [ checkEmail , setCheckEmail ] = useState ( false ) ;
177
+ const [ recheckEmail , setRecheckEmail ] = useState ( false ) ;
178
+ const [ sendEmailError , setSendEmailError ] = useState ( "" ) ;
237
179
238
180
function checkOTPAndRedirect ( ) {
239
181
const verifyUrl = `/auth/magic?code=${ encodeURIComponent ( otp ) } &email=${ encodeURIComponent ( email ) } ` ;
@@ -275,6 +217,39 @@ function EmailSignInContext({
275
217
} ) ;
276
218
}
277
219
220
+ function handleMagicLinkSignIn ( ) {
221
+ fetch ( "/auth/magic" , {
222
+ method : "POST" ,
223
+ headers : {
224
+ "Content-Type" : "application/json" ,
225
+ } ,
226
+ body : JSON . stringify ( { email : email } ) ,
227
+ } )
228
+ . then ( ( res ) => {
229
+ if ( res . ok ) {
230
+ setCheckEmail ( true ) ;
231
+ if ( checkEmail ) {
232
+ setRecheckEmail ( true ) ;
233
+ }
234
+ return res . json ( ) ;
235
+ } else if ( res . status === 429 || res . status === 404 ) {
236
+ res . json ( ) . then ( ( data ) => {
237
+ setSendEmailError ( data . detail ) ;
238
+ throw new Error ( data . detail ) ;
239
+ } ) ;
240
+ } else {
241
+ setSendEmailError ( "Failed to send email. Contact developers for assistance." ) ;
242
+ throw new Error ( "Failed to send magic link via email." ) ;
243
+ }
244
+ } )
245
+ . then ( ( data ) => {
246
+ console . log ( data ) ;
247
+ } )
248
+ . catch ( ( err ) => {
249
+ console . error ( err ) ;
250
+ } ) ;
251
+ }
252
+
278
253
return (
279
254
< div className = "flex flex-col gap-4 p-4" >
280
255
< Button
@@ -297,7 +272,7 @@ function EmailSignInContext({
297
272
: "You will receive a sign-in code on the email address you provide below" }
298
273
</ div >
299
274
{ ! checkEmail && (
300
- < >
275
+ < div className = "flex items-center justify-center gap-4 text-muted-foreground flex-col" >
301
276
< Input
302
277
placeholder = "Email"
303
278
className = "p-6 w-[300px] mx-auto rounded-lg"
@@ -320,7 +295,8 @@ function EmailSignInContext({
320
295
< PaperPlaneTilt className = "h-6 w-6 mr-2 font-bold" />
321
296
{ checkEmail ? "Check your email" : "Send sign in code" }
322
297
</ Button >
323
- </ >
298
+ { sendEmailError && < div className = "text-red-500 text-sm" > { sendEmailError } </ div > }
299
+ </ div >
324
300
) }
325
301
{ checkEmail && (
326
302
< div className = "flex items-center justify-center gap-4 text-muted-foreground flex-col" >
@@ -359,9 +335,7 @@ function EmailSignInContext({
359
335
variant = "ghost"
360
336
className = "p-0 text-orange-500"
361
337
disabled = { recheckEmail }
362
- onClick = { ( ) => {
363
- handleMagicLinkSignIn ( ) ;
364
- } }
338
+ onClick = { handleMagicLinkSignIn }
365
339
>
366
340
< ArrowsClockwise className = "h-6 w-6 mr-2 text-gray-500" />
367
341
Resend email
0 commit comments