chore: create checkbox input component

components/log-In/LogInForm/LogInForm.tsx

@@ -1,20 +1,15 @@
 import { FormProvider } from 'react-hook-form'
 import { useLogInForm } from './useLogInForm'
+import { useTranslate } from 'hooks'
 import {
+ CheckboxInputField,
  ForgetPassword,
  SubmitButton,
  InputField,
- RememberMe,
 } from 'components'
 
 const LogInForm = () => {
- const {
- setRememberCheckbox,
- submitHandler,
- handleSubmit,
- authorizing,
- form,
- } = useLogInForm()
+ const { submitHandler, handleSubmit, authorizing, form } = useLogInForm()
 
  return (
  <FormProvider {...form}>
@@ -25,7 +20,10 @@ const LogInForm = () => {
  </div>
 
  <div className='flex mb-4 mt-4 items-center justify-between'>
- <RememberMe setRememberCheckbox={setRememberCheckbox} />
+ <CheckboxInputField
+ text={useTranslate('auth:remember-me')}
+ name='rememberMe'
+ />
  <ForgetPassword />
  </div>
 

components/log-In/LogInForm/useLogInForm.ts

@@ -7,12 +7,9 @@ import { authorization } from 'services'
 import { setAccessToken } from 'slices'
 import { useRouter } from 'next/router'
 import { logInSchema } from 'schemas'
-import { useState } from 'react'
 import Cookies from 'js-cookie'
 
 export const useLogInForm = () => {
- const [rememberCheckbox, setRememberCheckbox] = useState(false)
-
  const { mutate: submitForm, isLoading: authorizing } =
  useMutation(authorization)
 
@@ -22,6 +19,7 @@ export const useLogInForm = () => {
  const form = useForm({
  resolver: yupResolver(logInSchema),
  defaultValues: {
+ rememberMe: false,
  password: '',
  email: '',
  },
@@ -32,17 +30,19 @@ export const useLogInForm = () => {
 
  const submitHandler: SubmitHandler<SignInformValues> = (formValues) => {
  submitForm(formValues, {
- onSuccess: (response) => {
+ onSuccess: (response, variables: SignInformValues) => {
  dispatch(setAccessToken(response?.data?.accessToken))
 
+ const { rememberMe } = variables
+
  Cookies.set('id', response?.data?.id, {
- expires: rememberCheckbox ? 30 : undefined,
+ expires: rememberMe ? 30 : undefined,
  sameSite: 'Strict',
  secure: true,
  })
 
- Cookies.set('remember-me', rememberCheckbox ? 'true' : 'false', {
- expires: rememberCheckbox ? 30 : undefined,
+ Cookies.set('remember-me', rememberMe ? 'true' : 'false', {
+ expires: rememberMe ? 30 : undefined,
  sameSite: 'Strict',
  secure: true,
  })
@@ -72,7 +72,6 @@ export const useLogInForm = () => {
  }
 
  return {
- setRememberCheckbox,
  submitHandler,
  handleSubmit,
  authorizing,

components/log-In/index.ts

@@ -1,3 +1,2 @@
 export * from './ForgetPassword'
-export * from './RememberMe'
 export * from './LogInForm'

components/shared/CheckboxInputField/CheckboxInputField.tsx

@@ -0,0 +1,20 @@
+import useCheckboxInputField from './useCheckboxInputField'
+import { CheckboxInputFieldProps } from './types'
+
+const CheckboxInputField: React.FC<CheckboxInputFieldProps> = (props) => {
+ const { register } = useCheckboxInputField()
+
+ return (
+ <label className='text-sm lg:text-base text-gray-900 flex gap-2 items-center cursor-pointer'>
+ <input
+ {...register(props.name)}
+ className='h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-transparent'
+ name='remember-me'
+ type='checkbox'
+ />
+ <span className='select-none'>{props.text}</span>
+ </label>
+ )
+}
+
+export default CheckboxInputField

components/shared/CheckboxInputField/index.ts

@@ -0,0 +1 @@
+export { default as CheckboxInputField } from './CheckboxInputField'

components/shared/CheckboxInputField/types.d.ts

@@ -0,0 +1,4 @@
+export type CheckboxInputFieldProps = {
+ name: string
+ text: string
+}

components/shared/CheckboxInputField/useCheckboxInputField.ts

@@ -0,0 +1,9 @@
+import { useFormContext } from 'react-hook-form'
+
+const useCheckboxInputField = () => {
+ const { register } = useFormContext()
+
+ return { register }
+}
+
+export default useCheckboxInputField

components/shared/index.ts

@@ -1,3 +1,4 @@
+export * from './CheckboxInputField'
 export * from './InputErrorMessage'
 export * from './LanguageSelector'
 export * from './LottieAnimation'

types/global.d.ts

@@ -29,6 +29,7 @@ export type SignUpFormValues = {
 }
 
 export type SignInformValues = {
+ rememberMe: boolean
  password: string
  email: string
 }