From 7d83916f92a2985deee998a86f4d39494cefd961 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sun, 4 May 2025 11:47:06 +1200
Subject: [PATCH] Added instance URL validation

---
 .../lib/components/Settings/Interface.svelte  | 45 ++++++++++++++-----
 materialious/src/lib/i18n/locales/en.json     |  3 +-
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/materialious/src/lib/components/Settings/Interface.svelte b/materialious/src/lib/components/Settings/Interface.svelte
index ea8d0d92..e53723ca 100644
--- a/materialious/src/lib/components/Settings/Interface.svelte
+++ b/materialious/src/lib/components/Settings/Interface.svelte
@@ -36,6 +36,8 @@
 	let forceCase = $state(get(interfaceForceCase));
 	let defaultPage = $state(get(interfaceDefaultPage));
 
+	let invalidInstance = $state(false);
+
 	async function setColor(color: any) {
 		const target = color.target;
 		const hex = (target as { value: string }).value;
@@ -55,21 +57,44 @@
 			darkModeStore.set(true);
 		}
 	}
+
+	async function setInstance(event: Event) {
+		event.preventDefault();
+
+		invalidInstance = false;
+
+		const instance = ensureNoTrailingSlash(invidiousInstance);
+
+		try {
+			new URL(instance);
+		} catch {
+			invalidInstance = true;
+		}
+
+		if (invalidInstance) return;
+
+		const resp = await fetch(`${instance}/api/v1/trending`);
+		if (!resp.ok) {
+			invalidInstance = true;
+			return;
+		}
+
+		instanceStore.set(instance);
+		authStore.set(null);
+		goto('/', { replaceState: true });
+		ui('#dialog-settings');
+	}
 </script>
 
 {#if Capacitor.isNativePlatform()}
-	<form
-		onsubmit={preventDefault(() => {
-			instanceStore.set(ensureNoTrailingSlash(invidiousInstance));
-			authStore.set(null);
-			goto('/', { replaceState: true });
-			ui('#dialog-settings');
-		})}
-	>
+	<form style="margin-bottom: 2em;" onsubmit={setInstance}>
 		<nav>
-			<div class="field label border max">
+			<div class="field label border max" class:invalid={invalidInstance}>
 				<input bind:value={invidiousInstance} name="invidious-instance" type="text" />
 				<label for="invidious-instance">{$_('layout.instanceUrl')}</label>
+				{#if invalidInstance}
+					<span class="error">{$_('invalidInstance')}</span>
+				{/if}
 			</div>
 			<button class="square round">
 				<i>done</i>
@@ -78,8 +103,6 @@
 	</form>
 {/if}
 
-<div class="margin"></div>
-
 <button onclick={toggleDarkMode} class="no-margin">
 	{#if !$darkModeStore}
 		<i>dark_mode</i>
diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json
index da25ece8..4e49bd14 100644
--- a/materialious/src/lib/i18n/locales/en.json
+++ b/materialious/src/lib/i18n/locales/en.json
@@ -3,6 +3,7 @@
 	"copyUrl": "Copy URL",
 	"loadMore": "Load more",
 	"views": "views",
+	"invalidInstance": "Please verify the URL. If it's correct, the instance may be down or may not support third-party clients.",
 	"invidiousBlockWarning": "Invidious is currently being blocked by Google. If videos aren't loading for this instance, please use this instance on Materialious on {android} or {desktop} to get around this with local video fallback.",
 	"videos": "videos",
 	"cancel": "Cancel",
@@ -161,4 +162,4 @@
 		}
 	},
 	"subscribe": "Subscribe"
-}
\ No newline at end of file
+}