diff --git a/src/components/AuthUser/SignInForm/InputField/InputField.md b/src/components/AuthUser/SignInForm/InputField/InputField.md new file mode 100644 index 0000000000000000000000000000000000000000..895642c7229f4ae7277f0d932f147fd0c8e53c0d --- /dev/null +++ b/src/components/AuthUser/SignInForm/InputField/InputField.md @@ -0,0 +1,24 @@ +Wrapper for any input field + +```js +import { SubmitHandler, useForm } from 'react-hook-form'; +const { control } = useForm(); + +<InputField + name="password" + control={control} + rules={{ + minLength: 8, + maxLength: 60, + required: { + value: true, + message: 'Insert valid password', + }, + }} + label="Password" + error={false} + errorMessage="Insert valid password" +/> + + +``` diff --git a/src/components/AuthUser/SignInForm/InputField/InputField.tsx b/src/components/AuthUser/SignInForm/InputField/InputField.tsx index a0093c9c7bacc5ab2a82c2a924b83e12100332f8..6bfdc9a812e31691b30ec427fc86de81e94f0d20 100644 --- a/src/components/AuthUser/SignInForm/InputField/InputField.tsx +++ b/src/components/AuthUser/SignInForm/InputField/InputField.tsx @@ -4,16 +4,29 @@ import { Control, Controller, FieldValues } from 'react-hook-form'; type Props = { /** - * Name of the elemement. ex. email, password + * Name of the elemement. (ex. email, password). */ name: string; + /** + * Aria label. + */ label: string; + /** + * Takes error from react-hook-form and is thrown if + * the component is not valid. + */ error: boolean; + /** + * Message to display if the component is not valid. + */ errorMessage: string; /** - * react-hook-form control + * React-hook-form control. */ control: Control<FieldValues> | undefined; + /** + * Validation rules. + */ rules: Partial<unknown>; }; diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx index 9432ee95163cfc8cc887a381c3dbae84ef287d13..b2f38842155535da0a0ed78b0f73589dda0e5850 100644 --- a/src/components/AuthUser/SignInForm/SignInForm.tsx +++ b/src/components/AuthUser/SignInForm/SignInForm.tsx @@ -3,7 +3,6 @@ import axios from 'axios'; import { SubmitHandler, useForm } from 'react-hook-form'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import { Button } from '@material-ui/core'; -import { DevTool } from '@hookform/devtools'; import { InputField } from 'components/AuthUser/SignInForm/InputField/InputField'; const useStyles = makeStyles((theme: Theme) => @@ -104,7 +103,6 @@ export const SignInForm: FC = () => { Sign In </Button> </form> - <DevTool control={control} /> {/* set up the dev tool */} </> ); }; diff --git a/src/components/AuthUser/SignInForm/emailValidator.ts b/src/components/AuthUser/SignInForm/emailValidator.ts deleted file mode 100644 index 122f5018adbbb62b9709bab417277584f17c6a7f..0000000000000000000000000000000000000000 --- a/src/components/AuthUser/SignInForm/emailValidator.ts +++ /dev/null @@ -1,10 +0,0 @@ -export const isEmailValid = (email: string): boolean => { - /** - * The following is the RFC 5322 valid email regex - * Hinted from question https://stackoverflow.com/questions/201323/how-to-validate-an-email-address-using-a-regular-expression - * More on http://emailregex.com/ - */ - // eslint-disable-next-line - const VALID_EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; - return VALID_EMAIL_REGEX.test(String(email).toLowerCase()); -};