From 3ea45a25e653df3a69e3e20413ddf745d3bbaa27 Mon Sep 17 00:00:00 2001 From: Huu Le <20178761+huult@users.noreply.github.com> Date: Tue, 26 Nov 2024 10:47:09 +0700 Subject: [PATCH 1/2] fix resolve email field error after signing in with Apple or Gmai --- .../SignInButtons/AppleSignIn/index.tsx | 24 +++++++++++++++---- .../SignInButtons/GoogleSignIn/index.tsx | 4 +++- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/src/components/SignInButtons/AppleSignIn/index.tsx b/src/components/SignInButtons/AppleSignIn/index.tsx index 7ca0261d6c72..476f000ce2d8 100644 --- a/src/components/SignInButtons/AppleSignIn/index.tsx +++ b/src/components/SignInButtons/AppleSignIn/index.tsx @@ -16,10 +16,12 @@ const getConfig = (config: NativeConfig, key: string, defaultValue: string) => ( type AppleSignInDivProps = { isDesktopFlow: boolean; + onPress?: () => void; }; type SingletonAppleSignInButtonProps = AppleSignInDivProps & { isFocused: boolean; + onPress?: () => void; }; type AppleSignInProps = WithNavigationFocusProps & { @@ -60,7 +62,7 @@ const failureListener = (event: AppleIDSignInOnFailureEvent) => { /** * Apple Sign In button for Web. */ -function AppleSignInDiv({isDesktopFlow}: AppleSignInDivProps) { +function AppleSignInDiv({isDesktopFlow, onPress}: AppleSignInDivProps) { useEffect(() => { // `init` renders the button, so it must be called after the div is // first mounted. @@ -88,6 +90,7 @@ function AppleSignInDiv({isDesktopFlow}: AppleSignInDivProps) { data-width={CONST.SIGN_IN_FORM_WIDTH} data-height="52" style={{cursor: 'pointer'}} + onPointerDown={onPress} /> ) : (
); } @@ -106,17 +110,22 @@ function AppleSignInDiv({isDesktopFlow}: AppleSignInDivProps) { // The Sign in with Apple script may fail to render button if there are multiple // of these divs present in the app, as it matches based on div id. So we'll // only mount the div when it should be visible. -function SingletonAppleSignInButton({isFocused, isDesktopFlow}: SingletonAppleSignInButtonProps) { +function SingletonAppleSignInButton({isFocused, isDesktopFlow, onPress}: SingletonAppleSignInButtonProps) { if (!isFocused) { return null; } - return ; + return ( + + ); } // withNavigationFocus is used to only render the button when it is visible. const SingletonAppleSignInButtonWithFocus = withNavigationFocus(SingletonAppleSignInButton); -function AppleSignIn({isDesktopFlow = false}: AppleSignInProps) { +function AppleSignIn({isDesktopFlow = false, onPress}: AppleSignInProps) { const [scriptLoaded, setScriptLoaded] = useState(false); useEffect(() => { if (window.appleAuthScriptLoaded) { @@ -136,7 +145,12 @@ function AppleSignIn({isDesktopFlow = false}: AppleSignInProps) { return null; } - return ; + return ( + + ); } AppleSignIn.displayName = 'AppleSignIn'; diff --git a/src/components/SignInButtons/GoogleSignIn/index.tsx b/src/components/SignInButtons/GoogleSignIn/index.tsx index f12d039209f5..8a224b49beba 100644 --- a/src/components/SignInButtons/GoogleSignIn/index.tsx +++ b/src/components/SignInButtons/GoogleSignIn/index.tsx @@ -27,7 +27,7 @@ const signIn = (response: Response) => { * @returns {React.Component} */ -function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) { +function GoogleSignIn({isDesktopFlow = false, onPress}: GoogleSignInProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const loadScript = useCallback(() => { @@ -76,6 +76,7 @@ function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) { id={desktopId} role={CONST.ROLE.BUTTON} aria-label={translate('common.signInWithGoogle')} + onPointerDown={onPress} /> ) : ( @@ -84,6 +85,7 @@ function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) { id={mainId} role={CONST.ROLE.BUTTON} aria-label={translate('common.signInWithGoogle')} + onPointerDown={onPress} /> ); From de3437c59fee0d8b9b620aad3fbbccf784599a43 Mon Sep 17 00:00:00 2001 From: Huu Le <20178761+huult@users.noreply.github.com> Date: Thu, 28 Nov 2024 21:11:35 +0700 Subject: [PATCH 2/2] Update onPress to onPointerDown --- .../SignInButtons/AppleSignIn/index.tsx | 18 +++++++++--------- .../SignInButtons/GoogleSignIn/index.tsx | 7 ++++--- src/pages/signin/LoginForm/BaseLoginForm.tsx | 12 ++++++++++-- 3 files changed, 23 insertions(+), 14 deletions(-) diff --git a/src/components/SignInButtons/AppleSignIn/index.tsx b/src/components/SignInButtons/AppleSignIn/index.tsx index 476f000ce2d8..dc7ae48f3b57 100644 --- a/src/components/SignInButtons/AppleSignIn/index.tsx +++ b/src/components/SignInButtons/AppleSignIn/index.tsx @@ -16,16 +16,16 @@ const getConfig = (config: NativeConfig, key: string, defaultValue: string) => ( type AppleSignInDivProps = { isDesktopFlow: boolean; - onPress?: () => void; + onPointerDown?: () => void; }; type SingletonAppleSignInButtonProps = AppleSignInDivProps & { isFocused: boolean; - onPress?: () => void; }; type AppleSignInProps = WithNavigationFocusProps & { isDesktopFlow?: boolean; + onPointerDown?: () => void; // eslint-disable-next-line react/no-unused-prop-types onPress?: () => void; }; @@ -62,7 +62,7 @@ const failureListener = (event: AppleIDSignInOnFailureEvent) => { /** * Apple Sign In button for Web. */ -function AppleSignInDiv({isDesktopFlow, onPress}: AppleSignInDivProps) { +function AppleSignInDiv({isDesktopFlow, onPointerDown}: AppleSignInDivProps) { useEffect(() => { // `init` renders the button, so it must be called after the div is // first mounted. @@ -90,7 +90,7 @@ function AppleSignInDiv({isDesktopFlow, onPress}: AppleSignInDivProps) { data-width={CONST.SIGN_IN_FORM_WIDTH} data-height="52" style={{cursor: 'pointer'}} - onPointerDown={onPress} + onPointerDown={onPointerDown} /> ) : (
); } @@ -110,14 +110,14 @@ function AppleSignInDiv({isDesktopFlow, onPress}: AppleSignInDivProps) { // The Sign in with Apple script may fail to render button if there are multiple // of these divs present in the app, as it matches based on div id. So we'll // only mount the div when it should be visible. -function SingletonAppleSignInButton({isFocused, isDesktopFlow, onPress}: SingletonAppleSignInButtonProps) { +function SingletonAppleSignInButton({isFocused, isDesktopFlow, onPointerDown}: SingletonAppleSignInButtonProps) { if (!isFocused) { return null; } return ( ); } @@ -125,7 +125,7 @@ function SingletonAppleSignInButton({isFocused, isDesktopFlow, onPress}: Singlet // withNavigationFocus is used to only render the button when it is visible. const SingletonAppleSignInButtonWithFocus = withNavigationFocus(SingletonAppleSignInButton); -function AppleSignIn({isDesktopFlow = false, onPress}: AppleSignInProps) { +function AppleSignIn({isDesktopFlow = false, onPointerDown}: AppleSignInProps) { const [scriptLoaded, setScriptLoaded] = useState(false); useEffect(() => { if (window.appleAuthScriptLoaded) { @@ -148,7 +148,7 @@ function AppleSignIn({isDesktopFlow = false, onPress}: AppleSignInProps) { return ( ); } diff --git a/src/components/SignInButtons/GoogleSignIn/index.tsx b/src/components/SignInButtons/GoogleSignIn/index.tsx index 8a224b49beba..c35fdb082487 100644 --- a/src/components/SignInButtons/GoogleSignIn/index.tsx +++ b/src/components/SignInButtons/GoogleSignIn/index.tsx @@ -11,6 +11,7 @@ type GoogleSignInProps = { isDesktopFlow?: boolean; // eslint-disable-next-line react/no-unused-prop-types onPress?: () => void; + onPointerDown?: () => void; }; /** Div IDs for styling the two different Google Sign-In buttons. */ @@ -27,7 +28,7 @@ const signIn = (response: Response) => { * @returns {React.Component} */ -function GoogleSignIn({isDesktopFlow = false, onPress}: GoogleSignInProps) { +function GoogleSignIn({isDesktopFlow = false, onPointerDown}: GoogleSignInProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const loadScript = useCallback(() => { @@ -76,7 +77,7 @@ function GoogleSignIn({isDesktopFlow = false, onPress}: GoogleSignInProps) { id={desktopId} role={CONST.ROLE.BUTTON} aria-label={translate('common.signInWithGoogle')} - onPointerDown={onPress} + onPointerDown={onPointerDown} /> ) : ( @@ -85,7 +86,7 @@ function GoogleSignIn({isDesktopFlow = false, onPress}: GoogleSignInProps) { id={mainId} role={CONST.ROLE.BUTTON} aria-label={translate('common.signInWithGoogle')} - onPointerDown={onPress} + onPointerDown={onPointerDown} /> ); diff --git a/src/pages/signin/LoginForm/BaseLoginForm.tsx b/src/pages/signin/LoginForm/BaseLoginForm.tsx index 2e762224f904..e93ff84ea1db 100644 --- a/src/pages/signin/LoginForm/BaseLoginForm.tsx +++ b/src/pages/signin/LoginForm/BaseLoginForm.tsx @@ -220,6 +220,8 @@ function BaseLoginForm({login, onLoginChanged, blurOnSubmit = false, isVisible}: }); }, []); + const handleSignIn = () => setIsSigningWithAppleOrGoogle(true); + return ( <> - setIsSigningWithAppleOrGoogle(true)} /> + - setIsSigningWithAppleOrGoogle(true)} /> +