From 2266dcd7258ff16c2cebcfdf68651bcf9156b071 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 15 Jun 2024 11:18:58 -1000
Subject: [PATCH] feat: :sparkles: Make whole app client-only, add noscript
 fallback

---
 app.vue                                      |  11 +-
 components/errors/noscript.vue               |  23 +++
 components/graphics/square-pattern.vue       |  19 ++
 components/headers/greeting.vue              |  30 ++-
 components/loading.vue                       |   2 +-
 components/sidebars/navigation.vue           | 155 ++++++++--------
 components/social-elements/users/Account.vue | 184 +++++++++----------
 components/timelines/Notifications.vue       |  20 +-
 components/timelines/timeline.vue            |  25 ++-
 composables/CacheRefresh.ts                  |   5 +-
 composables/Instance.ts                      |   9 +-
 layouts/app.vue                              |  30 +--
 pages/[username]/[uuid].vue                  |  20 +-
 pages/notifications.vue                      |  38 ++--
 pages/oauth/authorize.vue                    | 151 ++++++++-------
 pages/oauth/code.vue                         |  38 ++--
 pages/oauth/consent.vue                      | 170 +++++++++--------
 pages/oauth/reset.vue                        | 106 ++++++-----
 pages/register/index.vue                     | 165 ++++++++---------
 19 files changed, 597 insertions(+), 604 deletions(-)
 create mode 100644 components/errors/noscript.vue
 create mode 100644 components/graphics/square-pattern.vue

diff --git a/app.vue b/app.vue
index 0a849df..05cc9d4 100644
--- a/app.vue
+++ b/app.vue
@@ -4,10 +4,15 @@
     <PwaAppleImage image="/logo.webp" />
     <PwaMaskableImage image="/logo.webp" />
     <Loading />
-    <NuxtLayout>
-        <NuxtPage />
-    </NuxtLayout>
+    <ClientOnly>
+        <NuxtLayout>
+            <NuxtPage />
+        </NuxtLayout>
+    </ClientOnly>
     <NotificationsRenderer />
+    <noscript>
+        <ErrorsNoscript />
+    </noscript>
 </template>
 
 <script setup lang="ts">
diff --git a/components/errors/noscript.vue b/components/errors/noscript.vue
new file mode 100644
index 0000000..4910243
--- /dev/null
+++ b/components/errors/noscript.vue
@@ -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>
\ No newline at end of file
diff --git a/components/graphics/square-pattern.vue b/components/graphics/square-pattern.vue
new file mode 100644
index 0000000..83a1b96
--- /dev/null
+++ b/components/graphics/square-pattern.vue
@@ -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>
\ No newline at end of file
diff --git a/components/headers/greeting.vue b/components/headers/greeting.vue
index 13f3931..61431b2 100644
--- a/components/headers/greeting.vue
+++ b/components/headers/greeting.vue
@@ -1,26 +1,24 @@
 <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 class="sm:flex sm:items-center sm:justify-between gap-3">
-                <div class="sm:flex sm:space-x-5 grow">
-                    <AvatarsCentered :src="identity.account.avatar"
-                        class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
-                        :alt="'Your avatar'" />
-                    <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">
-                        <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"
-                            v-html="useParsedContent(identity.account.display_name, []).value"></p>
-                    </div>
+    <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:space-x-5 grow">
+                <AvatarsCentered :src="identity.account.avatar"
+                    class="mx-auto shrink-0 size-20 rounded overflow-hidden ring-1 ring-white/10"
+                    :alt="'Your avatar'" />
+                <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">
+                    <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"
+                        v-html="useParsedContent(identity.account.display_name, []).value"></p>
                 </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')">
                         Compose
                     </ButtonsSecondary>
                 </div> -->
-            </div>
         </div>
-    </ClientOnly>
+    </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/components/loading.vue b/components/loading.vue
index 5b13be8..ab86d7d 100644
--- a/components/loading.vue
+++ b/components/loading.vue
@@ -3,7 +3,7 @@
         <!-- 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="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>
 </template>
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 55de87d..334f318 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -4,104 +4,102 @@
         aria-label="Navigation" role="complementary">
         <NuxtLink href="/">
             <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>
 
         <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">
                 Timelines</h3>
-            <ClientOnly>
-                <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
-                    <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">
-                        <iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
-                        <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
-                    </ButtonsBase>
-                </NuxtLink>
-            </ClientOnly>
+
+            <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
+                <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">
+                    <iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
+                    <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
+                </ButtonsBase>
+            </NuxtLink>
+
         </div>
 
         <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">
                 Account</h3>
