Add form control and api logic

src/pages/Auth/Login/index.tsx

@@ -1,9 +1,69 @@
+import * as Yup from 'yup';
+import { useFormik } from 'formik';
+import { useMutation } from '@apollo/client';
+import { useHistory } from 'react-router';
+import { useState } from 'react';
+import { tokenVar, roleVar, userVar } from '../../../graphql/state';
 import { Google, Login as LoginIllustration, Logo } from '../../../assets';
-import { Box, Button, Input, Link, Text } from '../../../components';
+import { Alert, Box, Button, Input, Link, Text } from '../../../components';
 import { theme } from '../../../themes';
 import { Wrapper } from './styles';
+import { LOGIN } from '../../../graphql/auth.api';
+import { LoginMutation, LoginMutationVariables } from '../../../graphql/types';
 
 const Login = () => {
+  const history = useHistory();
+  const [error, setError] = useState<string>('');
+
+  const [login, { loading }] = useMutation<
+    LoginMutation,
+    LoginMutationVariables
+  >(LOGIN, {
+    onCompleted({ login: { user, token } }) {
+      switch (user.role) {
+        case 'Client':
+          roleVar('client');
+          break;
+        case 'ProductOwner':
+          roleVar('productOwner');
+          break;
+        case 'Developer':
+          roleVar('developer');
+          break;
+        case 'Admin':
+          roleVar('admin');
+          break;
+        default:
+          break;
+      }
+      tokenVar(token);
+      userVar(user);
+      history.push('/');
+    },
+    onError({ graphQLErrors }) {
+      setError(graphQLErrors[0]?.extensions?.info);
+      setTimeout(() => setError(''), 3000);
+    },
+  });
+
+  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 }) => {
+      login({ variables: { email, password } });
+    },
+  });
+
   return (
     <Wrapper>
       <Box
@@ -22,13 +82,19 @@ const Login = () => {
             <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'>
               Login
             </Text>
+            {error && <Alert color='error' text={error} />}
+          </Box>
+          <form onSubmit={form.handleSubmit}>
             <Box
               display='grid'
               gridTemplateColumns='auto'
@@ -36,13 +102,24 @@ const Login = () => {
               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 textAlign='right'>
                 <Link href='/forgot-password'>Forgot Password</Link>
@@ -53,7 +130,9 @@ const Login = () => {
                   fullWidth
                   color='client'
                   text='Login'
-                onClick={() => {}}
+                  type='submit'
+                  loading={loading}
+                  disabled={loading}
                 />
                 <Button
                   variant='secondary-action'
@@ -61,7 +140,6 @@ const Login = () => {
                   color='client'
                   text='Login with Google'
                   iconLeft={<Google />}
-                onClick={() => {}}
                 />
               </Box>
               <Box display='flex' flexDirection='row'>
@@ -76,6 +154,7 @@ const Login = () => {
                 </Link>
               </Box>
             </Box>
+          </form>
         </Box>
         <Box
           background={theme.colors.client.main}