Polarcraft/web/pages/index.vue

<template>
  <div class="flex h-full w-full flex-col text-primary">
    <h1 class="mb-10 mt-20 text-center text-5xl font-bold">Welkom, {{ user.username }}</h1>
    <Whitelist v-if="!user.minecraft.uuid" />
    <div v-else class="flex w-full flex-wrap justify-evenly gap-10">
      <div class="flex w-full max-w-xl flex-col gap-3">
        <h2 class="text-xl font-bold text-primary">Discord Information <span v-if="!user.useMinecraftUsername" class="font-normal">(Default)</span></h2>
        <div class="flex gap-3">
          <img :src="'https://cdn.discordapp.com/avatars/' + user.discord.id + '/' + user.discord.avatarHash + '.png'" class="aspect-square w-24 rounded shadow">
          <div class="flex w-full rounded border-2 border-primary p-4">
            <ul class="my-auto">
              <li>Username: <b>{{ user.discord.username }}</b></li>
              <li>ID: <b>{{ user.discord.id }}</b></li>
            </ul>
          </div>
        </div>
        <div class="mt-2 flex w-full justify-center gap-4">
          <Button @click="refreshDiscordUsername">
            Refresh Username
          </Button>
          <Button v-if="user.useMinecraftUsername" @click="setDefaultUsername('discord')">
            Set Default 
          </Button>
        </div>
      </div>
      <div class="flex w-full max-w-xl flex-col gap-3">
        <h2 class="text-xl font-bold text-primary">Minecraft Information <span v-if="user.useMinecraftUsername" class="font-normal">(Default)</span></h2>
        <div class="flex gap-3">
          <img :src="'https://api.mineatar.io/face/' + user.minecraft.uuid + '?scale=16'" class="aspect-square w-24 rounded shadow">
          <div class="flex w-full rounded border-2 border-primary p-4">
            <ul class="my-auto">
              <li>Username: <b>{{ user.minecraft.username }}</b></li>
              <li>UUID: <b>{{ user.minecraft.uuid }}</b></li>
            </ul>
          </div>
        </div>
        <div class="mt-2 flex w-full justify-center gap-4">
          <Button type="danger" @click="removeWhitelist">
            Remove from whitelist
          </Button>
          <Button @click="refreshMinecraftUsername">
            Refresh Username
          </Button>
          <Button v-if="!user.useMinecraftUsername" @click="setDefaultUsername('minecraft')">
            Set Default
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>

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

const user = useState('user')

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

    user.value.minecraft.username = response.username

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

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

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

    user.value.discord.username = response.username

    useToast().success('Gebruikersnaam 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)
  }
}

const setDefaultUsername = async (type) => {
  try {
    const response = await $fetch('/api/auth/user/setdefaultusername', {
      method: 'POST',
      body: { type: type }
    })

    user.value.username = response.username
    user.value.useMinecraftUsername = type === 'discord' ? false : true

    useToast().success(`${ type === 'discord' ? 'Discord' : 'Minecraft' } is nu de standaard gebruikersnaam`)
  } catch (e) {
    console.log(e)
    useToast().error(e.statusMessage)
  }
}
</script>