From 98cbc016ddf18a4f198330ef090b316e50950724 Mon Sep 17 00:00:00 2001
From: Raphael Kabo <raphaelkabo@gmail.com>
Date: Mon, 17 Jan 2022 10:41:07 +0000
Subject: Set up localStorage functionality and frontend

---
 views/eventgroup.handlebars | 114 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 105 insertions(+), 9 deletions(-)

(limited to 'views/eventgroup.handlebars')

diff --git a/views/eventgroup.handlebars b/views/eventgroup.handlebars
index 03a5b27..d7726bd 100755
--- a/views/eventgroup.handlebars
+++ b/views/eventgroup.handlebars
@@ -5,16 +5,15 @@
 {{/if}}
 <div class="row">
   <div class="col-lg">
-    <h3 id="eventName">{{eventGroupData.name}}</h3>
+    <h3 id="eventName" data-event-id="{{eventGroupData.id}}">{{eventGroupData.name}}</h3>
   </div>
-  {{#if editingEnabled}}
   <div class="col-lg-2 ml-2 edit-buttons">
-    <div class="btn-group" role="group" aria-label="Event controls">
-      <button type="button" id="editEvent" class="btn btn-success" data-toggle="modal" data-target="#editModal" ><i class="fas fa-edit"></i></button>
-      <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i></button>
-    </div>
+    {{#if editingEnabled}}
+      <button type="button" id="editEvent" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editModal"><i class="fas fa-edit"></i> Edit group</button>
+    {{else}}
+      <button type="button" id="editEvent" class="btn btn-success text-nowrap" data-event-id="{{eventGroupData.id}}" data-toggle="modal" data-target="#editTokenModal"><i class="fas fa-edit"></i> Edit group</button>
+    {{/if}}
   </div>
-  {{/if}}
 </div>
 {{#if firstLoad}}
 <div class="alert alert-success alert-dismissible fade show" role="alert">
@@ -70,7 +69,7 @@
           <td><span class="code">{{eventGroupData.id}}</span></td>
         </tr>
         <tr>
-          <td><strong>Event group secret editing code</strong></td>
+          <td><strong>Event group editing password</strong></td>
           <td><span class="code">{{eventGroupData.editToken}}</span></td>
         </tr>
       </table>
@@ -116,7 +115,7 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <form action="/deleteeventgroup/{{eventGroupData.id}}/{{eventGroupData.editToken}}" method="post">
+      <form id="deleteEventGroupForm" action="/deleteeventgroup/{{eventGroupData.id}}/{{eventGroupData.editToken}}" method="post">
       <div class="modal-body">
         <p>Are you sure you want to delete this event group? This action cannot be undone.</p>
         <p>This will <strong>not</strong> delete the individual events contained in this group. They can be linked to another group later.</p>
@@ -132,6 +131,37 @@
 
 {{/if}}
 
+<div class="modal fade" id="editTokenModal" tabindex="-1" role="dialog" aria-labelledby="editTokenModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="editTokenModalLabel">Enter editing password</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <form id="verifyTokenForm" action="/verifytoken/group/{{eventGroupData.id}}" method="post">
+      <div class="modal-body">
+        <div class="form-group">
+          <p class="form-text small">Enter the editing password you received by email or were shown when the event was created.</p>
+          <div class="form-group">
+            <input type="text" class="form-control" id="editToken" name="editToken" placeholder="Get it right!" data-validation="required">
+          </div>
+          <div class="form-group">
+              <div class="alert alert-danger" style="display:none;"></div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        <button type="submit" class="btn btn-primary">Edit group</button>
+      </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+
 <script>
   $.validate({
     lang: 'en',
@@ -141,6 +171,47 @@
   });
 
   $(document).ready(function() {
+    // Save the editing token from the URL, if it is valid
+    const eventID = $('#eventName').attr('data-event-id');
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('e')) {
+      $.ajax({
+        type: "POST",
+        url: `/verifytoken/group/${eventID}`,
+        data: { editToken: urlParams.get('e') },
+        success: function(response, status, xhr) {
+          if (xhr.status === 200) {
+            addStoredToken(eventID, urlParams.get('e'));
+          }
+        },
+        error: function(response, status, xhr) {
+          // The editing token is wrong - remove it
+          removeStoredToken(eventID);
+          window.location = window.location.pathname;
+        }
+      });
+    } else if (getStoredToken(eventID)) {
+      const editToken = getStoredToken(eventID);
+      $.ajax({
+        type: "POST",
+        url: `/verifytoken/group/${eventID}`,
+        data: { editToken },
+        success: function(response, status, xhr) {
+          if (xhr.status === 200) {
+            window.location.search = `?e=${editToken}`;
+          }
+        },
+        error: function(response, status, xhr) {
+          // The editing token is wrong - remove it
+          removeStoredToken(eventID);
+        }
+      });
+    }
+
+    if (urlParams.has('show_edit')) {
+      $('#editModal').modal('show');
+    }
+
     $.uploadPreview({
       input_field: "#eventGroupImageUpload",
       preview_box: "#eventGroupImagePreview",
@@ -157,6 +228,31 @@
     $("#copyEventLink").click(function(){
       $(this).html('<i class="fas fa-copy"></i> Copied!');
       setTimeout(function(){ $("#copyEventLink").html('<i class="fas fa-copy"></i> Copy');}, 5000);
+    });
+
+      $('#verifyTokenForm').on('submit', function(e) {
+        e.preventDefault();
+        let form = $(this);
+        $.ajax({
+            type: "POST",
+            url: form.attr('action'),
+            data: form.serialize(),
+            success: function(response, status, xhr) {
+                if (xhr.status === 200) {
+                    // Save the token to localStorage for later
+                    addStoredToken($('#eventName').attr('data-event-id'), new FormData(form[0]).get('editToken'));
+                    window.location.search = `?e=${new FormData(form[0]).get('editToken')}&show_edit=true`;
+                }
+            },
+            error: function(response, status, xhr) {
+               form.find('.alert').text('That editing password is incorrect. Try again.').show();
+            }
+        });
+      });
+
+    $('#deleteEvent').on('click', function() {
+        $('#editModal').modal('hide');
     })
+
   });
 </script>
-- 
cgit v1.2.3