diff --git a/src/components/SignInButtons/AppleSignIn/index.tsx b/src/components/SignInButtons/AppleSignIn/index.tsx index 7ca0261d6c72..dc7ae48f3b57 100644 --- a/src/components/SignInButtons/AppleSignIn/index.tsx +++ b/src/components/SignInButtons/AppleSignIn/index.tsx @@ -16,6 +16,7 @@ const getConfig = (config: NativeConfig, key: string, defaultValue: string) => ( type AppleSignInDivProps = { isDesktopFlow: boolean; + onPointerDown?: () => void; }; type SingletonAppleSignInButtonProps = AppleSignInDivProps & { @@ -24,6 +25,7 @@ type SingletonAppleSignInButtonProps = AppleSignInDivProps & { type AppleSignInProps = WithNavigationFocusProps & { isDesktopFlow?: boolean; + onPointerDown?: () => void; // eslint-disable-next-line react/no-unused-prop-types onPress?: () => void; }; @@ -60,7 +62,7 @@ const failureListener = (event: AppleIDSignInOnFailureEvent) => { /** * Apple Sign In button for Web. */ -function AppleSignInDiv({isDesktopFlow}: AppleSignInDivProps) { +function AppleSignInDiv({isDesktopFlow, onPointerDown}: 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={onPointerDown} /> ) : (
); } @@ -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, onPointerDown}: 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, onPointerDown}: 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..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}: GoogleSignInProps) { +function GoogleSignIn({isDesktopFlow = false, onPointerDown}: GoogleSignInProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); const loadScript = useCallback(() => { @@ -76,6 +77,7 @@ function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) { id={desktopId} role={CONST.ROLE.BUTTON} aria-label={translate('common.signInWithGoogle')} + onPointerDown={onPointerDown} /> ) : ( @@ -84,6 +86,7 @@ function GoogleSignIn({isDesktopFlow = false}: GoogleSignInProps) { id={mainId} role={CONST.ROLE.BUTTON} aria-label={translate('common.signInWithGoogle')} + 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)} /> +