Refactor: event group form and API, extract JS

5 files changed, 623 insertions, 208 deletions

diff --git a/public/css/style.css b/public/css/style.css
index a312587..0f149e8 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -7,133 +7,152 @@ body, html {
 /* FONTS */
 
 @font-face {
-  font-family: 'Fredoka One';
-  font-style: normal;
-  font-weight: 400;
-  src: url('../fonts/fredoka-one-v7-latin-regular.eot'); /* IE9 Compat Modes */
-  src: local('Fredoka One'), local('FredokaOne-Regular'),
-     url('../fonts/fredoka-one-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-     url('../fonts/fredoka-one-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-     url('../fonts/fredoka-one-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
-     url('../fonts/fredoka-one-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-     url('../fonts/fredoka-one-v7-latin-regular.svg#FredokaOne') format('svg'); /* Legacy iOS */
-  }
-  
+    font-family: "Fredoka One";
+    font-style: normal;
+    font-weight: 400;
+    src: url("../fonts/fredoka-one-v7-latin-regular.eot"); /* IE9 Compat Modes */
+    src:
+        local("Fredoka One"),
+        local("FredokaOne-Regular"),
+        url("../fonts/fredoka-one-v7-latin-regular.eot?#iefix")
+            format("embedded-opentype"),
+        /* IE6-IE8 */ url("../fonts/fredoka-one-v7-latin-regular.woff2")
+            format("woff2"),
+        /* Super Modern Browsers */
+            url("../fonts/fredoka-one-v7-latin-regular.woff") format("woff"),
+        /* Modern Browsers */ url("../fonts/fredoka-one-v7-latin-regular.ttf")
+            format("truetype"),
+        /* Safari, Android, iOS */
+            url("../fonts/fredoka-one-v7-latin-regular.svg#FredokaOne")
+            format("svg"); /* Legacy iOS */
+}
 
 @media (max-width: 576px) {
-  #container {
-    height: auto !important;
-    overflow-x: hidden;
-  }
+    #container {
+        height: auto !important;
+        overflow-x: hidden;
+    }
 }
 
 #content {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
 }
 #bodyContainer {
-  flex: 1;
+    flex: 1;
 }
 
 #fixedContainer {
-  position: sticky;
-  top: 0;
+    position: sticky;
+    top: 0;
 }
 
 #footerContainer {
-  border-top: 1px solid #e0e0e0;
-  text-align: center;
-  padding: 5px 0;
+    border-top: 1px solid #e0e0e0;
+    text-align: center;
+    padding: 5px 0;
 }
 
 #sidebar {
-  background: #f5f5f5;
-  border-bottom: 2px solid #e0e0e0;
+    background: #f5f5f5;
+    border-bottom: 2px solid #e0e0e0;
 }
 
 #sidebar h1 {
-  font-family: "Fredoka One", sans-serif;
-  font-weight: 700;
-  text-align: center;
-  letter-spacing: -0.5px;
-  font-size: 3rem;
-  color: transparent !important;
-  margin-bottom: 0;
+    font-family: "Fredoka One", sans-serif;
+    font-weight: 700;
+    text-align: center;
+    letter-spacing: -0.5px;
+    font-size: 3rem;
+    color: transparent !important;
+    margin-bottom: 0;
 }
 
 #sidebar h1 a {
-  background: rgb(33, 37, 41);
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent !important;
+    background: rgb(33, 37, 41);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent !important;
 }
 
 #sidebar h1 a:hover {
-  text-decoration: none;
-  background: linear-gradient(to right, #27aa45, #7fe0c8, #5d26c1);
-  background-size: 100% 100%;
-  background-clip: text;
-  -webkit-background-clip: text;
-  color: transparent !important;
+    text-decoration: none;
+    background: linear-gradient(to right, #27aa45, #7fe0c8, #5d26c1);
+    background-size: 100% 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent !important;
 }
 
 #content {
-  background: #ffffff;
-  box-shadow: -8px 0 6px -6px rgba(0,0,0,0.3);
+    background: #ffffff;
+    box-shadow: -8px 0 6px -6px rgba(0, 0, 0, 0.3);
 }
 
 #genericEventImageContainer {
