versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Make whole app client-only, add noscript fallback

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-15 11:18:58 -10:00
parent 961eccafa0
commit 2266dcd725
No known key found for this signature in database
19 changed files with 597 additions and 604 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app.vue
View file

@ -4,10 +4,15 @@
<PwaAppleImage image="/logo.webp" /> <PwaAppleImage image="/logo.webp" />
<PwaMaskableImage image="/logo.webp" /> <PwaMaskableImage image="/logo.webp" />
<Loading /> <Loading />
<NuxtLayout> <ClientOnly>
<NuxtPage /> <NuxtLayout>
</NuxtLayout> <NuxtPage />
</NuxtLayout>
</ClientOnly>
<NotificationsRenderer /> <NotificationsRenderer />
<noscript>
<ErrorsNoscript />
</noscript>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

23
components/errors/noscript.vue Normal file
View file

@ -0,0 +1,23 @@
<template>
<div id="noscript-error"
class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8 fixed inset-0 z-[1000000] bg-dark-900">
<GraphicsSquarePattern />
<div class="prose prose-invert max-w-lg">
<h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">JavaScript is disabled
</h1>
<p class="mt-6 text-base leading-7 text-gray-400">
This website requires JavaScript to function properly. Please enable JavaScript in your browser
settings.
</p>
<p class="mt-6 text-base leading-7 text-gray-400">
If you are using a browser that does not support JavaScript, please consider using a modern browser
like <a href="https://www.mozilla.org/firefox/new/" class="underline">Firefox</a> or <a
href="https://www.google.com/chrome/" class="underline">Chrome</a>.
</p>
<p class="mt-6 text-base leading-7 text-gray-400">
This application does not track you, collect user data, use cookies of any kind or send requests to
servers outside of your account's instance.
</p>
</div>
</div>
</template>

19
components/graphics/square-pattern.vue Normal file
View file

@ -0,0 +1,19 @@
<template>
<svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
aria-hidden="true">
<defs>
<pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
patternUnits="userSpaceOnUse">
<path d="M.5 200V.5H200" fill="none"></path>
</pattern>
</defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
<path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0"></path>
</svg>
<rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"></rect>
</svg>
</template>
<script lang="ts" setup>
</script>

30
components/headers/greeting.vue
View file

@ -1,26 +1,24 @@
<template> <template>
<ClientOnly> <div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5">
<div v-if="identity" class="bg-dark-800 z-0 p-6 my-5 relative overflow-hidden rounded ring-1 ring-white/5"> <div class="sm:flex sm:items-center sm:justify-between gap-3">
<div class="sm:flex sm:items-center sm:justify-between gap-3"> <div class="sm:flex sm:space-x-5 grow">
<div class="sm:flex sm:space-x-5 grow"> <AvatarsCentered :src="identity.account.avatar"
<AvatarsCentered :src="identity.account.avatar" class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10" :alt="'Your avatar'" />
:alt="'Your avatar'" /> <div
<div class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10">
class="mt-4 text-center flex flex-col justify-center sm:mt-0 sm:text-left bg-dark-800 py-2 px-4 rounded grow ring-1 ring-white/10"> <p class="text-sm font-medium text-gray-300">Welcome back,</p>
<p class="text-sm font-medium text-gray-300">Welcome back,</p> <p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1"
<p class="text-xl font-bold text-gray-50 sm:text-2xl line-clamp-1" v-html="useParsedContent(identity.account.display_name, []).value"></p>
v-html="useParsedContent(identity.account.display_name, []).value"></p>
</div>
</div> </div>
<!-- <div class="mt-5 flex justify-center sm:mt-0"> </div>
<!-- <div class="mt-5 flex justify-center sm:mt-0">
<ButtonsSecondary @click="useEvent('composer:open')"> <ButtonsSecondary @click="useEvent('composer:open')">
Compose Compose
</ButtonsSecondary> </ButtonsSecondary>
</div> --> </div> -->
</div>
</div> </div>
</ClientOnly> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

2
components/loading.vue
View file

@ -3,7 +3,7 @@
<!-- Progress bar stuck to top --> <!-- Progress bar stuck to top -->
<div class="fixed top-0 left-0 right-0 h-1.5 bg-pink-500" :style="{ width: `${progress}%` }"></div> <div class="fixed top-0 left-0 right-0 h-1.5 bg-pink-500" :style="{ width: `${progress}%` }"></div>
<div class="flex flex-col items-center justify-center gap-8"> <div class="flex flex-col items-center justify-center gap-8">
<img src="/logo.webp" class="size-20 animate-pulse" /> <img src="/logo.webp" class="size-20 animate-pulse" role="presentation" />
</div> </div>
</div> </div>
</template> </template>

155
components/sidebars/navigation.vue
View file

