Login and register form validation

Author: albertodev7

client/src/Components/FomikInput/style.tsx

@@ -6,7 +6,7 @@ interface InputProps {
 
 export const Container = styled.div`
     width: 100%;
-    margin: 0 0 25px 0;
+    margin: 0 0 30px 0;
     display: flex;
     flex-direction: column;
     position: relative;

client/src/Components/Navbar/Components/Login/LoginSchema.ts

@@ -0,0 +1,12 @@
+import * as yup from 'yup'
+
+export const LoginSchema = yup.object().shape({
+    email: yup
+        .string()
+        .email()
+        .required(),
+    password: yup
+        .string()
+        .min(4)
+        .required()
+})

client/src/Components/Navbar/Components/Login/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Formik } from 'formik'
 
 import { LoginMutation } from 'src/Graphql/Login'
+import { LoginSchema } from './LoginSchema'
 import { LoginUI } from './Login'
 
 interface FieldProps {
@@ -32,6 +33,7 @@ export class Login extends React.Component<Props, State> {
                 {({ login }) => (
                     <Formik<FieldProps>
                         initialValues={{ email: '', password: '' }}
+                        validationSchema={LoginSchema}
                         onSubmit={async (values: FieldProps) => {
                             this.setState({ isLoading: true })
                             const response = await login({

client/src/Components/Navbar/Components/Register/RegisterSchema.ts

@@ -0,0 +1,12 @@
+import * as yup from 'yup'
+
+export const RegisterSchema = yup.object().shape({
+    email: yup
+        .string()
+        .email()
+        .required(),
+    password: yup
+        .string()
+        .min(4)
+        .required()
+})

client/src/Components/Navbar/Components/Register/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Formik } from 'formik'
 
 import { RegisterMutation } from 'src/Graphql/Register'
+import { RegisterSchema } from './RegisterSchema'
 import { RegisterUI } from './Register'
 
 interface FieldProps {
@@ -31,6 +32,7 @@ export class Register extends React.Component<Props, State> {
                 {({ register }) => (
                     <Formik<FieldProps>
                         initialValues={{ email: '', password: '' }}
+                        validationSchema={RegisterSchema}
                         onSubmit={async (values: FieldProps) => {
                             this.setState({ isLoading: true })
                             const response = await register({