update to nuxt 4

app/pages/auth/signin.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex min-h-screen flex-1 bg-zinc-900">
+    <div
+      class="flex flex-1 flex-col justify-center px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24"
+    >
+      <div class="mx-auto w-full max-w-sm lg:w-96">
+        <div>
+          <DropLogo class="h-10 w-auto" />
+          <h2
+            class="mt-8 text-2xl font-bold font-display leading-9 tracking-tight text-zinc-100"
+          >
+            {{ $t("auth.signin.title") }}
+          </h2>
+          <p class="mt-2 text-sm leading-6 text-zinc-400">
+            {{ $t("auth.signin.noAccount") }}
+          </p>
+        </div>
+
+        <div class="mt-10">
+          <div>
+            <AuthSimple v-if="enabledAuths.includes('Simple' as AuthMec)" />
+            <div
+              v-if="enabledAuths.length > 1"
+              class="py-4 flex flex-row items-center justify-center gap-x-4 font-bold text-sm text-zinc-600"
+            >
+              <span class="h-[1px] grow bg-zinc-600" />
+              {{ $t("auth.signin.or") }}
+              <span class="h-[1px] grow bg-zinc-600" />
+            </div>
+            <AuthOpenID v-if="enabledAuths.includes('OpenID' as AuthMec)" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="relative hidden w-0 flex-1 lg:block">
+      <img
+        src="/wallpapers/signin.jpg"
+        class="absolute inset-0 h-full w-full object-cover"
+        alt=""
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AuthMec } from "~~/prisma/client/enums";
+import DropLogo from "~~/components/DropLogo.vue";
+
+const { t } = useI18n();
+const enabledAuths = await $dropFetch("/api/v1/auth");
+
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: t("auth.signin.pageTitle"),
+});
+</script>