Polarcraft/web/pages/index.vue

<template>
  <div class="w-full h-full text-primary flex flex-col">
    <h1 class="text-5xl font-bold text-center mt-20 mb-10">Welkom, {{ user.discord.username }}</h1>
    <Whitelist v-if="!user.minecraft.uuid" />
    <div v-else class="flex justify-center gap-4 flex-wrap max-w-3xl w-full">
      <img :src="'https://api.mineatar.io/face/' + user.minecraft.uuid + '?scale=16'" class="w-24 rounded shadow">
      <div class="rounded flex border-2 border-primary p-4 w-full max-w-md">
        <ul class="my-auto">
          <li>Username: <b>{{ user.minecraft.username }}</b></li>
          <li>UUID: <b>{{ user.minecraft.uuid }}</b></li>
        </ul>
      </div>
      <div class="w-full flex justify-center gap-4 mt-2">
        <Button type="danger" @click="removeWhitelist">
          Remove from whitelist
        </Button>
        <Button @click="refreshUsername">
          Refresh Username
        </Button>
      </div>
    </div>
  </div>
</template>

<script setup>
definePageMeta({
  middleware: ["auth"]
})

const user = useState('user')

const refreshUsername = async () => {
  try {
    const response = await $fetch('/api/minecraft/refreshusername')

    user.value.minecraft.username = response.username

    useToast().success('Username is ververst')
  } catch (e) {
    console.log(e)

    useToast().error(e.statusMessage)
  }
}

const removeWhitelist = async () => {
  try {
    await $fetch('/api/minecraft/removewhitelist')

    user.value.minecraft.uuid = null
    user.value.minecraft.username = null

    useToast().success('Minecraft is niet meer gekoppeld')
  } catch (e) {
    console.log(e)
    useToast().error(e.statusMessage)
  }
}
</script>