(airflow) branch main updated: Allow enter/return button to submit login (#48409)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new 14eb0525760 Allow enter/return button to submit login (#48409)
14eb0525760 is described below

commit 14eb0525760f76e6b9bbdf1f7503878d1f9daeef
Author: Brent Bovenzi <br...@astronomer.io>
AuthorDate: Wed Mar 26 13:53:00 2025 -0400

    Allow enter/return button to submit login (#48409)
---
 .../managers/simple/ui/src/login/LoginForm.tsx     | 80 +++++++++++++---------
 1 file changed, 46 insertions(+), 34 deletions(-)

diff --git 
a/airflow-core/src/airflow/api_fastapi/auth/managers/simple/ui/src/login/LoginForm.tsx
 
b/airflow-core/src/airflow/api_fastapi/auth/managers/simple/ui/src/login/LoginForm.tsx
index b83c860a15b..05df44410b3 100644
--- 
a/airflow-core/src/airflow/api_fastapi/auth/managers/simple/ui/src/login/LoginForm.tsx
+++ 
b/airflow-core/src/airflow/api_fastapi/auth/managers/simple/ui/src/login/LoginForm.tsx
@@ -18,50 +18,62 @@
  */
 
 import React from "react";
-import {Button, Field, Input, Stack} from "@chakra-ui/react";
-import {Controller, useForm} from "react-hook-form";
-import {LoginBody} from "./Login";
+import { Button, Field, Input, Stack } from "@chakra-ui/react";
+import { Controller, useForm } from "react-hook-form";
+import { LoginBody } from "./Login";
 
 type LoginFormProps = {
-    readonly onLogin: (loginBody: LoginBody) => string;
-    readonly isPending: boolean;
+  readonly onLogin: (loginBody: LoginBody) => string;
+  readonly isPending: boolean;
 };
 
 export const LoginForm = ({ onLogin, isPending }: LoginFormProps) => {
-    const {
-        control, handleSubmit,
-        formState: { isValid },
-    } = useForm<LoginBody>({
-        defaultValues: {
-            username: "", password: "",
-        },
-    });
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid },
+  } = useForm<LoginBody>({
+    defaultValues: {
+      username: "",
+      password: "",
+    },
+  });
 
-    return <Stack spacing={4}>
+  return (
+    <form onSubmit={() => void handleSubmit(onLogin)()}>
+      <Stack gap={4}>
         <Controller
-            name="username"
-            control={control}
-            render={({field, fieldState}) => (
-                <Field.Root invalid={Boolean(fieldState.error)} required>
-                    <Field.Label>Username</Field.Label>
-                    <Input {...field} />
-                </Field.Root>)}
-            rules={{required: true}}
+          name="username"
+          control={control}
+          render={({ field, fieldState }) => (
+            <Field.Root invalid={Boolean(fieldState.error)} required>
+              <Field.Label>Username</Field.Label>
+              <Input {...field} />
+            </Field.Root>
+          )}
+          rules={{ required: true }}
         />
 
         <Controller
-            name="password"
-            control={control}
-            render={({field, fieldState}) => (
-                <Field.Root invalid={Boolean(fieldState.error)} required>
-                    <Field.Label>Password</Field.Label>
-                    <Input {...field} type="password"/>
-                </Field.Root>)}
-            rules={{required: true}}
+          name="password"
+          control={control}
+          render={({ field, fieldState }) => (
+            <Field.Root invalid={Boolean(fieldState.error)} required>
+              <Field.Label>Password</Field.Label>
+              <Input {...field} type="password" />
+            </Field.Root>
+          )}
+          rules={{ required: true }}
         />
 
-        <Button disabled={!isValid || isPending} colorPalette="blue" 
onClick={() => void handleSubmit(onLogin)()}>
-            Sign in
+        <Button
+          disabled={!isValid || isPending}
+          colorPalette="blue"
+          type="submit"
+        >
+          Sign in
         </Button>
-    </Stack>
-}
+      </Stack>
+    </form>
+  );
+};