src/SmugFolio.js

@@ -1,4 +1,30 @@
-
+import { Route, Redirect } from "react-router-dom"
+import { ApplicationViews } from "./ApplicationViews"
+import { NavBar } from "./nav/NavBar"
+import { Login } from "./auth/Login"
+import { Register } from "./auth/Register"
 export const SmugFolio = () => {
-    
+
+    if (localStorage.getItem("sf_token")) {
+        return(
+         <>
+            <Route>
+                <NavBar />
+                <ApplicationViews />
+            </Route>
+            </>
+            )
+        } else {
+            return <>
+            <Redirect to="/login" />
+    <Route path="/login">
+        <Login />
+    </Route>
+
+    <Route path="/register">
+        <Register />
+    </Route>
+    </>
+
+        }
 }

src/auth/Login.js

@@ -1,6 +1,5 @@
 import React, { useRef } from "react"
 import { Link, useHistory } from "react-router-dom"
-import "./Auth.css"
 
 
 export const Login = () => {
@@ -46,8 +45,8 @@ export const Login = () => {
                     <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 />
+                        <label htmlFor="inputUsername"> Username</label>
+                        <input ref={username} type="username" id="username" className="form-control" placeholder="Username" required autoFocus />
                     </fieldset>
                     <fieldset>
                         <label htmlFor="inputPassword"> Password </label>

src/auth/Register.js

@@ -0,0 +1,91 @@
+import React, { useRef } from "react"
+import { Link, useHistory } from "react-router-dom"
+
+
+export const Register = () => {
+    const firstName = useRef()
+    const lastName = useRef()
+    const username = useRef()
+    const bio = useRef()
+    const password = useRef()
+    const verifyPassword = useRef()
+    const passwordDialog = useRef()
+    const history = useHistory()
+
+    const handleRegister = (e) => {
+        e.preventDefault()
+
+        if (password.current.value === verifyPassword.current.value) {
+            const newUser = {
+                "username": username.current.value,
+                "first_name": firstName.current.value,
+                "last_name": lastName.current.value,
+                "password": password.current.value
+            }
+
+            return fetch("http://127.0.0.1:8000/register", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    "Accept": "application/json"
+                },
+                body: JSON.stringify(newUser)
+            })
+                .then(res => res.json())
+                .then(res => {
+                    if ("token" in res) {
+                        localStorage.setItem("sf_token", res.token)
+                        history.push("/")
+                    }
+                })
+        } else {
+            passwordDialog.current.showModal()
+        }
+    }
+
+    return (
+        <main style={{ textAlign: "center" }}>
+
+            <dialog className="dialog dialog--password" ref={passwordDialog}>
+                <div>Passwords do not match</div>
+                <button className="button--close" onClick={e => passwordDialog.current.close()}>Close</button>
+            </dialog>
+
+            <form className="form--login" onSubmit={handleRegister}>
+                <h1 className="h3 mb-3 font-weight-normal">Register an account</h1>
+                <fieldset>
+                    <label htmlFor="firstName"> First Name </label>
+                    <input ref={firstName} type="text" name="firstName" className="form-control" placeholder="First name" required autoFocus />
+                </fieldset>
+                <fieldset>
+                    <label htmlFor="lastName"> Last Name </label>
+                    <input ref={lastName} type="text" name="lastName" className="form-control" placeholder="Last name" required />
+                </fieldset>
+                <fieldset>
+                    <label htmlFor="inputUsername">Username</label>
+                    <input ref={username} type="text" name="username" className="form-control" placeholder="Username" required />
+                </fieldset>
+                <fieldset>
+                    <label htmlFor="inputPassword"> Password </label>
+                    <input ref={password} type="password" name="password" className="form-control" placeholder="Password" required />
+                </fieldset>
+                <fieldset>
+                    <label htmlFor="verifyPassword"> Verify Password </label>
+                    <input ref={verifyPassword} type="password" name="verifyPassword" className="form-control" placeholder="Verify password" required />
+                </fieldset>
+                <fieldset>
+                    <label htmlFor="verifyPassword"> Verify Password </label>
+                    <textarea ref={bio} name="bio" className="form-control" placeholder="Let other gamers know a little bit about you..." />
+                </fieldset>
+                <fieldset style={{
+                    textAlign: "center"
+                }}>
+                    <button className="btn btn-1 btn-sep icon-send" type="submit">Register</button>
+                </fieldset>
+            </form>
+            <section className="link--register">
+                Already registered? <Link to="/login">Login</Link>
+            </section>
+        </main>
+    )
+}

src/nav/NavBar.js

@@ -0,0 +1,6 @@
+import react, {useState, useEffect} from "react"
+import { useHistory } from "react-router-dom"
+
+export const NavBar = () => {
+    
+}