added beginning of whitelist system

web/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="w-full h-screen bg-neutral-900 text-primary whitespace-pre-wrap">
-    HOME SCREEN {{ user }}
+  <div class="w-full h-full text-primary flex justify-center items-center flex-col">
+    <h1 class="text-5xl font-bold text-center mb-10">Welkom, {{ user.discord.username }}</h1>
   </div>
 </template>
 

web/pages/login.vue

@@ -1,5 +1,20 @@
 <template>
-  <div class="w-full h-screen bg-neutral-900 text-primary">
-    <a href="https://discord.com/api/oauth2/authorize?client_id=1052974736432443432&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth&response_type=code&scope=identify">Login with Discord</a>
+  <div class="w-full h-screen text-primary bg-opacity-0 flex justify-center items-center flex-col px-2">
+    <h1 class="sm:text-5xl text-3xl font-bold text-center mb-5">Polarcraft S5</h1>
+    <p class="max-w-xl mb-10 sm:text-base text-sm">
+      <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 ticket aan door het <span class="bg-black bg-opacity-50 px-2 rounded">/ticket</span> commando uit te voeren.
+    </p>
+    <Button @click="navigateTo(config.public.redirectUrl, { external: true })">
+      Log in with Discord
+      <Icon size="1.6em" name="ic:baseline-discord" />
+    </Button>
+
+    <div class="absolute top-0 left-0 -z-10 w-full h-screen overflow-hidden">
+      <img src="../assets/pictures/diamond_wall.png" class="h-full w-full object-cover brightness-75 blur-[1px] scale-105">
+    </div>
   </div>
 </template>
+
+<script setup>
+const config = useRuntimeConfig()
+</script>

web/pages/whitelist.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="w-full h-full text-primary flex pt-20 items-center flex-col">
+    <h1 class="sm:text-4xl text-2xl font-bold text-center mb-5">Whitelist</h1>
+    <p v-if="!user.minecraft.uuid" class="max-w-xl mb-10 sm:text-base text-sm">
+      Je bent momenteel niet gewhitelist. Om toegang te krijgen tot de Minecraft server moet je in Minecraft naar de server met het ip <span class="highlight">play.polarcraft.xeovalyte.com</span> gaan. Vervolgens krijg je een code te zien, vul deze code hieronder in.
+    </p>
+    <div class="flex gap-2">
+      <Input v-model:value="code">Code</Input>
+      <Button @click="submitCode">Submit</Button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ["auth"]
+})
+
+const user = useState('user')
+const code = ref('')
+
+const submitCode = async () => {
+  try {
+    const response = await $fetch('/api/minecraft/whitelist', {
+      method: 'POST',
+      body: {
+        code: code.value
+      }
+    })
+
+    user.value.minecraft.uuid = response.uuid
+    useToast().success('Successfully whitelisted')
+  } catch (e) {
+    console.log(e);
+    useToast().error(e.statusMessage)
+  }
+}
+</script>