Drop-OSS/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2026-01-31 15:37:09 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

better server side signin redirects

Browse Source 
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)
This commit is contained in:
DecDuck
2024-10-23 12:55:38 +11:00
parent c4a3e4e9a7
commit ef13b68592
4 changed files with 136 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/GamePanel.vue
View File

@@ -1,19 +1,46 @@
<template> <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"> <NuxtLink
<img :src="useObject(game.mCoverId)" class="w-full h-full object-cover" /> v-if="game"
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-90% to-zinc-800"/> :href="`/store/${game.id}`"
<div class="absolute bottom-0 left-0 px-2 py-1.5"> class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl"
<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> <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> </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> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { SerializeObject } from "nitropack"; 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> </script>

10
error.vue
View File

@@ -18,15 +18,7 @@ useHead({
title: `${props.error?.statusCode ?? "An unknown error occurred"} | Drop`, title: `${props.error?.statusCode ?? "An unknown error occurred"} | Drop`,
}); });
const errorCode = props.error?.statusCode; console.log(props.error);
if (errorCode != undefined) {
switch (errorCode) {
case 403:
case 401:
if (!user.value) signIn();
break;
}
}
</script> </script>
<template> <template>

141
pages/store/[id]/index.vue
View File

@@ -1,72 +1,77 @@
<template> <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 <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 <!-- banner image -->
class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800" <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" />
{{ game.mName }} <div
</h1> class="absolute inset-0 bg-gradient-to-b from-transparent to-80% to-zinc-900"
/>
<div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-10"> </div>
<!-- main page -->
<div <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)" /> <h1
<button class="text-3xl md:text-5xl font-bold font-display text-zinc-100 pb-4 border-b border-zinc-800"
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> {{ game.mName }}
</div> </h1>
<div class="row-start-2 md:row-start-1 md:col-span-3"> <div class="mt-8 grid grid-cols-1 md:grid-cols-4 gap-10">
<p class="text-lg text-zinc-400"> <div
{{ game.mShortDescription }} class="col-start-1 md:col-start-4 flex flex-col gap-y-6 items-center"
</p> >
<div <img
class="mt-6 flex flex-row overflow-x-auto max-w-full p-4 bg-zinc-800 rounded gap-x-2" class="w-64 h-auto rounded"
> :src="useObject(game.mCoverId)"
<img />
v-for="image in game.mImageLibrary" <button
class="h-64 w-max rounded" type="button"
:src="useObject(image)" 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"
/> >
</div> Add to Library
<div <PlusIcon class="-mr-0.5 h-7 w-7" aria-hidden="true" />
v-html="descriptionHTML" </button>
class="mt-12 prose prose-invert prose-blue max-w-none" <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> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@@ -81,21 +86,21 @@ const gameId = route.params.id.toString();
const headers = useRequestHeaders(["cookie"]); const headers = useRequestHeaders(["cookie"]);
const game = await $fetch<Game & { versions: GameVersion[] }>( const game = await $fetch<Game & { versions: GameVersion[] }>(
`/api/v1/games/${gameId}`, `/api/v1/games/${gameId}`,
{ headers } { headers },
); );
const md = MarkdownIt(); const md = MarkdownIt();
const descriptionHTML = md.render(game.mDescription); const descriptionHTML = md.render(game.mDescription);
const platforms = game.versions const platforms = game.versions
.map((e) => e.platform) .map((e) => e.platform)
.flat() .flat()
.filter((e, i, u) => u.indexOf(e) === i); .filter((e, i, u) => u.indexOf(e) === i);
const icons = { const icons = {
[Platform.Linux]: LinuxLogo, [Platform.Linux]: LinuxLogo,
[Platform.Windows]: WindowsLogo, [Platform.Windows]: WindowsLogo,
}; };
useHead({ useHead({
title: game.mName, title: game.mName,
}); });
</script> </script>

24
server/plugins/redirect.ts Normal file
View File

@@ -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)}`,
);
}
});
});