Make modal HTML valid, improve button labels

6 files changed, 67 insertions, 39 deletions

diff --git a/views/newevent.handlebars b/views/newevent.handlebars
index d8d2f28..5d254ca 100755
--- a/views/newevent.handlebars
+++ b/views/newevent.handlebars
@@ -36,7 +36,9 @@
           type="submit"
           class="btn btn-primary w-50"
           x-bind:disabled="submitting"
-        >Create</button>
+          x-bind:class="submitting ? 'btn--loading' : ''"
+          x-text="submitting ? 'Creating...' : 'Create'"
+        ></button>
       </div>
     </div>
   </form>
@@ -54,7 +56,13 @@
     {{> eventGroupForm }}
     <div class="form-group row">
       <div class="col-sm-12 pt-3 pb-3 text-center">
-        <button type="submit" class="btn btn-primary w-50" x-bind:disabled="submitting">Create</button>
+        <button
+          type="submit"
+          class="btn btn-primary w-50"
+          x-bind:disabled="submitting"
+          x-bind:class="submitting ? 'btn--loading' : ''"
+          x-text="submitting ? 'Creating...' : 'Create'"
+        ></button>
       </div>
     </div>
   </form>
diff --git a/views/partials/editeventgroupmodal.handlebars b/views/partials/editeventgroupmodal.handlebars
index 2506e26..7c6f933 100644
--- a/views/partials/editeventgroupmodal.handlebars
+++ b/views/partials/editeventgroupmodal.handlebars
@@ -1,4 +1,4 @@
-<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
+<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true" x-data="editEventGroupForm()">
   <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -8,23 +8,30 @@
         </button>
       </div>
       <div class="modal-body">
-      <form id="editEventForm" enctype="multipart/form-data" x-data="editEventGroupForm()" @submit.prevent="submitForm">
+        <form id="editEventForm" enctype="multipart/form-data" @submit.prevent="submitForm">
 
-        {{> eventGroupForm }}
+          {{> eventGroupForm }}
 
-        <div class="form-group">
-          <div class="card border-danger mb-3">
-            <div class="card-header text-danger">Delete this event group</div>
-            <div class="card-body text-danger">
-              <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i> Delete event group</button>
+          <div class="form-group">
+            <div class="card border-danger mb-3">
+              <div class="card-header text-danger">Delete this event group</div>
+              <div class="card-body text-danger">
+                <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal"><i class="fas fa-trash"></i> Delete event group</button>
+              </div>
             </div>
           </div>
-        </div>
+        </form>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-primary">Save changes</button>
-      </form>
+        <button
+          type="submit"
+          class="btn btn-primary"
+          @click="submitForm"
+          x-bind:disabled="submitting"
+          x-bind:class="submitting ? 'btn--loading' : ''"
+          x-text="submitting ? 'Saving...' : 'Save'"
+        ></button>
       </div>
     </div>
   </div>
diff --git a/views/partials/editeventmodal.handlebars b/views/partials/editeventmodal.handlebars
index a9fe626..528dc1e 100644
--- a/views/partials/editeventmodal.handlebars
+++ b/views/partials/editeventmodal.handlebars
@@ -1,4 +1,9 @@
-<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
+<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true"
+  x-data="editEventForm()"
+  x-init="init()"
+  @event-group-id-changed="data.eventGroupID = $event.detail"
+  @event-group-edit-token-changed="data.eventGroupEditToken = $event.detail"
+>
   <div class="modal-dialog modal-xl modal-dialog-scrollable" role="document">
     <div class="modal-content">
       <div class="modal-header">
@@ -8,33 +13,32 @@
         </button>
       </div>
       <div class="modal-body">
-        <form
-          id="editEventForm"
-          enctype="multipart/form-data"
-          x-data="editEventForm()"
-          x-init="init()"
-          @submit.prevent="submitForm"
-          @event-group-id-changed="data.eventGroupID = $event.detail"
-          @event-group-edit-token-changed="data.eventGroupEditToken = $event.detail"
-        >
+        <form id="editEventForm" enctype="multipart/form-data" @submit.prevent="submitForm">
 
