feat: Added intial dashboard and minecraft connection

webv2/app.config.ts

@@ -1,6 +1,9 @@
 export default defineAppConfig({
   ui: {
     primary: 'cyan',
-    gray: 'cool'
+    gray: 'cool',
+    notifications: {
+      position: 'top-0 left-1/2 -translate-x-1/2'
+    }
   }
 })

webv2/app.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="min-h-screen w-full overflow-y-auto bg-gray-900">
     <NuxtLayout />
+
+    <UNotifications />
   </div>
 </template>

webv2/components/body/Connectminecraft.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="mx-auto w-full max-w-xl flex-col items-center">
+    <p class="mb-10 mt-52 text-sm sm:text-base">
+      Je bent momenteel niet verbonden met Minecraft. Om toegang te krijgen tot de Minecraft server moet je in Minecraft naar de
+      server met het ip <UBadge>play.polarcraft.xeovalyte.com</UBadge> gaan. Vervolgens krijg je een code
+      te zien, vul deze code hieronder in.
+    </p>
+    <div class="flex justify-center gap-x-3">
+      <UInput v-model="code" placeholder="6 digit code" class="" />
+      <UButton :disabled="disableButtons" @click="connectMinecraft">Submit</UButton>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const user = useState('user')
+
+const code = ref('')
+const disableButtons = ref(false)
+
+const connectMinecraft = async () => {
+  disableButtons.value = true
+
+  try {
+    const response = await $fetch('/api/users/@me/minecraft', {
+      method: 'PUT',
+      body: {
+        code: code.value
+      }
+    })
+
+    user.value.minecraft = response
+
+    useToast().add({ title: 'Successfully connected Minecraft', color: 'green' })
+  } catch (e: any) {
+    console.error(e)
+
+    useToast().add({ title: e.statusMessage, color: 'red' })
+  }
+
+  disableButtons.value = false
+}
+</script>

webv2/components/body/Sidebar.vue

@@ -1,6 +1,8 @@
 <template>
-  <div class="fixed left-0 top-0 flex h-screen w-56 flex-col gap-y-1 border-r border-gray-700 bg-gray-800 px-2">
+  <div class="fixed left-0 top-0 z-50 flex h-screen w-56 flex-col gap-y-1 border-r border-gray-700 bg-gray-800 px-2">
-    <h1 class="text-primary-500 my-5 text-center text-2xl font-bold" to="/">Polarcraft S5</h1>
+    <h1 class="text-primary-500 my-5 text-center text-2xl font-bold" to="/">
+      Polarcraft S5
+    </h1>
     <NuxtLink class="flex w-full items-center rounded bg-black/0  p-2 text-lg hover:cursor-pointer hover:bg-black/20">
       <Icon size="1.5em" name="heroicons:chart-pie" class="mr-2" />
       Dashboard

webv2/layouts/default.vue

@@ -1,23 +1,26 @@
 <template>
   <div class="flex min-h-screen w-full overflow-y-auto">
     <Transition>
-      <BodySidebar v-if="showSidebar" />
+      <BodySidebar v-if="showSidebar && user.minecraft" />
     </Transition>
-    <div class="w-full px-5 transition-all duration-300 ease-in-out" :class="{ 'ms-56': showSidebar }">
+    <div class="w-full px-5 transition-all duration-300 ease-in-out" :class="{ 'xl:ms-56': showSidebar && user.minecraft }">
-      <div class="mx-auto w-full max-w-[92rem]">
+      <div v-if="user.minecraft" class="mx-auto w-full max-w-[92rem]">
         <div class="my-5 text-xl font-bold">
           <Icon size="1.6em" :name="!showSidebar ? 'heroicons:bars-3-center-left' : 'heroicons:chevron-left'" class="text-primary-500 mr-3 hover:cursor-pointer" @click="showSidebar = !showSidebar" />
           {{ route.meta.title.split(' | ')[0] }}
         </div>
         <NuxtPage class="" />
       </div>
+      <BodyConnectminecraft v-else />
     </div>
   </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 const route = useRoute()
 const showSidebar = ref(true)
+
+const user = useState<IUser>('user')
 </script>
 
 <style>

webv2/pages/index.vue

@@ -16,7 +16,57 @@
     </div>
     <div class="grid w-full grid-cols-12 gap-6">
       <div class="col-span-6 rounded-lg border border-gray-700 bg-gray-800 p-5">
