Chore: Replace Form usage in LoginForm.tsx (#81326)

public/app/core/components/Login/LoginForm.tsx

@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
 import React, { ReactElement, useId } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, Form, Input, Field, useStyles2 } from '@grafana/ui';
+import { Button, Input, Field, useStyles2 } from '@grafana/ui';
 
 import { PasswordField } from '../PasswordField/PasswordField';
 
@@ -21,42 +22,43 @@ export const LoginForm = ({ children, onSubmit, isLoggingIn, passwordHint, login
   const styles = useStyles2(getStyles);
   const usernameId = useId();
   const passwordId = useId();
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<FormModel>({ mode: 'onChange' });
 
   return (
     <div className={styles.wrapper}>
-      <Form onSubmit={onSubmit} validateOn="onChange">
+      <form onSubmit={handleSubmit(onSubmit)}>
-        {({ register, errors }) => (
+        <Field label="Email or username" invalid={!!errors.user} error={errors.user?.message}>
-          <>
+          <Input
-            <Field label="Email or username" invalid={!!errors.user} error={errors.user?.message}>
+            {...register('user', { required: 'Email or username is required' })}
-              <Input
+            id={usernameId}
-                {...register('user', { required: 'Email or username is required' })}
+            autoFocus
-                id={usernameId}
+            autoCapitalize="none"
-                autoFocus
+            placeholder={loginHint}
-                autoCapitalize="none"
+            data-testid={selectors.pages.Login.username}
-                placeholder={loginHint}
+          />
-                data-testid={selectors.pages.Login.username}
+        </Field>
-              />
+        <Field label="Password" invalid={!!errors.password} error={errors.password?.message}>
-            </Field>
+          <PasswordField
-            <Field label="Password" invalid={!!errors.password} error={errors.password?.message}>
+            {...register('password', { required: 'Password is required' })}
-              <PasswordField
+            id={passwordId}
-                {...register('password', { required: 'Password is required' })}
+            autoComplete="current-password"
-                id={passwordId}
+            placeholder={passwordHint}
-                autoComplete="current-password"
+          />
-                placeholder={passwordHint}
+        </Field>
-              />
+        <Button
-            </Field>
+          type="submit"
-            <Button
+          data-testid={selectors.pages.Login.submit}
-              type="submit"
+          className={styles.submitButton}
-              data-testid={selectors.pages.Login.submit}
+          disabled={isLoggingIn}
-              className={styles.submitButton}
+        >
-              disabled={isLoggingIn}
+          {isLoggingIn ? 'Logging in...' : 'Log in'}
-            >
+        </Button>
-              {isLoggingIn ? 'Logging in...' : 'Log in'}
+        {children}
-            </Button>
+      </form>
-            {children}
-          </>
-        )}
-      </Form>
     </div>
   );
 };