Add form control

src/pages/Auth/Signup/index.tsx

@@ -1,9 +1,41 @@
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import { Google, Signup as SignupIllustration, Logo } from '../../../assets';
-import { Box, Button, Input, Link, Text } from '../../../components';
+import { Box, Button, Input, Link, Text, Alert } from '../../../components';
 import { theme } from '../../../themes';
 import { Wrapper } from './styles';
 
 const Signup = () => {
+  const history = useHistory();
+  const [error, setError] = useState<string>('');
+
+  const form = useFormik({
+    initialValues: {
+      email: '',
+      password: '',
+    },
+    validationSchema: Yup.object().shape({
+      email: Yup.string()
+        .required('Email is required')
+        .email('Email is invalid'),
+      password: Yup.string()
+        .required('Password is required')
+        .min(6, 'Password is 6 characters minimum'),
+    }),
+    onSubmit: ({ email, password }, { resetForm }) => {
+      try {
+        history.push(`/additional-info?email=${email}&password=${password}`);
+      } catch (err) {
+        setError(err.message);
+        setTimeout(() => setError(''), 3000);
+      } finally {
+        resetForm();
+      }
+    },
+  });
+
   return (
     <Wrapper>
       <Box
@@ -22,13 +54,19 @@ const Signup = () => {
             <Box marginRight='0.625rem'>
               <Logo />
             </Box>
-            <Text variant='headline' weight='bold'>
-              astrobuild
-            </Text>
           </Box>
+          <Box
+            display='grid'
+            gridTemplateColumns='auto 1fr'
+            columnGap='1rem'
+            alignItems='center'
+          >
             <Text variant='headline' weight='bold'>
               Signup
             </Text>
+            {error && <Alert color='error' text={error} />}
+          </Box>
+          <form onSubmit={form.handleSubmit}>
             <Box
               display='grid'
               gridTemplateColumns='auto'
@@ -36,13 +74,24 @@ const Signup = () => {
               rowGap='0.5rem'
               padding='1.563rem 0rem'
             >
-            <Input label='Email' name='email' value='' onChange={() => {}} />
+              <Input
+                label='Email'
+                name='email'
+                value={form.values.email}
+                onChange={form.handleChange}
+                onBlur={form.handleBlur}
+                error={!!form.errors.email}
+                errorMessage={form.errors.email}
+              />
               <Input
                 label='Password'
                 name='password'
                 type='password'
-              value=''
+                value={form.values.password}
-              onChange={() => {}}
+                onChange={form.handleChange}
+                onBlur={form.handleBlur}
+                error={!!form.errors.password}
+                errorMessage={form.errors.password}
               />
               <Box
                 display='grid'
@@ -53,9 +102,9 @@ const Signup = () => {
                 <Button
                   variant='primary-action'
                   fullWidth
+                  type='submit'
                   color='client'
                   text='Signup'
-                onClick={() => {}}
                 />
                 <Button
                   variant='secondary-action'
@@ -63,7 +112,6 @@ const Signup = () => {
                   color='client'
                   text='Signup with Google'
                   iconLeft={<Google />}
-                onClick={() => {}}
                 />
               </Box>
               <Box display='flex' flexDirection='row'>
@@ -78,6 +126,7 @@ const Signup = () => {
                 </Link>
               </Box>
             </Box>
+          </form>
         </Box>
         <Box
           background={theme.colors.client.main}