From 2d5b141027f09a2115e95777ef1ba814dbde1b93 Mon Sep 17 00:00:00 2001
From: veganedge <scottxbrown@yahoo.com>
Date: Sun, 9 Feb 2025 12:55:05 -0800
Subject: [PATCH] RM96 - adding validation to image url inputs

---
 .../manage/PanelCreationForm.svelte           | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/manage/PanelCreationForm.svelte b/frontend/src/components/manage/PanelCreationForm.svelte
index 81785a7..5b20d95 100644
--- a/frontend/src/components/manage/PanelCreationForm.svelte
+++ b/frontend/src/components/manage/PanelCreationForm.svelte
@@ -147,8 +147,8 @@
             </div>
 
             <div class="row">
-                <Input col2={true} label="Large Image URL" badge="Optional" bind:value={data.image_url} placeholder="https://example.com/image.png" />
-                <Input col2={true} label="Small Image URL" badge="Optional" bind:value={data.thumbnail_url} placeholder="https://example.com/image.png" />
+                <Input col2={true} label="Large Image URL" badge="Optional" bind:value={data.image_url} placeholder="https://example.com/image.png" on:blur={handleImageUrlInput}/>
+                <Input col2={true} label="Small Image URL" badge="Optional" bind:value={data.thumbnail_url} placeholder="https://example.com/image.png"  on:blur={handleImageUrlInput}/>
             </div>
         </div>
     </Collapsible>
@@ -269,6 +269,21 @@
         };
     }
 
+    // Function to validate image URL
+    function validateImageUrl(url) {
+        const validExtensions = ['.gif', '.jpg', '.jpeg', '.png', '.webp'];
+        return validExtensions.some(ext => url.endsWith(ext));
+    }
+
+    // Function to handle input validation
+    function handleImageUrlInput(event) {
+        const url = event.target.value;
+        if (url && !validateImageUrl(url)) {
+            alert('Invalid image URL. Please use a URL ending with .gif, .jpg, .jpeg, .png, or .webp');
+            event.target.value = '';
+        }
+    }
+
     function updateColour() {
         data.colour = colourToInt(tempColour);
     }