add sign in functionality

cypress/integration/NavBar.test.js

@@ -1,8 +1,18 @@
 describe('Nav Bar', () => {
-  it('should render', () => {
-    cy.visit('/signin')
+  it('should have a sign in button that will take you to sign in page', () => {
+    cy.visit('/')
     cy.get('.NavBar')
-      .find('li')
-      .should('have.text', 'Sign In')
+      .contains('li', 'Sign In')
+      .click()
+    cy.url().should('contain', '/signin')
+  })
+
+  it('should have a private user page', () => {
+    cy.visit('/')
+    cy.get('.NavBar')
+      .contains('li', 'User')
+      .click()
+
+    cy.url().should('contain', '/user')
   })
 })

cypress/integration/SignInPage.test.js

@@ -35,5 +35,12 @@ describe('Sign In Page', () => {
       cy.get('a#signup')
         .should('have.attr', 'href')
     })
+
+    it('should redirect after successful sign in', () => {
+      cy.get('button.signin')
+        .click()
+
+      cy.url().should('not.contain', '/signin').should('be', 'localhost:3000/')
+    })
   })
 })

public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

src/App.js

@@ -1,23 +1,27 @@
 import React, { useState } from 'react'
 import './App.css'
-import { BrowserRouter as Router, Route, Link } from "react-router-dom"
+import { BrowserRouter as Router, Route } from "react-router-dom"
 import SignInPage from './pages/SignInPage'
 import SignUpPage from './pages/SignUpPage'
 import HomePage from './pages/HomePage'
 import NavBar from './components/NavBar';
 
 function App () {
   const [signedIn, setSignedIn] = useState(false)
+  const [user, setUser] = useState(undefined)
 
   return (
-    <>
-      <NavBar signedIn={signedIn}></NavBar>
-      <Router>
-        <Route path='/' exact component={HomePage}></Route>
-        <Route path='/signin/' component={SignInPage}></Route>
-        <Route path='/signup/' component={SignUpPage}></Route>
-      </Router>
-    </>
+    <Router>
+      <NavBar signedIn={signedIn} user={user}></NavBar>
+      <Route path='/' exact component={HomePage}></Route>
+      <Route
+        path='/signin'
+        render={
+          () => <SignInPage setSignedIn={setSignedIn}/>
+        }>
+      </Route>
+      <Route path='/signup' component={SignUpPage}></Route>
+    </Router>
   )
 }
 

src/DefaultComponents.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import { Link } from 'react-router-dom'
 
 export const Button = styled.button`
   background: ${props => props.primary ? '#00FFA2' : '#D1D1D1'};
@@ -67,6 +68,7 @@ export const H1 = styled.h1`
 `
 
 export const Nav = styled.nav`
+  display: flex;
   font-family: 'Lato', sans-serif;
   font-weight: 700;
   font-size: 20px;
@@ -78,11 +80,17 @@ export const Nav = styled.nav`
 
 export const NavUL = styled.ul`
   display: flex;
+  margin-left: auto;
   list-style-type: none;
 `
 
 export const NavLI = styled.li`
-  margin-left: auto;
+  margin-left: 1em;
+`
+
+export const NavLink = styled(Link)`
+  color: white;
+  text-decoration: none;
 `
 
 export const Page = styled.div`

src/components/NavBar.js

@@ -1,14 +1,20 @@
 import React from 'react'
-import { Nav, NavLI, NavUL } from '../DefaultComponents'
+import { Nav, NavLI, NavUL, NavLink } from '../DefaultComponents'
 
 
 function NavBar ({ signedIn }) {
   const SignedInItems = (
-    <NavLI>Sign Out</NavLI>
+    <>
+      <NavLI>User</NavLI>
+      <NavLI>Sign Out</NavLI>
+    </>
   )
 
   const SignedOutItems = (
-    <NavLI>Sign In</NavLI>
+    <>
+      <NavLI><NavLink to="/user">User</NavLink></NavLI>
+      <NavLI><NavLink to="/signin">Sign In</NavLink></NavLI>
+    </>
   )
 
   return (

src/components/PrivateRoute.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+
+function PrivateRoute ({ component: Component, AuthCondition, ...rest }) {
+  return (
+    <Route
+      {...rest}
+      render={props =>
+        AuthCondition ? (
+          <Component {...props} />
+        ) : (
+            <Redirect
+              to={{
+                pathname: "/login",
+                state: { from: props.location }
+              }}
+            />
+          )
+      }
+    />
+  )
+}
+
+export default PrivateRoute

src/components/SignInCard.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { Card, SubmitButton, Input, Label, A, H1 } from '../DefaultComponents'
 
-function SignInCard () {
+function SignInCard ({ handleSubmit }) {
   const emailInput = React.createRef()
 
   const focus = useState(true)
@@ -21,7 +21,7 @@ function SignInCard () {
       <Input id="email"></Input>
       <Label htmlFor="password">Password</Label>
       <Input type="password" id="password"></Input>
-      <SubmitButton className="signin" primary>Sign In</SubmitButton>
+      <SubmitButton className="signin" onClick={handleSubmit} primary>Sign In</SubmitButton>
       <A id="signup" href="/signup">Don't have an account? Sign Up Here</A>
     </Card>
   )

src/pages/SignInPage.js

@@ -1,13 +1,23 @@
 import React from 'react'
 import { Page } from '../DefaultComponents';
 import SignInCard from '../components/SignInCard';
+import { Redirect } from 'react-router-dom'
 
-function SignInPage () {
-  return (
-    <Page>
-      <SignInCard></SignInCard>
-    </Page>
-  )
+function SignInPage ({ signedIn, setSignedIn }) {
+  const handleSignIn = (evt) => {
+    evt.preventDefault()
+    setSignedIn(true)
+  }
+
+  if (signedIn) {
+    return <Redirect to='/user' />
+  } else {
+    return (
+      <Page>
+        <SignInCard handleSubmit={handleSignIn}></SignInCard>
+      </Page>
+    )
+  }
 }
 
 export default SignInPage