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

app.vue

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

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>

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>

components/headers/greeting.vue

@@ -1,5 +1,4 @@
 <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">
@@ -20,7 +19,6 @@
                 </div> -->
         </div>
     </div>
-    </ClientOnly>
 </template>
 
 <script lang="ts" setup>

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>

components/sidebars/navigation.vue

@@ -4,13 +4,13 @@
         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">
@@ -18,13 +18,13 @@
                     <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
                 </ButtonsBase>
             </NuxtLink>
-            </ClientOnly>
+
         </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">
@@ -42,8 +42,7 @@
                 <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: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>
@@ -53,13 +52,13 @@
                 <iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
                 <span class="pr-28 line-clamp-1">Update</span>
             </ButtonsBase>
-            </ClientOnly>
+
         </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">
@@ -82,13 +81,13 @@
             <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"
+        <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>
-            </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">
@@ -101,7 +100,6 @@
             <iconify-icon icon="tabler:writing" class="text-2xl" />
             <span class="text-xs">Compose</span>
         </button>
-        </ClientOnly>
     </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");

components/social-elements/users/Account.vue

@@ -1,5 +1,4 @@
 <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" />
@@ -8,7 +7,6 @@
             <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()"
@@ -23,7 +21,6 @@
                 v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
                 <span>Requested</span>
             </ButtonsSecondary>
-                </ClientOnly>
         </div>
 
         <div class="mt-2 px-4">
@@ -98,7 +95,6 @@
             </div>
         </div>
     </div>
-    </ClientOnly>
 </template>
 
 <script lang="ts" setup>

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" />
 
-        <div v-if="hasReachedEnd"
-            class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
+    <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>
 
 <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
         ) {

components/timelines/timeline.vue

@@ -1,5 +1,4 @@
 <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" />
@@ -7,12 +6,10 @@
     <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">
+    <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>
 </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
         ) {

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;
             });
     });
 };

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);
 };

layouts/app.vue

@@ -1,25 +1,12 @@
 <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>
@@ -48,7 +35,6 @@
                         </NuxtLink>
                     </div> -->
             </LazySidebarsCollapsibleAside>
-            </ClientOnly>
         </div>
     </div>
     <LazyComposerModal />

pages/[username]/[uuid].vue

@@ -1,5 +1,4 @@
 <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">
@@ -10,7 +9,6 @@
     <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
         <LazySocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
     </div>
-    </ClientOnly>
 </template>
 
 <script setup lang="ts">

pages/notifications.vue

@@ -1,5 +1,4 @@
 <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"
@@ -19,7 +18,6 @@
             </div>
         </LazyTimelinesTimelineScroller>
     </div>
-    </ClientOnly>
 </template>
 
 <script lang="ts" setup>

pages/oauth/authorize.vue

@@ -2,7 +2,6 @@
     <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">
@@ -16,8 +15,7 @@
                 <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 }">
+                    <VeeErrorMessage name="identifier" as="p" class="mt-2 text-sm text-red-600" v-slot="{ message }">
                         {{ message }}
                     </VeeErrorMessage>
                 </VeeField>
@@ -81,7 +79,6 @@
                     target="_blank" class="underline text-pink-700">the issue tracker</a>.
             </p>
         </div>
-        </ClientOnly>
     </div>
 </template>
 

pages/oauth/code.vue

@@ -1,5 +1,4 @@
 <template>
-    <ClientOnly>
     <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">
@@ -21,7 +20,6 @@
             </p>
         </div>
     </div>
-    </ClientOnly>
 </template>
 
 <script setup lang="ts">

pages/oauth/consent.vue

@@ -1,11 +1,8 @@
 <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" />
+            <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
@@ -83,7 +80,6 @@
             </p>
         </div>
     </div>
-    </ClientOnly>
 </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]]);
         }

pages/oauth/reset.vue

@@ -2,7 +2,6 @@
     <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">
@@ -58,7 +57,6 @@
                     target="_blank" class="underline text-pink-700">the issue tracker</a>.
             </p>
         </div>
-        </ClientOnly>
     </div>
 </template>
 

pages/register/index.vue

@@ -1,5 +1,4 @@
 <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" />
@@ -21,17 +20,16 @@
                 </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" />
+                    <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" />
+                    <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>
@@ -50,8 +48,8 @@
                     <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)"
+                        <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 }">
@@ -83,12 +81,10 @@
             </p>
         </div>
     </div>
-    </ClientOnly>
 </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);