From ef13b685927de8fe780be5f6fb8a17bd338b6c3e Mon Sep 17 00:00:00 2001
From: DecDuck <declanahofmeyr@gmail.com>
Date: Wed, 23 Oct 2024 12:55:38 +1100
Subject: [PATCH] better server side signin redirects

this makes it so if a user requests a page (not API route) and isn't
signed in, it automatically redirects them to the sign in page (doesn't
show a flash of the error page)
---
 components/GamePanel.vue   |  49 ++++++++++---
 error.vue                  |  10 +--
 pages/store/[id]/index.vue | 141 +++++++++++++++++++------------------
 server/plugins/redirect.ts |  24 +++++++
 4 files changed, 136 insertions(+), 88 deletions(-)
 create mode 100644 server/plugins/redirect.ts

diff --git a/components/GamePanel.vue b/components/GamePanel.vue
index 63311fa..38f5db2 100644
--- a/components/GamePanel.vue
+++ b/components/GamePanel.vue
@@ -1,19 +1,46 @@
 <template>
-  <NuxtLink v-if="game" :href="`/store/${game.id}`" class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl">
-    <img :src="useObject(game.mCoverId)" class="w-full h-full object-cover" />
-    <div class="absolute inset-0 bg-gradient-to-b from-transparent to-90% to-zinc-800"/>
-    <div class="absolute bottom-0 left-0 px-2 py-1.5">
-        <h1 class="text-zinc-100 text-sm font-bold font-display">{{ game.mName }}</h1>
-        <p class="text-zinc-400 text-xs">{{ game.mShortDescription.split(" ").slice(0, 10).join(" ") }}...</p>
+    <NuxtLink
+        v-if="game"
+        :href="`/store/${game.id}`"
+        class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl"
+    >
+        <img
+            :src="useObject(game.mCoverId)"
+            class="w-full h-full object-cover"
+        />
+        <div
+            class="absolute inset-0 bg-gradient-to-b from-transparent to-90% to-zinc-800"
+        />
+        <div class="absolute bottom-0 left-0 px-2 py-1.5">
+            <h1 class="text-zinc-100 text-sm font-bold font-display">
+                {{ game.mName }}
+            </h1>
+            <p class="text-zinc-400 text-xs">
+                {{
+                    game.mShortDescription.split(" ").slice(0, 10).join(" ")
+                }}...
+            </p>
+        </div>
+    </NuxtLink>
+    <div
+        v-else
+        class="rounded w-48 h-64 bg-zinc-800 flex items-center justify-center"
+    >
+        <p class="text-zinc-700 text-sm font-semibold font-display uppercase">
+            no game
+        </p>
     </div>
-  </NuxtLink>
-  <div v-else class="rounded w-48 h-64 bg-zinc-800 flex items-center justify-center">
-    <p class="text-zinc-700 text-sm font-semibold font-display uppercase">no game</p>
-  </div>
 </template>
 
 <script setup lang="ts">
 import type { SerializeObject } from "nitropack";
 
-const props = defineProps<{ game?: SerializeObject<{ id: string, mCoverId: string, mName: string, mShortDescription: string }> }>();
+const props = defineProps<{
+    game?: SerializeObject<{
+        id: string;
+        mCoverId: string;
+        mName: string;
+        mShortDescription: string;
+    }>;
+}>();
 </script>
diff --git a/error.vue b/error.vue
index abe12b5..c3be379 100644
--- a/error.vue
+++ b/error.vue
@@ -18,15 +18,7 @@ useHead({
     title: `${props.error?.statusCode ?? "An unknown error occurred"} | Drop`,
 });
 
-const errorCode = props.error?.statusCode;
-if (errorCode != undefined) {
-    switch (errorCode) {
-        case 403:
-        case 401:
-            if (!user.value) signIn();
-            break;
-    }
-}
+console.log(props.error);
 </script>
 
 <template>
diff --git a/pages/store/[id]/index.vue b/pages/store/[id]/index.vue
index 29dd86f..3016e4e 100644
--- a/pages/store/[id]/index.vue
+++ b/pages/store/[id]/index.vue
@@ -1,72 +1,77 @@
 <template>
-  <div
-    class="mx-auto w-full relative flex flex-col justify-center pt-32 xl:pt-24 z-10 overflow-hidden"
-  >
-    <!-- banner image -->
-    <div class="absolute flex top-0 h-fit inset-x-0 h-12 -z-[20]">
-      <img :src="useObject(game.mBannerId)" class="w-full h-auto" />
-      <div
-        class="absolute inset-0 bg-gradient-to-b from-transparent to-80% to-zinc-900"
-      />
-    </div>
-    <!-- main page -->
     <div
-      class="max-w-7xl w-full min-h-screen mx-auto bg-zinc-900 px-16 py-12 rounded-md"
+        class="mx-auto w-full relative flex flex-col justify-center pt-32 xl:pt-24 z-10 overflow-hidden"
     >
-      <h1
-        class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
-      >
-        {{ game.mName }}
-      </h1>
-
-      <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-10">
+        <!-- banner image -->
+        <div class="absolute flex top-0 h-fit inset-x-0 h-12 -z-[20]">
+            <img :src="useObject(game.mBannerId)" class="w-full h-auto" />
+            <div
+                class="absolute inset-0 bg-gradient-to-b from-transparent to-80% to-zinc-900"
+            />
+        </div>
+        <!-- main page -->
         <div
