Signup

src/App.js

@@ -3,6 +3,8 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { FirestoreCollection } from 'react-firestore';
 import { ITEMS, USERS } from './constants';
 import Header from './components/Header';
+import AuthPage from './components/AuthPage';
+import SignUp from './components/SignUp';
 import Shopping from './components/shopping';
 import AddItem from './components/addItem';
 import ShareList from './components/ShareList';
@@ -12,7 +14,7 @@ import './CSS/colors.css';
 
 function App() {
   const [userToken, createToken, setToken] = useToken();
-
+  console.log(userToken);
   if (userToken) {
     return (
       <Router>
@@ -27,7 +29,7 @@ function App() {
                     render={() => <AddItem userToken={userToken} list={data} />}
                   />
                   <Route
-                    path="/:itemId?"
+                    path="/list/:itemId?"
                     render={() => (
                       <Shopping userToken={userToken} list={data} />
                     )}
@@ -43,17 +45,16 @@ function App() {
     return (
       <div className="App">
         <Header />
-        <h2 className="tagline">
-          Eggs, bread, cheese and all the things you need.
-        </h2>
-        <p className="home">
-          Get started by creating a new list. This will log you in anonymously.
-        </p>
-        <button className="button" onClick={createToken}>
-          Create New List
-        </button>
-        <p className="home">Join an existing shopping list.</p>
-        <ShareList setToken={setToken} />
+        <Router>
+          <Switch>
+            <Route
+              path="/signup"
+              render={() => <SignUp setToken={setToken} />}
+            />
+
+            <Route path="/" render={() => <AuthPage />} />
+          </Switch>
+        </Router>
       </div>
     );
   }

src/CSS/SignUp.css

@@ -0,0 +1,4 @@
+form {
+  display: flex;
+  flex-direction: column;
+}

src/components/AuthPage.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import NavButton from './navbutton';
+import '../CSS/Nav.css';
+
+const AuthPage = () => {
+  return (
+    <nav id="nav">
+      <NavButton path="signup" text="SignUp" />
+    </nav>
+  );
+};
+
+export default AuthPage;

src/components/Nav.js

@@ -5,7 +5,7 @@ import '../CSS/Nav.css';
 const Nav = () => {
   return (
     <nav id="nav">
-      <NavButton path="/" text="Shopping" />
+      <NavButton path="/list" text="Shopping" />
       <NavButton path="/add" text="Add Item" />
     </nav>
   );

src/components/SignUp.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import firebase from 'firebase';
+import '../CSS/SignUp.css';
+
+const SignUp = ({ setToken }) => {
+  const handleSignUp = event => {
+    event.preventDefault();
+    const email = event.target.username.value;
+    const password = event.target.password.value;
+
+    firebase
+      .auth()
+      .createUserWithEmailAndPassword(email, password)
+      .then(user => {
+        console.log('I did a thing!');
+        console.log(user.user.email);
+        setTokenInAppStateAndStorage(user.user.email);
+      })
+      .catch(error => {
+        // var errorCode = error.code;
+        // var errorMessage = error.message;
+        // ..
+      });
+  };
+
+  const setTokenInAppStateAndStorage = token => {
+    setToken(token);
+    localStorage.setItem('user_token', token);
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSignUp}>
+        <label htmlFor="username">
+          <input
+            type="email"
+            name="username"
+            id="username"
+            placeholder="Username"
+          />
+        </label>
+        <label htmlFor="password">
+          <input
+            type="password"
+            name="password"
+            id="password"
+            placeholder="Password"
+          />
+        </label>
+        <label htmlFor="confirm-password">
+          <input
+            type="password"
+            name="confirm-password"
+            id="confirm-password"
+            placeholder="Confirm password"
+          />
+        </label>
+        <input type="submit" value="Sign Up" />
+      </form>
+    </>
+  );
+};
+
+export default SignUp;

src/constants.js

@@ -1,3 +1,4 @@
 export const USER_TOKEN = 'user_token';
 export const ITEMS = 'items';
 export const USERS = 'users';
+export const USERNAME = 'username';

src/lib/useToken.js

@@ -13,7 +13,6 @@ export function useToken() {
   const createToken = () => {
     firebase.auth().signInAnonymously();
     firebase.auth().onAuthStateChanged(user => {
-      console.log(user);
       if (user) {
         registerNewToken(token);
       }

src/lib/useUsername.js

@@ -0,0 +1,8 @@
+import { USERNAME } from '../constants';
+import { useState } from 'react';
+
+export function useUsername() {
+  const [username, setUsername] = useState(() =>
+    localStorage.getItem(USERNAME),
+  );
+}