Remove overcomplicated "CustomCheckbox" component

Instead, used the Checkbox component (the right way) where it was
required. Doing it "the right way" means I've removed unnecessary layers
(three to be more precise), and positioned the text where it's supposed
to be.

Creating overcomplicated components that require changes every time we
use them is a no-go...

src/components/Auth/SignIn.tsx

@@ -1,8 +1,8 @@
-import { Button, Flex, Link, Text, useToast } from '@chakra-ui/react'
+import { Button, Checkbox, Flex, FormControl, FormErrorMessage, Link, Text, useToast } from '@chakra-ui/react'
 import { useMutation } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { NavLink, useNavigate, useOutletContext } from 'react-router-dom'
 import { api, ApiEndpoints, UnverifiedApiError } from '~components/Auth/api'
 import { ILoginParams } from '~components/Auth/authQueries'
@@ -12,7 +12,6 @@ import FormSubmitMessage from '~components/Layout/FormSubmitMessage'
 import InputPassword from '~components/Layout/InputPassword'
 import { AuthOutletContextType } from '~elements/LayoutAuth'
 import { Routes } from '~src/router/routes'
-import CustomCheckbox from '../Layout/CheckboxCustom'
 import InputBasic from '../Layout/InputBasic'
 import GoogleAuth from './GoogleAuth'
 
