fix: Detect autofill/paste in the email field and fireprechecks (#42396)

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: yasen-posthog

frontend/src/lib/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react'
+
+export function usePrevious<T>(value: T): T | undefined {
+    const ref = useRef<T | undefined>(undefined)
+
+    useEffect(() => {
+        ref.current = value
+    }, [value])
+
+    return ref.current
+}

frontend/src/lib/utils.tsx

@@ -850,13 +850,14 @@ export function isExternalLink(input: any): boolean {
     return !!input.trim().match(regexp)
 }
 
-export function isEmail(string: string): boolean {
+export function isEmail(string: string, options?: { requireTLD?: boolean }): boolean {
     if (!string) {
         return false
     }
     // https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address
-    const regexp =
-        /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    const regexp = options?.requireTLD
+        ? /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*\.[a-zA-Z]{2,}$/
+        : /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
     return !!string.match?.(regexp)
 }
 

frontend/src/scenes/authentication/Login.tsx

@@ -11,9 +11,11 @@ import { getCookie } from 'lib/api'
 import { BridgePage } from 'lib/components/BridgePage/BridgePage'
 import { SSOEnforcedLoginButton, SocialLoginButtons } from 'lib/components/SocialLoginButton/SocialLoginButton'
 import { supportLogic } from 'lib/components/Support/supportLogic'
+import { usePrevious } from 'lib/hooks/usePrevious'
 import { LemonBanner } from 'lib/lemon-ui/LemonBanner'
 import { LemonField } from 'lib/lemon-ui/LemonField'
 import { Link } from 'lib/lemon-ui/Link'
+import { isEmail } from 'lib/utils'
 import { preflightLogic } from 'scenes/PreflightCheck/preflightLogic'
 import { SceneExport } from 'scenes/sceneTypes'
 import { urls } from 'scenes/urls'
@@ -86,6 +88,7 @@ export function Login(): JSX.Element {
     const wasPasswordHiddenRef = useRef(isPasswordHidden)
 
     const lastLoginMethod = getCookie(LAST_LOGIN_METHOD_COOKIE) as LoginMethod
+    const prevEmail = usePrevious(login.email)
 
     useEffect(() => {
         const wasPasswordHidden = wasPasswordHiddenRef.current
@@ -99,6 +102,16 @@ export function Login(): JSX.Element {
         }
     }, [isPasswordHidden, resetLogin])
 
+    // Trigger precheck for password manager autofill/paste (detected by large character delta)
+    useEffect(() => {
+        const charDelta = login.email.length - (prevEmail?.length ?? 0)
+        const isAutofill = charDelta > 1
+
+        if (isAutofill && isEmail(login.email, { requireTLD: true }) && precheckResponse.status === 'pending') {
+            precheck({ email: login.email })
+        }
+    }, [login.email, prevEmail, precheckResponse.status, precheck])
+
     return (
         <BridgePage
             view="login"