feat: Added login page

webv2/app.config.ts

@@ -0,0 +1,6 @@
+export default defineAppConfig({
+  ui: {
+    primary: 'cyan',
+    gray: 'cool'
+  }
+})

webv2/app.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
+  <div class="min-h-screen w-full overflow-y-auto bg-gray-100 dark:bg-gray-900">
-    <a :href="config.public.oauthUrl">Discord</a>
+    <NuxtLayout />
   </div>
 </template>
-
-<script setup>
-const config = useRuntimeConfig()
-</script>

webv2/layouts/blank.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

webv2/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

webv2/middleware/auth.js

@@ -0,0 +1,25 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+  if (process.server) {
+    return
+  }
+
+  try {
+    const user = await $fetch('/api/auth/user')
+
+    if (!user.id) {
+      throw createError({ statusCode: 500, statusMessage: 'No user was found' })
+    }
+
+    useState('user', () => user)
+
+    if (to.meta.moderator && !user.role.moderator) {
+      return navigateTo('/')
+    }
+  } catch (e) {
+    console.error('Failed to get user', e)
+
+    useState('user', () => null)
+
+    return navigateTo('/login')
+  }
+})

webv2/nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  ssr: false,
   typescript: {
     typeCheck: true
   },

webv2/package.json

@@ -7,7 +7,8 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix"
   },
   "devDependencies": {
     "@nuxthq/ui": "^2.2.1",

webv2/pages/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    Index
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  middleware: ['auth']
+})
+
+const user = useState('user')
+</script>

webv2/pages/login.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex h-screen flex-col items-center justify-center">
+    <h1 class="text-primary-500 mb-5 text-center text-3xl font-bold">Polarcraft S5</h1>
+    <p class="mx-3 mb-5 max-w-2xl">
+      <b>Welkom bij Polarcraft seizoen 5!</b> Start door in te loggen met Discord en vervolgens je account te koppelen met Minecraft. Als je problemen hebt maak dan in Discord een post aan in het <b>#help</b> channel.
+    </p>
+    <UButton @click="navigateTo(config.public.oauthUrl, { external: true })">Log in with Discord</UButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'blank'
+})
+
+const config = useRuntimeConfig()
+</script>