Chore: Remove Form usage in ForgottenPassword (#81263)

* Chore: Remove Form usage in ChangePassword.tsx

* Chore: Remove Form usage in ForgottenPassword.tsx

public/app/core/components/ForgottenPassword/ChangePassword.tsx

@@ -1,7 +1,8 @@
 import React, { SyntheticEvent } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { selectors } from '@grafana/e2e-selectors';
-import { Tooltip, Form, Field, VerticalGroup, Button, Alert, useStyles2 } from '@grafana/ui';
+import { Tooltip, Field, VerticalGroup, Button, Alert, useStyles2 } from '@grafana/ui';
 
 import { getStyles } from '../Login/LoginForm';
 import { PasswordField } from '../PasswordField/PasswordField';
@@ -18,52 +19,59 @@ interface PasswordDTO {
 
 export const ChangePassword = ({ onSubmit, onSkip, showDefaultPasswordWarning }: Props) => {
   const styles = useStyles2(getStyles);
+  const {
+    handleSubmit,
+    register,
+    getValues,
+    formState: { errors },
+  } = useForm<PasswordDTO>({
+    defaultValues: {
+      newPassword: '',
+      confirmNew: '',
+    },
+  });
   const submit = (passwords: PasswordDTO) => {
     onSubmit(passwords.newPassword);
   };
   return (
-    <Form onSubmit={submit}>
-      {({ errors, register, getValues }) => (
-        <>
-          {showDefaultPasswordWarning && (
-            <Alert severity="info" title="Continuing to use the default password exposes you to security risks." />
-          )}
-          <Field label="New password" invalid={!!errors.newPassword} error={errors?.newPassword?.message}>
-            <PasswordField
-              {...register('newPassword', { required: 'New Password is required' })}
-              id="new-password"
-              autoFocus
-              autoComplete="new-password"
-            />
-          </Field>
-          <Field label="Confirm new password" invalid={!!errors.confirmNew} error={errors?.confirmNew?.message}>
-            <PasswordField
-              {...register('confirmNew', {
-                required: 'Confirmed Password is required',
-                validate: (v: string) => v === getValues().newPassword || 'Passwords must match!',
-              })}
-              id="confirm-new-password"
-              autoComplete="new-password"
-            />
-          </Field>
-          <VerticalGroup>
-            <Button type="submit" className={styles.submitButton}>
-              Submit
-            </Button>
-
-            {onSkip && (
-              <Tooltip
-                content="If you skip you will be prompted to change password next time you log in."
-                placement="bottom"
-              >
-                <Button fill="text" onClick={onSkip} type="button" data-testid={selectors.pages.Login.skip}>
-                  Skip
-                </Button>
-              </Tooltip>
-            )}
-          </VerticalGroup>
-        </>
+    <form onSubmit={handleSubmit(submit)}>
+      {showDefaultPasswordWarning && (
+        <Alert severity="info" title="Continuing to use the default password exposes you to security risks." />
       )}
-    </Form>
+      <Field label="New password" invalid={!!errors.newPassword} error={errors?.newPassword?.message}>
+        <PasswordField
+          {...register('newPassword', { required: 'New Password is required' })}
+          id="new-password"
+          autoFocus
+          autoComplete="new-password"
+        />
+      </Field>
+      <Field label="Confirm new password" invalid={!!errors.confirmNew} error={errors?.confirmNew?.message}>
+        <PasswordField
+          {...register('confirmNew', {
+            required: 'Confirmed Password is required',
+            validate: (v: string) => v === getValues().newPassword || 'Passwords must match!',
+          })}
+          id="confirm-new-password"
+          autoComplete="new-password"
+        />
+      </Field>
+      <VerticalGroup>
+        <Button type="submit" className={styles.submitButton}>
+          Submit
+        </Button>
+
+        {onSkip && (
+          <Tooltip
+            content="If you skip you will be prompted to change password next time you log in."
+            placement="bottom"
+          >
+            <Button fill="text" onClick={onSkip} type="button" data-testid={selectors.pages.Login.skip}>
+              Skip
+            </Button>
+          </Tooltip>
+        )}
+      </VerticalGroup>
+    </form>
   );
 };

public/app/core/components/ForgottenPassword/ForgottenPassword.tsx

@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
 import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import { Form, Field, Input, Button, Legend, Container, useStyles2, HorizontalGroup, LinkButton } from '@grafana/ui';
+import { Field, Input, Button, Legend, Container, useStyles2, HorizontalGroup, LinkButton } from '@grafana/ui';
 import config from 'app/core/config';
 
 interface EmailDTO {
@@ -23,6 +24,11 @@ export const ForgottenPassword = () => {
   const [emailSent, setEmailSent] = useState(false);
   const styles = useStyles2(paragraphStyles);
   const loginHref = `${config.appSubUrl}/login`;
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<EmailDTO>();
 
   const sendEmail = async (formModel: EmailDTO) => {
     const res = await getBackendSrv().post('/api/user/password/send-reset-email', formModel);
@@ -43,32 +49,28 @@ export const ForgottenPassword = () => {
     );
   }
   return (
-    <Form onSubmit={sendEmail}>
-      {({ register, errors }) => (
-        <>
-          <Legend>Reset password</Legend>
-          <Field
-            label="User"
-            description="Enter your information to get a reset link sent to you"
-            invalid={!!errors.userOrEmail}
-            error={errors?.userOrEmail?.message}
-          >
-            <Input
-              id="user-input"
-              placeholder="Email or username"
-              {...register('userOrEmail', { required: 'Email or username is required' })}
-            />
-          </Field>
-          <HorizontalGroup>
-            <Button type="submit">Send reset email</Button>
-            <LinkButton fill="text" href={loginHref}>
-              Back to login
-            </LinkButton>
-          </HorizontalGroup>
+    <form onSubmit={handleSubmit(sendEmail)}>
+      <Legend>Reset password</Legend>
+      <Field
+        label="User"
+        description="Enter your information to get a reset link sent to you"
+        invalid={!!errors.userOrEmail}
+        error={errors?.userOrEmail?.message}
+      >
+        <Input
+          id="user-input"
+          placeholder="Email or username"
+          {...register('userOrEmail', { required: 'Email or username is required' })}
+        />
+      </Field>
+      <HorizontalGroup>
+        <Button type="submit">Send reset email</Button>
+        <LinkButton fill="text" href={loginHref}>
+          Back to login
+        </LinkButton>
+      </HorizontalGroup>
 
-          <p className={styles}>Did you forget your username or email? Contact your Grafana administrator.</p>
-        </>
-      )}
-    </Form>
+      <p className={styles}>Did you forget your username or email? Contact your Grafana administrator.</p>
+    </form>
   );
 };