setting up Application shell

src/components/auth/Login.css

@@ -0,0 +1,67 @@
+.h1, h1 {
+    font-size: 2.5rem;
+}
+
+fieldset {
+    min-width: 0;
+    padding: 1rem 0;
+    margin: 0;
+    border: 0;
+}
+
+.form--login {
+    display: inline-block;
+    margin: 0 auto;
+    text-align: left;
+}
+
+.form--login > fieldset > input[type="email"] {
+    width: 25em;
+}
+
+.label--login {
+    width: 8rem;
+    display: inline-block;
+}
+
+.form-control {
+    display: block;
+    width: 94%;
+    height: calc(1.5em + .75rem + 2px);
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+    -webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.container--login {
+    text-align: center;
+}
+
+.form--login {
+    background-position-x: right;
+    z-index: 1;
+    min-height: 25rem;
+    min-width: 45rem;
+    background-color: hsla(0,0%,100%,0.40);
+    background-blend-mode: overlay;
+    background-repeat: no-repeat;
+}
+
+.button--close {
+    position: relative;
+    bottom: -2rem;
+}
+
+.dialog {
+    min-width: 15rem;
+    min-height: 5rem;
+}
+

src/components/auth/Login.js

@@ -0,0 +1,62 @@
+import React, { useRef, useState } from "react"
+import { Link } from "react-router-dom";
+import { useHistory } from "react-router-dom"
+import "./Login.css"
+
+export const Login = () => {
+    const [email, set] = useState("")
+    const existDialog = useRef()
+    const history = useHistory()
+
+    const existingUserCheck = () => {
+        return fetch(`http://localhost:8088/customers?email=${email}`)
+            .then(res => res.json())
+            .then(user => user.length ? user[0] : false)
+    }
+
+    const handleLogin = (e) => {
+        e.preventDefault()
+        existingUserCheck()
+            .then(exists => {
+                if (exists) {
+                    localStorage.setItem("graphicsbaytracker_customer", exists.id)
+                    history.push("/")
+                } else {
+                    existDialog.current.showModal()
+                }
+            })
+    }
+
+    return (
+        <main className="container--login">
+            <dialog className="dialog dialog--auth" ref={existDialog}>
+                <div>User does not exist</div>
+                <button className="button--close" onClick={e => existDialog.current.close()}>Close</button>
+            </dialog>
+
+            <section>
+                <form className="form--login" onSubmit={handleLogin}>
+                    <h1>Honey Rae Repairs</h1>
+                    <h2>Please sign in</h2>
+                    <fieldset>
+                        <label htmlFor="inputEmail"> Email address </label>
+                        <input type="email"
+                            onChange={evt => set(evt.target.value)}
+                            className="form-control"
+                            placeholder="Email address"
+                            required autoFocus />
+                    </fieldset>
+                    <fieldset>
+                        <button type="submit">
+                            Sign in
+                        </button>
+                    </fieldset>
+                </form>
+            </section>
+            <section className="link--register">
+                <Link to="/register">Not a member yet?</Link>
+            </section>
+        </main>
+    )
+}
+

src/components/auth/Register.js

@@ -0,0 +1,75 @@
+import React, { useRef, useState } from "react"
+import { useHistory } from "react-router-dom"
+import "./Login.css"
+
+export const Register = (props) => {
+    const [customer, setCustomer] = useState({})
+    const conflictDialog = useRef()
+
+    const history = useHistory()
+
+    const existingUserCheck = () => {
+        return fetch(`http://localhost:8088/customers?email=${customer.email}`)
+            .then(res => res.json())
+            .then(user => !!user.length)
+    }
+    const handleRegister = (e) => {
+        e.preventDefault()
+        existingUserCheck()
+            .then((userExists) => {
+                if (!userExists) {
+                    fetch("http://localhost:8088/customers", {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(customer)
+                    })
+                        .then(res => res.json())
+                        .then(createdUser => {
+                            if (createdUser.hasOwnProperty("id")) {
+                                localStorage.setItem("graphicsbaytracker_customer", createdUser.id)
+                                history.push("/")
+                            }
+                        })
+                }
+                else {
+                    conflictDialog.current.showModal()
+                }
+            })
+    }
+
+    const updateCustomer = (evt) => {
+        const copy = {...customer}
+        copy[evt.target.id] = evt.target.value
+        setCustomer(copy)
+    }
+
+
+    return (
+        <main style={{ textAlign: "center" }}>
+            <dialog className="dialog dialog--password" ref={conflictDialog}>
+                <div>Account with that email address already exists</div>
+                <button className="button--close" onClick={e => conflictDialog.current.close()}>Close</button>
+            </dialog>
+
+            <form className="form--login" onSubmit={handleRegister}>
+                <h1 className="h3 mb-3 font-weight-normal">Please Register for GraphicsBay Tracker</h1>
+                <fieldset>
+                    <label htmlFor="name"> Full Name </label>
+                    <input onChange={updateCustomer}
+                           type="text" id="name" className="form-control"
+                           placeholder="Enter your name" required autoFocus />
+                </fieldset>
+                <fieldset>
+                    <label htmlFor="email"> Email address </label>
+                    <input onChange={updateCustomer} type="email" id="email" className="form-control" placeholder="Email address" required />
+                </fieldset>
+                <fieldset>
+                    <button type="submit"> Register </button>
+                </fieldset>
+            </form>
+        </main>
+    )
+}
+