Add unauthorized sign-in toast

frontend/package.json

@@ -15,6 +15,7 @@
     "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "react-select": "^5.8.0",
+    "react-toastify": "^9.1.3",
     "reactjs-popup": "^2.0.6",
     "web-vitals": "^2.1.4"
   },

frontend/src/App.js

@@ -5,6 +5,8 @@ import {
     Route,
     Navigate,
 } from "react-router-dom";
+import {ToastContainer} from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import axios from "axios";
 import SignIn from "./SignIn";
 import SignOut from "./SignOut";
@@ -64,6 +66,7 @@ const App = () => {
 
     return (
         <Router>
+            <ToastContainer />
             <Routes>
                 <Route
                     path="/pages/EPackMenu"

frontend/src/SignIn.js

@@ -2,6 +2,8 @@ import React from "react";
 import axios from "axios";
 import {GoogleLogin} from "@react-oauth/google";
 import {jwtDecode} from "jwt-decode";
+import {toast, ToastContainer} from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import "./SignIn.css";
 import logo from "./welcomeLogo.svg";
 
@@ -34,6 +36,16 @@ const SignIn = ({setUser}) => {
                 window.location.href = "/pages/PantryMenu";
             })
             .catch((error) => {
+                // Check if response.status is 400 and if response.data is "Invalid permission level"
+                if (
+                    error.response.status === 400 &&
+                    error.response.data === "Invalid permission level"
+                ) {
+                    // Show a toast notification to the user
+                    toast.error(
+                        "You don't have the required permissions to login."
+                    );
+                }
                 console.error("Error:", error);
             });
     };