move login to react-hook-form

This commit is contained in:
dmitrii 2024-12-19 12:43:35 +03:00
parent 8e2dea267c
commit da808bfcbc

View file

@ -1,67 +1,88 @@
import React from 'react'; import React from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { Field, reduxForm } from 'redux-form'; type FormValues = {
import { Trans, withTranslation } from 'react-i18next'; username: string;
import flow from 'lodash/flow'; password: string;
import { renderInputField } from '../../helpers/form';
import { validateRequiredValue } from '../../helpers/validators';
import { FORM_NAME } from '../../helpers/constants';
interface LoginFormProps {
handleSubmit: (...args: unknown[]) => string;
submitting: boolean;
invalid: boolean;
processing: boolean;
t: (...args: unknown[]) => string;
} }
const Form = (props: LoginFormProps) => { type LoginFormProps = {
const { handleSubmit, processing, invalid, t } = props; onSubmit: (data: FormValues) => void;
processing: boolean;
}
const Form = ({ onSubmit, processing }: LoginFormProps) => {
const { t } = useTranslation();
const {
register,
handleSubmit,
formState: { errors, isValid },
} = useForm<FormValues>({
mode: 'onChange',
defaultValues: {
username: '',
password: '',
},
});
return ( return (
<form onSubmit={handleSubmit} className="card"> <form onSubmit={handleSubmit(onSubmit)} className="card">
<div className="card-body p-6"> <div className="card-body p-6">
<div className="form__group form__group--settings"> <div className="form__group form__group--settings">
<label className="form__label" htmlFor="username"> <label className="form__label" htmlFor="username">
<Trans>username_label</Trans> {t('username_label')}
</label> </label>
<Field <input
id="username1" id="username"
name="username"
type="text" type="text"
className="form-control" className="form-control"
component={renderInputField}
placeholder={t('username_placeholder')} placeholder={t('username_placeholder')}
autoComplete="username" autoComplete="username"
autocapitalize="none" autoCapitalize="none"
disabled={processing} disabled={processing}
validate={[validateRequiredValue]} {...register('username', {
required: t('form_error_required'),
})}
/> />
{errors.username && (
<span className="form__message form__message--error">
{errors.username.message}
</span>
)}
</div> </div>
<div className="form__group form__group--settings"> <div className="form__group form__group--settings">
<label className="form__label" htmlFor="password"> <label className="form__label" htmlFor="password">
<Trans>password_label</Trans> {t('password_label')}
</label> </label>
<Field <input
id="password" id="password"
name="password"
type="password" type="password"
className="form-control" className="form-control"
component={renderInputField}
placeholder={t('password_placeholder')} placeholder={t('password_placeholder')}
autoComplete="current-password" autoComplete="current-password"
disabled={processing} disabled={processing}
validate={[validateRequiredValue]} {...register('password', {
required: t('form_error_required'),
})}
/> />
{errors.password && (
<span className="form__message form__message--error">
{errors.password.message}
</span>
)}
</div> </div>
<div className="form-footer"> <div className="form-footer">
<button type="submit" className="btn btn-success btn-block" disabled={processing || invalid}> <button
<Trans>sign_in</Trans> type="submit"
className="btn btn-success btn-block"
disabled={processing || !isValid}
>
{t('sign_in')}
</button> </button>
</div> </div>
</div> </div>
@ -69,4 +90,4 @@ const Form = (props: LoginFormProps) => {
); );
}; };
export default flow([withTranslation(), reduxForm({ form: FORM_NAME.LOGIN })])(Form); export default Form;