add: install and implement react-toastify for permission

components/MapComponent.js

@@ -23,6 +23,8 @@ import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outl
 import PoiUpdateModal from "./PoiUpdateModal.js";
 import { selectedPoiState } from "../store/atoms/poiState.js";
 import { currentPoiState } from "../store/atoms/currentPoiState";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 //import { createRoot } from "react-dom/client";
 
@@ -52,6 +54,15 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const handleEditPoi = (marker) => {
     // Prüfung, ob der Benutzer die notwendigen Rechte hat
     if (!userRights || !userRights.includes(56)) {
+      toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
+        position: "top-center",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
       console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
       return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
     }
@@ -1814,6 +1825,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
   return (
     <>
+      <ToastContainer />
       <div>
         {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
         {showPoiUpdateModal && (

package-lock.json

@@ -18,6 +18,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.3.1",
         "react-leaflet": "^4.2.1",
+        "react-toastify": "^10.0.5",
         "recoil": "^0.7.7"
       },
       "devDependencies": {
@@ -713,6 +714,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2201,6 +2210,18 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
+      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+      "dependencies": {
+        "clsx": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",
+    "react-toastify": "^10.0.5",
     "recoil": "^0.7.7"
   },
   "scripts": {