diff --git a/src/components/AuthUser/SignInForm/InputField.tsx b/src/components/AuthUser/SignInForm/InputField.tsx index 57c8472dee251e1898e9e28c7c0745e563594b85..a0093c9c7bacc5ab2a82c2a924b83e12100332f8 100644 --- a/src/components/AuthUser/SignInForm/InputField.tsx +++ b/src/components/AuthUser/SignInForm/InputField.tsx @@ -3,19 +3,25 @@ import { TextField } from '@material-ui/core'; import { Control, Controller, FieldValues } from 'react-hook-form'; type Props = { - id: string; + /** + * Name of the elemement. ex. email, password + */ + name: string; label: string; error: boolean; errorMessage: string; + /** + * react-hook-form control + */ control: Control<FieldValues> | undefined; rules: Partial<unknown>; }; export const InputField: FC<Props> = (props: Props) => { - const { id, label, error, errorMessage, control, rules } = props; + const { name, label, error, errorMessage, control, rules } = props; return ( <Controller - name={id} + name={name} control={control} rules={rules} render={({ onChange, value }) => ( @@ -24,12 +30,12 @@ export const InputField: FC<Props> = (props: Props) => { margin="normal" required fullWidth - id={id} + id={name} label={label} - name={id} + name={name} onChange={onChange} value={value} - autoComplete={id} + autoComplete={name} autoFocus error={error} helperText={error && errorMessage} diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx index e5af43e4f380be0d458f516750a75e305b980f86..bdb8ad4c499af5173b5d9de5aedb4e55817093e8 100644 --- a/src/components/AuthUser/SignInForm/SignInForm.tsx +++ b/src/components/AuthUser/SignInForm/SignInForm.tsx @@ -62,7 +62,7 @@ export const SignInForm: FC = () => { data-testid="Form" > <InputField - id="email" + name="email" control={control} rules={{ validate: (value: string) => @@ -78,7 +78,7 @@ export const SignInForm: FC = () => { /> <InputField - id="password" + name="password" control={control} rules={{ minLength: 8,