diff --git a/cypress/integration/NavBar.test.js b/cypress/integration/NavBar.test.js index 726c2fa..0ad5830 100644 --- a/cypress/integration/NavBar.test.js +++ b/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') }) }) \ No newline at end of file diff --git a/cypress/integration/SignInPage.test.js b/cypress/integration/SignInPage.test.js index 6a12f4e..b6269a5 100644 --- a/cypress/integration/SignInPage.test.js +++ b/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/') + }) }) }) \ No newline at end of file diff --git a/public/_redirects b/public/_redirects new file mode 100644 index 0000000..50a4633 --- /dev/null +++ b/public/_redirects @@ -0,0 +1 @@ +/* /index.html 200 \ No newline at end of file diff --git a/src/App.js b/src/App.js index cd42cae..c4c5e9b 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ 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' @@ -8,16 +8,20 @@ import NavBar from './components/NavBar'; function App () { const [signedIn, setSignedIn] = useState(false) + const [user, setUser] = useState(undefined) return ( - <> - - - - - - - + + + + + }> + + + ) } diff --git a/src/DefaultComponents.js b/src/DefaultComponents.js index d0d7ff3..1568a75 100644 --- a/src/DefaultComponents.js +++ b/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` diff --git a/src/components/NavBar.js b/src/components/NavBar.js index 324cfc2..a1110de 100644 --- a/src/components/NavBar.js +++ b/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 = ( - Sign Out + <> + User + Sign Out + ) const SignedOutItems = ( - Sign In + <> + User + Sign In + ) return ( diff --git a/src/components/PrivateRoute.js b/src/components/PrivateRoute.js new file mode 100644 index 0000000..03a6ea0 --- /dev/null +++ b/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 ( + + AuthCondition ? ( + + ) : ( + + ) + } + /> + ) +} + +export default PrivateRoute \ No newline at end of file diff --git a/src/components/SignInCard.js b/src/components/SignInCard.js index a34ad9b..357ad88 100644 --- a/src/components/SignInCard.js +++ b/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 () { - Sign In + Sign In Don't have an account? Sign Up Here ) diff --git a/src/pages/SignInPage.js b/src/pages/SignInPage.js index dc1474c..2dd1c0f 100644 --- a/src/pages/SignInPage.js +++ b/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 ( - - - - ) +function SignInPage ({ signedIn, setSignedIn }) { + const handleSignIn = (evt) => { + evt.preventDefault() + setSignedIn(true) + } + + if (signedIn) { + return + } else { + return ( + + + + ) + } } export default SignInPage \ No newline at end of file