April32024

package.json

@@ -23,6 +23,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.6.7",
     "chart.js": "^3.9.1",
     "formik": "^2.2.9",
     "react": "^18.2.0",
@@ -36,7 +37,7 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "PORT=5000 react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/App.js

@@ -1,49 +1,69 @@
-import { useState } from "react";
+import { useState, useContext } from "react";
 import { Routes, Route } from "react-router-dom";
 import Topbar from "./scenes/global/Topbar";
 import Sidebar from "./scenes/global/Sidebar";
 import Dashboard from "./scenes/dashboard";
 import Team from "./scenes/team";
+import Test from "./scenes/Test";
 import Invoices from "./scenes/invoices";
 import Contacts from "./scenes/contacts";
 import Bar from "./scenes/bar";
 import Form from "./scenes/form";
 import Line from "./scenes/line";
 import Pie from "./scenes/pie";
 import FAQ from "./scenes/faq";
+import Drivers from './scenes/drivers';
 import Geography from "./scenes/geography";
+import RegistrationForm from './scenes/registration';
+import LoginForm from './scenes/login';
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { ColorModeContext, useMode } from "./theme";
 import Calendar from "./scenes/calendar/calendar";
+import { AuthContext } from "./context/AuthContext";
 
 function App() {
   const [theme, colorMode] = useMode();
   const [isSidebar, setIsSidebar] = useState(true);
+  const { currentUser } = useContext(AuthContext);
 
   return (
     <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <div className="app">
-          <Sidebar isSidebar={isSidebar} />
-          <main className="content">
-            <Topbar setIsSidebar={setIsSidebar} />
-            <Routes>
-              <Route path="/" element={<Dashboard />} />
-              <Route path="/team" element={<Team />} />
-              <Route path="/contacts" element={<Contacts />} />
-              <Route path="/invoices" element={<Invoices />} />
-              <Route path="/form" element={<Form />} />
-              <Route path="/bar" element={<Bar />} />
-              <Route path="/pie" element={<Pie />} />
-              <Route path="/line" element={<Line />} />
-              <Route path="/faq" element={<FAQ />} />
-              <Route path="/calendar" element={<Calendar />} />
-              <Route path="/geography" element={<Geography />} />
-            </Routes>
-          </main>
+          {currentUser ?
+            <>
+              <Sidebar isSidebar={isSidebar} />
+              <main className="content">
+                <Topbar setIsSidebar={setIsSidebar} />
+                <Routes>
+                  <Route path="/" element={<Dashboard />} />
+                  <Route path="/team" element={<Team />} />
+                  <Route path="/contacts" element={<Contacts />} />
+                  <Route path="/invoices" element={<Invoices />} />
+                  <Route path="/form" element={<Form />} />
+                  <Route path="/bar" element={<Bar />} />
+                  <Route path="/pie" element={<Pie />} />
+                  <Route path="/line" element={<Line />} />
+                  <Route path="/faq" element={<FAQ />} />
+                  <Route path="/calendar" element={<Calendar />} />
+                  <Route path="/geography" element={<Geography />} />
+                  <Route path="/test" element={<Test />} />
+                  <Route path="/drivers" element={<Drivers />} />
+                  <Route path="/users/register" element={<RegistrationForm />} />
+                </Routes>
+              </main>
+            </>
+
+          :
+            <>
+              <Routes>
+                <Route path="/" element={<LoginForm />} />
+              </Routes>
+            </>
+          }
         </div>
-      </ThemeProvider>
+     </ThemeProvider>
     </ColorModeContext.Provider>
   );
 }

src/components/LoginForm.js

@@ -0,0 +1,38 @@
+import { Formik, Field, Form, ErrorMessage } from 'formik'
+import { loginSchema } from './validation/loginSchema'
+export const LoginForm = ({ styles }) => (
+  <>
+    <Formik
+      initialValues={{
+        email: '',
+        password: '',
+      }}
+      validationSchema={loginSchema}
+      onSubmit={(values) => {
+        alert(JSON.stringify(values, null, 2))
+      }}
+    >
+      <Form>
+        <label className={styles.label} htmlFor='Email'>
+          Email
+        </label>
+        <Field className={styles.field} id='email' name='email' />
+        <ErrorMessage component='a' className={styles.errorMsg} name='email' />
+        <label className={styles.label} htmlFor='Email'>
+          Password
+        </label>
+        <Field className={styles.field} id='password' name='password' />
+        <ErrorMessage
+          component='a'
+          className={styles.errorMsg}
+          name='password'
+        />
+        <div className='mt-8'>
+          <button type='submit' className={styles.button}>
+            Login
+          </button>
+        </div>
+      </Form>
+    </Formik>
+  </>
+)