@@ -47,7 +46,12 @@ const SignIn = ({ email: emailProp }: { email?: string }) => {
   const methods = useForm<FormData>({
     defaultValues: { email: emailProp },
   })
-  const { handleSubmit, watch } = methods
+  const {
+    handleSubmit,
+    watch,
+    formState: { errors },
+    register,
+  } = methods
   const email = watch('email', emailProp)
 
   const {
@@ -130,7 +134,12 @@ const SignIn = ({ email: emailProp }: { email?: string }) => {
             required
           />
           <Flex justifyContent='center' align='center'>
-            <CustomCheckbox formValue='keepLogedIn' label={t('keep_me_logged', { defaultValue: 'Keep me logged' })} />
+            <FormControl as='fieldset' isInvalid={!!errors?.keepLogedIn}>
+              <Checkbox {...register('keepLogedIn')}>
+                <Trans i18nKey='keep_me_logged'>Keep me logged</Trans>
+              </Checkbox>
+              <FormErrorMessage>{errors?.keepLogedIn?.message.toString()}</FormErrorMessage>
+            </FormControl>
 
             <NavLink to={Routes.auth.recovery}>
               <Text fontSize='sm' fontWeight='500' whiteSpace='nowrap'>

src/components/Auth/SignUp.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Link, Text } from '@chakra-ui/react'
+import { Button, Checkbox, Flex, FormControl, FormErrorMessage, Link, Text } from '@chakra-ui/react'
 import { useEffect } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
@@ -10,7 +10,6 @@ import InputPassword from '~components/Layout/InputPassword'
 import { AuthOutletContextType } from '~elements/LayoutAuth'
 import { useSignupFromInvite } from '~src/queries/account'
 import { Routes } from '~src/router/routes'
-import CustomCheckbox from '../Layout/CheckboxCustom'
 import { default as InputBasic } from '../Layout/InputBasic'
 import GoogleAuth from './GoogleAuth'
 import { HSeparator } from './SignIn'
@@ -31,7 +30,7 @@ type FormData = {
 
 const SignUp = ({ invite }: SignupProps) => {
   const { t } = useTranslation()
-  const { register } = useAuth()
+  const { register: signup } = useAuth()
   const inviteSignup = useSignupFromInvite(invite?.address)
   const { setTitle, setSubtitle } = useOutletContext<AuthOutletContextType>()
 
@@ -41,12 +40,17 @@ const SignUp = ({ invite }: SignupProps) => {
       email: invite?.email,
     },
   })
-  const { handleSubmit, watch } = methods
+  const {
+    handleSubmit,
+    watch,
+    register,
+    formState: { errors },
+  } = methods
   const email = watch('email')
 
-  const isPending = register.isPending || inviteSignup.isPending
-  const isError = register.isError || inviteSignup.isError
-  const error = register.error || inviteSignup.error
+  const isPending = signup.isPending || inviteSignup.isPending
+  const isError = signup.isError || inviteSignup.isError
+  const error = signup.error || inviteSignup.error
 
   useEffect(() => {
     // set SignUp title and description
@@ -56,7 +60,7 @@ const SignUp = ({ invite }: SignupProps) => {
 
   const onSubmit = (user: FormData) => {
     if (!invite) {
-      return register.mutate(user)
+      return signup.mutate(user)
     }
 
     // if there's an invite, the process' a bit different
@@ -67,7 +71,7 @@ const SignUp = ({ invite }: SignupProps) => {
   }
 
   // normally registered accounts need verification
-  if (register.isSuccess) {
+  if (signup.isSuccess) {
     return <Navigate to={`${Routes.auth.verify}?email=${encodeURIComponent(email)}`} />
   }
 
@@ -118,20 +122,20 @@ const SignUp = ({ invite }: SignupProps) => {
               },
             }}
           />
-
-          <CustomCheckbox
-            formValue='terms'
-            label={
+          <FormControl as='fieldset' isInvalid={!!errors?.terms}>
+            <Checkbox {...register('terms', { required: t('validation.required') })} isRequired>
               <Trans
                 i18nKey='signup_agree_terms'
                 components={{
                   termsLink: <Link isExternal as={ReactRouterLink} to={Routes.terms} />,
                   privacyLink: <Link isExternal as={ReactRouterLink} to={Routes.privacy} />,
                 }}
-              />
-            }
-            required
-          />
+              >
+                Keep me logged
+              </Trans>
+            </Checkbox>
+            <FormErrorMessage>{errors?.terms?.message.toString()}</FormErrorMessage>
+          </FormControl>
 
           <Button isLoading={isPending} type='submit' size='xl' w='100%'>
             {t('signup_create_account')}

src/components/Organization/Create.tsx

@@ -63,6 +63,7 @@ export const OrganizationCreate = ({
       size: values.size?.value,
       country: values.country?.value,
       type: values.type?.value,
+      communications: values.communications,
     })
       .then(() => {
         const signer = new RemoteSigner({

src/components/Organization/Edit.tsx

@@ -114,6 +114,7 @@ const EditOrganization = () => {
       size: values.size?.value,
       type: values.type?.value,
       country: values.country?.value,
+      communications: values.communications,
     }
 
     try {

src/components/Organization/Form.tsx

@@ -1,7 +1,6 @@
-import { Box, Flex, FormControl, FormLabel, Text, Textarea } from '@chakra-ui/react'
+import { Box, Checkbox, Flex, FormControl, FormErrorMessage, FormLabel, Text, Textarea } from '@chakra-ui/react'
 import { useFormContext } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
-import CheckboxCustom from '~components/Layout/CheckboxCustom'
 import InputBasic from '~components/Layout/InputBasic'
 import {
   CountriesTypesSelector,
@@ -54,10 +53,14 @@ export type PrivateOrgFormData = {
   size: SelectOptionType
   type: SelectOptionType
   country: SelectOptionType
+  communications: boolean
 }
 
 export const PrivateOrgForm = () => {
-  const { t } = useTranslation()
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext<PrivateOrgFormData>()
 
   return (
     <>
@@ -76,12 +79,14 @@ export const PrivateOrgForm = () => {
         <OrganzationTypesSelector name='type' required />
         <CountriesTypesSelector name='country' required />
       </Flex>
-      <CheckboxCustom
-        formValue='communications'
-        label={t('create_org.communication', {
-          defaultValue: '  I want to receive communications and be contacted to tailor my governance experience.',
-        })}
-      />
+      <FormControl as='fieldset' isInvalid={!!errors?.communications}>
+        <Checkbox {...register('communications')}>
+          <Trans i18nKey='create_org.communication'>
+            I want to receive communications and be contacted to tailor my governance experience.
+          </Trans>
+        </Checkbox>
+        <FormErrorMessage>{errors?.communications?.message.toString()}</FormErrorMessage>
+      </FormControl>
     </>
   )
 }