fix: apiBase not being used correctly, format document indentation
This commit is contained in:
parent
7bbf905df5
commit
502e31ee69
GPG key ID:
2BF92EB6D8A5CCA7
1 changed files with 116 additions and 90 deletions
206
layouts/auth.vue
206
layouts/auth.vue
|
|
@ -1,59 +1,63 @@
|
|||
<template>
|
||||
<div id="root-container" style="margin-top: 5dvh;">
|
||||
<div id="main-container">
|
||||
<div v-if="!instanceUrl">
|
||||
<div v-if="instanceError" style="color: red;">
|
||||
{{ instanceError }}
|
||||
</div>
|
||||
<form @submit="selectInstance">
|
||||
<div>
|
||||
<label for="instance-url">Instance URL</label>
|
||||
<br>
|
||||
<input type="url" name="instance-url" id="instance-url" required v-model="instanceUrlInput">
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div v-else id="auth-form-container">
|
||||
<slot />
|
||||
</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>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Log out</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<button @click="refresh">Refresh</button>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="showUser">Show user</button>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="getUser">Get me</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="root-container" style="margin-top: 5dvh;">
|
||||
<div id="main-container">
|
||||
<div id="instance-error-container" v-if="!instanceUrl">
|
||||
<div v-if="instanceError" style="color: red;">
|
||||
{{ instanceError }}
|
||||
</div>
|
||||
<form @submit="selectInstance">
|
||||
<div>
|
||||
<label for="instance-url">Instance URL</label>
|
||||
<br>
|
||||
<input type="url" name="instance-url" id="instance-url" required v-model="instanceUrlInput">
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Log out</button>
|
||||
</div>
|
||||
</form>
|
||||
<div>
|
||||
<button @click="refresh">Refresh</button>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="showUser">Show user</button>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="getUser">Get me</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 () => {
|
||||
|
|
@ -75,77 +81,97 @@ onMounted(async () => {
|
|||
});
|
||||
|
||||
async function selectInstance(e: Event) {
|
||||
e.preventDefault();
|
||||
if (instanceUrlInput.value) {
|
||||
const instanceUrlObj = new URL(`api/v${apiVersion}/stats`, instanceUrlInput.value.endsWith("/") ? instanceUrlInput.value : instanceUrlInput.value + "/");
|
||||
try {
|
||||
const res = await $fetch.raw(instanceUrlObj.href);
|
||||
instanceError.value = "";
|
||||
|
||||
const origin = new URL(res.url).origin;
|
||||
instanceUrl.value = origin;
|
||||
useCookie("instance_url").value = origin;
|
||||
|
||||
if (!apiBase.value) apiBase.value = origin + `/api/v${apiVersion}`;
|
||||
} catch (error: any) {
|
||||
if (error instanceof FetchError) {
|
||||
console.log("Status code:", error.response?.status);
|
||||
if (error.response?.status == 404) {
|
||||
instanceError.value = "An instance with that URL does not exist or is currently down.";
|
||||
}
|
||||
}
|
||||
console.error("Error:", error);
|
||||
}
|
||||
}
|
||||
e.preventDefault();
|
||||
console.log("trying input instance");
|
||||
if (instanceUrlInput.value) {
|
||||
console.log("input has value");
|
||||
const gorbTxtUrl = new URL(`/.well-known/gorb.txt`, instanceUrlInput.value);
|
||||
try {
|
||||
console.log("trying to get gorb.txt:", gorbTxtUrl);
|
||||
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);
|
||||
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.";
|
||||
}
|
||||
}
|
||||
console.error("Error:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const form = reactive({
|
||||
password: ""
|
||||
password: ""
|
||||
});
|
||||
|
||||
async function logout(e: Event) {
|
||||
e.preventDefault();
|
||||
await auth.logout(form.password);
|
||||
console.log("logout");
|
||||
e.preventDefault();
|
||||
await auth.logout(form.password);
|
||||
console.log("logout");
|
||||
}
|
||||
|
||||
async function refresh(e: Event) {
|
||||
e.preventDefault();
|
||||
await auth.refresh();
|
||||
console.log("refreshed");
|
||||
e.preventDefault();
|
||||
await auth.refresh();
|
||||
console.log("refreshed");
|
||||
}
|
||||
|
||||
async function getUser(e: Event) {
|
||||
e.preventDefault();
|
||||
await auth.getUser();
|
||||
console.log("user:", auth.user.value);
|
||||
e.preventDefault();
|
||||
await auth.getUser();
|
||||
console.log("user:", auth.user.value);
|
||||
}
|
||||
|
||||
async function showUser(e: Event) {
|
||||
e.preventDefault();
|
||||
console.log("user:", auth.user.value);
|
||||
e.preventDefault();
|
||||
console.log("user:", auth.user.value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#root-container, #main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
#root-container,
|
||||
#main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#auth-form-container,
|
||||
#auth-form-container form {
|
||||
display: flex;
|
||||
width: 50dvw;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
display: flex;
|
||||
width: 50dvw;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#auth-form-container form {
|
||||
text-align: left;
|
||||
margin-top: 10dvh;
|
||||
text-align: left;
|
||||
margin-top: 10dvh;
|
||||
}
|
||||
|
||||
#instance-error-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue