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,60 +82,79 @@ const Login = () => {
             <Box marginRight='0.625rem'>
               <Logo />
             </Box>
-            <Text variant='headline' weight='bold'>
-              astrobuild
-            </Text>
           </Box>
-          <Text variant='headline' weight='bold'>
-            Login
-          </Text>
           <Box
             display='grid'
-            gridTemplateColumns='auto'
+            gridTemplateColumns='auto 1fr'
+            columnGap='1rem'
             alignItems='center'
-            rowGap='0.5rem'
-            padding='1.563rem 0rem'
           >
-            <Input label='Email' name='email' value='' onChange={() => {}} />
-            <Input
-              label='Password'
-              name='password'
-              type='password'
-              value=''
-              onChange={() => {}}
-            />
-            <Box textAlign='right'>
-              <Link href='/forgot-password'>Forgot Password</Link>
-            </Box>
-            <Box display='grid' gridTemplateColumns='auto' rowGap='1rem'>
-              <Button
-                variant='primary-action'
-                fullWidth
-                color='client'
-                text='Login'
-                onClick={() => {}}
-              />
-              <Button
-                variant='secondary-action'
-                fullWidth
-                color='client'
-                text='Login with Google'
-                iconLeft={<Google />}
-                onClick={() => {}}
-              />
-            </Box>
-            <Box display='flex' flexDirection='row'>
-              <Box flexGrow='1'>
-                <Text variant='body' display='inline'>
-                  Don’t have an account ?{' '}
-                </Text>
-                <Link href='/signup'>Signup</Link>
-              </Box>
-              <Link href='/' color='gray'>
-                Build a Project
-              </Link>
-            </Box>
+            <Text variant='headline' weight='bold'>
+              Login
+            </Text>
+            {error && <Alert color='error' text={error} />}
           </Box>
+          <form onSubmit={form.handleSubmit}>
+            <Box
+              display='grid'
+              gridTemplateColumns='auto'
+              alignItems='center'
+              rowGap='0.5rem'
+              padding='1.563rem 0rem'
+            >
+              <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={form.values.password}
+                onChange={form.handleChange}
+                onBlur={form.handleBlur}
+                error={!!form.errors.password}
+                errorMessage={form.errors.password}
+              />
+              <Box textAlign='right'>
+                <Link href='/forgot-password'>Forgot Password</Link>
+              </Box>
+              <Box display='grid' gridTemplateColumns='auto' rowGap='1rem'>
+                <Button
+                  variant='primary-action'
+                  fullWidth
+                  color='client'
+                  text='Login'
+                  type='submit'
+                  loading={loading}
+                  disabled={loading}
+                />
+                <Button
+                  variant='secondary-action'
+                  fullWidth
+                  color='client'
+                  text='Login with Google'
+                  iconLeft={<Google />}
+                />
+              </Box>
+              <Box display='flex' flexDirection='row'>
+                <Box flexGrow='1'>
+                  <Text variant='body' display='inline'>
+                    Don’t have an account ?{' '}
+                  </Text>
+                  <Link href='/signup'>Signup</Link>
+                </Box>
+                <Link href='/' color='gray'>
+                  Build a Project
+                </Link>
+              </Box>
+            </Box>
+          </form>
         </Box>
         <Box
           background={theme.colors.client.main}