-  height:150px;
-  border-radius: 5px;
+    height: 150px;
+    border-radius: 5px;
 }
 
 #genericEventImageContainer:before {
-  content: '';
-  background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(242,245,249,0) 75%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%);
-  position: absolute;
-  width: 97%;
-  height: 150px;
+    content: "";
+    background: linear-gradient(
+        to bottom,
+        rgba(30, 87, 153, 0) 0%,
+        rgba(242, 245, 249, 0) 75%,
+        rgba(255, 255, 255, 1) 95%,
+        rgba(255, 255, 255, 1) 100%
+    );
+    position: absolute;
+    width: 97%;
+    height: 150px;
 }
 
 #eventImageContainer {
-  height:300px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  border-radius: 5px;
+    height: 300px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    border-radius: 5px;
 }
 
 #eventImageContainer:before {
-  content: '';
-  background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(242,245,249,0) 85%,rgba(255,255,255,1) 95%,rgba(255,255,255,1) 100%);
-  position: absolute;
-  width: 100%;
-  height: 300px;
+    content: "";
+    background: linear-gradient(
+        to bottom,
+        rgba(30, 87, 153, 0) 0%,
+        rgba(242, 245, 249, 0) 85%,
+        rgba(255, 255, 255, 1) 95%,
+        rgba(255, 255, 255, 1) 100%
+    );
+    position: absolute;
+    width: 100%;
+    height: 300px;
 }
 
 #eventName {
-  padding: 0 0 0 10px;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
+    padding: 0 0 0 10px;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
 }
 
 #eventPrivacy {
-    text-transform:capitalize;
+    text-transform: capitalize;
 }
 
 #eventFromNow {
-  padding-left: 25px;
+    padding-left: 25px;
 }
 
 #eventFromNow::first-letter {
-  text-transform:capitalize;
+    text-transform: capitalize;
 }
 
 #eventActions {
-  padding-left: 0;
-  margin-top: 1rem;
+    padding-left: 0;
+    margin-top: 1rem;
 }
 
 /*
@@ -145,129 +164,127 @@ body, html {
 */
 
 .attendeesList {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .attendeesList > li {
-  border: 4px solid #0ea130;
-  border-radius: 2em;
-  padding: .5em 1em;
-  margin-right: 5px;
-  margin-bottom: 10px;
-  background: #57b76d;
-  color: white;
-  font-size: 0.95em;
-  font-weight: bold;
+    border: 4px solid #0ea130;
+    border-radius: 2em;
+    padding: 0.5em 1em;
+    margin-right: 5px;
+    margin-bottom: 10px;
+    background: #57b76d;
+    color: white;
+    font-size: 0.95em;
+    font-weight: bold;
 }
 
 .expand {
-  -webkit-transition: height 0.2s;
-  -moz-transition: height 0.2s;
-  transition: height 0.2s;
+    -webkit-transition: height 0.2s;
+    -moz-transition: height 0.2s;
+    transition: height 0.2s;
 }
 
 .eventInformation {
-  margin-left: 1.6em;
+    margin-left: 1.6em;
 }
 
 .eventInformation > li {
-/*  line-height: 2.1em;*/
-  margin-bottom: 0.8em;
+    /*  line-height: 2.1em;*/
+    margin-bottom: 0.8em;
 }
 
 #copyEventLink {
-  margin-left: 5px;
+    margin-left: 5px;
 }
 
 .commentContainer {
-  background: #fafafa;
-  border-radius: 5px;
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #dfdfdf;
+    background: #fafafa;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #dfdfdf;
 }
 
 .replyContainer {
-  display: none;
-  background: #efefef;
-  padding: 10px;
-  border-radius: 0 0 5px 5px;
-  border-bottom: 1px solid #d2d2d2;
-  border-left: 1px solid #d2d2d2;
-  border-right: 1px solid #d2d2d2;
-  width: 95%;
-  margin: -10px auto 10px auto;
+    display: none;
+    background: #efefef;
+    padding: 10px;
+    border-radius: 0 0 5px 5px;
+    border-bottom: 1px solid #d2d2d2;
+    border-left: 1px solid #d2d2d2;
+    border-right: 1px solid #d2d2d2;
+    width: 95%;
+    margin: -10px auto 10px auto;
 }
 
 .repliesContainer {
-  font-size: smaller;
-  padding-left:20px;
+    font-size: smaller;
+    padding-left: 20px;
 }
 
 /* IMAGE UPLOAD FORM */
