From a2cc51475493289d4cc06cff04805645ae44f67d Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 19 Jul 2024 10:05:18 -0700 Subject: [PATCH 1/5] Move register to register folder --- Client/src/App.jsx | 2 +- .../Pages/Auth/{ => Register}/Register.jsx | 24 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) rename Client/src/Pages/Auth/{ => Register}/Register.jsx (92%) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 0482aec5d..622c8c79b 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -2,7 +2,7 @@ import { Routes, Route } from "react-router-dom"; // import "./App.css"; import NotFound from "./Pages/NotFound"; import Login from "./Pages/Auth/Login"; -import Register from "./Pages/Auth/Register"; +import Register from "./Pages/Auth/Register/Register"; import HomeLayout from "./Layouts/HomeLayout"; import Account from "./Pages/Account"; import Monitors from "./Pages/Monitors"; diff --git a/Client/src/Pages/Auth/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx similarity index 92% rename from Client/src/Pages/Auth/Register.jsx rename to Client/src/Pages/Auth/Register/Register.jsx index f6d0b3b0f..3003a3a75 100644 --- a/Client/src/Pages/Auth/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -1,19 +1,19 @@ import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; - -import "./index.css"; -import background from "../../assets/Images/background_pattern_decorative.png"; -import Logomark from "../../assets/Images/bwl-logo-2.svg?react"; -import Check from "../../Components/Check/Check"; -import Button from "../../Components/Button"; -import { credentials } from "../../Validation/validation"; -import axiosInstance from "../../Utils/axiosConfig"; -import { useDispatch } from "react-redux"; -import { register } from "../../Features/Auth/authSlice"; -import { createToast } from "../../Utils/toastUtils"; -import Field from "../../Components/Inputs/Field"; import { useTheme } from "@emotion/react"; import { Stack, Typography } from "@mui/material"; +import { useDispatch } from "react-redux"; + +import "../index.css"; +import background from "../../../assets/Images/background_pattern_decorative.png"; +import Logomark from "../../../assets/Images/bwl-logo-2.svg?react"; +import Check from "../../../Components/Check/Check"; +import Button from "../../../Components/Button"; +import { credentials } from "../../../Validation/validation"; +import axiosInstance from "../../../Utils/axiosConfig"; +import { register } from "../../../Features/Auth/authSlice"; +import { createToast } from "../../../Utils/toastUtils"; +import Field from "../../../Components/Inputs/Field"; const Register = () => { const dispatch = useDispatch(); From 61b16147cb3399e8b379c9b835f672961bb8a76e Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 19 Jul 2024 10:24:01 -0700 Subject: [PATCH 2/5] Move admin check for register page to HOC --- Client/src/HOC/withAdminCheck.jsx | 31 +++++++++++++++++++++ Client/src/Pages/Auth/Register/Register.jsx | 22 ++++----------- 2 files changed, 36 insertions(+), 17 deletions(-) create mode 100644 Client/src/HOC/withAdminCheck.jsx diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx new file mode 100644 index 000000000..2d8812728 --- /dev/null +++ b/Client/src/HOC/withAdminCheck.jsx @@ -0,0 +1,31 @@ +import React, { useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import axiosInstance from "../Utils/axiosConfig"; + +const withAdminCheck = (WrappedComponent) => { + const WithAdminCheck = (props) => { + const navigate = useNavigate(); + + useEffect(() => { + console.log("admin check"); + axiosInstance + .get("/auth/users/admin") + .then((response) => { + if (response.data.data === true) { + navigate("/login"); + } + }) + .catch((error) => { + console.log(error); + }); + }, [navigate]); + return ; + }; + const wrappedComponentName = + WrappedComponent.displayName || WrappedComponent.name || "Component"; + WithAdminCheck.displayName = `WithAdminCheck(${wrappedComponentName})`; + + return WithAdminCheck; +}; + +export default withAdminCheck; diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx index 3003a3a75..dae616d3a 100644 --- a/Client/src/Pages/Auth/Register/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useState } from "react"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@emotion/react"; import { Stack, Typography } from "@mui/material"; @@ -10,10 +10,10 @@ import Logomark from "../../../assets/Images/bwl-logo-2.svg?react"; import Check from "../../../Components/Check/Check"; import Button from "../../../Components/Button"; import { credentials } from "../../../Validation/validation"; -import axiosInstance from "../../../Utils/axiosConfig"; -import { register } from "../../../Features/Auth/authSlice"; import { createToast } from "../../../Utils/toastUtils"; import Field from "../../../Components/Inputs/Field"; +import withAdminCheck from "../../../HOC/withAdminCheck"; +import { register } from "../../../Features/Auth/authSlice"; const Register = () => { const dispatch = useDispatch(); @@ -39,19 +39,6 @@ const Register = () => { }); const [errors, setErrors] = useState({}); - useEffect(() => { - axiosInstance - .get("/auth/users/admin") - .then((response) => { - if (response.data.data === true) { - navigate("/login"); - } - }) - .catch((error) => { - console.log(error); - }); - }, [form, navigate]); - const handleSubmit = async (e) => { e.preventDefault(); @@ -242,4 +229,5 @@ const Register = () => { ); }; -export default Register; +const WrappedRegister = withAdminCheck(Register); +export default WrappedRegister; From dcb7ccee80744ddd68bc9b669ef4771129c0a09e Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 19 Jul 2024 10:29:43 -0700 Subject: [PATCH 3/5] Add conditional rendering for admin account --- Client/src/HOC/withAdminCheck.jsx | 2 +- Client/src/Pages/Auth/Register/Register.jsx | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx index 2d8812728..5550219f2 100644 --- a/Client/src/HOC/withAdminCheck.jsx +++ b/Client/src/HOC/withAdminCheck.jsx @@ -19,7 +19,7 @@ const withAdminCheck = (WrappedComponent) => { console.log(error); }); }, [navigate]); - return ; + return ; }; const wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || "Component"; diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx index dae616d3a..cb68cc349 100644 --- a/Client/src/Pages/Auth/Register/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -15,7 +15,8 @@ import Field from "../../../Components/Inputs/Field"; import withAdminCheck from "../../../HOC/withAdminCheck"; import { register } from "../../../Features/Auth/authSlice"; -const Register = () => { +const Register = ({ isAdmin }) => { + console.log(isAdmin); const dispatch = useDispatch(); const navigate = useNavigate(); const theme = useTheme(); @@ -42,8 +43,8 @@ const Register = () => { const handleSubmit = async (e) => { e.preventDefault(); - const adminForm = { ...form, role: "admin" }; - const { error } = credentials.validate(adminForm, { + const form = { ...form, role: isAdmin ? "admin" : "user" }; + const { error } = credentials.validate(form, { abortEarly: false, context: { password: form.password }, }); @@ -62,8 +63,8 @@ const Register = () => { : "Error validating data.", }); } else { - delete adminForm.confirm; - const action = await dispatch(register(adminForm)); + delete form.confirm; + const action = await dispatch(register(form)); if (action.payload.success) { const token = action.payload.data; localStorage.setItem("token", token); @@ -119,7 +120,7 @@ const Register = () => { - Create admin account + Create{isAdmin ? " admin " : " "}account From bd2422c90aabc15b3ffcbc3451645d02701397ad Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 19 Jul 2024 10:40:40 -0700 Subject: [PATCH 4/5] Wrapped /register in admin check HOC, added register/:token route --- Client/src/App.jsx | 10 +++++++--- Client/src/Pages/Auth/Register/Register.jsx | 3 +-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 622c8c79b..a10228795 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,4 +1,6 @@ import { Routes, Route } from "react-router-dom"; +import "react-toastify/dist/ReactToastify.css"; +import { ToastContainer } from "react-toastify"; // import "./App.css"; import NotFound from "./Pages/NotFound"; import Login from "./Pages/Auth/Login"; @@ -18,10 +20,10 @@ import NewPasswordConfirmed from "./Pages/Auth/NewPasswordConfirmed"; import ProtectedRoute from "./Components/ProtectedRoute"; import Details from "./Pages/Monitors/Details"; import Maintenance from "./Pages/Maintenance"; -import "react-toastify/dist/ReactToastify.css"; -import { ToastContainer } from "react-toastify"; +import withAdminCheck from "./HOC/withAdminCheck"; function App() { + const AdminCheckedRegister = withAdminCheck(Register); return ( <> @@ -79,7 +81,9 @@ function App() { } /> - } /> + + } /> + } /> {/* } /> */} } /> } /> diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx index cb68cc349..c1140ea73 100644 --- a/Client/src/Pages/Auth/Register/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -230,5 +230,4 @@ const Register = ({ isAdmin }) => { ); }; -const WrappedRegister = withAdminCheck(Register); -export default WrappedRegister; +export default Register; From 903702607d4dfb76c32958dc2389934a4122475d Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 19 Jul 2024 10:44:48 -0700 Subject: [PATCH 5/5] Added prop type, removed unused console log and import --- Client/src/HOC/withAdminCheck.jsx | 1 - Client/src/Pages/Auth/Register/Register.jsx | 7 ++++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Client/src/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx index 5550219f2..23ee5dc1f 100644 --- a/Client/src/HOC/withAdminCheck.jsx +++ b/Client/src/HOC/withAdminCheck.jsx @@ -7,7 +7,6 @@ const withAdminCheck = (WrappedComponent) => { const navigate = useNavigate(); useEffect(() => { - console.log("admin check"); axiosInstance .get("/auth/users/admin") .then((response) => { diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx index c1140ea73..e029caacc 100644 --- a/Client/src/Pages/Auth/Register/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"; import { useTheme } from "@emotion/react"; import { Stack, Typography } from "@mui/material"; import { useDispatch } from "react-redux"; +import PropTypes from "prop-types"; import "../index.css"; import background from "../../../assets/Images/background_pattern_decorative.png"; @@ -12,11 +13,9 @@ import Button from "../../../Components/Button"; import { credentials } from "../../../Validation/validation"; import { createToast } from "../../../Utils/toastUtils"; import Field from "../../../Components/Inputs/Field"; -import withAdminCheck from "../../../HOC/withAdminCheck"; import { register } from "../../../Features/Auth/authSlice"; const Register = ({ isAdmin }) => { - console.log(isAdmin); const dispatch = useDispatch(); const navigate = useNavigate(); const theme = useTheme(); @@ -229,5 +228,7 @@ const Register = ({ isAdmin }) => { ); }; - +Register.propTypes = { + isAdmin: PropTypes.bool, +}; export default Register;