Properly validate URLs when editing

3 files changed, 36 insertions, 4 deletions

diff --git a/src/util/validation.ts b/src/util/validation.ts
index b9a0c8a..a3bea63 100644
--- a/src/util/validation.ts
+++ b/src/util/validation.ts
@@ -73,6 +73,20 @@ const validateEmail = (email: string) => {
     return re.test(email);
 };
 
+// From https://stackoverflow.com/a/43467144
+const validateUrl = (url: string) => {
+    if (!url) {
+        return false;
+    }
+    let validUrl;
+    try {
+        validUrl = new URL(url);
+    } catch (_) {
+        return false;
+    }
+    return validUrl.protocol === "http:" || validUrl.protocol === "https:";
+};
+
 export const validateEventTime = (start: Date, end: Date): Error | boolean => {
     if (moment(start).isAfter(moment(end))) {
         return {
@@ -195,6 +209,14 @@ export const validateEventData = (
             });
         }
     }
+    if (validatedData.eventURL) {
+        if (!validateUrl(validatedData.eventURL)) {
+            errors.push({
+                message: "Event link is invalid.",
+                field: "eventURL",
+            });
+        }
+    }
 
     return {
         data: validatedData,
@@ -226,6 +248,14 @@ export const validateGroupData = (
             });
         }
     }
+    if (groupData.eventGroupURL) {
+        if (!validateUrl(groupData.eventGroupURL)) {
+            errors.push({
+                message: "Group link is invalid.",
+                field: "eventGroupURL",
+            });
+        }
+    }
 
     const validatedData: ValidatedEventGroupData = {
         ...groupData,
diff --git a/views/partials/eventForm.handlebars b/views/partials/eventForm.handlebars
index 161f44b..6fbbbf0 100755
--- a/views/partials/eventForm.handlebars
+++ b/views/partials/eventForm.handlebars
@@ -39,7 +39,8 @@
 <div class="form-group">
   <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" >
+    <input type="url" class="form-control" id="eventURL" name="eventURL" placeholder="https://example.com" x-model="data.eventURL">
+    <small class="form-text">For tickets or another event page (optional).</small>
   </div>
 </div>
 <div class="form-group">
@@ -106,7 +107,7 @@
             <option></option>
             <template x-for="group in data.groups">
               <option :value="group.id" x-text="group.name"></option>
-            </template> 
+            </template>
           </select>
         </div>
         <button type="button" class="button button--outline-primary w-100 text-center" x-on:click="manualGroupInputVisible = !manualGroupInputVisible">
diff --git a/views/partials/eventGroupForm.handlebars b/views/partials/eventGroupForm.handlebars
index 284343f..5536e49 100644
--- a/views/partials/eventGroupForm.handlebars
+++ b/views/partials/eventGroupForm.handlebars
@@ -10,7 +10,8 @@
 </div>
 <div class="form-group">
     <label for="eventGroupURL">Link</label>
-    <input type="url" class="form-control" id="eventGroupURL" name="eventGroupURL" placeholder="For tickets or a page with more information (optional)." x-model="data.eventGroupURL">
+    <input type="url" class="form-control" id="eventGroupURL" name="eventGroupURL" placeholder="https://example.com" x-model="data.eventGroupURL">
+    <small class="form-text">For tickets or a page with more information (optional).</small>
 </div>
 <div class="form-group">
     <label for="hostName">Host or organisation name</label>
@@ -57,4 +58,4 @@
       </ul>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>