IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alex Khomenko 2024-01-26 13:04:44 +01:00 committed by GitHub
parent 3c4cfb1a70
commit 857bce25e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
public/app/core/components/Login/LoginForm.tsx
View File

@ -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>
);
};