Polarcraft/web/components/Whitelist.vue

<template>
  <div class="flex w-full flex-col items-center text-primary">
    <div v-if="!user.minecraft.uuid" class="flex flex-col items-center">
      <p class="mb-10 max-w-xl text-sm sm:text-base">
        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="code">Code</Input>
        <Button @click="submitCode">Submit</Button>
      </div>
    </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
    user.value.minecraft.username = response.username

    useToast().success('Succesvol gewhitelist')
  } catch (e) {
    console.log(e);
    useToast().error(e.statusMessage)
  }
}
</script>