-            {{> eventForm }}
+          {{> eventForm }}
 
-            <div class="form-group">
-              <div class="card border-danger mb-3">
-                <div class="card-header text-danger">Delete this event</div>
-                <div class="card-body text-danger">
-                  <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal"
-                    data-target="#deleteModal" data-event-id="{{eventData.id}}"><i class="fas fa-trash"></i>
-                    Delete</button>
-                </div>
+          <div class="form-group">
+            <div class="card border-danger mb-3">
+              <div class="card-header text-danger">Delete this event</div>
+              <div class="card-body text-danger">
+                <button type="button" id="deleteEvent" class="btn btn-danger" data-toggle="modal"
+                  data-target="#deleteModal" data-event-id="{{eventData.id}}"><i class="fas fa-trash"></i>
+                  Delete</button>
               </div>
             </div>
+          </div>
+        </form>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="submit" class="btn btn-primary">Save changes</button>
-        </form>
+        <button
+          type="submit"
+          class="btn btn-primary"
+          @click="submitForm"
+          x-bind:disabled="submitting"
+          x-bind:class="submitting ? 'btn--loading' : ''"
+          x-text="submitting ? 'Saving...' : 'Save'"
+        ></button>
       </div>
     </div>
   </div>
diff --git a/views/partials/eventForm.handlebars b/views/partials/eventForm.handlebars
index 49c0f86..852a3a3 100755
--- a/views/partials/eventForm.handlebars
+++ b/views/partials/eventForm.handlebars
@@ -36,7 +36,7 @@
   </div>
 </div>
 <div class="form-group">
-  <label for="eventURL" >Link</label>
+  <label for="eventURL">Link</label>
   <div class="form-group ">
     <input type="url" class="form-control" id="eventURL" name="eventURL" placeholder="For tickets or another event page (optional)." x-model="data.eventURL" >
   </div>
@@ -50,7 +50,9 @@
     </div>
     <small class="form-text">Recommended dimensions (w x h): 920px by 300px.</small>
     {{#if eventData.image}}
-      <button type="button" class="btn btn-danger" id="deleteImage">Delete image</button>
+      <div class="form-group my-2">
+        <button type="button" class="btn btn-danger" id="deleteImage">Delete image</button>
+      </div>
     {{/if}}
   </div>
 </div>
@@ -85,7 +87,7 @@
           <label>Choose a group you've edited before</label>
         </div>
         <div class="form-group" x-show="data.groups.length > 0">
-          <select x-ref="eventGroupSelect" id="eventGroupSelect" name="eventGroupSelect" class="form-control" x-on:change="selectGroup">
+          <select x-ref="eventGroupSelect" id="eventGroupSelect" name="eventGroupSelect" class="form-control" x-on:change="selectGroup" x-model="data.eventGroupID">
             <option value="">Choose a group</option>
             <template x-for="group in data.groups">
               <option :value="group.id" x-text="group.name"></option>
diff --git a/views/partials/eventGroupForm.handlebars b/views/partials/eventGroupForm.handlebars
index 0b18bba..e020f4a 100644
--- a/views/partials/eventGroupForm.handlebars
+++ b/views/partials/eventGroupForm.handlebars
@@ -44,4 +44,5 @@
         </template>
       </ul>
     </div>
-  </div>
\ No newline at end of file
+  </div>
+</div>
\ No newline at end of file
diff --git a/views/partials/importeventform.handlebars b/views/partials/importeventform.handlebars
index 13fd2ac..d62b599 100644
--- a/views/partials/importeventform.handlebars
+++ b/views/partials/importeventform.handlebars
@@ -37,5 +37,11 @@
       </div>
     </div>
   </div>
-  <button type="submit" class="d-block mt-3 mx-auto btn btn-primary w-50 mb-4">Import</button>
+  <button
+    type="submit"
+    class="d-block mt-3 mx-auto btn btn-primary w-50 mb-4"
+    x-bind:disabled="submitting"
+    x-bind:class="submitting ? 'btn--loading' : ''"
+    x-text="submitting ? 'Importing...' : 'Import'"
+  ></button>
 </form>