From 3edfc46307750c770a1847f3effd7ab599003f54 Mon Sep 17 00:00:00 2001 From: Qi <474021214@qq.com> Date: Sat, 2 Sep 2023 14:07:38 +0800 Subject: [PATCH] feat: optimize sign in experience (#4099) --- .../affine/auth/after-sign-in-send-email.tsx | 6 +- .../affine/auth/after-sign-up-send-email.tsx | 6 +- .../src/components/affine/auth/sign-in.tsx | 32 ++++++---- .../src/components/affine/auth/use-auth.ts | 64 +++++++++++-------- 4 files changed, 59 insertions(+), 49 deletions(-) diff --git a/apps/core/src/components/affine/auth/after-sign-in-send-email.tsx b/apps/core/src/components/affine/auth/after-sign-in-send-email.tsx index 5db7f13fe8..a3344a98eb 100644 --- a/apps/core/src/components/affine/auth/after-sign-in-send-email.tsx +++ b/apps/core/src/components/affine/auth/after-sign-in-send-email.tsx @@ -22,11 +22,7 @@ export const AfterSignInSendEmail = ({ const t = useAFFiNEI18N(); const loginStatus = useCurrentLoginStatus(); - const { resendCountDown, allowSendEmail, signIn } = useAuth({ - onNoAccess: useCallback(() => { - setAuthState('noAccess'); - }, [setAuthState]), - }); + const { resendCountDown, allowSendEmail, signIn } = useAuth(); if (loginStatus === 'authenticated') { onSignedIn?.(); } diff --git a/apps/core/src/components/affine/auth/after-sign-up-send-email.tsx b/apps/core/src/components/affine/auth/after-sign-up-send-email.tsx index 36a0ff7acb..71fa68a67a 100644 --- a/apps/core/src/components/affine/auth/after-sign-up-send-email.tsx +++ b/apps/core/src/components/affine/auth/after-sign-up-send-email.tsx @@ -21,11 +21,7 @@ export const AfterSignUpSendEmail: FC = ({ const t = useAFFiNEI18N(); const loginStatus = useCurrentLoginStatus(); - const { resendCountDown, allowSendEmail, signUp } = useAuth({ - onNoAccess: useCallback(() => { - setAuthState('noAccess'); - }, [setAuthState]), - }); + const { resendCountDown, allowSendEmail, signUp } = useAuth(); if (loginStatus === 'authenticated') { onSignedIn?.(); diff --git a/apps/core/src/components/affine/auth/sign-in.tsx b/apps/core/src/components/affine/auth/sign-in.tsx index 892e441b73..12fa7bd8d2 100644 --- a/apps/core/src/components/affine/auth/sign-in.tsx +++ b/apps/core/src/components/affine/auth/sign-in.tsx @@ -16,7 +16,7 @@ import { useCurrentLoginStatus } from '../../../hooks/affine/use-current-login-s import { emailRegex } from '../../../utils/email-regex'; import type { AuthPanelProps } from './index'; import * as style from './style.css'; -import { useAuth } from './use-auth'; +import { INTERNAL_BETA_URL, useAuth } from './use-auth'; function validateEmail(email: string) { return emailRegex.test(email); @@ -31,12 +31,14 @@ export const SignIn: FC = ({ const t = useAFFiNEI18N(); const loginStatus = useCurrentLoginStatus(); - const { resendCountDown, allowSendEmail, signIn, signUp, signInWithGoogle } = - useAuth({ - onNoAccess: useCallback(() => { - setAuthState('noAccess'); - }, [setAuthState]), - }); + const { + isMutating: isSigningIn, + resendCountDown, + allowSendEmail, + signIn, + signUp, + signInWithGoogle, + } = useAuth(); const { trigger: verifyUser, isMutating } = useMutation({ mutation: getUserQuery, @@ -55,16 +57,20 @@ export const SignIn: FC = ({ setIsValidEmail(true); const { user } = await verifyUser({ email }); - setAuthEmail(email); + if (user) { + const res = await signIn(email); + if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) { + return setAuthState('noAccess'); + } setAuthState('afterSignInSendEmail'); - - await signIn(email); } else { + const res = await signUp(email); + if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) { + return setAuthState('noAccess'); + } setAuthState('afterSignUpSendEmail'); - - await signUp(email); } }, [email, setAuthEmail, setAuthState, signIn, signUp, verifyUser]); @@ -112,7 +118,7 @@ export const SignIn: FC = ({ size="extraLarge" data-testid="continue-login-button" block - loading={isMutating} + loading={isMutating || isSigningIn} disabled={!allowSendEmail} icon={ allowSendEmail || isMutating ? ( diff --git a/apps/core/src/components/affine/auth/use-auth.ts b/apps/core/src/components/affine/auth/use-auth.ts index a17ef89a02..013571bb6c 100644 --- a/apps/core/src/components/affine/auth/use-auth.ts +++ b/apps/core/src/components/affine/auth/use-auth.ts @@ -7,7 +7,7 @@ import { useCallback } from 'react'; import { signInCloud } from '../../../utils/cloud-utils'; const COUNT_DOWN_TIME = 60; -const INTERNAL_BETA_URL = `https://community.affine.pro/c/insider-general/`; +export const INTERNAL_BETA_URL = `https://community.affine.pro/c/insider-general/`; function handleSendEmailError( res: SignInResponse | undefined | void, @@ -20,21 +20,16 @@ function handleSendEmailError( type: 'error', }); } - // if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) { - // pushNotification({ - // title: 'Sign up error', - // message: `You don't have early access permission\nVisit ${INTERNAL_BETA_URL} for more information`, - // type: 'error', - // }); - // } } type AuthStoreAtom = { allowSendEmail: boolean; resendCountDown: number; + isMutating: boolean; }; export const authStoreAtom = atom({ + isMutating: false, allowSendEmail: true, resendCountDown: COUNT_DOWN_TIME, }); @@ -46,6 +41,7 @@ const countDownAtom = atom( const countDown = get(authStoreAtom).resendCountDown; if (countDown === 0) { set(authStoreAtom, { + isMutating: false, allowSendEmail: true, resendCountDown: COUNT_DOWN_TIME, }); @@ -53,6 +49,7 @@ const countDownAtom = atom( return; } set(authStoreAtom, { + isMutating: false, resendCountDown: countDown - 1, allowSendEmail: false, }); @@ -60,18 +57,19 @@ const countDownAtom = atom( } ); -export const useAuth = ({ onNoAccess }: { onNoAccess: () => void }) => { +export const useAuth = () => { const pushNotification = useSetAtom(pushNotificationAtom); const [authStore, setAuthStore] = useAtom(authStoreAtom); const startResendCountDown = useSetAtom(countDownAtom); const signIn = useCallback( async (email: string) => { - setAuthStore(() => ({ - allowSendEmail: false, - resendCountDown: COUNT_DOWN_TIME, - })); - startResendCountDown(); + setAuthStore(prev => { + return { + ...prev, + isMutating: true, + }; + }); const res = await signInCloud('email', { email: email, @@ -81,20 +79,27 @@ export const useAuth = ({ onNoAccess }: { onNoAccess: () => void }) => { handleSendEmailError(res, pushNotification); - if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) { - onNoAccess(); - } + setAuthStore({ + isMutating: false, + allowSendEmail: false, + resendCountDown: COUNT_DOWN_TIME, + }); + + startResendCountDown(); + + return res; }, - [onNoAccess, pushNotification, setAuthStore, startResendCountDown] + [pushNotification, setAuthStore, startResendCountDown] ); const signUp = useCallback( async (email: string) => { - setAuthStore({ - allowSendEmail: false, - resendCountDown: COUNT_DOWN_TIME, + setAuthStore(prev => { + return { + ...prev, + isMutating: true, + }; }); - startResendCountDown(); const res = await signInCloud('email', { email: email, @@ -104,11 +109,17 @@ export const useAuth = ({ onNoAccess }: { onNoAccess: () => void }) => { handleSendEmailError(res, pushNotification); - if (res?.status === 403 && res?.url === INTERNAL_BETA_URL) { - onNoAccess(); - } + setAuthStore({ + isMutating: false, + allowSendEmail: false, + resendCountDown: COUNT_DOWN_TIME, + }); + + startResendCountDown(); + + return res; }, - [onNoAccess, pushNotification, setAuthStore, startResendCountDown] + [pushNotification, setAuthStore, startResendCountDown] ); const signInWithGoogle = useCallback(() => { @@ -118,6 +129,7 @@ export const useAuth = ({ onNoAccess }: { onNoAccess: () => void }) => { return { allowSendEmail: authStore.allowSendEmail, resendCountDown: authStore.resendCountDown, + isMutating: authStore.isMutating, signUp, signIn, signInWithGoogle,