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

Compare commits

base: gorb:76cede3d67b00bdbcedd52f723f3530408e1fbb2
Branches Tags
gorb:main
gorb:settings-page
gorb:info-components
gorb:guild-joining
gorb:guild-settings
gorb:dev
..
compare: gorb:a2e64b432ddb30ce5b7df40e737a54afbc4c7654
Branches Tags
gorb:main
gorb:settings-page
gorb:info-components
gorb:guild-joining
gorb:guild-settings
gorb:dev

No commits in common. "76cede3d67b00bdbcedd52f723f3530408e1fbb2" and "a2e64b432ddb30ce5b7df40e737a54afbc4c7654" have entirely different histories.
76cede3d67 ... a2e64b432d

3 changed files with 95 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

206
layouts/auth.vue
View file

@ -1,63 +1,59 @@
<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 id="instance-error-container" v-if="!instanceUrl"> <div 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="instanceUrl"> <div v-if="auth.accessToken.value">
Instance URL is set to {{ instanceUrl }} You're logged in!
</div> <form @submit="logout">
<div v-if="auth.accessToken.value"> <div>
You're logged in! <label for="logout-password">Password</label>
<form @submit="logout"> <br>
<div> <input type="password" name="logout-password" id="logout-password" v-model="form.password" required>
<label for="logout-password">Password</label> </div>
<br> <div>
<input type="password" name="logout-password" id="logout-password" v-model="form.password" <button type="submit">Log out</button>
required> </div>
</div> </form>
<div> <div>
<button type="submit">Log out</button> <button @click="refresh">Refresh</button>
</div> </div>
</form> <div>
<div> <button @click="showUser">Show user</button>
<button @click="refresh">Refresh</button> </div>
</div> <div>
<div> <button @click="getUser">Get me</button>
<button @click="showUser">Show user</button> </div>
</div> </div>
<div> </div>
<button @click="getUser">Get me</button> </div>
</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();
@ -69,8 +65,6 @@ 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 () => {
@ -81,97 +75,77 @@ onMounted(async () => {
}); });
async function selectInstance(e: Event) { async function selectInstance(e: Event) {
e.preventDefault(); e.preventDefault();
console.log("trying input instance"); if (instanceUrlInput.value) {
if (instanceUrlInput.value) { const instanceUrlObj = new URL(`api/v${apiVersion}/stats`, instanceUrlInput.value.endsWith("/") ? instanceUrlInput.value : instanceUrlInput.value + "/");
console.log("input has value"); try {
const gorbTxtUrl = new URL(`/.well-known/gorb.txt`, instanceUrlInput.value); const res = await $fetch.raw(instanceUrlObj.href);
try { instanceError.value = "";
console.log("trying to get gorb.txt:", gorbTxtUrl);
const res = await $fetch.raw(gorbTxtUrl.href, { responseType: "text" }); const origin = new URL(res.url).origin;
const parsed = parseWellKnown(res._data as string); instanceUrl.value = origin;
console.log("parsed:", parsed); useCookie("instance_url").value = origin;
if (parsed.ApiBaseUrl) {
apiBase.value = parsed.ApiBaseUrl; if (!apiBase.value) apiBase.value = origin + `/api/v${apiVersion}`;
console.log("set apiBase to:", parsed.ApiBaseUrl); } catch (error: any) {
const origin = new URL(res.url).origin; if (error instanceof FetchError) {
instanceUrl.value = origin; console.log("Status code:", error.response?.status);
useCookie("instance_url").value = origin; if (error.response?.status == 404) {
console.log("set instance url to:", origin); instanceError.value = "An instance with that URL does not exist or is currently down.";
return; }
} }
instanceError.value = "That URL is not a valid instance."; console.error("Error:", error);
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, #root-container, #main-container {
#main-container { display: flex;
display: flex; flex-direction: column;
flex-direction: column; align-items: center;
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>

6
pages/login.vue
View file

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

2
pages/register.vue
View file

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