src/components/validation/loginSchema.js

@@ -0,0 +1,5 @@
+import * as Yup from 'yup'
+export const loginSchema = Yup.object().shape({
+  email: Yup.string().email().required('Required'),
+  password: Yup.string().required('Required').min(3, 'Too Short!'),
+})

src/context/AuthContext.js

@@ -0,0 +1,32 @@
+import axios from "axios";
+import { createContext, useEffect, useState } from "react";
+
+export const AuthContext = createContext();
+
+export const AuthContextProvider = ({children}) => {
+    const [currentUser, setCurrentUser] = useState(JSON.parse(localStorage.getItem('user') || null));
+
+    useEffect(() => {
+        localStorage.setItem('user', JSON.stringify(currentUser));
+    }, [currentUser]);
+
+    const login = async(inputs) => {
+        const res = await axios.post('/auth/login', inputs);
+        setCurrentUser(res.data)
+        // navigate('/');
+    }
+
+    const logout = async(inputs) => {
+        const res = await axios.post('/auth/logout', inputs);
+        setCurrentUser(null);
+    }
+
+    const register = async(inputs) => {
+        const res = await axios.post('/auth/register', inputs);
+        setCurrentUser(res.data);
+    }
+
+    return (
+        <AuthContext.Provider value={{currentUser, register, login, logout}}>{children}</AuthContext.Provider>
+    )
+};

src/index.js

@@ -3,12 +3,15 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import { BrowserRouter } from "react-router-dom";
+import { AuthContextProvider } from "./context/AuthContext";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
+    <AuthContextProvider>
+      <BrowserRouter>
+          <App />
+      </BrowserRouter>
+    </AuthContextProvider>
   </React.StrictMode>
 );

src/scenes/Test.js

@@ -0,0 +1,104 @@
+import { Box } from "@mui/material";
+import { DataGrid, GridToolbar } from "@mui/x-data-grid";
+import { tokens } from "../theme";
+import { mockDataContacts } from "../data/mockData";
+// import { mockDataContacts } from "../../data/mockData";
+import Header from "../components/Header";
+import { useTheme } from "@mui/material";
+
+const Test = () => {
+  const theme = useTheme();
+  const colors = tokens(theme.palette.mode);
+
+  const columns = [
+    { field: "id", headerName: "ID", flex: 0.5 },
+    { field: "registrarId", headerName: "Registrar ID" },
+    {
+      field: "name",
+      headerName: "Name",
+      flex: 1,
+      cellClassName: "name-column--cell",
+    },
+    {
+      field: "age",
+      headerName: "Age",
+      type: "number",
+      headerAlign: "left",
+      align: "left",
+    },
+    {
+      field: "phone",
+      headerName: "Phone Number",
+      flex: 1,
+    },
+    {
+      field: "email",
+      headerName: "Email",
+      flex: 1,
+    },
+    {
+      field: "address",
+      headerName: "Address",
+      flex: 1,
+    },
+    {
+      field: "city",
+      headerName: "City",
+      flex: 1,
+    },
+    {
+      field: "zipCode",
+      headerName: "Zip Code",
+      flex: 1,
+    },
+  ];
+
+  return (
+    <Box m="20px">
+      <Header
+        title="Tests"
+        subtitle="List of Tests for Future Reference"
+      />
+      <Box
+        m="40px 0 0 0"
+        height="75vh"
+        sx={{
+          "& .MuiDataGrid-root": {
+            border: "none",
+          },
+          "& .MuiDataGrid-cell": {
+            borderBottom: "none",
+          },
+          "& .name-column--cell": {
+            color: colors.greenAccent[300],
+          },
+          "& .MuiDataGrid-columnHeaders": {
+            backgroundColor: colors.blueAccent[700],
+            borderBottom: "none",
+          },
+          "& .MuiDataGrid-virtualScroller": {
+            backgroundColor: colors.primary[400],
+          },
+          "& .MuiDataGrid-footerContainer": {
+            borderTop: "none",
+            backgroundColor: colors.blueAccent[700],
+          },
+          "& .MuiCheckbox-root": {
+            color: `${colors.greenAccent[200]} !important`,
+          },
+          "& .MuiDataGrid-toolbarContainer .MuiButton-text": {
+            color: `${colors.grey[100]} !important`,
+          },
+        }}
+      >
+        <DataGrid
+          rows={mockDataContacts}
+          columns={columns}
+          components={{ Toolbar: GridToolbar }}
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export default Test;