Merge pull request #28 from michacurri/develop

Add Materialize feature to Master
michacurri · Jan 9, 2021 · 7030266 · 7030266
2 parents 4f94a41 + 8dd1fcb
commit 7030266
Show file tree

Hide file tree

Showing 16 changed files with 854 additions and 226 deletions.
diff --git a/api/controllers/workorderController.js b/api/controllers/workorderController.js
@@ -1,5 +1,4 @@
 const Workorder = require("../models/workorderModel");
-// const { findProfileById } = require("./profileController");
 const Profile = require("../models/profileModel");
 
 exports.createWorkorder = async ({ userId, brand, model, colour }) => {

diff --git a/api/routes/profileRoutes.js b/api/routes/profileRoutes.js
@@ -93,7 +93,7 @@ router
   .use(verifyToken)
   .route("/this-profile")
   .get(async (req, res) => {
-    console.log(`/this-profile: ${req.profile.id}`);
+    // console.log(`/this-profile: ${req.profile.id}`);
     try {
       const profile = await findProfileById(req.profile.id);
       res.json({ data: profile });

diff --git a/api/routes/workorderRoutes.js b/api/routes/workorderRoutes.js
@@ -2,9 +2,9 @@ const express = require("express");
 const router = express.Router();
 const Workorder = require("../models/workorderModel");
 const { verifyToken } = require("../middleware/verifyToken");
-const { createToken } = require("../tokens/tokenService");
-const { findProfileById } = require("../controllers/profileController");
 const { createWorkorder } = require("../controllers/workorderController");
+// const { createToken } = require("../tokens/tokenService");
+// const { findProfileById } = require("../controllers/profileController");
 
 // TODO
 // @route   GET/workorders
@@ -26,7 +26,7 @@ router.get("/", async (req, res) => {
 // router.post("/create/:userId", async (req, res) => {
 
 router
-  // .use(verifyToken)
+  .use(verifyToken)
   .route("/create/:userId")
   .post(async (req, res) => {
     const { brand, model, colour } = req.body;

diff --git a/src/App.js b/src/App.js
@@ -5,26 +5,30 @@ import MainContentSection from "./components/root/MainContentSection";
 import Footer from "./components/root/Footer";
 import { ImpersonatorProvider } from "./backend/authorization/ImpersonatorContext";
 import { UserProvider } from "./backend/authorization/UserContext";
+import { ThemeProvider } from "@material-ui/core";
+import theme from './styles/theme'
 
 const App = () => {
   const [loginClick, setLoginClick] = useState(false);
 
   return (
-    <ImpersonatorProvider>
-      <UserProvider>
-        <Router>
-          <header className="header__container">
-            <Header loginClick={loginClick} setLoginClick={setLoginClick} />
-          </header>
-          <main>
-            <MainContentSection loginClick={loginClick} />
-          </main>
-          <footer className="main__footer">
-            <Footer />
-          </footer>
-        </Router>
-      </UserProvider>
-    </ImpersonatorProvider>
+    <ThemeProvider theme={theme}>
+      <ImpersonatorProvider>
+        <UserProvider>
+          <Router>
+            <header className="header__container">
+              <Header loginClick={loginClick} setLoginClick={setLoginClick} />
+            </header>
+            <main>
+              <MainContentSection loginClick={loginClick} />
+            </main>
+            <footer className="main__footer">
+              <Footer />
+            </footer>
+          </Router>
+        </UserProvider>
+      </ImpersonatorProvider>
+    </ThemeProvider>
   );
 };
 

diff --git a/src/backend/authorization/AuthContainer.js b/src/backend/authorization/AuthContainer.js
@@ -1,41 +1,141 @@
-import React, { useContext, useCallback } from "react";
-import { UserContext } from "./UserContext";
-import { ImpersonatorContext } from "./ImpersonatorContext";
-import AuthLoginSignup from "./AuthLoginSignup";
+import React, { Fragment, useState } from "react";
+import { Link, Switch, Route, Redirect } from "react-router-dom";
+import ProfileCreate from "../../components/root/ProfileCreate";
+// import Field from "../../components/root/Field";
+import { makeStyles } from "@material-ui/core/styles";
+import TextField from "@material-ui/core/TextField";
+import Button from "@material-ui/core/Button";
+import Paper from "@material-ui/core/Paper";
+import Grid from "@material-ui/core/Grid";
 
-const AuthContainer = () => {
-  const [currentUser, setCurrentUser] = useContext(UserContext);
-  const [impersonator, setImpersonator] = useContext(ImpersonatorContext);
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "center",
+    flexGrow: 1,
+    "& > *": {
+      margin: theme.spacing(1),
+    },
+  },
+  textField: {
+    marginLEft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    // width: "50%",
+    display: "flex",
+    justifyContent: "center",
+  },
+  paper: {
+    display: "flex",
+    // width: "50%",
+    margin: "0 auto",
+    padding: 1,
+    rounded: false,
+  },
+  paperText: {
+    rounded: false,
+    padding: 1,
+  },
+  grid: {
+    maxWidth: "calc(50% - 16px)",
+    flexGrow: "50%",
+    flexBasis: "200px"
+  }
+}));
+
+const AuthContainer = ({ loadUserProfile }) => {
+  const classes = useStyles();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [link, setLink] = useState("signup");
 
-  //* const loadImpersonator = useCallback(() => {
-  //   setTimeout(() => {
-  //     setImpersonator(undefined);
-  //   }, [3000]);
-  // }, [setImpersonator]);
+  const changeLink = () => {
+    if (link === "signup") {
+      setLink("login");
+    } else {
+      setLink("signup");
+    }
+  };
 
-  const loadUserProfile = useCallback(
-    async function () {
-      try {
-        const response = await fetch("/api/profile/this-profile", {
-          headers: {
-            credentials: "include",
-          },
-        });
-        const json = await response.json();
-        if (!response.ok) {
-          throw new Error(json.message);
-        }
-        setCurrentUser(json.data);
-      } catch (err) {
-        console.log(err);
-        setCurrentUser(undefined);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await fetch("/api/profile/login", {
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email, password }),
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.message);
       }
-    },
-    [setCurrentUser]
-  );
+      loadUserProfile();
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
   return (
-    <AuthLoginSignup loadUserProfile={loadUserProfile}
-    />
+    <Fragment>
+      <Redirect to="/login" />
+      <Switch>
+        <Route path="/login">
+          <form
+            onSubmit={handleSubmit}
+            className={classes.root}
+            autoComplete="off"
+            autoFocus={true}
+            noValidate
+          >
+            <Grid container className={classes.root}>
+              <Grid item className={classes.grid}>
+                <Paper className={classes.paperText}>
+                  <TextField
+                    id="email"
+                    label="Email Address"
+                    name="email"
+                    value={email}
+                    onChange={(e) => {
+                      setEmail(e.target.value);
+                    }}
+                  />
+                </Paper>
+              </Grid>
+              <Grid className={classes.grid}>
+                <Paper className={classes.paperText}>
+                  <TextField
+                    name="password"
+                    label="Password"
+                    id="password"
+                    value={password}
+                    onChange={(e) => {
+                      setPassword(e.target.value);
+                    }}
+                  />
+                </Paper>
+              </Grid>
+            </Grid>
+            <Button variant="outlined" color="primary" type="submit">
+              Login
+            </Button>
+          </form>
+        </Route>
+        <Route path="/signup">
+          <ProfileCreate changeLink={changeLink} />
+        </Route>
+      </Switch>
+      {/* prettier-ignore */}
+      <nav>
+        {/* <ul>
+          <li><Link to={`${link}`} onClick={changeLink}>{`${link}`}</Link></li>
+        </ul> */}
+        <Button component={Link} to={`${link}`} onClick={changeLink} variant="outlined" color="primary" >{`${link}`}</Button>
+      </nav>
+    </Fragment>
   );
 };
 

diff --git a/src/backend/authorization/AuthLoginSignup.js b/src/backend/authorization/AuthLoginSignup.js
diff --git a/src/components/admin/WorkorderCreate.js b/src/components/admin/WorkorderCreate.js
@@ -1,7 +1,7 @@
 import React, { Fragment, useState } from "react";
 import WorkorderEditor from "../root/WorkorderEditor";
 
-const WorkorderAdd = ({ currentProfile }) => {
+const WorkorderAdd = ({ currentProfile, loadUserProfile }) => {
   const [workorder, setWorkorder] = useState();
 
   const updateWorkorderField = (e) => {
@@ -21,8 +21,7 @@ const WorkorderAdd = ({ currentProfile }) => {
         body: JSON.stringify({ brand, model, colour }),
       });
       if (response.ok) {
-        // onNewWorkorder(response);
-        console.log(response);
+        loadUserProfile()
       } else {
         console.log("Error saving record");
       }