implemented anonymous user authentification with browser identification number from cookies

public/js/app.js

@@ -16,9 +16,26 @@
 // API Endpoint as relative Path
 const API_URL = 'api/contributions.php';
 
-// Current User Name, set via Login Modal, stored in sessionStorage
+// Username set via Login Modal stored in sessionStorage
 let currentUser = sessionStorage.getItem('webgis_user') || '';
 
+// Browser Identification Number for anonymous User Identification stored as Cookie
+let browserId = getBrowserId();
+
+function getBrowserId() {
+    let id = document.cookie.replace(/(?:(?:^|.*;\s*)webgis_browser_id\s*=\s*([^;]*).*$)|^.*$/, '$1');
+    if (!id) {
+        id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            const r = Math.random() * 16 | 0;
+            return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+        });
+        // Cookie Expiration in one Year
+        document.cookie = 'webgis_browser_id=' + id + ';path=/;max-age=31536000;SameSite=Lax';
+    }
+    return id;
+}
+
+
 // Application State
 let map;                                      // Leaflet Map Instance
 let sidebar;                                  // Sidebar Instance
@@ -290,9 +307,15 @@ function apiCall(data, callback) {
         });
 }
 
+
 // Loads all Contributions from API and displays Contributions on Map
 function loadContributions() {
-    apiCall({ action: 'read', municipality_id: MUNICIPALITY.id }, function (data) {
+    const readParams = { action: 'read', municipality_id: MUNICIPALITY.id };
+
+    // Sends Browser ID for persistent Vote Display
+    readParams.browser_id = browserId;
+
+    apiCall(readParams, function (data) {
         if (data.error) {
             console.error('Load Error:', data.error);
             return;
@@ -300,6 +323,14 @@ function loadContributions() {
 
         contributionsData = data.features || [];
 
+        // Restores Vote Highlights from API Response
+        if (data.user_votes) {
+            userVotes = {};
+            for (const key in data.user_votes) {
+                userVotes[key] = data.user_votes[key];
+            }
+        }
+
         // Removes existing Layer if present
         if (contributionsLayer) {
             map.removeLayer(contributionsLayer);
@@ -384,7 +415,7 @@ function buildPopupHtml(feature) {
                     '<i class="fa-solid fa-thumbs-down"></i> <span id="dislikes-' + props.contribution_id + '">' + props.dislikes_count + '</span>' +
                 '</button>' +
             '</div>' +
-            (currentUser === props.author_name ?
+            (props.browser_id === browserId || (typeof IS_ADMIN !== 'undefined' && IS_ADMIN) ?
                 '<div class="popup-detail-actions">' +
                     '<button class="btn btn-primary" onclick="editContribution(' + props.contribution_id + ')"><i class="fa-solid fa-pen"></i> Bearbeiten</button>' +
                     '<button class="btn btn-danger" onclick="deleteContribution(' + props.contribution_id + ')"><i class="fa-solid fa-trash"></i> Löschen</button>' +
@@ -441,7 +472,8 @@ function submitCreate() {
         description: description,
         geom: geom,
         geom_type: geomType,
-        author_name: currentUser
+        author_name: currentUser,
+        browser_id: browserId
     }, function (response) {
         if (response.error) {
             Swal.fire('Fehler', response.error, 'error');
@@ -570,7 +602,8 @@ function voteContribution(contributionId, voteType) {
         action: 'vote',
         contribution_id: contributionId,
         voter_name: currentUser,
-        vote_type: voteType
+        vote_type: voteType,
+        browser_id: browserId
     }, function (response) {
         if (response.error) {
             return;