-
-
 .image-preview {
-  width: 100%;
-  height: 200px;
-  position: relative;
-  overflow: hidden;
-  background-color: #ffffff;
-  color: #ecf0f1;
-  border-radius: 5px;
-  border: 1px dashed #ced4da;
+    width: 920px;
+    height: 200px;
+    position: relative;
+    overflow: hidden;
+    background-color: #ffffff;
+    color: #ecf0f1;
+    border-radius: 5px;
+    border: 1px dashed #ced4da;
 }
 .image-preview input {
-  line-height: 200px;
-  font-size: 200px;
-  position: absolute;
-  opacity: 0;
-  z-index: 10;
+    line-height: 200px;
+    font-size: 200px;
+    position: absolute;
+    opacity: 0;
+    z-index: 10;
 }
 .image-preview label {
-  position: absolute;
-  z-index: 5;
-  opacity: 0.8;
-  cursor: pointer;
-  background-color: #ced4da;
-  color: #555;
-  width: 200px;
-  height: 50px;
-  font-size: 20px;
-  line-height: 50px;
-  text-transform: uppercase;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  text-align: center;
-  border-radius: 5px;
+    position: absolute;
+    z-index: 5;
+    opacity: 0.8;
+    cursor: pointer;
+    background-color: #ced4da;
+    color: #555;
+    width: 200px;
+    height: 50px;
+    font-size: 20px;
+    line-height: 50px;
+    text-transform: uppercase;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    text-align: center;
+    border-radius: 5px;
 }
 
 .datepickers-container {
-  z-index: 1600 !important; /* has to be larger than 1050 */
+    z-index: 1600 !important; /* has to be larger than 1050 */
 }
 
 #newEventFormContainer,
 #importEventFormContainer,
 #newEventGroupFormContainer {
