Liveshare

now.json

@@ -0,0 +1,15 @@
+{
+    "version": 2,
+    "name": "Snackify",
+    "builds": [
+      {
+        "src": "snackify/package.json",
+        "use": "@now/static-build",
+        "config": { "distDir": "build" }
+      }
+    ],
+    "routes": [
+      { "src": "/static/(.*)", "dest": "snackify/static/$1" },
+      { "src": "/(.*)", "dest": "snackify/index.html" }
+    ]
+  }

snackify/package.json

@@ -4,15 +4,19 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
+    "formik": "^2.0.4",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
+    "reactstrap": "^8.1.1",
     "redux": "^4.0.4",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^4.4.1"
+    "styled-components": "^4.4.1",
+    "yup": "^0.27.0"
   },
   "scripts": {
     "start": "react-scripts start",

snackify/src/App.css

@@ -0,0 +1,12 @@
+
+
+
+
+.card-main{
+    margin-top: 30px;
+    text-decoration: none;
+}
+
+.name{
+    font-weight: bold;
+}

snackify/src/App.js

@@ -1,34 +1,51 @@
-import React from 'react';
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import React, {useState} from 'react';
+import { BrowserRouter as Router, Route } from "react-router-dom";
 import { connect } from "react-redux";
-import HomePage from './Components/HomePage';
-import CompEmp from './Components/CompEmp';
 import './App.css';
-import NavBar from './Components/NavBar';
-import CompanyLogIn from './Components/CompanyLogIn';
-import EmployeeLogIn from './Components/EmployeeLogIn';
-import CompSelect from './Components/EmployeeCompSelect';
-import PrivateRoute from './Components/PrivateRoute';
-import Register from './Components/Register';
-import CompanyData from './Components/CompanyData';
-import EmployeeSnack from './Components/EmployeeSnack';
+import {
+  HomePage,
+  NavBar,
+  PrivateRoute,
+  LogIn,
+  CompSelect,
+  CompanyData,
+
+  CompEmp,
+  FormikRegisterFormEmp,
+  FormikRegisterFormOrg,
+  SnackList,
+  RegistrationHome,
+  SnackCard,  
+  NutritionList,
+  NutritionInfo,
+  CompanyLogIn
+} from './Components';
 
 const App = () => {
+  const [loggedIn, setLoggedIn] = useState("")
+
   return (
     <div className="App">
 
       <Router>
-      <NavBar />
-        {/* <Switch> */}
-          <Route exact path='/' component={HomePage} />
+      <NavBar loggedIn={loggedIn} setLoggedIn={setLoggedIn} />
+
+
+
+
+          <PrivateRoute exact path='/' component={SnackList} />
           <Route exact path='/CompanyOrEmployee' component={CompEmp} />
-          <Route exact path='/CompanyLogIn' component={CompanyLogIn} />
-          <Route exact path='/EmployeeLogIn' component={EmployeeLogIn} />
-          <Route exact path='/Register' component={Register} />
+          <Route exact path='/CompanyLogIn' render={(props) => <CompanyLogIn {...props} loggedIn={loggedIn} setLoggedIn={setLoggedIn} />} />
+          <Route exact path='/EmployeeLogIn' render={(props) => <LogIn {...props} loggedIn={loggedIn} setLoggedIn={setLoggedIn} />} />
+          <Route exact path='/Register' component={RegistrationHome} />
+          <Route exact path='/EmployeeRegistration' render={(props => <FormikRegisterFormEmp {...props} />)} />
+          <Route exact path='/OrgRegistration' render={(props => <FormikRegisterFormOrg {...props} />)} />
           <PrivateRoute exact path='/Company-Select' component={CompSelect} />
           <PrivateRoute exact path='/CompanyData' component={CompanyData} />
-          <PrivateRoute exact path='/EmployeeSnack' component={EmployeeSnack} />
-        {/* </Switch> */}
+
+
+
+
       </Router>
     </div>
   );

snackify/src/Components/CompEmp.js

@@ -1,39 +1,59 @@
-import React from 'react';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
+import React from "react";
+import { NavLink } from "react-router-dom";
+import styled from "styled-components";
 
 const Pic = styled.img`
-width: 80%;
-height: 300px;
-`
+  height: 100px;
+`;
 
 const Card = styled.div`
-border: solid black 1px;
-width: 40%;
-margin: auto;
-margin-top: 3%;
-margin-bottom: 1%;
-backgroundImage: './download.jpg';
-`
+  border-radius: 5px;
+  border: solid 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  width: 300px;
+  margin: 30px 20px;
+  padding: 20px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+const Page = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const PageWrap = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`;
 
 export default function CompEmp() {
-    return (
-        <div className="Page">
-            <Card className="Employee">
-                <Pic src={require('./download.jpg')} />
-                <h1>Employee</h1>
-                <NavLink to="/EmployeeLogIn">
-                    <button>Log In</button>
-                </NavLink>
-
-            </Card>
-            <Card className="Company">
-                <Pic src={require('./s-corporation.jpg')} />
-                <h1>Company</h1>
-                <NavLink to="/CompanyLogIn" >
-                    <button>Log In</button>
-                </NavLink>
-            </Card>
-        </div>
-    )
-}
+  return (
+    <Page>
+      <h2 style={{ textAlign: "center" }}>Log In</h2>
+      <PageWrap>
+        <Card className="Employee">
+          <div>
+            <Pic src={require("../assets/images/male_avatar.png")} />
+          </div>
+          <h1>Employee</h1>
+          <NavLink to="/EmployeeLogIn">
+            <button style={{ borderRadius: "5px", marginTop: "10px" }}>
+              Log In
+            </button>
+          </NavLink>
+        </Card>
+        <Card className="Company">
+          <Pic src={require("../assets/images/workers.png")} />
+          <h1>Company</h1>
+          <NavLink to="/CompanyLogIn">
+            <button style={{ borderRadius: "5px", marginTop: "10px" }}>
+              Log In
+            </button>
+          </NavLink>
+        </Card>
+      </PageWrap>
+    </Page>
+  );
+}

snackify/src/Components/CompanyLogIn.js

@@ -1,77 +1,81 @@
-import React, { useState, useEffect } from 'react'
-import { NavLink } from 'react-router-dom'
-import styled from 'styled-components'
-import { axiosWithLoginAuth } from '../Utils/axiosWithLoginAuth';
-import { connect } from 'react-redux';
-
+import React, { useState, useEffect } from "react";
+import { NavLink } from "react-router-dom";
+import styled from "styled-components";
+import { axiosWithLoginAuth } from "../Utils/axiosWithLoginAuth";
+import { connect } from "react-redux";
+import { loginUser } from "../Store/NonSnackActions";
 
 const Page = styled.div`
-    height:100vh;
-`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
 const Form = styled.form`
-    background: white;
-    width:30vw;
-    margin: 5% 35vw
-    border-radius: 10px;
-    border: 1px solid black;
-    height: 30vh;
-    text-align:center;
-`
+  width: 350px;
+  border-radius: 5px;
+  border: 1px solid black;
+  padding: 15px 30px 40px;
+  display: flex;
+  flex-direction: column;
+  border: solid 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+`;
 const Input = styled.input`
-    margin: 20px 10px;
-`
-const H2 = styled.h2`
-    text-align:center;
-    margin: 30px 0 40px
-`
-
-function CompanyLogin(props) {
-    console.log(props)
-    const [user, setUser] = useState({
-        username: '',
-        password: '',
-        company: false
-    })
-
-    const onChange = e =>
-        setUser({ ...user, [e.target.name]: e.target.value });
+  border-radius: 5px;
+  border: solid 1px rgba(0, 0, 0, 0.2);
+`;
 
-    const handleSubmit = (e) => {
-        localStorage.setItem("token", user);
-        console.log(user)
-        e.preventDefault();
-        props.history.push("/CompanyData");
-        axiosWithLoginAuth()
-            .post(`/login`, user)
-            .then(result => {
-                console.log(result)
-                localStorage.setItem("SnackToken", result.data.payload);
-                props.history.push("/CompanyData");
-            })
-    }
-
-    return (
-        <Page>
-            <Form onSubmit={handleSubmit}>
-                <H2>Admin Login</H2>
-                <label>Username: </label>
-                <Input type="text" name="username" onChange={onChange} />
-                <br />
-                <label> Password: </label>
-                <Input name="password" type="password" onChange={onChange} />
-                <br />
-                <button>Login</button>
-            </Form>
-        </Page>
-    )
-}
+function CompanyLogIn(props) {
+  const [user, setUser] = useState({
+    username: "",
+    password: ""
+  });
 
+  const onChange = e => setUser({ ...user, [e.target.name]: e.target.value });
 
-const mapStateToProps = state => {
-    return {
+  const handleSubmit = e => {
+    e.preventDefault();
+    axiosWithLoginAuth()
+      .post(
+        `/auth/login/organization
+            `,
+        user
+      )
+      .then(result => {
+        console.log(result);
+        localStorage.setItem("token", result.data.token);
+        props.setLoggedIn(!props.loggedIn);
+        props.history.push("/");
+      })
+      .catch(err => {
+        console.log(err.message);
+      });
+  };
 
-    };
+  return (
+    <Page>
+      <h2 style={{ marginBottom: "30px" }}>Corporate Login</h2>
+      <Form onSubmit={handleSubmit}>
+        <label>Username: </label>
+        <Input type="text" name="username" onChange={onChange} />
+        <br />
+        <label> Password: </label>
+        <Input name="password" type="password" onChange={onChange} />
+        <br />
+        <button
+          style={{
+            borderRadius: "5px",
+            width: "50%",
+            alignSelf: "flex-start",
+            backgroundColor: "rgba(0,0,0,.25)"
+          }}
+        >
+          Login
+        </button>
+      </Form>
+    </Page>
+  );
 }
 
-export default connect(mapStateToProps, {})(CompanyLogin);
-
+export default CompanyLogIn;