-          class="col-start-1 md:col-start-4 flex flex-col gap-y-6 items-center"
+            class="max-w-7xl w-full min-h-screen mx-auto bg-zinc-900 px-16 py-12 rounded-md"
         >
-          <img class="w-64 h-auto rounded" :src="useObject(game.mCoverId)" />
-          <button
-            type="button"
-            class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-xl font-semibold font-display text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
-          >
-            Add to Library
-            <PlusIcon class="-mr-0.5 h-7 w-7" aria-hidden="true" />
-          </button>
-          <div class="inline-flex items-center gap-x-3">
-            <span class="text-zinc-100 font-semibold">Available on:</span>
-            <component
-              v-for="platform in platforms"
-              :is="icons[platform]"
-              class="text-blue-600 w-6 h-6"
-            />
-            <span
-              v-if="platforms.length == 0"
-              class="font-semibold text-blue-600"
-              >coming soon</span
+            <h1
+                class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
             >
-          </div>
-        </div>
+                {{ game.mName }}
+            </h1>
 
-        <div class="row-start-2 md:row-start-1 md:col-span-3">
-          <p class="text-lg text-zinc-400">
-            {{ game.mShortDescription }}
-          </p>
-          <div
-            class="mt-6 flex flex-row overflow-x-auto max-w-full p-4 bg-zinc-800 rounded gap-x-2"
-          >
-            <img
-              v-for="image in game.mImageLibrary"
-              class="h-64 w-max rounded"
-              :src="useObject(image)"
-            />
-          </div>
-          <div
-            v-html="descriptionHTML"
-            class="mt-12 prose prose-invert prose-blue max-w-none"
-          />
+            <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-10">
+                <div
+                    class="col-start-1 md:col-start-4 flex flex-col gap-y-6 items-center"
+                >
+                    <img
+                        class="w-64 h-auto rounded"
+                        :src="useObject(game.mCoverId)"
+                    />
+                    <button
+                        type="button"
+                        class="inline-flex items-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-xl font-semibold font-display text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                    >
+                        Add to Library
+                        <PlusIcon class="-mr-0.5 h-7 w-7" aria-hidden="true" />
+                    </button>
+                    <div class="inline-flex items-center gap-x-3">
+                        <span class="text-zinc-100 font-semibold"
+                            >Available on:</span
+                        >
+                        <component
+                            v-for="platform in platforms"
+                            :is="icons[platform]"
+                            class="text-blue-600 w-6 h-6"
+                        />
+                        <span
+                            v-if="platforms.length == 0"
+                            class="font-semibold text-blue-600"
+                            >coming soon</span
+                        >
+                    </div>
+                </div>
+
+                <div class="row-start-2 md:row-start-1 md:col-span-3">
+                    <p class="text-lg text-zinc-400">
+                        {{ game.mShortDescription }}
+                    </p>
+                    <div
+                        class="mt-6 flex flex-row overflow-x-auto max-w-full p-4 bg-zinc-800 rounded gap-x-2"
+                    >
+                        <img
+                            v-for="image in game.mImageLibrary"
+                            class="h-64 w-max rounded"
+                            :src="useObject(image)"
+                        />
+                    </div>
+                    <div
+                        v-html="descriptionHTML"
+                        class="mt-12 prose prose-invert prose-blue max-w-none"
+                    />
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -81,21 +86,21 @@ const gameId = route.params.id.toString();
 
 const headers = useRequestHeaders(["cookie"]);
 const game = await $fetch<Game & { versions: GameVersion[] }>(
-  `/api/v1/games/${gameId}`,
-  { headers }
+    `/api/v1/games/${gameId}`,
+    { headers },
 );
 const md = MarkdownIt();
 const descriptionHTML = md.render(game.mDescription);
 const platforms = game.versions
-  .map((e) => e.platform)
-  .flat()
-  .filter((e, i, u) => u.indexOf(e) === i);
+    .map((e) => e.platform)
+    .flat()
+    .filter((e, i, u) => u.indexOf(e) === i);
 const icons = {
-  [Platform.Linux]: LinuxLogo,
-  [Platform.Windows]: WindowsLogo,
+    [Platform.Linux]: LinuxLogo,
+    [Platform.Windows]: WindowsLogo,
 };
 
 useHead({
-  title: game.mName,
+    title: game.mName,
 });
 </script>
diff --git a/server/plugins/redirect.ts b/server/plugins/redirect.ts
new file mode 100644
index 0000000..175b5c2
--- /dev/null
+++ b/server/plugins/redirect.ts
@@ -0,0 +1,24 @@
+import { H3Error } from "h3";
+
+export default defineNitroPlugin((nitro) => {
+  nitro.hooks.hook("error", async (error, { event }) => {
+    if (!event) return;
+
+    // Don't handle for API routes
+    if (event.path.startsWith("/api")) return;
+
+    // Make sure it's a web error
+    if (!(error instanceof H3Error)) return;
+
+    switch (error.statusCode) {
+      case 401:
+      case 403:
+        const userId = await event.context.session.getUserId(event);
+        if (userId) break;
+        return sendRedirect(
+          event,
+          `/signin?redirect=${encodeURIComponent(event.path)}`,
+        );
+    }
+  });
+});