@ -4,104 +4,102 @@
aria-label="Navigation" role="complementary"> aria-label="Navigation" role="complementary">
<NuxtLink href="/"> <NuxtLink href="/">
<img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200" <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
src="/logo.webp" alt="Lysand logo" /> :src="instance?.thumbnail.url ?? '/logo.webp'" alt="Logo of your instance" />
</NuxtLink> </NuxtLink>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200"> <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Timelines</h3> Timelines</h3>
<ClientOnly>
<NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href"> <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
<ButtonsBase <ButtonsBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200"> class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" /> <iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">{{ timeline.name }}</span> <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
</ButtonsBase> </ButtonsBase>
</NuxtLink> </NuxtLink>
</ClientOnly>
</div> </div>
<div class="flex flex-col gap-3 mt-auto"> <div class="flex flex-col gap-3 mt-auto">
<h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200"> <h3 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Account</h3> Account</h3>
<ClientOnly>
<SidebarsAccountPicker @sign-in="signIn().finally(() => loadingAuth = false)" <SidebarsAccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
@sign-out="id => signOut(id).finally(() => loadingAuth = false)" /> @sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
<NuxtLink href="/register" v-if="!identity"> <NuxtLink href="/register" v-if="!identity">
<ButtonsBase <ButtonsBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200"> class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" /> <iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Register</span> <span class="pr-28 line-clamp-1">Register</span>
</ButtonsBase>
</NuxtLink>
<h3 v-if="identity"
class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Posts</h3>
<ButtonsBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Compose</span>
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
<iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline"
aria-hidden="true" />
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
aria-hidden="true" />
</kbd>
</ButtonsBase> </ButtonsBase>
<ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker" </NuxtLink>
class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2 ring-pink-600 overflow-hidden h-12 w-full duration-200"> <h3 v-if="identity"
<iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" /> class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
<span class="pr-28 line-clamp-1">Update</span> Posts</h3>
</ButtonsBase> <ButtonsBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
</ClientOnly> class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Compose</span>
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
<iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline" aria-hidden="true" />
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
aria-hidden="true" />
</kbd>
</ButtonsBase>
<ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2 ring-pink-600 overflow-hidden h-12 w-full duration-200">
<iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Update</span>
</ButtonsBase>
</div> </div>
</aside> </aside>
<!-- Mobile bottom navbar --> <!-- Mobile bottom navbar -->
<nav <nav
class="fixed bottom-0 left-0 right-0 z-20 md:hidden flex justify-around p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200"> class="fixed bottom-0 left-0 right-0 z-20 md:hidden flex justify-around p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200">
<ClientOnly>
<DropdownsAdaptiveDropdown>
<template #button>
<button class="flex flex-col items-center justify-center p-2 rounded">
<iconify-icon icon="tabler:home" class="text-2xl" />
<span class="text-xs">Timelines</span>
</button>
</template>
<template #items> <DropdownsAdaptiveDropdown>
<Menu.Item value="" v-for="timeline in visibleTimelines" :key="timeline.href"> <template #button>
<NuxtLink :href="timeline.href">
<ButtonsDropdownElement :icon="timeline.icon" class="w-full">
{{ timeline.name }}
</ButtonsDropdownElement>
</NuxtLink>
</Menu.Item>
</template>
</DropdownsAdaptiveDropdown>
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
<iconify-icon icon="tabler:bell" class="text-2xl" />
<span class="text-xs">Notifications</span>
</NuxtLink>
<ClientOnly v-if="$pwa?.needRefresh">
<button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
@click="$pwa?.updateServiceWorker(true)">
<iconify-icon icon="tabler:refresh" class="text-2xl" />
<span class="text-xs">Update</span>
</button>
</ClientOnly>
<SidebarsAccountPicker v-else @sign-in="signIn().finally(() => loadingAuth = false)"
@sign-out="id => signOut(id).finally(() => loadingAuth = false)">
<button class="flex flex-col items-center justify-center p-2 rounded"> <button class="flex flex-col items-center justify-center p-2 rounded">
<iconify-icon icon="tabler:user" class="text-2xl" /> <iconify-icon icon="tabler:home" class="text-2xl" />
<span class="text-xs">Account</span> <span class="text-xs">Timelines</span>
</button> </button>
</SidebarsAccountPicker> </template>
<button @click="compose" v-if="identity"
class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70"> <template #items>
<iconify-icon icon="tabler:writing" class="text-2xl" /> <Menu.Item value="" v-for="timeline in visibleTimelines" :key="timeline.href">
<span class="text-xs">Compose</span> <NuxtLink :href="timeline.href">
<ButtonsDropdownElement :icon="timeline.icon" class="w-full">
{{ timeline.name }}
</ButtonsDropdownElement>
</NuxtLink>
</Menu.Item>
</template>
</DropdownsAdaptiveDropdown>
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
<iconify-icon icon="tabler:bell" class="text-2xl" />
<span class="text-xs">Notifications</span>
</NuxtLink>
<button v-if="$pwa?.needRefresh"
class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
@click="$pwa?.updateServiceWorker(true)">
<iconify-icon icon="tabler:refresh" class="text-2xl" />
<span class="text-xs">Update</span>
</button>
<SidebarsAccountPicker v-else @sign-in="signIn().finally(() => loadingAuth = false)"
@sign-out="id => signOut(id).finally(() => loadingAuth = false)">
<button class="flex flex-col items-center justify-center p-2 rounded">
<iconify-icon icon="tabler:user" class="text-2xl" />
<span class="text-xs">Account</span>
</button> </button>
</ClientOnly> </SidebarsAccountPicker>
<button @click="compose" v-if="identity"
class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
<iconify-icon icon="tabler:writing" class="text-2xl" />
<span class="text-xs">Compose</span>
</button>
</nav> </nav>
</template> </template>
@ -145,6 +143,7 @@ const appData = useAppData();
const identity = useCurrentIdentity(); const identity = useCurrentIdentity();
const identities = useIdentities(); const identities = useIdentities();
const client = useClient(); const client = useClient();
const instance = useInstance();
const compose = () => { const compose = () => {
useEvent("composer:open"); useEvent("composer:open");

184
components/social-elements/users/Account.vue
View file

@ -1,104 +1,100 @@
<template> <template>
<ClientOnly> <div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800">
<div class="w-full ring-1 ring-inset ring-white/5 pb-10 bg-dark-800"> <AvatarsCentered :src="account?.header" :alt="`${account?.acct}'s header image'`"
<AvatarsCentered :src="account?.header" :alt="`${account?.acct}'s header image'`" class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
<div class="flex items-start justify-between px-4 py-3"> <div class="flex items-start justify-between px-4 py-3">
<AvatarsCentered :src="account?.avatar" :alt="`${account?.acct}'s avatar'`" <AvatarsCentered :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" /> class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
<ClientOnly> <ButtonsSecondary v-if="account && account?.id === identity?.account?.id">Edit Profile
<ButtonsSecondary v-if="account && account?.id === identity?.account?.id">Edit Profile </ButtonsSecondary>
</ButtonsSecondary> <ButtonsSecondary :loading="isLoading" @click="follow()"
<ButtonsSecondary :loading="isLoading" @click="follow()" v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested"> <span>Follow</span>
<span>Follow</span> </ButtonsSecondary>
</ButtonsSecondary> <ButtonsSecondary :loading="isLoading" @click="unfollow()"
<ButtonsSecondary :loading="isLoading" @click="unfollow()" v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following"> <span>Unfollow</span>
<span>Unfollow</span> </ButtonsSecondary>
</ButtonsSecondary> <ButtonsSecondary :loading="isLoading" :disabled="true"
<ButtonsSecondary :loading="isLoading" :disabled="true" v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested"> <span>Requested</span>
<span>Requested</span> </ButtonsSecondary>
</ButtonsSecondary> </div>
</ClientOnly>
</div>
<div class="mt-2 px-4"> <div class="mt-2 px-4">
<h2 <h2
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text"> class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
<Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6"> <Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
{{ account?.display_name }} {{ account?.display_name }}
<iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem" <iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
class="text-gray-400 cursor-pointer align-text-top" class="text-gray-400 cursor-pointer align-text-top"
title="This account manually approves its followers" /> title="This account manually approves its followers" />
</Skeleton>
</h2>
<span class="text-gray-300 block mt-2">
<Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
</span>
<div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
<SocialElementsUsersBadge v-for="role of visibleRoles" :key="role.id" :name="role.name"
:description="role.description" :img="role.icon" />
<SocialElementsUsersBadge v-if="isDeveloper" name="Lysand Developer"
description="This user is a Lysand developer." :verified="true" />
</div>
</div>
<div class="mt-4 px-4">
<Skeleton :enabled="true" v-if="skeleton" class="!h-6" :min-width="50" :max-width="100" width-unit="%"
shape="rect" type="content">
</Skeleton> </Skeleton>
<div class="prose prose-invert" v-html="parsedNote" v-else></div> </h2>
</div> <span class="text-gray-300 block mt-2">
<Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
<div class="mt-3 flex items-center space-x-4 px-4"> </span>
<div class="flex items-center space-x-1"> <div class="flex flex-row flex-wrap gap-4 mt-4" v-if="isDeveloper || visibleRoles.length > 0">
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect"> <SocialElementsUsersBadge v-for="role of visibleRoles" :key="role.id" :name="role.name"
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" /> :description="role.description" :img="role.icon" />
<span class="text-gray-400">Created {{ formattedJoin }}</span> <SocialElementsUsersBadge v-if="isDeveloper" name="Lysand Developer"
</Skeleton> description="This user is a Lysand developer." :verified="true" />
</div>
<div v-if="account?.bot" class="flex items-center space-x-1">
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Bot</span>
</div>
</div>
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="cursor-pointer hover:underline space-x-1">
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
<span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
<span class="text-gray-400">Posts</span>
</Skeleton>
</div>
<div class="cursor-pointer hover:underline space-x-1">
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
<span class="font-bold text-gray-200">{{ account?.following_count }}</span>
<span class="text-gray-400">Following</span>
</Skeleton>
</div>
</div>
<div v-if="!skeleton && parsedFields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
<div v-for="field of parsedFields" :key="field.name" class="flex flex-col gap-1">
<span class="text-pink-500 font-semibold" v-html="field.name"></span>
<span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
</div>
</div>
<div v-else-if="skeleton" class="mt-4 px-4 flex-col space-y-3">
<div v-for="_ of 3" class="flex flex-col gap-1">
<Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
</Skeleton>
<Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
</Skeleton>
</div>
</div> </div>
</div> </div>
</ClientOnly>
<div class="mt-4 px-4">
<Skeleton :enabled="true" v-if="skeleton" class="!h-6" :min-width="50" :max-width="100" width-unit="%"
shape="rect" type="content">
</Skeleton>
<div class="prose prose-invert" v-html="parsedNote" v-else></div>
</div>
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="flex items-center space-x-1">
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Created {{ formattedJoin }}</span>
</Skeleton>
</div>
<div v-if="account?.bot" class="flex items-center space-x-1">
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Bot</span>
</div>
</div>
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="cursor-pointer hover:underline space-x-1">
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
<span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
<span class="text-gray-400">Posts</span>
</Skeleton>
</div>
<div class="cursor-pointer hover:underline space-x-1">
<Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
<span class="font-bold text-gray-200">{{ account?.following_count }}</span>
<span class="text-gray-400">Following</span>
</Skeleton>
</div>
</div>
<div v-if="!skeleton && parsedFields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
<div v-for="field of parsedFields" :key="field.name" class="flex flex-col gap-1">
<span class="text-pink-500 font-semibold" v-html="field.name"></span>
<span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
</div>
</div>
<div v-else-if="skeleton" class="mt-4 px-4 flex-col space-y-3">
<div v-for="_ of 3" class="flex flex-col gap-1">
<Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
</Skeleton>
<Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
</Skeleton>
</div>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

20
components/timelines/Notifications.vue
View file

@ -1,16 +1,12 @@
<template> <template>
<ClientOnly> <SocialElementsNotificationsNotif v-for="notif of timeline" :key="notif.id" :notification="notif" />
<span ref="skeleton"></span>
<SocialElementsNotificationsNotif v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<SocialElementsNotificationsNotif v-for="notif of timeline" :key="notif.id" :notification="notif" /> <div v-if="hasReachedEnd" class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<span ref="skeleton"></span> <iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
<SocialElementsNotificationsNotif v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" /> <span>No more notifications, you've seen them all</span>
</div>
<div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more notifications, you've seen them all</span>
</div>
</ClientOnly>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -29,7 +25,7 @@ const skeleton = ref<HTMLSpanElement | null>(null);
onMounted(() => { onMounted(() => {
useIntersectionObserver(skeleton, async (entries) => { useIntersectionObserver(skeleton, async (entries) => {
if ( if (
entries[0].isIntersecting && entries[0]?.isIntersecting &&
!hasReachedEnd.value && !hasReachedEnd.value &&
!isLoading.value !isLoading.value
) { ) {

25
components/timelines/timeline.vue
View file

@ -1,18 +1,15 @@
<template> <template>
<ClientOnly> <TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
<TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100" leave-to-class="opacity-0 scale-90">
leave-to-class="opacity-0 scale-90"> <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
<SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" /> </TransitionGroup>
</TransitionGroup> <span ref="skeleton"></span>
<span ref="skeleton"></span> <LazySocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<LazySocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
<div v-if="hasReachedEnd" <div v-if="hasReachedEnd" class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3"> <iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
<iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" /> <span>No more posts, you've seen them all</span>
<span>No more posts, you've seen them all</span> </div>
</div>
</ClientOnly>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -32,7 +29,7 @@ const skeleton = ref<HTMLSpanElement | null>(null);
onMounted(() => { onMounted(() => {
useIntersectionObserver(skeleton, async (entries) => { useIntersectionObserver(skeleton, async (entries) => {
if ( if (
entries[0].isIntersecting && entries[0]?.isIntersecting &&
!hasReachedEnd.value && !hasReachedEnd.value &&
!isLoading.value !isLoading.value
) { ) {

5
composables/CacheRefresh.ts
View file

@ -2,10 +2,9 @@ import type { LysandClient } from "@lysand-org/client";
import { type RolePermissions, useCurrentIdentity } from "./Identities"; import { type RolePermissions, useCurrentIdentity } from "./Identities";
export const useCacheRefresh = (client: MaybeRef<LysandClient | null>) => { export const useCacheRefresh = (client: MaybeRef<LysandClient | null>) => {
if (process.server) return; if (import.meta.server) return;
const identity = useCurrentIdentity(); const identity = useCurrentIdentity();
const instance = useInstance();
// Refresh custom emojis and instance data and me on every reload // Refresh custom emojis and instance data and me on every reload
watchEffect(async () => { watchEffect(async () => {
@ -56,7 +55,7 @@ export const useCacheRefresh = (client: MaybeRef<LysandClient | null>) => {
toValue(client) toValue(client)
?.getInstance() ?.getInstance()
.then((res) => { .then((res) => {
instance.value = res.data; if (identity.value) identity.value.instance = res.data;
}); });
}); });
}; };

9
composables/Instance.ts
View file

@ -1,15 +1,10 @@
import type { LysandClient } from "@lysand-org/client"; import type { LysandClient } from "@lysand-org/client";
import { StorageSerializers } from "@vueuse/core";
// Return type of LysandClient.getInstance // Return type of LysandClient.getInstance
export type Instance = Awaited<ReturnType<LysandClient["getInstance"]>>["data"]; export type Instance = Awaited<ReturnType<LysandClient["getInstance"]>>["data"];
export const useInstance = () => { export const useInstance = () => {
if (process.server) { const identity = useCurrentIdentity();
return ref(null);
}
return useLocalStorage<Instance | null>("lysand:instance", null, { return computed(() => identity.value?.instance);
serializer: StorageSerializers.object,
});
}; };

30
layouts/app.vue
View file

@ -1,31 +1,18 @@
<template> <template>
<div class="from-dark-600 to-dark-900 bg-gradient-to-tl relative min-h-dvh"> <div class="from-dark-600 to-dark-900 bg-gradient-to-tl relative min-h-dvh">
<svg class="absolute inset-0 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]" <GraphicsSquarePattern />
aria-hidden="true">
<defs>
<pattern id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc" width="200" height="200" x="50%" y="-1"
patternUnits="userSpaceOnUse">
<path d="M.5 200V.5H200" fill="none"></path>
</pattern>
</defs><svg x="50%" y="-1" class="overflow-visible fill-gray-800/20">
<path d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
stroke-width="0"></path>
</svg>
<rect width="100%" height="100%" stroke-width="0" fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"></rect>
</svg>
<LazySidebarsNavigation /> <LazySidebarsNavigation />
<div class="relative md:pl-20 min-h-dvh flex flex-row overflow-hidden justify-center xl:justify-between"> <div class="relative md:pl-20 min-h-dvh flex flex-row overflow-hidden justify-center xl:justify-between">
<OverlayScrollbarsComponent :defer="true" class="w-full max-h-dvh overflow-y-auto" :element="'main'"> <OverlayScrollbarsComponent :defer="true" class="w-full max-h-dvh overflow-y-auto" :element="'main'">
<slot /> <slot />
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
<ClientOnly> <LazySidebarsCollapsibleAside v-if="width > 1280 && identity" direction="right"
<LazySidebarsCollapsibleAside v-if="width > 1280 && identity" direction="right" class="max-w-md max-h-dvh overflow-y-auto w-full hidden absolute inset-y-0 xl:flex">
class="max-w-md max-h-dvh overflow-y-auto w-full hidden absolute inset-y-0 xl:flex"> <LazyTimelinesTimelineScroller>
<LazyTimelinesTimelineScroller> <LazyTimelinesNotifications />
<LazyTimelinesNotifications /> </LazyTimelinesTimelineScroller>
</LazyTimelinesTimelineScroller> <!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
<!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
<div class="text-center"> <div class="text-center">
<strong <strong
class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
@ -47,8 +34,7 @@
</ButtonsSecondary> </ButtonsSecondary>
</NuxtLink> </NuxtLink>
</div> --> </div> -->
</LazySidebarsCollapsibleAside> </LazySidebarsCollapsibleAside>
</ClientOnly>
</div> </div>
</div> </div>
<LazyComposerModal /> <LazyComposerModal />

20
pages/[username]/[uuid].vue
View file

@ -1,16 +1,14 @@
<template> <template>
<ClientOnly> <div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
<div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72"> <LazySocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
<LazySocialElementsNotesNote v-for="note of context?.ancestors" :note="note" /> <div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
<div ref="element" class="first:rounded-t last:rounded-b overflow-hidden"> <LazySocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
<LazySocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
</div>
<LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
</div> </div>
<div v-else class="mx-auto max-w-2xl w-full overflow-y-auto"> <LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
<LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" /> </div>
</div> <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
</ClientOnly> <LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

38
pages/notifications.vue
View file

@ -1,25 +1,23 @@
<template> <template>
<ClientOnly> <div class="mx-auto max-w-2xl w-full">
<div class="mx-auto max-w-2xl w-full"> <div class="shrink-0 p-10 h-dvh" v-if="!identity">
<div class="shrink-0 p-10 h-dvh" v-if="!identity"> <button type="button"
<button type="button" class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center"> <iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" /> <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications will
will appear here
appear here when you
when you sign in</span>
sign in</span> </button>
</button>
</div>
<LazyTimelinesTimelineScroller v-else>
<LazyHeadersGreeting />
<div class="rounded overflow-hidden ring-1 ring-white/10">
<LazyTimelinesNotifications />
</div>
</LazyTimelinesTimelineScroller>
</div> </div>
</ClientOnly> <LazyTimelinesTimelineScroller v-else>
<LazyHeadersGreeting />
<div class="rounded overflow-hidden ring-1 ring-white/10">
<LazyTimelinesNotifications />
</div>
</LazyTimelinesTimelineScroller>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

151
pages/oauth/authorize.vue
View file

@ -2,86 +2,83 @@
<div class="flex min-h-screen relative flex-col justify-center py-12 px-8"> <div class="flex min-h-screen relative flex-col justify-center py-12 px-8">
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo" <img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
class="mx-auto h-24 hidden md:block mb-10" /> class="mx-auto h-24 hidden md:block mb-10" />
<ClientOnly> <div v-if="validUrlParameters"
<div v-if="validUrlParameters" class="sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
class="sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10"> <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10"> <h2 class="font-bold text-lg">An error occured</h2>
<h2 class="font-bold text-lg">An error occured</h2> <span class="text-sm">{{ error_description }}</span>
<span class="text-sm">{{ error_description }}</span>
</div>
<VeeForm class="space-y-6" method="POST" :validation-schema="schema"
:action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
<VeeField name="identifier" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Username or Email" placeholder="joemama" autocomplete="email" required
:is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="identifier" as="p" class="mt-2 text-sm text-red-600"
v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="Password here" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<div v-if="ssoConfig && ssoConfig.providers.length > 0" class="w-full flex flex-col gap-3">
<h2 class="text-sm text-gray-200">Or sign in with</h2>
<div class="grid grid-cols-1 gap-4 w-full">
<a v-for="provider of ssoConfig.providers" :key="provider.id"
:href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
<ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
<img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
class="w-6 h-6" />
<div class="flex flex-col gap-0 justify-center">
<h3 class="font-bold">{{ provider.name }}</h3>
</div>
</ButtonsSecondary>
</a>
</div>
</div>
<ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
</VeeForm>
</div> </div>
<div v-else class="mx-auto max-w-md"> <VeeForm class="space-y-6" method="POST" :validation-schema="schema"
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access :action="`/api/auth/login?redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
parameters <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Login to your account</h1>
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed <VeeField name="identifier" as="div" v-slot="{ errors, field }" validate-on-change>
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon <LoginInput label="Username or Email" placeholder="joemama" autocomplete="email" required
API</strong> client to access this page. :is-invalid="errors.length > 0" v-bind="field" />
</p> <VeeErrorMessage name="identifier" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p> {{ message }}
<ul class="w-full flex flex-col gap-3 mt-4"> </VeeErrorMessage>
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full"> </VeeField>
<a :href="client.link" target="_blank"
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center"> <VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`" <LoginInput label="Password" placeholder="Password here" type="password"
class="h-10 w-10" /> autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<div class="flex flex-col justify-between items-start"> <VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2> {{ message }}
<span class="underline text-pink-700">{{ client.link }}</span> </VeeErrorMessage>
</div> </VeeField>
<div v-if="ssoConfig && ssoConfig.providers.length > 0" class="w-full flex flex-col gap-3">
<h2 class="text-sm text-gray-200">Or sign in with</h2>
<div class="grid grid-cols-1 gap-4 w-full">
<a v-for="provider of ssoConfig.providers" :key="provider.id"
:href="`/oauth/sso?issuer=${provider.id}&redirect_uri=${redirect_uri}&response_type=${response_type}&client_id=${client_id}&scope=${scope}`">
<ButtonsSecondary class="flex flex-row w-full items-center justify-center gap-3">
<img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
class="w-6 h-6" />
<div class="flex flex-col gap-0 justify-center">
<h3 class="font-bold">{{ provider.name }}</h3>
</div>
</ButtonsSecondary>
</a> </a>
</li> </div>
</ul> </div>
<p class="mt-6 text-lg leading-8 text-gray-300">
Many other clients exist, but <strong class="font-bold">they have not been tested for
compatibility</strong>. Bug reports are nevertheless welcome.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300"> <ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" </VeeForm>
target="_blank" class="underline text-pink-700">the issue tracker</a>. </div>
</p> <div v-else class="mx-auto max-w-md">
</div> <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
</ClientOnly> parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
API</strong> client to access this page.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<a :href="client.link" target="_blank"
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
class="h-10 w-10" />
<div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
</div>
</a>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
Many other clients exist, but <strong class="font-bold">they have not been tested for
compatibility</strong>. Bug reports are nevertheless welcome.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</div> </div>
</template> </template>

38
pages/oauth/code.vue
View file

@ -1,27 +1,25 @@
<template> <template>
<ClientOnly> <div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
<div class="mx-auto max-w-md mt-10"> <div class="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
</h1> </h1>
<p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is <p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
</p> </p>
<div class="prose prose-invert select-all mt-6"> <div class="prose prose-invert select-all mt-6">
<pre <pre
class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre> class="overflow-x-hidden whitespace-normal break-all bg-dark-500 ring-1 ring-white/10"><code class="text-wrap max-w-full">{{ code }}</code></pre>
</div>
<p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
to.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div> </div>
<p class="mt-6 text-lg leading-8 text-gray-300">Paste this code into the application you are signing in
to.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div> </div>
</ClientOnly> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

170
pages/oauth/consent.vue
View file

@ -1,89 +1,85 @@
<template> <template>
<ClientOnly> <div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8">
<div class="flex min-h-screen relative flex-col justify-center px-6 py-12 lg:px-8"> <div v-if="validUrlParameters" class="sm:mx-auto sm:w-full sm:max-w-sm">
<div v-if="validUrlParameters" class="sm:mx-auto sm:w-full sm:max-w-sm"> <form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
<form class="space-y-6" method="POST" <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
:action="url.pathname.replace('/oauth/consent', '/oauth/authorize')"> <div class="flex flex-col items-center gap-y-5">
<input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
:value="value" /> access your
<div class="flex flex-col items-center gap-y-5"> account?</h1>
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to <div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
access your <h2 class="font-bold text-gray-200">{{ application }}</h2>
account?</h1> <a v-if="website" :href="website" target="_blank" class="underline text-pink-700">{{ website
<div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full"> }}</a>
<h2 class="font-bold text-gray-200">{{ application }}</h2>
<a v-if="website" :href="website" target="_blank" class="underline text-pink-700">{{ website
}}</a>
</div>
</div> </div>
</div>
<h2 class="text-gray-50 tracking-tight text-xl font-semibold"> <h2 class="text-gray-50 tracking-tight text-xl font-semibold">
This application will be able to: This application will be able to:
</h2> </h2>
<ul class="flex flex-col gap-y-1.5"> <ul class="flex flex-col gap-y-1.5">
<li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1"> <li v-for="text in getScopeText(scopes)" :key="text[1]" class="flex flex-row gap-1">
<svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor" <svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
viewBox="0 0 16 16"> viewBox="0 0 16 16">
<path <path
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" /> d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z" />
</svg> </svg>
<h2 class="text-sm text-gray-200"> <h2 class="text-sm text-gray-200">
<strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }} <strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
</h2> </h2>
</li>
</ul>
<div class="flex-col flex gap-y-1">
<p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
account.</p>
<p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above
account
actions.</p>
</div>
<div class="flex flex-col gap-3">
<ButtonsPrimary type="submit">Authorize</ButtonsPrimary>
<NuxtLink href="/" class="w-full">
<ButtonsSecondary class="w-full">Cancel</ButtonsSecondary>
</NuxtLink>
</div>
</form>
</div>
<div v-else class="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
API</strong> client to access this page.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<a :href="client.link" target="_blank"
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
class="h-10 w-10" />
<div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
</div>
</a>
</li> </li>
</ul> </ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
Many other clients exist, but <strong class="font-bold">they have not been tested for
compatibility</strong>. Bug reports are nevertheless welcome.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300"> <div class="flex-col flex gap-y-1">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" <p class="text-sm text-gray-200">You are signing in to <b>{{ application }}</b> with your
target="_blank" class="underline text-pink-700">the issue tracker</a>. account.</p>
</p> <p class="text-sm text-gray-200">This allows <b>{{ application }}</b> to perform the above
</div> account
actions.</p>
</div>
<div class="flex flex-col gap-3">
<ButtonsPrimary type="submit">Authorize</ButtonsPrimary>
<NuxtLink href="/" class="w-full">
<ButtonsSecondary class="w-full">Cancel</ButtonsSecondary>
</NuxtLink>
</div>
</form>
</div> </div>
</ClientOnly> <div v-else class="mx-auto max-w-md mt-10">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
through a valid OAuth2 authorization request. Please use a <strong class="font-bold">Mastodon
API</strong> client to access this page.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
<ul class="w-full flex flex-col gap-3 mt-4">
<li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
<a :href="client.link" target="_blank"
class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
<img crossorigin="anonymous" :src="client.icon" :alt="`${client.name}'s logo'`"
class="h-10 w-10" />
<div class="flex flex-col justify-between items-start">
<h2 class="font-bold text-gray-100">{{ client.name }}</h2>
<span class="underline text-pink-700">{{ client.link }}</span>
</div>
</a>
</li>
</ul>
<p class="mt-6 text-lg leading-8 text-gray-300">
Many other clients exist, but <strong class="font-bold">they have not been tested for
compatibility</strong>. Bug reports are nevertheless welcome.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -136,43 +132,43 @@ const getScopeText = (fullScopes: string[]) => {
const [scopeAction, scopeName] = possibleScope.split(":"); const [scopeAction, scopeName] = possibleScope.split(":");
if ( if (
scopeAction.includes("rw") && scopeAction?.includes("rw") &&
(readScopes.includes(`read:${scopeName}`) || (readScopes.includes(`read:${scopeName}`) ||
readScopes.find((scope) => scope === "read")) && readScopes.find((scope) => scope === "read")) &&
(writeScopes.includes(`write:${scopeName}`) || (writeScopes.includes(`write:${scopeName}`) ||
writeScopes.find((scope) => scope === "write")) writeScopes.find((scope) => scope === "write"))
) { ) {
if (oauthScopeText[possibleScope].includes("$VERB")) if (oauthScopeText[possibleScope]?.includes("$VERB"))
scopeTexts.push([ scopeTexts.push([
"Read and write", "Read and write",
oauthScopeText[possibleScope].replace("$VERB", ""), oauthScopeText[possibleScope]?.replace("$VERB", ""),
]); ]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]); else scopeTexts.push(["", oauthScopeText[possibleScope]]);
continue; continue;
} }
if ( if (
scopeAction.includes("r") && scopeAction?.includes("r") &&
(readScopes.includes(`read:${scopeName}`) || (readScopes.includes(`read:${scopeName}`) ||
readScopes.find((scope) => scope === "read")) readScopes.find((scope) => scope === "read"))
) { ) {
if (oauthScopeText[possibleScope].includes("$VERB")) if (oauthScopeText[possibleScope]?.includes("$VERB"))
scopeTexts.push([ scopeTexts.push([
"Read", "Read",
oauthScopeText[possibleScope].replace("$VERB", ""), oauthScopeText[possibleScope]?.replace("$VERB", ""),
]); ]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]); else scopeTexts.push(["", oauthScopeText[possibleScope]]);
} }
if ( if (
scopeAction.includes("w") && scopeAction?.includes("w") &&
(writeScopes.includes(`write:${scopeName}`) || (writeScopes.includes(`write:${scopeName}`) ||
writeScopes.find((scope) => scope === "write")) writeScopes.find((scope) => scope === "write"))
) { ) {
if (oauthScopeText[possibleScope].includes("$VERB")) if (oauthScopeText[possibleScope]?.includes("$VERB"))
scopeTexts.push([ scopeTexts.push([
"Write", "Write",
oauthScopeText[possibleScope].replace("$VERB", ""), oauthScopeText[possibleScope]?.replace("$VERB", ""),
]); ]);
else scopeTexts.push(["", oauthScopeText[possibleScope]]); else scopeTexts.push(["", oauthScopeText[possibleScope]]);
} }

106
pages/oauth/reset.vue
View file

@ -2,63 +2,61 @@
<div class="flex min-h-screen relative flex-col justify-center py-12 px-8"> <div class="flex min-h-screen relative flex-col justify-center py-12 px-8">
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo" <img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
class="mx-auto h-24 hidden md:block mb-10" /> class="mx-auto h-24 hidden md:block mb-10" />
<ClientOnly> <div v-if="validUrlParameters"
<div v-if="validUrlParameters" class="sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10">
class="sm:mx-auto w-full sm:max-w-md px-10 py-10 rounded md:ring-1 md:ring-white/10"> <div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
<div v-if="error" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10"> <h2 class="font-bold text-lg">An error occured</h2>
<h2 class="font-bold text-lg">An error occured</h2> <span class="text-sm">{{ error_description }}</span>
<span class="text-sm">{{ error_description }}</span>
</div>
<VeeForm class="space-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
<input type="hidden" name="token" :value="token" />
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="Password here" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Confirm password" placeholder="Confirm password" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<p class="mt-6 text-sm leading-8 font-semibold text-red-300">This will reset your
password. Be sure to put it in a password manager.
</p>
<ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
</VeeForm>
</div> </div>
<div v-else-if="success"> <VeeForm class="space-y-6" method="POST" :validation-schema="schema" action="/api/auth/reset">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset <input type="hidden" name="token" :value="token" />
successful!
</h1> <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Reset your password</h1>
<p class="mt-6 text-lg leading-8 text-gray-300 text-center">
You can now login to your account with your new password. <VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
</p> <LoginInput label="Password" placeholder="Password here" type="password"
</div> autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<div v-else class="mx-auto max-w-md"> <VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access {{ message }}
parameters </VeeErrorMessage>
</h1> </VeeField>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
through a valid password reset request. Please ask your admin to reset your password. <VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Confirm password" placeholder="Confirm password" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field" />
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<p class="mt-6 text-sm leading-8 font-semibold text-red-300">This will reset your
password. Be sure to put it in a password manager.
</p> </p>
<p class="mt-6 text-lg leading-8 text-gray-300"> <ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose" </VeeForm>
target="_blank" class="underline text-pink-700">the issue tracker</a>. </div>
</p> <div v-else-if="success">
</div> <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
</ClientOnly> successful!
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300 text-center">
You can now login to your account with your new password.
</p>
</div>
<div v-else class="mx-auto max-w-md">
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Invalid access
parameters
</h1>
<p class="mt-6 text-lg leading-8 text-gray-300">This page should be accessed
through a valid password reset request. Please ask your admin to reset your password.
</p>
<p class="mt-6 text-lg leading-8 text-gray-300">
Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
target="_blank" class="underline text-pink-700">the issue tracker</a>.
</p>
</div>
</div> </div>
</template> </template>

165
pages/register/index.vue
View file

@ -1,94 +1,90 @@
<template> <template>
<ClientOnly> <div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative">
<div class="flex min-h-screen flex-col justify-center px-6 py-12 gap-10 lg:px-8 relative"> <img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo"
<img crossorigin="anonymous" src="https://cdn.lysand.org/logo-long-dark.webp" alt="Lysand logo" class="mx-auto h-24 hidden md:block" />
class="mx-auto h-24 hidden md:block" /> <div v-if="instance && instance.registrations" class="mx-auto w-full max-w-md">
<div v-if="instance && instance.registrations" class="mx-auto w-full max-w-md"> <div v-if="Object.keys(errors).length > 0"
<div v-if="Object.keys(errors).length > 0" class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10"> <h2 class="font-bold text-lg">Error</h2>
<h2 class="font-bold text-lg">Error</h2> <span class="text-sm">{{ errors.error }}</span>
<span class="text-sm">{{ errors.error }}</span>
</div>
<VeeForm class="space-y-6" @submit="register as any" :validation-schema="schema">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Register</h1>
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="username" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Username" placeholder="thespeedy" type="text" autocomplete="username"
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="username" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }} (must only contain lowercase letters, numbers and underscores)
</VeeErrorMessage>
</VeeField>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="hunter2" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
:disabled="isLoading" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Confirm password" placeholder="hunter2" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
:disabled="isLoading" />
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="reason" as="div" v-slot="{ errors }" validate-on-change>
<label for="reason" class="block text-sm font-medium leading-6 text-gray-50">Why do you want to
join?</label>
<div class="mt-2">
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason"
:disabled="isLoading" placeholder="Brief text (optional)"
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
</div>
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
<input type="checkbox" :disabled="isLoading" name="tos"
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
required />
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
"Register" }}</ButtonsPrimary>
</VeeForm>
</div>
<div v-else>
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
disabled
</h1>
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
config!
</p>
</div> </div>
<VeeForm class="space-y-6" @submit="register as any" :validation-schema="schema">
<h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Register</h1>
<VeeField name="email" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Email" placeholder="contact@cpluspatch.com" type="email" autocomplete="email"
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="email" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="username" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Username" placeholder="thespeedy" type="text" autocomplete="username" required
:is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="username" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }} (must only contain lowercase letters, numbers and underscores)
</VeeErrorMessage>
</VeeField>
<VeeField name="password" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Password" placeholder="hunter2" type="password" autocomplete="current-password"
required :is-invalid="errors.length > 0" v-bind="field" :disabled="isLoading" />
<VeeErrorMessage name="password" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="password2" as="div" v-slot="{ errors, field }" validate-on-change>
<LoginInput label="Confirm password" placeholder="hunter2" type="password"
autocomplete="current-password" required :is-invalid="errors.length > 0" v-bind="field"
:disabled="isLoading" />
<VeeErrorMessage name="password2" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="reason" as="div" v-slot="{ errors }" validate-on-change>
<label for="reason" class="block text-sm font-medium leading-6 text-gray-50">Why do you want to
join?</label>
<div class="mt-2">
<textarea rows="4" required :is-invalid="errors.length > 0" name="reason" :disabled="isLoading"
placeholder="Brief text (optional)"
class="block w-full disabled:opacity-70 disabled:hover:cursor-wait bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-pink-600 sm:text-sm sm:leading-6" />
</div>
<VeeErrorMessage name="reason" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<VeeField name="tos" as="div" v-slot="{ errors, field }" validate-on-change>
<input type="checkbox" :disabled="isLoading" name="tos"
class="rounded disabled:hover:cursor-wait mr-1 align-middle mb-0.5 text-pink-700 !ring-0 !outline-none"
required />
<span class="text-sm text-gray-100">I agree to the terms and conditions of this server <a
class="underline font-bold" target="_blank" :href="'#'">available here</a></span>
<VeeErrorMessage name="tos" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
{{ message }}
</VeeErrorMessage>
</VeeField>
<ButtonsPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
"Register" }}</ButtonsPrimary>
</VeeForm>
</div> </div>
</ClientOnly> <div v-else>
<h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Registrations are
disabled
</h1>
<p class="mt-6 text-lg leading-8 text-gray-200 text-center">Ask this instance's admin to enable them in
config!
</p>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { toTypedSchema } from "@vee-validate/zod"; import { toTypedSchema } from "@vee-validate/zod";
import type { AxiosError } from "axios";
import { z } from "zod"; import { z } from "zod";
import LoginInput from "../../components/LoginInput.vue"; import LoginInput from "../../components/LoginInput.vue";
// TODO: Add instance TOS link // TODO: Add instance TOS link
@ -150,7 +146,6 @@ const register = (result: {
navigateTo("/register/success"); navigateTo("/register/success");
}) })
.catch(async (err) => { .catch(async (err) => {
const error = err as AxiosError;
// @ts-ignore // @ts-ignore
errors.value = error.response?.data || {}; errors.value = error.response?.data || {};
console.error(err); console.error(err);