-        Placeholder
+        <div class="mb-5 flex items-center">
+          <UAvatar size="2xl" :src="discordAvatarUrl" class="mr-6 aspect-square" />
+          <div>
+            <h3 class="mb-2 text-xl font-bold">
+              Discord
+              <span v-if="user.usernameType === 'discord'" class="text-base font-normal text-gray-400">
+                Default
+              </span>
+            </h3>
+            <ul>
+              <li>Username: {{ user.discord.username }}</li>
+              <li>ID: {{ user.discord.id }}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="space-x-3">
+          <UButton v-if="user.usernameType === 'minecraft'" :disabled="disableButtons">
+            Set Default
+          </UButton>
+          <UButton variant="soft" :disabled="disableButtons">
+            Refresh Data
+          </UButton>
+        </div>
+      </div>
+      <div v-if="user.minecraft" class="col-span-6 rounded-lg border border-gray-700 bg-gray-800 p-5">
+        <div class="mb-5 flex items-center">
+          <UAvatar size="2xl" :src="minecraftAvatarUrl" class="mr-6 aspect-square" />
+          <div>
+            <h3 class="mb-2 text-xl font-bold">
+              Minecraft
+              <span v-if="user.usernameType === 'minecraft'" class="text-base font-normal text-gray-400">
+                Default
+              </span>
+            </h3>
+            <ul>
+              <li>Username: {{ user.minecraft.username }}</li>
+              <li>UUID: {{ user.minecraft.uuid }}</li>
+            </ul>
+          </div>
+        </div>
+        <div class="space-x-3">
+          <UButton v-if="user.usernameType === 'discord'" :disabled="disableButtons">
+            Set Default
+          </UButton>
+          <UButton variant="soft" :disabled="disableButtons" @click="refreshMinecraftData">
+            Refresh Data
+          </UButton>
+          <UButton color="red" variant="outline" :disabled="disableButtons" @click="disconnectMinecraft">
+            Disconnect
+          </UButton>
+        </div>
       </div>
     </div>
   </div>
@@ -29,6 +79,7 @@ definePageMeta({
 })
 
 const user = useState<IUser>('user')
+const disableButtons = ref(false)
 
 const discordAvatarUrl = computed(() => {
   return 'https://cdn.discordapp.com/avatars/' + user.value.discord.id + '/' + user.value.discord.avatarHash + '.png'
@@ -40,4 +91,42 @@ const minecraftAvatarUrl = computed(() => {
   }
   return 'https://api.mineatar.io/face/' + user.value.minecraft.uuid + '?scale=16'
 })
+
+const disconnectMinecraft = async () => {
+  disableButtons.value = true
+
+  try {
+    await $fetch('/api/users/@me/minecraft', {
+      method: 'DELETE'
+    })
+
+    delete user.value.minecraft
+
+    useToast().add({ title: 'Successfully disconnected Minecraft', color: 'green' })
+  } catch (e: any) {
+    console.error(e)
+
+    useToast().add({ title: e.statusMessage, color: 'red' })
+  }
+
+  disableButtons.value = false
+}
+
+const refreshMinecraftData = async () => {
+  disableButtons.value = true
+
+  try {
+    const response = await $fetch('/api/users/@me/minecraft')
+
+    user.value.minecraft = response
+
+    useToast().add({ title: 'Successfully refreshed Minecraft data', color: 'green' })
+  } catch (e: any) {
+    console.error(e)
+
+    useToast().add({ title: e.statusMessage, color: 'red' })
+  }
+
+  disableButtons.value = false
+}
 </script>

webv2/server/api/users/[id]/minecraft/index.put.ts

@@ -15,10 +15,10 @@ export default defineEventHandler(async (event) => {
     if (!whitelistDoc) {
       throw createError({ statusCode: 500, statusMessage: 'Whitelist document was not found' })
     }
-  } catch (e) {
+  } catch (e: any) {
     console.error('Failed to get whitelist document', e)
 
-    throw createError('Failed to get whitelist document')
+    throw createError({ statusCode: 400, statusMessage: e.statusMessage ? e.statusMessage : 'Failed to get whitelist document' })
   }
 
   const minecraftProfile: any = await $fetch(`https://sessionserver.mojang.com/session/minecraft/profile/${whitelistDoc.uuid}`)