gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: apiBase not being used correctly, format document indentation
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details
ci/woodpecker/pull_request_closed/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
SauceyRed 2025-05-31 02:39:34 +02:00
parent 7bbf905df5
commit 502e31ee69
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 116 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

206
layouts/auth.vue
View file

@ -1,59 +1,63 @@
<template> <template>
<div id="root-container" style="margin-top: 5dvh;"> <div id="root-container" style="margin-top: 5dvh;">
<div id="main-container"> <div id="main-container">
<div v-if="!instanceUrl"> <div id="instance-error-container" v-if="!instanceUrl">
<div v-if="instanceError" style="color: red;"> <div v-if="instanceError" style="color: red;">
{{ instanceError }} {{ instanceError }}
</div> </div>
<form @submit="selectInstance"> <form @submit="selectInstance">
<div> <div>
<label for="instance-url">Instance URL</label> <label for="instance-url">Instance URL</label>
<br> <br>
<input type="url" name="instance-url" id="instance-url" required v-model="instanceUrlInput"> <input type="url" name="instance-url" id="instance-url" required v-model="instanceUrlInput">
</div> </div>
<div> <div>
<button type="submit">Next</button> <button type="submit">Next</button>
</div> </div>
</form> </form>
</div> </div>
<div v-else id="auth-form-container"> <div v-else id="auth-form-container">
<slot /> <slot />
</div> </div>
<div v-if="auth.accessToken.value"> <div v-if="instanceUrl">
You're logged in! Instance URL is set to {{ instanceUrl }}
<form @submit="logout"> </div>
<div> <div v-if="auth.accessToken.value">
<label for="logout-password">Password</label> You're logged in!
<br> <form @submit="logout">
<input type="password" name="logout-password" id="logout-password" v-model="form.password" required> <div>
</div> <label for="logout-password">Password</label>
<div> <br>
<button type="submit">Log out</button> <input type="password" name="logout-password" id="logout-password" v-model="form.password"
</div> required>
</form> </div>
<div> <div>
<button @click="refresh">Refresh</button> <button type="submit">Log out</button>
</div> </div>
<div> </form>
<button @click="showUser">Show user</button> <div>
</div> <button @click="refresh">Refresh</button>
<div> </div>
<button @click="getUser">Get me</button> <div>
</div> <button @click="showUser">Show user</button>
</div> </div>
</div> <div>
</div> <button @click="getUser">Get me</button>
</div>
</div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { FetchError } from 'ofetch'; import { FetchError } from 'ofetch';
const apiVersion = useRuntimeConfig().public.apiVersion;
const instanceUrl = ref<string | null | undefined>(null); const instanceUrl = ref<string | null | undefined>(null);
const instanceUrlInput = ref<string>(); const instanceUrlInput = ref<string>();
const instanceError = ref<string>(); const instanceError = ref<string>();
const requestUrl = useRequestURL(); const requestUrl = useRequestURL();
const apiBase = useCookie("api_base"); const apiBase = useCookie("api_base");
const gorbTxtError = ref<string>("");
const auth = useAuth(); const auth = useAuth();
@ -65,6 +69,8 @@ if (status.value == "success" && gorbTxt.value) {
apiBase.value = parsed.ApiBaseUrl; apiBase.value = parsed.ApiBaseUrl;
console.log("set apiBase to:", parsed.ApiBaseUrl); console.log("set apiBase to:", parsed.ApiBaseUrl);
} }
} else {
gorbTxtError.value = "Failed to find that instance.";
} }
onMounted(async () => { onMounted(async () => {
@ -75,77 +81,97 @@ onMounted(async () => {
}); });
async function selectInstance(e: Event) { async function selectInstance(e: Event) {
e.preventDefault(); e.preventDefault();
if (instanceUrlInput.value) { console.log("trying input instance");
const instanceUrlObj = new URL(`api/v${apiVersion}/stats`, instanceUrlInput.value.endsWith("/") ? instanceUrlInput.value : instanceUrlInput.value + "/"); if (instanceUrlInput.value) {
try { console.log("input has value");
const res = await $fetch.raw(instanceUrlObj.href); const gorbTxtUrl = new URL(`/.well-known/gorb.txt`, instanceUrlInput.value);
instanceError.value = ""; try {
console.log("trying to get gorb.txt:", gorbTxtUrl);
const origin = new URL(res.url).origin; const res = await $fetch.raw(gorbTxtUrl.href, { responseType: "text" });
instanceUrl.value = origin; const parsed = parseWellKnown(res._data as string);
useCookie("instance_url").value = origin; console.log("parsed:", parsed);
if (parsed.ApiBaseUrl) {
if (!apiBase.value) apiBase.value = origin + `/api/v${apiVersion}`; apiBase.value = parsed.ApiBaseUrl;
} catch (error: any) { console.log("set apiBase to:", parsed.ApiBaseUrl);
if (error instanceof FetchError) { const origin = new URL(res.url).origin;
console.log("Status code:", error.response?.status); instanceUrl.value = origin;
if (error.response?.status == 404) { useCookie("instance_url").value = origin;
instanceError.value = "An instance with that URL does not exist or is currently down."; console.log("set instance url to:", origin);
} return;
} }
console.error("Error:", error); 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.";
}
}
console.error("Error:", error);
}
}
} }
const form = reactive({ const form = reactive({
password: "" password: ""
}); });
async function logout(e: Event) { async function logout(e: Event) {
e.preventDefault(); e.preventDefault();
await auth.logout(form.password); await auth.logout(form.password);
console.log("logout"); console.log("logout");
} }
async function refresh(e: Event) { async function refresh(e: Event) {
e.preventDefault(); e.preventDefault();
await auth.refresh(); await auth.refresh();
console.log("refreshed"); console.log("refreshed");
} }
async function getUser(e: Event) { async function getUser(e: Event) {
e.preventDefault(); e.preventDefault();
await auth.getUser(); await auth.getUser();
console.log("user:", auth.user.value); console.log("user:", auth.user.value);
} }
async function showUser(e: Event) { async function showUser(e: Event) {
e.preventDefault(); e.preventDefault();
console.log("user:", auth.user.value); console.log("user:", auth.user.value);
} }
</script> </script>
<style> <style>
#root-container, #main-container { #root-container,
display: flex; #main-container {
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
align-items: center;
} }
#auth-form-container, #auth-form-container,
#auth-form-container form { #auth-form-container form {
display: flex; display: flex;
width: 50dvw; width: 50dvw;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 1em; gap: 1em;
} }
#auth-form-container form { #auth-form-container form {
text-align: left; text-align: left;
margin-top: 10dvh; margin-top: 10dvh;
} }
#instance-error-container {
display: flex;
flex-direction: column;
align-items: center;
}
</style> </style>