Merge pull request #12 from JMR-dev/jr-create-app-shell

Completed app shell

src/ApplicationViews.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { Route } from "react-router-dom";
+
+
+export const ApplicationViews = () => {
+
+    return (
+    
+    <>
+
+    <main>
+        
+        </main>
+    </>
+    )
+}

src/auth/Login.js

@@ -0,0 +1,68 @@
+import React, { useRef } from "react"
+import { Link, useHistory } from "react-router-dom"
+import "./Auth.css"
+
+
+export const Login = () => {
+    const username = useRef()
+    const password = useRef()
+    const invalidDialog = useRef()
+    const history = useHistory()
+
+    const handleLogin = (e) => {
+        e.preventDefault()
+
+        return fetch("http://127.0.0.1:8000/login", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                "Accept": "application/json"
+            },
+            body: JSON.stringify({
+                username: username.current.value,
+                password: password.current.value
+            })
+        })
+            .then(res => res.json())
+            .then(res => {
+                if ("valid" in res && res.valid && "token" in res) {
+                    localStorage.setItem("sf_token", res.token)
+                    history.push("/")
+                }
+                else {
+                    invalidDialog.current.showModal()
+                }
+            })
+    }
+
+    return (
+        <main className="container--login">
+            <dialog className="dialog dialog--auth" ref={invalidDialog}>
+                <div>Username or password was not valid.</div>
+                <button className="button--close" onClick={e => invalidDialog.current.close()}>Close</button>
+            </dialog>
+            <section>
+                <form className="form--login" onSubmit={handleLogin}>
+                    <h1>SmugFolio</h1>
+                    <h2>Please sign in</h2>
+                    <fieldset>
+                        <label htmlFor="inputUsername"> Username address </label>
+                        <input ref={username} type="username" id="username" className="form-control" placeholder="Username address" required autoFocus />
+                    </fieldset>
+                    <fieldset>
+                        <label htmlFor="inputPassword"> Password </label>
+                        <input ref={password} type="password" id="password" className="form-control" placeholder="Password" required />
+                    </fieldset>
+                    <fieldset style={{
+                        textAlign: "center"
+                    }}>
+                        <button className="btn btn-1 btn-sep icon-send" type="submit">Sign In</button>
+                    </fieldset>
+                </form>
+            </section>
+            <section className="link--register">
+                <Link to="/register">Register</Link>
+            </section>
+        </main>
+    )
+}