-  display: none;
+    display: none;
 }
 
 #icsImportLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: #6c757d;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #6c757d;
 }
 
 .select2-container {
-  width: 100% !important;
+    width: 100% !important;
 }
 .select2-selection__rendered {
     line-height: 2.25rem !important;
@@ -280,75 +297,102 @@ body, html {
 }
 
 .attendee-name {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: "";
-  overflow: hidden;
-  max-width: 62px;
-  color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: "";
+    overflow: hidden;
+    max-width: 62px;
+    color: #fff;
 }
 
 .remove-attendee {
-  color: #fff;
+    color: #fff;
 }
 
 .remove-attendee:hover {
-  color: #016418;
+    color: #016418;
 }
 
 #eventAttendees h5 {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
 #eventAttendees h5 .btn-group {
-  margin-top: 0.5rem;
+    margin-top: 0.5rem;
 }
 
 .edit-buttons {
-  text-align: right;
+    text-align: right;
 }
 
 @media (max-width: 1199.98px) {
-  .edit-buttons {
-    text-align: left;
-  }
+    .edit-buttons {
+        text-align: left;
+    }
 }
 
 @media (min-width: 1120px) {
-  #eventActions {
-    margin-top: 0;
-    padding-left: 1rem;
-  }
+    #eventActions {
+        margin-top: 0;
+        padding-left: 1rem;
+    }
 }
 
 @media (min-width: 577px) {
-  #sidebar {
-    border-right: 2px solid #e0e0e0;
-    min-height: 100vh;
-  }
-  body {
-    background: #f5f5f5; /* Old browsers */
-    background: -moz-linear-gradient(left, #f5f5f5 0%, #f5f5f5 50%, #ffffff 51%, #ffffff 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(left, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(to right, #f5f5f5 0%,#f5f5f5 50%,#ffffff 51%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
-  }
-  #eventAttendees h5 {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-  #eventAttendees h5 .btn-group {
-    margin-top: 0;
-  }
+    #sidebar {
+        border-right: 2px solid #e0e0e0;
+        min-height: 100vh;
+    }
+    body {
+        background: #f5f5f5; /* Old browsers */
+        background: -moz-linear-gradient(
+            left,
+            #f5f5f5 0%,
+            #f5f5f5 50%,
+            #ffffff 51%,
+            #ffffff 100%
+        ); /* FF3.6-15 */
+        background: -webkit-linear-gradient(
+            left,
+            #f5f5f5 0%,
+            #f5f5f5 50%,
+            #ffffff 51%,
+            #ffffff 100%
+        ); /* Chrome10-25,Safari5.1-6 */
+        background: linear-gradient(
+            to right,
+            #f5f5f5 0%,
+            #f5f5f5 50%,
+            #ffffff 51%,
+            #ffffff 100%
+        ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
+    }
+    #eventAttendees h5 {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+    #eventAttendees h5 .btn-group {
+        margin-top: 0;
+    }
 }
 
 .list-group-item-action:hover {
-  background-color: #d4edda;
+    background-color: #d4edda;
 }
 
 .code {
-  font-family: 'Courier New', Courier, monospace;
-  overflow-wrap: anywhere;
+    font-family: "Courier New", Courier, monospace;
+    overflow-wrap: anywhere;
+}
+
+/* FORMS */
+label:not(.form-check-label) {
+    font-weight: 500;
+}
+
+input[type="datetime-local"] {
+    max-width: 20rem;
 }
