Add unconnected login form and page

hackathon_site/dashboard/frontend/package.json

@@ -8,26 +8,28 @@
     "@material-ui/lab": "^4.0.0-alpha.52",
     "@reduxjs/toolkit": "^1.3.6",
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/react": "^10.2.0",
     "@testing-library/user-event": "^7.1.2",
-    "lint-staged": "^10.2.2",
     "axios": "^0.19.2",
+    "formik": "^2.1.4",
+    "lint-staged": "^10.2.2",
     "node-sass": "^4.14.0",
     "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^3.4.1",
     "react-slick": "^0.26.1",
     "redux": "^4.0.5",
     "redux-mock-store": "^1.5.4",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "yup": "^0.29.1"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -50,7 +52,8 @@
     "tabWidth": 4
   },
   "devDependencies": {
-    "husky": "^4.2.5"
+    "husky": "^4.2.5",
+    "jest-environment-jsdom-sixteen": "^1.0.3"
   },
   "husky": {
     "hooks": {

hackathon_site/dashboard/frontend/src/App.js

@@ -1,27 +1,38 @@
 import React from "react";
-import { HashRouter as Router, Route } from "react-router-dom";
-import { StylesProvider } from "@material-ui/core/styles";
+import { BrowserRouter as Router, Route } from "react-router-dom";
+import {
+    createMuiTheme,
+    StylesProvider,
+    ThemeProvider,
+} from "@material-ui/core/styles";
 import { Provider as ReduxProvider } from "react-redux";
+import styles from "assets/abstracts/_exports.scss";
 
 import store from "slices/store";
 
 import "App.scss";
-import Header from "components/general/Header/Header";
-import Greeting from "components/general/Greeting/Greeting";
 import Dashboard from "pages/Dashboard/Dashboard";
 import Footer from "components/general/Footer/Footer";
+import Login from "pages/Login/Login";
+
+export const makePalette = () => {
+    // In testing, the scss exports don't work so styles is an
+    // empty object. This gets around that.
+    let palette = {};
+    if (styles.primary) palette.primary = { main: styles.primary };
+    if (styles.secondary) palette.secondary = { main: styles.secondary };
+    return palette;
+};
+
+const theme = createMuiTheme({
+    palette: makePalette(),
+});
 
 const UnconnectedApp = () => {
     return (
         <div className="App">
-            <Router>
-                <Header />
-                <Route exact path="/" component={Dashboard} />
-            </Router>
-            <div className="App-header">
-                <p>IEEeeeeeee</p>
-                <Greeting userID={1} />
-            </div>
+            <Route exact path="/" component={Dashboard} />
+            <Route exact path="/login" component={Login} />
             <Footer />
         </div>
     );
@@ -30,7 +41,11 @@ const UnconnectedApp = () => {
 const ConnectedApp = () => (
     <ReduxProvider store={store}>
         <StylesProvider injectFirst>
-            <UnconnectedApp />
+            <ThemeProvider theme={theme}>
+                <Router>
+                    <UnconnectedApp />
+                </Router>
+            </ThemeProvider>
         </StylesProvider>
     </ReduxProvider>
 );

hackathon_site/dashboard/frontend/src/App.test.js

@@ -2,8 +2,6 @@ import React from "react";
 import { render } from "@testing-library/react";
 import App from "./App";
 
-test("renders placeholder text", () => {
-    const { getByText } = render(<App />);
-    const textElement = getByText(/IEEeeeeeee/i);
-    expect(textElement).toBeInTheDocument();
+test("renders without crashing", () => {
+    render(<App />);
 });

hackathon_site/dashboard/frontend/src/assets/abstracts/_exports.scss

@@ -0,0 +1,7 @@
+@import "_variables.scss";
+
+:export {
+    //  Exports to plug into MUI's theming system
+    primary: color(primary);
+    secondary: color(secondary);
+}

hackathon_site/dashboard/frontend/src/assets/abstracts/_mixins.scss

@@ -5,36 +5,62 @@
 }
 
 @mixin responsive($breakpoint) {
-    @if ($breakpoint == xl) {
-        @media (max-width: 1200px) {
+    @if ($breakpoint == xl-down) {
+        @media (max-width: 1920px) {
             @content;
         }
     }
-    @if ($breakpoint == lg) {
-        @media (max-width: 1000px) {
+
+    @if ($breakpoint == xl-up) {
+        @media (min-width: 1920px) {
+            @content;
+        }
+    }
+
+    @if ($breakpoint == lg-down) {
+        @media (max-width: 1280px) {
+            @content;
+        }
+    }
+
+    @if ($breakpoint == lg-up) {
+        @media (min-width: 1280px) {
             @content;
         }
     }
 
-    @if ($breakpoint == lg/md) {
-        @media (max-width: 800px) {
+    @if ($breakpoint == md-down) {
+        @media (max-width: 960px) {
             @content;
         }
     }
 
-    @if ($breakpoint == md) {
+    @if ($breakpoint == md-up) {
+        @media (min-width: 960px) {
+            @content;
+        }
+    }
+
+    @if ($breakpoint == sm-down) {
         @media (max-width: 600px) {
             @content;
         }
     }
 
-    @if ($breakpoint == sm) {
-        @media (max-width: 465px) {
+    @if ($breakpoint == sm-up) {
+        @media (min-width: 600px) {
             @content;
         }
     }
-    @if ($breakpoint == xs) {
-        @media (max-width: 350px) {
+
+    @if ($breakpoint == xs-down) {
+        @media (max-width: 360px) {
+            @content;
+        }
+    }
+
+    @if ($breakpoint == xs-up) {
+        @media (min-width: 360px) {
             @content;
         }
     }

hackathon_site/dashboard/frontend/src/components/general/Header/Header.test.js

@@ -1,24 +1,18 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { HashRouter as Router } from "react-router-dom";
 import Header from "./Header";
+import { withRouter } from "testing";
 
 test("renders header with navbar", () => {
-    const { getByText, getByTestId } = render(
-        <Router>
-            <Header />
-        </Router>
-    );
+    const { getByText, getByTestId } = render(withRouter(<Header />));
     expect(getByText(/Hackathon Name/i)).toBeInTheDocument();
     expect(getByTestId("headerLogo")).toBeInTheDocument();
     expect(getByText("Dashboard")).toBeInTheDocument(); // Checking if navbar is in header
 });
 
 test("renders header with no navbar", () => {
     const { getByText, getByTestId, queryByText } = render(
-        <Router>
-            <Header showNavbar={false} />
-        </Router>
+        withRouter(<Header showNavbar={false} />)
     );
     expect(getByText(/Hackathon Name/i)).toBeInTheDocument();
     expect(getByTestId("headerLogo")).toBeInTheDocument();

hackathon_site/dashboard/frontend/src/components/general/Navbar/Navbar.test.js

@@ -1,13 +1,9 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { HashRouter as Router } from "react-router-dom";
 import Navbar from "./Navbar";
+import { withRouter } from "testing";
 
 it("renders correctly when all icons appear", () => {
-    const { asFragment } = render(
-        <Router>
-            <Navbar />
-        </Router>
-    );
+    const { asFragment } = render(withRouter(<Navbar />));
     expect(asFragment()).toMatchSnapshot();
 });

hackathon_site/dashboard/frontend/src/components/general/Navbar/__snapshots__/Navbar.test.js.snap

@@ -9,7 +9,7 @@ exports[`renders correctly when all icons appear 1`] = `
       class="PrivateHiddenCss-smDown-6"
     >
       <a
-        href="#/"
+        href="/"
       >
         <button
           aria-label="Dashboard"
@@ -42,7 +42,7 @@ exports[`renders correctly when all icons appear 1`] = `
         </button>
       </a>
       <a
-        href="#/orders"
+        href="/orders"
       >
         <button
           aria-label="Orders"
@@ -75,7 +75,7 @@ exports[`renders correctly when all icons appear 1`] = `
         </button>
       </a>
       <a
-        href="#/teams"
+        href="/teams"
       >
         <button
           aria-label="Teams"
@@ -108,7 +108,7 @@ exports[`renders correctly when all icons appear 1`] = `
         </button>
       </a>
       <a
-        href="#/reports"
+        href="/reports"
       >
         <button
           aria-label="Reports"
@@ -141,7 +141,7 @@ exports[`renders correctly when all icons appear 1`] = `
         </button>
       </a>
       <a
-        href="#/inventory"
+        href="/inventory"
       >
         <button
           aria-label="Inventory"
@@ -169,7 +169,7 @@ exports[`renders correctly when all icons appear 1`] = `
         </button>
       </a>
       <a
-        href="#/cart"
+        href="/cart"
       >
         <button
           aria-label="Cart"
@@ -252,7 +252,7 @@ exports[`renders correctly when all icons appear 1`] = `
       class="PrivateHiddenCss-mdUp-8"
     >
       <a
-        href="#/cart"
+        href="/cart"
       >
         <button
           aria-label="Cart"