feat(badges): errors

1 files changed, 18 insertions, 0 deletions

diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index 324d568e..fb5f5e29 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -7,6 +7,7 @@
 
 	let editMode = false;
 	let currentUserIdentity: ReturnType<typeof userIdentity>;
+	let error: null | string;
 
 	onMount(async () => {
 		if (data.user) {
@@ -26,6 +27,18 @@
 		const activityURL = document.querySelector('input[name="activity_url"]') as HTMLInputElement;
 		const description = document.querySelector('input[name="description"]') as HTMLInputElement;
 
+		if (!imageURL.value || !activityURL.value) {
+			error = 'Fields cannot be empty.';
+
+			return;
+		}
+
+		if (!imageURL.value.startsWith('http') || !activityURL.value.startsWith('http')) {
+			error = 'URLs must start with http or https.';
+
+			return;
+		}
+
 		fetch(
 			`/api/badges/add?image=${encodeURIComponent(imageURL.value)}&post=${encodeURIComponent(
 				activityURL.value
@@ -34,6 +47,7 @@
 				method: 'POST'
 			}
 		).then(() => {
+			error = null;
 			imageURL.value = '';
 			activityURL.value = '';
 			description.value = '';
@@ -69,6 +83,10 @@
 			careful!
 		</p>
 
+		{#if error}
+			<p style="color: red;">{error}</p>
+		{/if}
+
 		<p>
 			<input type="text" placeholder="Image URL" name="image_url" minlength="1" maxlength="1000" />
 			<input