Materialize

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 }) => {

api/middleware/verifyToken.js

@@ -1,7 +1,6 @@
 const { verifyToken } = require("../tokens/tokenService");
 
 exports.verifyToken = async (req, res, next) => {
-  console.log(req.cookies);
   const { cookies } = req;
   try {
     if (!cookies || !cookies.token) {

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

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>
   );
 };
 

src/backend/authorization/AuthContainer.js

@@ -1,29 +1,54 @@
-import React, { Fragment, useContext, useCallback, useState } from "react";
+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 { UserContext } from "./UserContext";
-// import { ImpersonatorContext } from "./ImpersonatorContext";
-// import AuthLoginSignup from "./AuthLoginSignup";
+// 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 headers = {
-  Accept: "application/json",
-  "Content-Type": "application/json",
-};
+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 [currentUser, setCurrentUser] = useContext(UserContext);
+const AuthContainer = ({ loadUserProfile }) => {
+  const classes = useStyles();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [link, setLink] = useState("signup");
-  // const [impersonator, setImpersonator] = useContext(ImpersonatorContext);
-
-  //* const loadImpersonator = useCallback(() => {
-  //   setTimeout(() => {
-  //     setImpersonator(undefined);
-  //   }, [3000]);
-  // }, [setImpersonator]);
 
   const changeLink = () => {
     if (link === "signup") {
@@ -33,13 +58,15 @@ const AuthContainer = ({loadUserProfile}) => {
     }
   };
 
-
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
       const response = await fetch("/api/profile/login", {
         method: "POST",
-        headers: headers,
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
         body: JSON.stringify({ email, password }),
       });
       const data = await response.json();
@@ -57,38 +84,57 @@ const AuthContainer = ({loadUserProfile}) => {
       <Redirect to="/login" />
       <Switch>
         <Route path="/login">
-          <div className="auth__loginForm">
-            <form onSubmit={handleSubmit} noValidate>
-              <Field
-                id="email"
-                label="Email Address"
-                name="email"
-                value={email}
-                onChange={(e) => {
-                  setEmail(e.target.value);
-                }}
-              />
-              <Field
-                name="password"
-                label="Password"
-                id="password"
-                value={password}
-                onChange={(e) => {
-                  setPassword(e.target.value);
-                }}
-              />
-              <button type="submit">Login</button>
-            </form>
-          </div>
+          <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></nav>
+      <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>
   );
 };

src/components/root/ContactEditor.js

@@ -57,3 +57,75 @@ const ContactEditor = ({
   </ul>
 );
 export default ContactEditor;
+
+
+
+
+
+
+// import React, { Fragment } from "react";
+// import TextField from "@material-ui/core/TextField";
+// import { makeStyles } from "@material-ui/core/styles";
+
+// const useStyles = makeStyles((theme) => ({
+//   root: {
+//     "& > *": {
+//       margin: theme.spacing(1),
+//     },
+//     "& .MuiTextField-root": {
+//       margin: theme.spacing(1),
+//       width: "25ch",
+//     },
+//   },
+// }));
+
+// const ContactEditor = ({
+//   firstName,
+//   lastName,
+//   phone,
+//   email,
+//   password,
+//   onChange,
+// }) => {
+//   const classes = useStyles();
+//   return (
+//     <Fragment>
+//       <TextField
+//         name="firstName"
+//         id="standard-name"
+//         label="First Name"
+//         value={firstName ?? " "}
+//         onChange={onChange}
+//       />
+//       <TextField
+//         name="lastName"
+//         id="standard-name"
+//         label="Last Name"
+//         value={lastName ?? " "}
+//         onChange={onChange}
+//       />
+//       <TextField
+//         name="phone"
+//         id="standard-name"
+//         label="Phone"
+//         value={phone ?? " "}
+//         onChange={onChange}
+//       />
+//       <TextField
+//         name="email"
+//         id="standard-name"
+//         label="Email"
+//         value={email ?? " "}
+//         onChange={onChange}
+//       />
+//       <TextField
+//         name="password"
+//         id="standard-name"
+//         label="Password"
+//         value={password ?? " "}
+//         onChange={onChange}
+//       />
+//     </Fragment>
+//   );
+// };
+// export default ContactEditor;

src/components/root/Header.js

@@ -1,7 +1,19 @@
 import React, { Fragment, useContext } from "react";
 import { UserContext } from "../../backend/authorization/UserContext";
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button'
+// import theme from '../../styles/theme'
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
 
 function Header({ loginClick, setLoginClick }) {
+  const classes = useStyles();
   const [currentUser, setCurrentUser] = useContext(UserContext);
 
   function toggleLoginClick() {
@@ -23,17 +35,17 @@ function Header({ loginClick, setLoginClick }) {
       <Fragment>
         <h2>AERO</h2>
         {loginClick ? (
-          <button onClick={toggleLoginClick}>Close</button>
+          <Button variant="outlined" color="secondary" onClick={toggleLoginClick}>Close</Button>
         ) : (
-          <button onClick={toggleLoginClick}>Login / Signup</button>
+          <Button variant="outlined" color="secondary" onClick={toggleLoginClick}>Login / Signup</Button>
         )}
       </Fragment>
     );
   } else {
     content = (
       <Fragment>
         <h2>AERO</h2>
-        <button onClick={logout}>Logout</button>
+        <Button variant="outlined" color="secondary" onClick={logout}>Logout</Button>
       </Fragment>
     );
   }

src/components/root/MainContentSection.js

@@ -14,8 +14,6 @@ function MainContentSection({ loginClick }) {
   const [admin, setAdmin] = useContext(ImpersonatorContext);
   const [currentProfile, setCurrentProfile] = useContext(UserContext);
 
-
-
   const loadUserProfile = useCallback(
     async function () {
       try {
@@ -37,12 +35,6 @@ function MainContentSection({ loginClick }) {
     [setCurrentProfile]
   );
 
-  // function loadUserProfile() {
-
-  //   const prevWorkorders = currentProfile.workorders;
-  //   console.log(`prev: ${prevWorkorders} & new: ${workorders}`);
-  // }
-
   let content;
   if (loginClick) {
     if (currentProfile) {