-            <ClientOnly>
-                <SidebarsAccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
-                    @sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
-                <NuxtLink href="/register" v-if="!identity">
-                    <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">
-                        <iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
-                        <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>
+
+            <SidebarsAccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
+                @sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
+            <NuxtLink href="/register" v-if="!identity">
+                <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">
+                    <iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
+                    <span class="pr-28 line-clamp-1">Register</span>
                 </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>
-            </ClientOnly>
+            </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 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>
     </aside>
     <!-- Mobile bottom navbar -->
     <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">
-        <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>
-                    <Menu.Item value="" v-for="timeline in visibleTimelines" :key="timeline.href">
-                        <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)">
+        <DropdownsAdaptiveDropdown>
+            <template #button>
                 <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>
+                    <iconify-icon icon="tabler:home" class="text-2xl" />
+                    <span class="text-xs">Timelines</span>
                 </button>
-            </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>
+            </template>
+
+            <template #items>
+                <Menu.Item value="" v-for="timeline in visibleTimelines" :key="timeline.href">
+                    <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>
-        </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>
 </template>
 
@@ -145,6 +143,7 @@ const appData = useAppData();
 const identity = useCurrentIdentity();
 const identities = useIdentities();
 const client = useClient();
+const instance = useInstance();
 
 const compose = () => {
     useEvent("composer:open");
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index 145c40c..9463312 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -1,104 +1,100 @@
 <template>
-    <ClientOnly>
-        <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'`"
-                class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700 !rounded-none" />
+    <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'`"
+            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">
-                <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" />
+        <div class="flex items-start justify-between px-4 py-3">
+            <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" />
 
-                <ClientOnly>
-                    <ButtonsSecondary v-if="account && account?.id === identity?.account?.id">Edit Profile
-                    </ButtonsSecondary>
-                    <ButtonsSecondary :loading="isLoading" @click="follow()"
-                        v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
-                        <span>Follow</span>
-                    </ButtonsSecondary>
-                    <ButtonsSecondary :loading="isLoading" @click="unfollow()"
-                        v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
-                        <span>Unfollow</span>
-                    </ButtonsSecondary>
-                    <ButtonsSecondary :loading="isLoading" :disabled="true"
-                        v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
-                        <span>Requested</span>
-                    </ButtonsSecondary>
-                </ClientOnly>
-            </div>
+            <ButtonsSecondary v-if="account && account?.id === identity?.account?.id">Edit Profile
+            </ButtonsSecondary>
+            <ButtonsSecondary :loading="isLoading" @click="follow()"
+                v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
+                <span>Follow</span>
+            </ButtonsSecondary>
+            <ButtonsSecondary :loading="isLoading" @click="unfollow()"
+                v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
+                <span>Unfollow</span>
+            </ButtonsSecondary>
+            <ButtonsSecondary :loading="isLoading" :disabled="true"
+                v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
+                <span>Requested</span>
+            </ButtonsSecondary>
+        </div>
 
-            <div class="mt-2 px-4">
-                <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">
-                    <Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
-                        {{ account?.display_name }}
-                        <iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
-                            class="text-gray-400 cursor-pointer align-text-top"
-                            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">
+        <div class="mt-2 px-4">
+            <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">
+                <Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
+                    {{ account?.display_name }}
+                    <iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
+                        class="text-gray-400 cursor-pointer align-text-top"
+                        title="This account manually approves its followers" />
                 </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>
+            </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>
-    </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>
 
 <script lang="ts" setup>
diff --git a/components/timelines/Notifications.vue b/components/timelines/Notifications.vue
index 92a41b4..969f8a6 100644
--- a/components/timelines/Notifications.vue
+++ b/components/timelines/Notifications.vue
@@ -1,16 +1,12 @@
 <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" />
-        <span ref="skeleton"></span>
-        <SocialElementsNotificationsNotif v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
-
-        <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>
+    <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>
 </template>
 
 <script lang="ts" setup>
@@ -29,7 +25,7 @@ const skeleton = ref<HTMLSpanElement | null>(null);
 onMounted(() => {
     useIntersectionObserver(skeleton, async (entries) => {
         if (
-            entries[0].isIntersecting &&
+            entries[0]?.isIntersecting &&
             !hasReachedEnd.value &&
             !isLoading.value
         ) {
diff --git a/components/timelines/timeline.vue b/components/timelines/timeline.vue
index adea9a0..a3e28c4 100644
--- a/components/timelines/timeline.vue
+++ b/components/timelines/timeline.vue
@@ -1,18 +1,15 @@
 <template>
-    <ClientOnly>
-        <TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
-            leave-to-class="opacity-0 scale-90">
-            <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
-        </TransitionGroup>
-        <span ref="skeleton"></span>
-        <LazySocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
+    <TransitionGroup leave-active-class="ease-in duration-200" leave-from-class="scale-100 opacity-100"
+        leave-to-class="opacity-0 scale-90">
+        <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
+    </TransitionGroup>
+    <span ref="skeleton"></span>
+    <LazySocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
 
-        <div v-if="hasReachedEnd"
-            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" />
-            <span>No more posts, you've seen them all</span>
-        </div>
-    </ClientOnly>
+    <div v-if="hasReachedEnd" 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" />
+        <span>No more posts, you've seen them all</span>
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -32,7 +29,7 @@ const skeleton = ref<HTMLSpanElement | null>(null);
 onMounted(() => {
     useIntersectionObserver(skeleton, async (entries) => {
         if (
-            entries[0].isIntersecting &&
+            entries[0]?.isIntersecting &&
             !hasReachedEnd.value &&
             !isLoading.value
         ) {
diff --git a/composables/CacheRefresh.ts b/composables/CacheRefresh.ts
index 88dd974..917fc7c 100644
--- a/composables/CacheRefresh.ts
+++ b/composables/CacheRefresh.ts
@@ -2,10 +2,9 @@ import type { LysandClient } from "@lysand-org/client";
 import { type RolePermissions, useCurrentIdentity } from "./Identities";
 
 export const useCacheRefresh = (client: MaybeRef<LysandClient | null>) => {
-    if (process.server) return;
+    if (import.meta.server) return;
 
     const identity = useCurrentIdentity();
-    const instance = useInstance();
 
     // Refresh custom emojis and instance data and me on every reload
     watchEffect(async () => {
@@ -56,7 +55,7 @@ export const useCacheRefresh = (client: MaybeRef<LysandClient | null>) => {
         toValue(client)
             ?.getInstance()
             .then((res) => {
-                instance.value = res.data;
+                if (identity.value) identity.value.instance = res.data;
             });
     });
 };
diff --git a/composables/Instance.ts b/composables/Instance.ts
index 79f8221..9098954 100644
--- a/composables/Instance.ts
+++ b/composables/Instance.ts
@@ -1,15 +1,10 @@
 import type { LysandClient } from "@lysand-org/client";
-import { StorageSerializers } from "@vueuse/core";
 
 // Return type of LysandClient.getInstance
 export type Instance = Awaited<ReturnType<LysandClient["getInstance"]>>["data"];
 
 export const useInstance = () => {
-    if (process.server) {
-        return ref(null);
-    }
+    const identity = useCurrentIdentity();
 
-    return useLocalStorage<Instance | null>("lysand:instance", null, {
-        serializer: StorageSerializers.object,
-    });
+    return computed(() => identity.value?.instance);
 };
diff --git a/layouts/app.vue b/layouts/app.vue
index bcfa587..2eac2a9 100644
--- a/layouts/app.vue
+++ b/layouts/app.vue
@@ -1,31 +1,18 @@
 <template>
     <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)]"
-            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>
+        <GraphicsSquarePattern />
         <LazySidebarsNavigation />
 
         <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'">
                 <slot />
             </OverlayScrollbarsComponent>
-            <ClientOnly>
-                <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">
-                    <LazyTimelinesTimelineScroller>
-                        <LazyTimelinesNotifications />
-                    </LazyTimelinesTimelineScroller>
-                    <!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
+            <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">
+                <LazyTimelinesTimelineScroller>
+                    <LazyTimelinesNotifications />
+                </LazyTimelinesTimelineScroller>
+                <!-- <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">
                             <strong
                                 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>
                         </NuxtLink>
                     </div> -->
-                </LazySidebarsCollapsibleAside>
-            </ClientOnly>
+            </LazySidebarsCollapsibleAside>
         </div>
     </div>
     <LazyComposerModal />
diff --git a/pages/[username]/[uuid].vue b/pages/[username]/[uuid].vue
index b6272c2..1f1d00a 100644
--- a/pages/[username]/[uuid].vue
+++ b/pages/[username]/[uuid].vue
@@ -1,16 +1,14 @@
 <template>
-    <ClientOnly>
-        <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" />
-            <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" />
-            </div>
-            <LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
+    <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" />
+        <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" />
         </div>
-        <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
-            <LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
-        </div>
-    </ClientOnly>
+        <LazySocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
+    </div>
+    <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
+        <LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 4b5c77b..277d226 100644
--- a/pages/notifications.vue
+++ b/pages/notifications.vue
@@ -1,25 +1,23 @@
 <template>
-    <ClientOnly>
-        <div class="mx-auto max-w-2xl w-full">
-            <div class="shrink-0 p-10 h-dvh" v-if="!identity">
-                <button type="button"
-                    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" />
-                    <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
-                        will
-                        appear here
-                        when you
-                        sign in</span>
-                </button>
-            </div>
-            <LazyTimelinesTimelineScroller v-else>
-                <LazyHeadersGreeting />
-                <div class="rounded overflow-hidden ring-1 ring-white/10">
-                    <LazyTimelinesNotifications />
-                </div>
-            </LazyTimelinesTimelineScroller>
+    <div class="mx-auto max-w-2xl w-full">
+        <div class="shrink-0 p-10 h-dvh" v-if="!identity">
+            <button type="button"
+                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" />
+                <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
+                    will
+                    appear here
+                    when you
+                    sign in</span>
+            </button>
         </div>
-    </ClientOnly>
+        <LazyTimelinesTimelineScroller v-else>
+            <LazyHeadersGreeting />
+            <div class="rounded overflow-hidden ring-1 ring-white/10">
+                <LazyTimelinesNotifications />
+            </div>
+        </LazyTimelinesTimelineScroller>
+    </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index 8774d63..fb73e7e 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -2,86 +2,83 @@
     <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"
             class="mx-auto h-24 hidden md:block mb-10" />
-        <ClientOnly>
-            <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">
-                <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>
-                    <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 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">
+            <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>
+                <span class="text-sm">{{ error_description }}</span>
             </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 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>
+            <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>
-                    </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>
+                    </div>
+                </div>
 
-                <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>
-        </ClientOnly>
+                <ButtonsPrimary type="submit" class="w-full">Sign in</ButtonsPrimary>
+            </VeeForm>
+        </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 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>
 
diff --git a/pages/oauth/code.vue b/pages/oauth/code.vue
index b0885cf..2a9c37b 100644
--- a/pages/oauth/code.vue
+++ b/pages/oauth/code.vue
@@ -1,27 +1,25 @@
 <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">
-                <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl">Here's your code
-                </h1>
-                <p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
-                </p>
-                <div class="prose prose-invert select-all mt-6">
-                    <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 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>
+            <p class="mt-6 text-lg leading-8 text-gray-300">You have signed in successfully. Your code is
+            </p>
+            <div class="prose prose-invert select-all mt-6">
+                <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>
-    </ClientOnly>
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index 9294674..abdc259 100644
--- a/pages/oauth/consent.vue
+++ b/pages/oauth/consent.vue
@@ -1,89 +1,85 @@
 <template>
-    <ClientOnly>
-        <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">
-                <form class="space-y-6" method="POST"
-                    :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
-                    <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key"
-                        :value="value" />
-                    <div class="flex flex-col items-center gap-y-5">
-                        <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
-                            access your
-                            account?</h1>
-                        <div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
-                            <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 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">
+            <form class="space-y-6" method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')">
+                <input type="hidden" v-for="([key, value]) in url.searchParams" :key="key" :name="key" :value="value" />
+                <div class="flex flex-col items-center gap-y-5">
+                    <h1 class="font-bold text-2xl text-gray-50 text-center tracking-tight">Allow this application to
+                        access your
+                        account?</h1>
+                    <div v-if="application" class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full">
+                        <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>
 
-                    <h2 class="text-gray-50 tracking-tight text-xl font-semibold">
-                        This application will be able to:
-                    </h2>
+                <h2 class="text-gray-50 tracking-tight text-xl font-semibold">
+                    This application will be able to:
+                </h2>
 
-                    <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">
-                            <svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-                                viewBox="0 0 16 16">
-                                <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" />
-                            </svg>
-                            <h2 class="text-sm text-gray-200">
-                                <strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
-                            </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>
+                <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">
+                        <svg class="fill-pink-600 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
+                            viewBox="0 0 16 16">
+                            <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" />
+                        </svg>
+                        <h2 class="text-sm text-gray-200">
+                            <strong class="font-bold">{{ text[0] }}</strong> {{ text[1] }}
+                        </h2>
                     </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 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>
-    </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>
 
 <script setup lang="ts">
@@ -136,43 +132,43 @@ const getScopeText = (fullScopes: string[]) => {
         const [scopeAction, scopeName] = possibleScope.split(":");
 
         if (
-            scopeAction.includes("rw") &&
+            scopeAction?.includes("rw") &&
             (readScopes.includes(`read:${scopeName}`) ||
                 readScopes.find((scope) => scope === "read")) &&
             (writeScopes.includes(`write:${scopeName}`) ||
                 writeScopes.find((scope) => scope === "write"))
         ) {
-            if (oauthScopeText[possibleScope].includes("$VERB"))
+            if (oauthScopeText[possibleScope]?.includes("$VERB"))
                 scopeTexts.push([
                     "Read and write",
-                    oauthScopeText[possibleScope].replace("$VERB", ""),
+                    oauthScopeText[possibleScope]?.replace("$VERB", ""),
                 ]);
             else scopeTexts.push(["", oauthScopeText[possibleScope]]);
             continue;
         }
 
         if (
-            scopeAction.includes("r") &&
+            scopeAction?.includes("r") &&
             (readScopes.includes(`read:${scopeName}`) ||
                 readScopes.find((scope) => scope === "read"))
         ) {
-            if (oauthScopeText[possibleScope].includes("$VERB"))
+            if (oauthScopeText[possibleScope]?.includes("$VERB"))
                 scopeTexts.push([
                     "Read",
-                    oauthScopeText[possibleScope].replace("$VERB", ""),
+                    oauthScopeText[possibleScope]?.replace("$VERB", ""),
                 ]);
             else scopeTexts.push(["", oauthScopeText[possibleScope]]);
         }
 
         if (
-            scopeAction.includes("w") &&
+            scopeAction?.includes("w") &&
             (writeScopes.includes(`write:${scopeName}`) ||
                 writeScopes.find((scope) => scope === "write"))
         ) {
-            if (oauthScopeText[possibleScope].includes("$VERB"))
+            if (oauthScopeText[possibleScope]?.includes("$VERB"))
                 scopeTexts.push([
                     "Write",
-                    oauthScopeText[possibleScope].replace("$VERB", ""),
+                    oauthScopeText[possibleScope]?.replace("$VERB", ""),
                 ]);
             else scopeTexts.push(["", oauthScopeText[possibleScope]]);
         }
diff --git a/pages/oauth/reset.vue b/pages/oauth/reset.vue
index c5574dd..9f0af49 100644
--- a/pages/oauth/reset.vue
+++ b/pages/oauth/reset.vue
@@ -2,63 +2,61 @@
     <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"
             class="mx-auto h-24 hidden md:block mb-10" />
-        <ClientOnly>
-            <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">
-                <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>
-                    <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 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">
+            <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>
+                <span class="text-sm">{{ error_description }}</span>
             </div>
-            <div v-else-if="success">
-                <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
-                    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.
+            <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>
 
-                <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>
-        </ClientOnly>
+                <ButtonsPrimary type="submit" class="w-full">Reset</ButtonsPrimary>
+            </VeeForm>
+        </div>
+        <div v-else-if="success">
+            <h1 class="text-2xl font-bold tracking-tight text-gray-50 sm:text-4xl text-center">Password reset
+                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>
 </template>
 
diff --git a/pages/register/index.vue b/pages/register/index.vue
index 11a64a0..b7d351e 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -1,94 +1,90 @@
 <template>
-    <ClientOnly>
-        <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"
-                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="Object.keys(errors).length > 0"
-                    class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
-                    <h2 class="font-bold text-lg">Error</h2>
-                    <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 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"
+            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="Object.keys(errors).length > 0"
+                class="ring-1 ring-white/10 rounded p-4 bg-red-500 text-white mb-10">
+                <h2 class="font-bold text-lg">Error</h2>
+                <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>
-    </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>
 
 <script setup lang="ts">
 import { toTypedSchema } from "@vee-validate/zod";
-import type { AxiosError } from "axios";
 import { z } from "zod";
 import LoginInput from "../../components/LoginInput.vue";
 // TODO: Add instance TOS link
@@ -150,7 +146,6 @@ const register = (result: {
             navigateTo("/register/success");
         })
         .catch(async (err) => {
-            const error = err as AxiosError;
             // @ts-ignore
             errors.value = error.response?.data || {};
             console.error(err);