addded toast badge function

Currently, after every Event, you have to reload the page manually!!!

frontend_admin/src/App.tsx

@@ -4,7 +4,6 @@ import { useUsers } from "./utils/useUsers";
 import UserTable from "./components/UserTable";
 import { useEffect } from "react";
 import { loadTheme } from "./utils/frontendService";
-import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 
 function App() {
@@ -17,7 +16,6 @@ function App() {
   return (
     <Layout>
       <UserTable users={users} />
-      <ToastContainer />
     </Layout>
   );
 }

frontend_admin/src/layout/Layout.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Header from "../components/Header";
 import Cookies from "js-cookie";
 import Sidebar from "../components/Sidebar";
+import { ToastContainer } from "react-toastify";
 
 type LayoutProps = {
   children: React.ReactNode;
@@ -13,6 +14,7 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
       <Header />
+      <ToastContainer />
       <div className="flex flex-1">
         {isLoggedIn && (
           <>

frontend_admin/src/utils/frontendService.ts

@@ -1,4 +1,5 @@
 import Cookies from "js-cookie";
+import { toast, type ToastOptions } from "react-toastify";
 
 export const greeting = () => {
   return Cookies.get("name") ?? "Login";
@@ -50,3 +51,19 @@ export const setDarkTheme = () => {
   document.body.classList.add("dark");
   Cookies.set("theme", "dark", { expires: 365 });
 };
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export const myToast = (message: string, msgType: ToastType) => {
+  let config: ToastOptions = {
+    position: "top-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    theme: "dark",
+  };
+  toast[msgType](message, config);
+};

frontend_admin/src/utils/userHandler.ts

@@ -1,5 +1,5 @@
 import Cookies from "js-cookie";
-import { ToastContainer, toast } from "react-toastify";
+import { myToast } from "./frontendService";
 
 export const loginUser = (username: string, password: string) => {
   fetch("http://localhost:5002/api/login", {
@@ -22,12 +22,11 @@ export const loginUser = (username: string, password: string) => {
           .then((users) => {
             localStorage.setItem("users", JSON.stringify(users));
           });
-        document.location.reload();
-        toast("Login successful!");
+        myToast("Logged in successfully!", "success");
       } else if (response.status === 401) {
-        toast("Invalid credentials");
+        myToast("Invalid username or password!", "error");
       } else if (response.status === 403) {
-        toast("You are not an Admin!");
+        myToast("You are not an Admin!", "error");
       }
     })
     .catch((error) => {
@@ -39,7 +38,7 @@ export const logout = () => {
   Cookies.remove("name");
   Cookies.remove("token");
   localStorage.removeItem("users");
-  window.location.reload();
+  myToast("Logged out successfully!", "info");
 };
 
 export const deleteUser = (id: number) => {