Merge pull request 'Fix fetched API endpoint not being used correctly' (#4) from dev into main

Reviewed-on: #4

layouts/auth.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id="root-container" style="margin-top: 5dvh;">
 		<div id="main-container">
-      <div v-if="!instanceUrl">
+			<div id="instance-error-container" v-if="!instanceUrl">
 				<div v-if="instanceError" style="color: red;">
 					{{ instanceError }}
 				</div>
@@ -19,13 +19,17 @@
 			<div v-else id="auth-form-container">
 				<slot />
 			</div>
+			<div v-if="instanceUrl">
+				Instance URL is set to {{ instanceUrl }}
+			</div>
 			<div v-if="auth.accessToken.value">
 				You're logged in!
 				<form @submit="logout">
 					<div>
 						<label for="logout-password">Password</label>
 						<br>
-            <input type="password" name="logout-password" id="logout-password" v-model="form.password" required>
+						<input type="password" name="logout-password" id="logout-password" v-model="form.password"
+							required>
 					</div>
 					<div>
 						<button type="submit">Log out</button>
@@ -48,12 +52,12 @@
 <script lang="ts" setup>
 import { FetchError } from 'ofetch';
 
-const apiVersion = useRuntimeConfig().public.apiVersion;
 const instanceUrl = ref<string | null | undefined>(null);
 const instanceUrlInput = ref<string>();
 const instanceError = ref<string>();
 const requestUrl = useRequestURL();
 const apiBase = useCookie("api_base");
+const gorbTxtError = ref<string>("");
 
 const auth = useAuth();
 
@@ -65,6 +69,8 @@ if (status.value == "success" && gorbTxt.value) {
 		apiBase.value = parsed.ApiBaseUrl;
 		console.log("set apiBase to:", parsed.ApiBaseUrl);
 	}
+} else {
+	gorbTxtError.value = "Failed to find that instance.";
 }
 
 onMounted(async () => {
@@ -76,20 +82,32 @@ onMounted(async () => {
 
 async function selectInstance(e: Event) {
 	e.preventDefault();
+	console.log("trying input instance");
 	if (instanceUrlInput.value) {
-    const instanceUrlObj = new URL(`api/v${apiVersion}/stats`, instanceUrlInput.value.endsWith("/") ? instanceUrlInput.value : instanceUrlInput.value + "/");
+		console.log("input has value");
+		const gorbTxtUrl = new URL(`/.well-known/gorb.txt`, instanceUrlInput.value);
 		try {
-      const res = await $fetch.raw(instanceUrlObj.href);
+			console.log("trying to get gorb.txt:", gorbTxtUrl);
-      instanceError.value = "";
+			const res = await $fetch.raw(gorbTxtUrl.href, { responseType: "text" });
-	  
+			const parsed = parseWellKnown(res._data as string);
+			console.log("parsed:", parsed);
+			if (parsed.ApiBaseUrl) {
+				apiBase.value = parsed.ApiBaseUrl;
+				console.log("set apiBase to:", parsed.ApiBaseUrl);
 				const origin = new URL(res.url).origin;
 				instanceUrl.value = origin;
 				useCookie("instance_url").value = origin;
-
+				console.log("set instance url to:", origin);
-      if (!apiBase.value) apiBase.value = origin + `/api/v${apiVersion}`;
+				return;
+			}
+			instanceError.value = "That URL is not a valid instance.";
+			return;
 		} catch (error: any) {
 			if (error instanceof FetchError) {
 				console.log("Status code:", error.response?.status);
+				if ((error.cause as any).toString().includes("NetworkError")) {
+					instanceError.value = "Could not connect to that instance, it may not be set up correctly.";
+				}
 				if (error.response?.status == 404) {
 					instanceError.value = "An instance with that URL does not exist or is currently down.";
 				}
@@ -129,7 +147,8 @@ async function showUser(e: Event) {
 </script>
 
 <style>
-#root-container, #main-container  {
+#root-container,
+#main-container {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -148,4 +167,11 @@ async function showUser(e: Event) {
 	text-align: left;
 	margin-top: 10dvh;
 }
+
+#instance-error-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
 </style>

pages/login.vue

@@ -39,11 +39,11 @@ const form = reactive({
 const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
 
-const instanceUrl = useCookie("instance_url").value;
 const registrationEnabled = ref<boolean>(true);
+const apiBase = useCookie("api_base");
 
-if (instanceUrl) {
+if (apiBase.value) {
-	const statsUrl = new URL("/stats", instanceUrl).href;
+	const statsUrl = new URL("/stats", apiBase.value).href;
 	const { status, data } = await useFetch<StatsResponse>(statsUrl);
 	if (status.value == "success" && data.value) {
 		registrationEnabled.value = data.value.registration_enabled;

pages/register.vue

@@ -131,8 +131,6 @@ watch(() => form.repeatPassword, (newValue) => {
   console.log("repeat password change:", newValue);
 })
 
-const apiVersion = useRuntimeConfig().public.apiVersion;
-
 async function register(e: Event) {
   e.preventDefault();
   console.log("Sending registration data");