fix: do not submit login form when password field is hidden (#40723)

frontend/src/scenes/authentication/Login.tsx

@@ -66,7 +66,7 @@ export const scene: SceneExport = {
 }
 
 export function Login(): JSX.Element {
-    const { precheck, resendEmailMFA, clearGeneralError } = useActions(loginLogic)
+    const { precheck, resendEmailMFA, clearGeneralError, resetLogin } = useActions(loginLogic)
     const { openSupportForm } = useActions(supportLogic)
     const {
         precheckResponse,
@@ -80,6 +80,7 @@ export function Login(): JSX.Element {
     const { preflight } = useValues(preflightLogic)
 
     const passwordInputRef = useRef<HTMLInputElement>(null)
+    const preventPasswordError = useRef(false)
     const isPasswordHidden = precheckResponse.status === 'pending' || precheckResponse.sso_enforcement
     const isEmailVerificationSent = generalError?.code === 'email_verification_sent'
 
@@ -88,6 +89,9 @@ export function Login(): JSX.Element {
     useEffect(() => {
         if (!isPasswordHidden) {
             passwordInputRef.current?.focus()
+        } else {
+            // clear form when password field becomes hidden
+            resetLogin()
         }
     }, [isPasswordHidden])
 
@@ -156,7 +160,19 @@ export function Login(): JSX.Element {
                         </div>
                     </div>
                 ) : (
-                    <Form logic={loginLogic} formKey="login" enableFormOnSubmit className="deprecated-space-y-4">
+                    <Form
+                        logic={loginLogic}
+                        formKey="login"
+                        enableFormOnSubmit
+                        onSubmitCapture={(e) => {
+                            if (isPasswordHidden || preventPasswordError.current) {
+                                e.preventDefault()
+                                e.stopPropagation()
+                                preventPasswordError.current = false
+                            }
+                        }}
+                        className="deprecated-space-y-4"
+                    >
                         <RegionSelect />
                         <LemonField name="email" label="Email">
                             <LemonInput
@@ -167,7 +183,6 @@ export function Login(): JSX.Element {
                                 type="email"
                                 onBlur={() => precheck({ email: login.email })}
                                 onPressEnter={(e) => {
-                                    precheck({ email: login.email })
                                     if (isPasswordHidden) {
                                         e.preventDefault() // Don't trigger submission if password field is still hidden
                                         passwordInputRef.current?.focus()
@@ -185,6 +200,7 @@ export function Login(): JSX.Element {
                                         <Link
                                             to={[urls.passwordReset(), { email: login.email }]}
                                             data-attr="forgot-password"
+                                            tabIndex={-1}
                                         >
                                             Forgot your password?
                                         </Link>
@@ -213,6 +229,12 @@ export function Login(): JSX.Element {
                                 center
                                 loading={isLoginSubmitting || precheckResponseLoading}
                                 size="large"
+                                onMouseDown={() => {
+                                    if (isPasswordHidden) {
+                                        // prevent empty password error
+                                        preventPasswordError.current = true
+                                    }
+                                }}
                             >
                                 Log in
                             </LemonButton>