From 857bce25e61f4f01593a79f90449a06cc1a1bf1a Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Fri, 26 Jan 2024 13:04:44 +0100
Subject: [PATCH] Chore: Replace Form usage in LoginForm.tsx (#81326)

---
 .../app/core/components/Login/LoginForm.tsx   | 70 ++++++++++---------
 1 file changed, 36 insertions(+), 34 deletions(-)

diff --git a/public/app/core/components/Login/LoginForm.tsx b/public/app/core/components/Login/LoginForm.tsx
index 66ceb149afe..7eea1bb5dc6 100644
--- a/public/app/core/components/Login/LoginForm.tsx
+++ b/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">
-        {({ register, errors }) => (
-          <>
-            <Field label="Email or username" invalid={!!errors.user} error={errors.user?.message}>
-              <Input
-                {...register('user', { required: 'Email or username is required' })}
-                id={usernameId}
-                autoFocus
-                autoCapitalize="none"
-                placeholder={loginHint}
-                data-testid={selectors.pages.Login.username}
-              />
-            </Field>
-            <Field label="Password" invalid={!!errors.password} error={errors.password?.message}>
-              <PasswordField
-                {...register('password', { required: 'Password is required' })}
-                id={passwordId}
-                autoComplete="current-password"
-                placeholder={passwordHint}
-              />
-            </Field>
-            <Button
-              type="submit"
-              data-testid={selectors.pages.Login.submit}
-              className={styles.submitButton}
-              disabled={isLoggingIn}
-            >
-              {isLoggingIn ? 'Logging in...' : 'Log in'}
-            </Button>
-            {children}
-          </>
-        )}
-      </Form>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Field label="Email or username" invalid={!!errors.user} error={errors.user?.message}>
+          <Input
+            {...register('user', { required: 'Email or username is required' })}
+            id={usernameId}
+            autoFocus
+            autoCapitalize="none"
+            placeholder={loginHint}
+            data-testid={selectors.pages.Login.username}
+          />
+        </Field>
+        <Field label="Password" invalid={!!errors.password} error={errors.password?.message}>
+          <PasswordField
+            {...register('password', { required: 'Password is required' })}
+            id={passwordId}
+            autoComplete="current-password"
+            placeholder={passwordHint}
+          />
+        </Field>
+        <Button
+          type="submit"
+          data-testid={selectors.pages.Login.submit}
+          className={styles.submitButton}
+          disabled={isLoggingIn}
+        >
+          {isLoggingIn ? 'Logging in...' : 'Log in'}
+        </Button>
+        {children}
+      </form>
     </div>
   );
 };