Merge branch 'guild-settings' into guild-joining
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
This commit is contained in:
commit
cf32b62ae7
GPG key ID:
270B096EF6E9A462
67 changed files with 2621 additions and 255 deletions
|
|
@ -20,30 +20,7 @@
|
|||
<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>
|
||||
Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,7 +28,6 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import { FetchError } from 'ofetch';
|
||||
import type { StatsResponse } from '~/types/interfaces';
|
||||
|
||||
const instanceUrl = ref<string | null | undefined>(null);
|
||||
const instanceUrlInput = ref<string>();
|
||||
|
|
@ -63,9 +39,7 @@ const registrationEnabled = useState("registrationEnabled", () => true);
|
|||
const auth = useAuth();
|
||||
|
||||
onMounted(async () => {
|
||||
const cookie = useCookie("instance_url").value;
|
||||
instanceUrl.value = cookie;
|
||||
console.log(cookie);
|
||||
instanceUrl.value = useCookie("instance_url").value;
|
||||
console.log("set instance url to:", instanceUrl.value);
|
||||
});
|
||||
|
||||
|
|
@ -73,8 +47,8 @@ async function selectInstance(e: Event) {
|
|||
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);
|
||||
console.log("input has value");
|
||||
try {
|
||||
console.log("trying to get gorb.txt:", gorbTxtUrl);
|
||||
const res = await $fetch.raw(gorbTxtUrl.href, { responseType: "text" });
|
||||
|
|
@ -87,10 +61,10 @@ async function selectInstance(e: Event) {
|
|||
instanceUrl.value = origin;
|
||||
useCookie("instance_url").value = origin;
|
||||
console.log("set instance url to:", origin);
|
||||
const { status, data, error } = await useFetch<StatsResponse>(`${apiBase.value}/stats`);
|
||||
if (status.value == "success" && data.value) {
|
||||
registrationEnabled.value = data.value.registration_enabled;
|
||||
console.log("set registration enabled value to:", data.value.registration_enabled);
|
||||
const stats = await useApi().fetchInstanceStats(apiBase.value);
|
||||
if (stats) {
|
||||
registrationEnabled.value = stats.registration_enabled;
|
||||
console.log("set registration enabled value to:", stats.registration_enabled);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -114,30 +88,6 @@ async function selectInstance(e: Event) {
|
|||
const form = reactive({
|
||||
password: ""
|
||||
});
|
||||
|
||||
async function logout(e: Event) {
|
||||
e.preventDefault();
|
||||
await auth.logout(form.password);
|
||||
console.log("logout");
|
||||
}
|
||||
|
||||
async function refresh(e: Event) {
|
||||
e.preventDefault();
|
||||
await auth.refresh();
|
||||
console.log("refreshed");
|
||||
}
|
||||
|
||||
async function getUser(e: Event) {
|
||||
e.preventDefault();
|
||||
await auth.getUser();
|
||||
console.log("user:", auth.user.value);
|
||||
}
|
||||
|
||||
async function showUser(e: Event) {
|
||||
e.preventDefault();
|
||||
console.log("user:", auth.user.value);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
@ -148,18 +98,22 @@ async function showUser(e: Event) {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
#auth-form-container,
|
||||
#auth-form-container form {
|
||||
#auth-form-container {
|
||||
display: flex;
|
||||
width: 50dvw;
|
||||
width: 20dvw;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 1em;
|
||||
margin-bottom: 2dvh;
|
||||
}
|
||||
|
||||
#auth-form-container form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
margin-top: 10dvh;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
#instance-error-container {
|
||||
|
|
|
|||
|
|
@ -3,27 +3,33 @@
|
|||
<div :class="{ hidden: loading, visible: !loading }" id="client-root">
|
||||
<div id="homebar">
|
||||
<div class="homebar-item">
|
||||
main bar
|
||||
<marquee>
|
||||
gorb!!!!!
|
||||
</marquee>
|
||||
</div>
|
||||
</div>
|
||||
<div id="left-column">
|
||||
<div id="left-column-top">
|
||||
<NuxtLink id="home-button" href="/">
|
||||
<Icon name="lucide:house" class="white" size="2rem" />
|
||||
</div>
|
||||
<div id = "page-content">
|
||||
<div id="left-column">
|
||||
<NuxtLink id="home-button" href="/me">
|
||||
<img class="sidebar-icon" src="/public/icon.svg"/>
|
||||
</NuxtLink>
|
||||
<div id="servers-list">
|
||||
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
|
||||
<Icon name="lucide:server" class="white" size="2rem" />
|
||||
<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
|
||||
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div ref="joinServerButton" id="left-column-bottom">
|
||||
<button id="join-server-button" @click.prevent="createDropdown">
|
||||
<Icon id="join-server-icon" name="lucide:square-plus" />
|
||||
</button>
|
||||
</div>
|
||||
<NuxtLink id="settings-menu" href="/settings">
|
||||
<Icon name="lucide:settings" class="sidebar-icon" alt="Settings menu" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div ref="joinServerButton" id="left-column-bottom">
|
||||
<button id="join-server-button" @click.prevent="createDropdown">
|
||||
<Icon id="join-server-icon" name="lucide:square-plus" />
|
||||
</button>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -184,13 +190,11 @@ function createDropdown() {
|
|||
|
||||
<style>
|
||||
#client-root {
|
||||
/* border: 1px solid white; */
|
||||
height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 18fr 4fr;
|
||||
grid-template-rows: 4dvh auto;
|
||||
width: 100dvw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
|
@ -199,49 +203,42 @@ function createDropdown() {
|
|||
|
||||
.visible {
|
||||
opacity: 100%;
|
||||
transition-duration: 500ms;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
#homebar {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
min-height: 4dvh;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
background: var(--optional-topbar-background);
|
||||
background-color: var(--topbar-background-color);
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
padding-left: 5dvw;
|
||||
padding-right: 5dvw;
|
||||
}
|
||||
|
||||
#client-root>div:nth-child(-n+4) {
|
||||
border-bottom: 1px solid rgb(70, 70, 70);
|
||||
.homebar-item {
|
||||
width: 100dvw;
|
||||
}
|
||||
|
||||
#__nuxt {
|
||||
#page-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.grid-column {
|
||||
padding-top: 1dvh;
|
||||
}
|
||||
|
||||
#home {
|
||||
padding-left: .5dvw;
|
||||
padding-right: .5dvw;
|
||||
}
|
||||
|
||||
#current-info {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#left-column {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
overflow-y: hidden;
|
||||
border-right: 1px solid rgb(70, 70, 70);
|
||||
padding-top: 1dvh;
|
||||
padding-bottom: 1dvh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .75em;
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
padding-top: .5em;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
background: var(--optional-sidebar-background);
|
||||
background-color: var(--sidebar-background-color);
|
||||
}
|
||||
|
||||
#left-column-top {
|
||||
|
|
@ -270,8 +267,9 @@ function createDropdown() {
|
|||
#servers-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1dvh;
|
||||
overflow-y: scroll;
|
||||
gap: 1em;
|
||||
width: 3.2rem;
|
||||
padding-top: .5em;
|
||||
}
|
||||
|
||||
#join-server-button {
|
||||
|
|
@ -288,4 +286,37 @@ function createDropdown() {
|
|||
float: left;
|
||||
}
|
||||
|
||||
#middle-left-column {
|
||||
padding-left: .25em;
|
||||
padding-right: .25em;
|
||||
border-right: 1px solid var(--padding-color);
|
||||
min-width: 13em;
|
||||
max-width: 13em;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.sidebar-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#home-button {
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
padding-bottom: .375em;
|
||||
}
|
||||
|
||||
#settings-menu {
|
||||
position: absolute;
|
||||
bottom: .25em;
|
||||
|
||||
color: var(--primary-color)
|
||||
}
|
||||
|
||||
#settings-menu:hover {
|
||||
color: var(--primary-highlighted-color)
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue