diff --git a/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx b/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx index 4fab30e7d1059..7a99ecaa27975 100644 --- a/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx +++ b/packages/frontend/core/src/components/sign-in/sign-in-with-email.tsx @@ -16,6 +16,7 @@ import { type SetStateAction, useCallback, useEffect, + useRef, useState, } from 'react'; @@ -32,7 +33,8 @@ export const SignInWithEmailStep = ({ changeState: Dispatch>; close: () => void; }) => { - const [resendCountDown, setResendCountDown] = useState(60); + const initialSent = useRef(false); + const [resendCountDown, setResendCountDown] = useState(0); const email = state.email; @@ -72,7 +74,7 @@ export const SignInWithEmailStep = ({ } }, [close, loginStatus, t]); - const onResendClick = useAsyncCallback(async () => { + const sendEmail = useAsyncCallback(async () => { if (isSending || (!verifyToken && needCaptcha)) return; setIsSending(true); try { @@ -102,6 +104,13 @@ export const SignInWithEmailStep = ({ verifyToken, ]); + useEffect(() => { + if (!initialSent.current && (verifyToken || !needCaptcha)) { + initialSent.current = true; + sendEmail(); + } + }, [initialSent, needCaptcha, sendEmail, verifyToken]); + const onSignInWithPasswordClick = useCallback(() => { changeState(prev => ({ ...prev, step: 'signInWithPassword' })); }, [changeState]); @@ -139,7 +148,7 @@ export const SignInWithEmailStep = ({ disabled={isSending} variant="plain" size="large" - onClick={onResendClick} + onClick={sendEmail} > {t['com.affine.auth.sign.auth.code.resend.hint']()} diff --git a/packages/frontend/core/src/components/sign-in/sign-in-with-password.tsx b/packages/frontend/core/src/components/sign-in/sign-in-with-password.tsx index fa99e6a8f3d1e..30b00e1c5859f 100644 --- a/packages/frontend/core/src/components/sign-in/sign-in-with-password.tsx +++ b/packages/frontend/core/src/components/sign-in/sign-in-with-password.tsx @@ -57,7 +57,6 @@ export const SignInWithPasswordStep = ({ const needCaptcha = useLiveData(captchaService.needCaptcha$); const challenge = useLiveData(captchaService.challenge$); const [isLoading, setIsLoading] = useState(false); - const [sendingEmail, setSendingEmail] = useState(false); const loginStatus = useLiveData(authService.session.status$); @@ -100,20 +99,9 @@ export const SignInWithPasswordStep = ({ challenge, ]); - const sendMagicLink = useAsyncCallback(async () => { - if (sendingEmail) return; - setSendingEmail(true); - try { - changeState(prev => ({ ...prev, step: 'signInWithEmail' })); - } catch (err) { - console.error(err); - notify.error({ - title: 'Failed to send email, please try again.', - }); - // TODO(@eyhn): handle error better - } - setSendingEmail(false); - }, [sendingEmail, changeState]); + const sendMagicLink = useCallback(() => { + changeState(prev => ({ ...prev, step: 'signInWithEmail' })); + }, [changeState]); return ( <>