diff --git a/public/js/modules/event-edit.js b/public/js/modules/event-edit.js
new file mode 100644
index 0000000..65d9889
--- /dev/null
+++ b/public/js/modules/event-edit.js
@@ -0,0 +1,91 @@
+$(document).ready(function () {
+    $.uploadPreview({
+        input_field: "#event-image-upload",
+        preview_box: "#event-image-preview",
+        label_field: "#event-image-label",
+        label_default: "Choose file",
+        label_selected: "Change file",
+        no_label: false,
+    });
+    autosize($("textarea"));
+    if (window.eventData.image) {
+        $("#event-image-preview").css(
+            "background-image",
+            `url('/events/${window.eventData.image}')`,
+        );
+        $("#event-image-preview").css("background-size", "cover");
+        $("#event-image-preview").css("background-position", "center center");
+    }
+    $("#timezone").val(window.eventData.timezone).trigger("change");
+});
+
+function editEventForm() {
+    return {
+        data: {
+            eventName: window.eventData.name,
+            eventLocation: window.eventData.location,
+            eventStart: window.eventData.startForDateInput,
+            eventEnd: window.eventData.endForDateInput,
+            timezone: window.eventData.timezone,
+            eventDescription: window.eventData.description,
+            eventURL: window.eventData.url,
+            hostName: window.eventData.hostName,
+            creatorEmail: window.eventData.creatorEmail,
+            eventGroupID: window.eventData.eventGroupID,
+            eventGroupEditToken: window.eventData.eventGroupEditToken,
+            interactionCheckbox: window.eventData.usersCanComment,
+            joinCheckbox: window.eventData.usersCanAttend,
+            maxAttendeesCheckbox: window.eventData.maxAttendees !== null,
+            maxAttendees: window.eventData.maxAttendees,
+        },
+        errors: [],
+        submitting: false,
+        init() {
+            // Set up Select2
+            this.select2 = $(this.$refs.timezone).select2();
+            this.select2.on("select2:select", (event) => {
+                this.data.timezone = event.target.value;
+            });
+            this.data.timezone = this.select2.val();
+        },
+        async submitForm() {
+            this.submitting = true;
+            this.errors = [];
+            const formData = new FormData();
+            for (const [key, value] of Object.entries(this.data)) {
+                formData.append(key, value);
+            }
+            formData.append(
+                "imageUpload",
+                this.$refs.eventImageUpload.files[0],
+            );
+            formData.append("editToken", window.eventData.editToken);
+            try {
+                const response = await fetch(`/event/${window.eventData.id}`, {
+                    method: "PUT",
+                    body: formData,
+                });
+                this.submitting = false;
+                if (!response.ok) {
+                    if (response.status !== 400) {
+                        this.errors = unexpectedError;
+                        return;
+                    }
+                    const json = await response.json();
+                    this.errors = json.errors;
+                    // Set Bootstrap validation classes using 'field' property
+                    $("input, textarea").removeClass("is-invalid");
+                    this.errors.forEach((error) => {
+                        $(`#${error.field}`).addClass("is-invalid");
+                    });
+                    return;
+                }
+                window.location.reload();
+            } catch (error) {
+                console.log(error);
+                this.errors = unexpectedError;
+                this.submitting = false;
+            }
+        },
+    };
+}
diff --git a/public/js/modules/group-edit.js b/public/js/modules/group-edit.js
new file mode 100644
index 0000000..1a2c1db
--- /dev/null
+++ b/public/js/modules/group-edit.js
@@ -0,0 +1,72 @@
+$(document).ready(function () {
+    $.uploadPreview({
+        input_field: "#group-image-upload",
+        preview_box: "#group-image-preview",
+        label_field: "#group-image-label",
+        label_default: "Choose file",
+        label_selected: "Change file",
+        no_label: false,
+    });
+    autosize($("textarea"));
+    if (window.groupData.image) {
+        $("#group-image-preview").css(
+            "background-image",
+            `url('/events/${window.groupData.image}')`,
+        );
+        $("#group-image-preview").css("background-size", "cover");
+        $("#group-image-preview").css("background-position", "center center");
+    }
+    $("#timezone").val(window.groupData.timezone).trigger("change");
+});
+
+function editEventGroupForm() {
+    return {
+        data: {
+            eventGroupName: window.groupData.name,
+            eventGroupDescription: window.groupData.description,
+            eventGroupURL: window.groupData.url,
+            hostName: window.groupData.hostName,
+            creatorEmail: window.groupData.creatorEmail,
+        },
+        errors: [],
+        submitting: false,
+        async submitForm() {
+            this.submitting = true;
+            this.errors = [];
+            const formData = new FormData();
+            for (const [key, value] of Object.entries(this.data)) {
+                formData.append(key, value);
+            }
+            formData.append(
+                "imageUpload",
+                this.$refs.eventGroupImageUpload.files[0],
+            );
+            formData.append("editToken", window.groupData.editToken);
+            try {
+                const response = await fetch(`/group/${window.groupData.id}`, {
+                    method: "PUT",
+                    body: formData,
+                });
+                this.submitting = false;
+                if (!response.ok) {
+                    if (response.status !== 400) {
+                        this.errors = unexpectedError;
+                        return;
+                    }
+                    const json = await response.json();
+                    this.errors = json.errors;
+                    $("input, textarea").removeClass("is-invalid");
+                    this.errors.forEach((error) => {
+                        $(`#${error.field}`).addClass("is-invalid");
+                    });
+                    return;
+                }
+                window.location.reload();
+            } catch (error) {
+                console.log(error);
+                this.errors = unexpectedError;
+                this.submitting = false;
+            }
+        },
+    };
+}
diff --git a/public/js/modules/new.js b/public/js/modules/new.js
new file mode 100644
index 0000000..fbb99ed
--- /dev/null
+++ b/public/js/modules/new.js
@@ -0,0 +1,201 @@
+$(document).ready(function () {
+    if ($("#icsImportControl")[0].files[0] != null) {
+        var file = $("#icsImportControl")[0].files[0].name;
+        $("#icsImportControl")
+            .next("label")
+            .html('<i class="far fa-file-alt"></i> ' + file);
+    }
+    $("#showNewEventFormButton").click(function () {
+        $("button").removeClass("active");
+        $(
+            "#showImportEventFormButton #showNewEventGroupFormButton",
+        ).removeClass("active");
+        if ($("#newEventFormContainer").is(":visible")) {
+            $("#newEventFormContainer").slideUp("fast");
+        } else {
+            $("#newEventFormContainer").slideDown("fast");
+            $("#importEventFormContainer").slideUp("fast");
+            $("#newEventGroupFormContainer").slideUp("fast");
+            $(this).addClass("active");
+        }
+    });
+    $("#showImportEventFormButton").click(function () {
+        $("button").removeClass("active");
+        $("#showNewEventFormButton #showNewEventGroupFormButton").removeClass(
+            "active",
+        );
+        if ($("#importEventFormContainer").is(":visible")) {
+            $("#importEventFormContainer").slideUp("fast");
+        } else {
+            $("#importEventFormContainer").slideDown("fast");
+            $("#newEventFormContainer").slideUp("fast");
+            $("#newEventGroupFormContainer").slideUp("fast");
+            $(this).addClass("active");
+        }
+    });
+    $("#showNewEventGroupFormButton").click(function () {
+        $("button").removeClass("active");
+        $("#showNewEventFormButton #showImportEventFormButton").removeClass(
+            "active",
+        );
+        if ($("#newEventGroupFormContainer").is(":visible")) {
+            $("#newEventGroupFormContainer").slideUp("fast");
+        } else {
+            $("#newEventGroupFormContainer").slideDown("fast");
+            $("#newEventFormContainer").slideUp("fast");
+            $("#importEventFormContainer").slideUp("fast");
+            $(this).addClass("active");
+        }
+    });
+    $("#icsImportControl").change(function () {
+        var file = $("#icsImportControl")[0].files[0].name;
+        $(this)
+            .next("label")
+            .html('<i class="far fa-file-alt"></i> ' + file);
+    });
+
+    $.uploadPreview({
+        input_field: "#event-image-upload",
+        preview_box: "#event-image-preview",
+        label_field: "#event-image-label",
+        label_default: "Choose file",
+        label_selected: "Change file",
+        no_label: false,
+    });
+    $.uploadPreview({
+        input_field: "#group-image-upload",
+        preview_box: "#group-image-preview",
+        label_field: "#group-image-label",
+        label_default: "Choose file",
+        label_selected: "Change file",
+        no_label: false,
+    });
+    autosize($("textarea"));
+});
+
+function newEventForm() {
+    return {
+        data: {
+            eventName: "",
+            eventLocation: "",
+            eventStart: "",
+            eventEnd: "",
+            timezone: "",
+            eventDescription: "",
+            eventURL: "",
+            hostName: "",
+            creatorEmail: "",
+            eventGroupID: "",
+            eventGroupEditToken: "",
+            interactionCheckbox: false,
+            joinCheckbox: false,
+            maxAttendeesCheckbox: false,
+            maxAttendees: "",
+        },
+        errors: [],
+        submitting: false,
+        init() {
+            // Set up Select2
+            this.select2 = $(this.$refs.timezone).select2();
+            this.select2.on("select2:select", (event) => {
+                this.data.timezone = event.target.value;
+            });
+            this.data.timezone = this.select2.val();
+            // Reset checkboxes
+            this.data.eventGroupCheckbox = false;
+            this.data.interactionCheckbox = false;
+            this.data.joinCheckbox = false;
+            this.data.maxAttendeesCheckbox = false;
+        },
+        async submitForm() {
+            this.submitting = true;
+            this.errors = [];
+            const formData = new FormData();
+            for (const [key, value] of Object.entries(this.data)) {
+                formData.append(key, value);
+            }
+            formData.append(
+                "imageUpload",
+                this.$refs.eventImageUpload.files[0],
+            );
+            try {
+                const response = await fetch("/event", {
+                    method: "POST",
+                    body: formData,
+                });
+                this.submitting = false;
+                if (!response.ok) {
+                    if (response.status !== 400) {
+                        this.errors = unexpectedError;
+                        return;
+                    }
+                    const json = await response.json();
+                    this.errors = json.errors;
+                    $("input, textarea").removeClass("is-invalid");
+                    this.errors.forEach((error) => {
+                        $(`#${error.field}`).addClass("is-invalid");
+                    });
+                    return;
+                }
+                const json = await response.json();
+                window.location.assign(json.url);
+            } catch (error) {
+                console.log(error);
+                this.errors = unexpectedError;
+                this.submitting = false;
+            }
+        },
+    };
+}
+function newEventGroupForm() {
+    return {
+        data: {
+            eventGroupName: "",
+            eventGroupDescription: "",
+            eventGroupURL: "",
+            hostName: "",
+            creatorEmail: "",
+        },
+        errors: [],
+        submitting: false,
+        async submitForm() {
+            this.submitting = true;
+            this.errors = [];
+            console.log(this.data);
+            const formData = new FormData();
+            for (const [key, value] of Object.entries(this.data)) {
+                formData.append(key, value);
+            }
+            formData.append(
+                "imageUpload",
+                this.$refs.eventGroupImageUpload.files[0],
+            );
+            try {
+                const response = await fetch("/group", {
+                    method: "POST",
+                    body: formData,
+                });
+                this.submitting = false;
+                if (!response.ok) {
+                    if (response.status !== 400) {
+                        this.errors = unexpectedError;
+                        return;
+                    }
+                    const json = await response.json();
+                    this.errors = json.errors;
+                    $("input, textarea").removeClass("is-invalid");
+                    this.errors.forEach((error) => {
+                        $(`#${error.field}`).addClass("is-invalid");
+                    });
+                    return;
+                }
+                const json = await response.json();
+                window.location.assign(json.url);
+            } catch (error) {
+                console.log(error);
+                this.errors = unexpectedError;
+                this.submitting = false;
+            }
+        },
+    };
+}
diff --git a/public/js/util.js b/public/js/util.js
index cbfd239..0499a4d 100644
--- a/public/js/util.js
+++ b/public/js/util.js
@@ -1,31 +1,38 @@
-const getStoredToken = function(eventID) {
+const getStoredToken = function (eventID) {
     try {
-        let editTokens = JSON.parse(localStorage.getItem('editTokens'));
+        let editTokens = JSON.parse(localStorage.getItem("editTokens"));
         return editTokens[eventID];
-    } catch(e) {
-        localStorage.setItem('editTokens', JSON.stringify({}));
+    } catch (e) {
+        localStorage.setItem("editTokens", JSON.stringify({}));
         return false;
     }
-}
+};
 
