InputBasic and InputPassword (#796)

created InputPassword and refactor InputCustom

src/components/Account/Layout.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, FormControl, FormLabel, Text, Textarea } from '@chakra-ui/re
 import { useForm } from 'react-hook-form'
 import { Trans, useTranslation } from 'react-i18next'
 import CheckboxCustom from '~components/Layout/CheckboxCustom'
-import InputCustom from '~components/Layout/InputCustom'
+import InputBasic from '~components/Layout/InputBasic'
 import {
   CountriesTypesSelector,
   MembershipSizeTypesSelector,
@@ -23,22 +23,20 @@ export const PublicOrgForm = () => {
       </Box>
 
       <Flex flexDirection='column' gap={6} px={{ base: 5, md: 10 }}>
-        <InputCustom
+        <InputBasic
           formValue='name'
           label={t('name', { defaultValue: 'Name' })}
           placeholder={t('form.account_create.title_placeholder', {
             defaultValue: "Enter your organization's email",
           })}
-          type='text'
           required
         />
-        <InputCustom
+        <InputBasic
           formValue='website'
           label={t('website', { defaultValue: 'Website' })}
           placeholder={t('form.account_create.website_placeholder', {
             defaultValue: 'https://example.com',
           })}
-          type='text'
         />
 
         <FormControl>

src/components/Auth/ForgotPassword.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { NavLink, useOutletContext } from 'react-router-dom'
 import { AuthOutletContextType } from '~elements/LayoutAuth'
 import { Routes } from '~src/router/routes'
-import InputCustom from '../Layout/InputCustom'
+import InputBasic from '../Layout/InputBasic'
 
 function ForgotPassword() {
   const { t } = useTranslation()
@@ -28,7 +28,7 @@ function ForgotPassword() {
     <>
       <FormProvider {...methods}>
         <Flex as='form' onSubmit={methods.handleSubmit(onSubmit)} flexDirection='column' gap={6}>
-          <InputCustom
+          <InputBasic
             formValue='email'
             label={t('email')}
             placeholder={t('email_placeholder', { defaultValue: '[email protected]' })}

src/components/Auth/SignIn.tsx

@@ -8,10 +8,11 @@ import { ILoginParams } from '~components/Auth/authQueries'
 import { useAuth } from '~components/Auth/useAuth'
 import { VerifyAccountNeeded } from '~components/Auth/Verify'
 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 InputCustom from '../Layout/InputCustom'
+import InputBasic from '../Layout/InputBasic'
 import GoogleAuth from './GoogleAuth'
 
 type FormData = {
@@ -64,18 +65,17 @@ const SignIn = () => {
       </Flex>
       <FormProvider {...methods}>
         <Flex as='form' onSubmit={handleSubmit(onSubmit)} flexDirection='column' gap={6}>
-          <InputCustom
+          <InputBasic
             formValue='email'
             label={t('email')}
             placeholder={t('email_placeholder', { defaultValue: '[email protected]' })}
             type='email'
             required
           />
-          <InputCustom
+          <InputPassword
             formValue='password'
             label={t('password')}
             placeholder={t('password_placeholder', { defaultValue: 'Enter your password' })}
-            type='password'
             required
           />
           <Flex justifyContent='center' align='center'>

src/components/Auth/SignUp.tsx

@@ -7,10 +7,11 @@ import { IRegisterParams } from '~components/Auth/authQueries'
 import { useAuth } from '~components/Auth/useAuth'
 import { VerifyAccountNeeded } from '~components/Auth/Verify'
 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 InputCustom from '../Layout/InputCustom'
+import { default as InputBasic } from '../Layout/InputBasic'
 import GoogleAuth from './GoogleAuth'
 import { HSeparator } from './SignIn'
 
@@ -59,17 +60,17 @@ const SignUp = () => {
       <FormProvider {...methods}>
         <Flex as='form' onSubmit={handleSubmit(onSubmit)} flexDirection='column' gap={6}>
           <Flex flexDirection={{ base: 'column', md: 'row' }} gap={{ md: 4 }}>
-            <InputCustom formValue='firstName' label={t('signup_first_name')} placeholder={'John'} required />
-            <InputCustom formValue='lastName' label={t('signup_last_name')} placeholder={'Doe'} required />
+            <InputBasic formValue='firstName' label={t('signup_first_name')} placeholder={'John'} required />
+            <InputBasic formValue='lastName' label={t('signup_last_name')} placeholder={'Doe'} required />
           </Flex>
-          <InputCustom
+          <InputBasic
             formValue='email'
             label={t('email')}
             placeholder={t('email_placeholder', { defaultValue: '[email protected]' })}
             type='email'
             required
           />
-          <InputCustom
+          <InputPassword
             formValue='password'
             label={t('password')}
             placeholder={t('password_placeholder', { defaultValue: 'Min 8 characters' })}

src/components/Layout/InputCustom.tsx → src/components/Layout/InputBasic.tsx

@@ -1,43 +1,27 @@
-export interface InputCustomProps {
-  formValue: string
-  label: string
-  placeholder?: string
-  type?: string
-  required?: boolean
-  validation?: any
-  messageError?: string
-}
-import {
-  FormControl,
-  FormErrorMessage,
-  FormLabel,
-  Icon,
-  Input,
-  InputGroup,
-  InputProps,
-  InputRightElement,
-} from '@chakra-ui/react'
+import { FormControl, FormErrorMessage, FormLabel, Icon, Input, InputGroup, InputRightElement } from '@chakra-ui/react'
 import { useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { MdOutlineRemoveRedEye } from 'react-icons/md'
 import { RiEyeCloseLine } from 'react-icons/ri'
 
-export interface InputCustomProps extends InputProps {
+export interface InputBasicProps {
   formValue: string
   label: string
+  placeholder?: string
+  type?: string
+  required?: boolean
   validation?: any
   messageError?: string
 }
-
-const InputCustom = ({
+const InputBasic = ({
   formValue,
   label,
   placeholder,
   type = 'text',
   required = false,
   validation = {},
-}: InputCustomProps) => {
+}: InputBasicProps) => {
   const { t } = useTranslation()
   const [show, setShow] = useState(false)
   const handleClick = () => setShow(!show)
@@ -54,17 +38,11 @@ const InputCustom = ({
 
   const errorMessage = errors[formValue]?.message?.toString() || ''
 
-  let inputType = type
-
-  if (type === 'password' && show) {
-    inputType = 'text'
-  }
-
   return (
     <FormControl isInvalid={!!errors[formValue]} isRequired={required}>
       {label && <FormLabel variant='process-create-title-sm'>{label}</FormLabel>}
       <InputGroup>
-        <Input {...register(formValue, validationRules)} type={inputType} placeholder={placeholder} />
+        <Input {...register(formValue, validationRules)} type={type} placeholder={placeholder} />
         {type === 'password' && (
           <InputRightElement display='flex' alignItems='center' minH='100%'>
             <Icon
@@ -80,4 +58,4 @@ const InputCustom = ({
   )
 }
 
-export default InputCustom
+export default InputBasic

src/components/Layout/InputPassword.tsx

@@ -0,0 +1,65 @@
+import { FormControl, FormErrorMessage, FormLabel, Icon, Input, InputGroup, InputRightElement } from '@chakra-ui/react'
+import { useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { MdOutlineRemoveRedEye } from 'react-icons/md'
+import { RiEyeCloseLine } from 'react-icons/ri'
+
+export interface InputPasswordProps {
+  formValue: string
+  label: string
+  placeholder?: string
+  type?: string
+  required?: boolean
+  validation?: any
+  messageError?: string
+}
+const InputPassword = ({
+  formValue,
+  label,
+  placeholder,
+  type = 'password',
+  required = false,
+  validation = {},
+}: InputPasswordProps) => {
+  const { t } = useTranslation()
+  const [show, setShow] = useState(false)
+  const handleClick = () => setShow(!show)
+
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext()
+
+  const validationRules = {
+    ...validation,
+    ...(required ? { required: { value: true, message: t('form.error.field_is_required') } } : {}),
+  }
+
+  const errorMessage = errors[formValue]?.message?.toString() || ''
+
+  let inputType = type
+
+  if (type === 'password' && show) {
+    inputType = 'text'
+  }
+
+  return (
+    <FormControl isInvalid={!!errors[formValue]} isRequired={required}>
+      {label && <FormLabel variant='process-create-title-sm'>{label}</FormLabel>}
+      <InputGroup>
+        <Input {...register(formValue, validationRules)} type={inputType} placeholder={placeholder} />
+        <InputRightElement display='flex' alignItems='center' minH='100%'>
+          <Icon
+            _hover={{ cursor: 'pointer' }}
+            as={show ? RiEyeCloseLine : MdOutlineRemoveRedEye}
+            onClick={handleClick}
+          />
+        </InputRightElement>
+      </InputGroup>
+      <FormErrorMessage mt={2}>{errorMessage || 'Error performing the operation'}</FormErrorMessage>
+    </FormControl>
+  )
+}
+
+export default InputPassword

src/components/Organization/Dashboard/Invite.tsx

@@ -4,7 +4,7 @@ import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-fo
 import { Trans, useTranslation } from 'react-i18next'
 import { IoCloseSharp } from 'react-icons/io5'
 import { HSeparator } from '~components/Auth/SignIn'
-import InputCustom from '~components/Layout/InputCustom'
+import InputBasic from '~components/Layout/InputBasic'
 
 const Invite = ({ setInviteView }: { setInviteView: Dispatch<SetStateAction<boolean>> }) => {
   const { t } = useTranslation()
@@ -38,7 +38,7 @@ const Invite = ({ setInviteView }: { setInviteView: Dispatch<SetStateAction<bool
       <HSeparator />
       <FormProvider {...methods}>
         <Flex as='form' onSubmit={methods.handleSubmit(onSubmit)} flexDirection='column' gap={6}>
-          <InputCustom
+          <InputBasic
             formValue='email'
             label={t('email')}
             placeholder={t('email_placeholder', { defaultValue: '[email protected]' })}

src/components/ProcessCreate/Meta.tsx

@@ -2,7 +2,7 @@ import { Flex, Text } from '@chakra-ui/react'
 import { useFormContext } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import Editor from '~components/Editor/Editor'
-import InputCustom from '~components/Layout/InputCustom'
+import InputBasic from '~components/Layout/InputBasic'
 
 const CreateProcessMeta = () => {
   const { setValue, watch } = useFormContext()
@@ -25,11 +25,10 @@ const CreateProcessMeta = () => {
           })}
         </Text>
 
-        <InputCustom
+        <InputBasic
           formValue='title'
           label={t('process_create.title', { defaultValue: 'Title' })}
           placeholder={t('process_create.title_placeholder', { defaultValue: 'Title of the voting process' })}
-          type='text'
           validation={{
             required,
             maxLength: {