diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 0482aec5d..a10228795 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,8 +1,10 @@ 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"; -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"; @@ -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/HOC/withAdminCheck.jsx b/Client/src/HOC/withAdminCheck.jsx new file mode 100644 index 000000000..23ee5dc1f --- /dev/null +++ b/Client/src/HOC/withAdminCheck.jsx @@ -0,0 +1,30 @@ +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(() => { + 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.jsx b/Client/src/Pages/Auth/Register/Register.jsx similarity index 84% rename from Client/src/Pages/Auth/Register.jsx rename to Client/src/Pages/Auth/Register/Register.jsx index f6d0b3b0f..e029caacc 100644 --- a/Client/src/Pages/Auth/Register.jsx +++ b/Client/src/Pages/Auth/Register/Register.jsx @@ -1,21 +1,21 @@ -import { useState, useEffect } from "react"; +import { useState } 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 PropTypes from "prop-types"; -const Register = () => { +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 { createToast } from "../../../Utils/toastUtils"; +import Field from "../../../Components/Inputs/Field"; +import { register } from "../../../Features/Auth/authSlice"; + +const Register = ({ isAdmin }) => { const dispatch = useDispatch(); const navigate = useNavigate(); const theme = useTheme(); @@ -39,24 +39,11 @@ 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(); - 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 }, }); @@ -75,8 +62,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); @@ -132,7 +119,7 @@ const Register = () => { - Create admin account + Create{isAdmin ? " admin " : " "}account @@ -241,5 +228,7 @@ const Register = () => { ); }; - +Register.propTypes = { + isAdmin: PropTypes.bool, +}; export default Register;