-const addStoredToken = function(eventID, token) {
+const addStoredToken = function (eventID, token) {
     try {
-        let editTokens = JSON.parse(localStorage.getItem('editTokens'));
+        let editTokens = JSON.parse(localStorage.getItem("editTokens"));
         editTokens[eventID] = token;
-        localStorage.setItem('editTokens', JSON.stringify(editTokens));
-    } catch(e) {
-        localStorage.setItem('editTokens', JSON.stringify({ [eventID]: token }));
+        localStorage.setItem("editTokens", JSON.stringify(editTokens));
+    } catch (e) {
+        localStorage.setItem(
+            "editTokens",
+            JSON.stringify({ [eventID]: token }),
+        );
         return false;
     }
-} 
+};
 
-const removeStoredToken = function(eventID) {
+const removeStoredToken = function (eventID) {
     try {
-        let editTokens = JSON.parse(localStorage.getItem('editTokens'));
+        let editTokens = JSON.parse(localStorage.getItem("editTokens"));
         delete editTokens[eventID];
-        localStorage.setItem('editTokens', JSON.stringify(editTokens));
-    } catch(e) {
-        localStorage.setItem('editTokens', JSON.stringify({}));
+        localStorage.setItem("editTokens", JSON.stringify(editTokens));
+    } catch (e) {
+        localStorage.setItem("editTokens", JSON.stringify({}));
         return false;
     }
-}
+};
+
+const unexpectedError = [
+    { message: "An unexpected error has occurred. Please try again later." },
+];