Fixed and implemented login

.env.sample

@@ -4,4 +4,5 @@ NODE_PATH='src/'
 # App URLs
 # Don't add a trailing slash to these URLs.
 SIERO_API_URL=''
+SIERO_OAUTH_URL=''
 SIERO_IMG_URL=''

src/components/LoginModal/LoginModal.tsx

@@ -1,6 +1,10 @@
-import React from 'react'
-import Portal from '~utils/Portal'
+import React, { useState } from 'react'
+import { withCookies, Cookies } from 'react-cookie'
+import { createPortal } from 'react-dom'
+import api from '~utils/api'
 
+import Button from '~components/Button/Button'
+import Fieldset from '~components/Fieldset/Fieldset'
 import Modal from '~components/Modal/Modal'
 import Overlay from '~components/Overlay/Overlay'
 
@@ -9,33 +13,129 @@ import './LoginForm.css'
 import New from '../../../assets/new'
 
 interface Props {
+    cookies: Cookies
     close: () => void
 }
 
+interface ErrorMap {
+    [index: string]: string
+    email: string
+    password: string
+}
+
+const emailRegex = /^(([^<>()\[\]\\.,;:\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,}))$/
+
 const LoginModal = (props: Props) => {
+    const emailInput: React.RefObject<HTMLInputElement> = React.createRef()
+    const passwordInput: React.RefObject<HTMLInputElement> = React.createRef()
+    const form: React.RefObject<HTMLInputElement>[] = [emailInput, passwordInput]
+
+    const [formValid, setFormValid] = useState(false)
+    const [errors, setErrors] = useState<ErrorMap>({
+        email: '',
+        password: ''
+    })
+
+    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+        event.preventDefault()
+
+        const { name, value } = event.target
+        let newErrors = errors
+
+        switch(name) {
+            case 'email':
+                errors.email = emailRegex.test(value)
+                    ? ''
+                    : 'That email address is not valid'
+                break
+
+            case 'password':
+                errors.password = value.length == 0
+                    ? 'Please enter your password'
+                    : ''
+                break
+
+            default:
+                break
+        }
+
+        setErrors(newErrors)
+        setFormValid(validateForm())
+    }
+
+    function validateForm() {
+        let valid = true
+
+        Object.values(form).forEach(
+            (input) => input.current?.value.length == 0 && (valid = false)
+        )
+
+        Object.values(errors).forEach(
+            (error) => error.length > 0 && (valid = false)
+        )
+
+        return valid
+    }
+
+    function submit(event: React.FormEvent) {
+        event.preventDefault()
+
+        const body = {
+            email: emailInput.current?.value,
+            password: passwordInput.current?.value,
+            grant_type: 'password'
+        }
+
+        if (formValid) {
+            api.login(body)
+                .then((response) => {
+                    console.log(response)
+                    const cookies = props.cookies
+                    cookies.set('user', response.data.user, { path: '/'})
+                    props.close()
+                }, (error) => {
+                    console.error(error)
+                })
+        }
+    }
+
     return (
-        <Portal>
+        createPortal(
             <div>
                 <Modal styleName="LoginForm">
                     <div id="ModalTop">
                         <h1>Log in</h1>
                         <i className='close' onClick={props.close}><New /></i>
                     </div>
-                    <form>
-                        <div className="fieldset">
-                            <input className="Input" name="email" type="text" placeholder="Email address" />
-                            <input className="Input" name="password" type="password" placeholder="Password" />
+                    <form className="form" onSubmit={submit}>
+                        <div id="fields">
+                            <Fieldset 
+                                fieldName="email"
+                                placeholder="Email address"
+                                onChange={handleChange}
+                                error={errors.email}
+                                ref={emailInput}
+                            />
+
+                            <Fieldset 
+                                fieldName="password"
+                                placeholder="Password"
+                                onChange={handleChange}
+                                error={errors.password}
+                                ref={passwordInput}
+                            />
                         </div>
                         <div id="ModalBottom">
                             <a>Forgot your password?</a>
-                            <button className="Button">Log in</button>
+                            <Button color="blue" disabled={!formValid}>Log in</Button>
                         </div>
                     </form>
                 </Modal>
                 <Overlay onClick={props.close} />
-            </div>
-        </Portal>
+            </div>,
+            document.body
+        )
     )
 }
 
-export default LoginModal
+export default withCookies(LoginModal)

src/components/SignupModal/SignupModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { withCookies, Cookies } from 'react-cookie'
 import { createPortal } from 'react-dom'
 import api from '~utils/api'

src/utils/api.tsx

@@ -45,6 +45,10 @@ class Api {
         } as EndpointMap
     }
 
+    login(object: {}) {
+        return axios.post(`${process.env.SIERO_OAUTH_URL}/token` || 'http://127.0.0.1:3000/oauth/token', object)
+    }
+
     search(query: string) {
         const resourceUrl = `${this.url}/${name}`
         return axios.get(`${resourceUrl}/search?query=${query}`)