Added username switching

web/pages/index.vue

@@ -1,22 +1,50 @@
 <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.discord.username }}</h1>
+    <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 max-w-3xl flex-wrap justify-center gap-4">
-      <img :src="'https://api.mineatar.io/face/' + user.minecraft.uuid + '?scale=16'" class="w-24 rounded shadow">
-      <div class="flex w-full max-w-md rounded border-2 border-primary p-4">
+    <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="refreshUsername">
+          <Button @click="refreshMinecraftUsername">
             Refresh Username
           </Button>
+          <Button v-if="!user.useMinecraftUsername" @click="setDefaultUsername('minecraft')">
+            Set Default
+          </Button>
+        </div>
       </div>
     </div>
   </div>
@@ -29,7 +57,7 @@ definePageMeta({
 
 const user = useState('user')
 
-const refreshUsername = async () => {
+const refreshMinecraftUsername = async () => {
   try {
     const response = await $fetch('/api/minecraft/refreshusername')
 
@@ -43,6 +71,20 @@ const refreshUsername = async () => {
   }
 }
 
+const refreshDiscordUsername = async () => {
+  try {
+    const response = await $fetch('/api/discord/refreshusername')
+
+    user.value.discord.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')
@@ -56,4 +98,21 @@ const removeWhitelist = async () => {
     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>

web/server/api/auth/user/index.js

@@ -1,5 +1,5 @@
 export default defineEventHandler(async (event) => {
-  const auth = getAuth(event)
+  const auth = await getAuth(event)
 
   return auth
 });

web/server/api/auth/user/setdefaultusername.js

@@ -0,0 +1,15 @@
+import { ObjectId } from "mongodb";
+
+export default defineEventHandler(async (event) => {
+  const { type } = await readBody(event)
+
+  const auth = await getAuth(event)
+
+  const usersColl = db.collection('users')
+
+  const username = type === 'discord' ? auth.discord.username : auth.minecraft.username
+
+  await usersColl.updateOne({ _id: new ObjectId(auth._id) }, { $set: { username: username, useMinecraftUsername: type === 'discord' ? false : true } })
+
+  return { username: username }
+});

web/server/api/discord/refreshusername.js

@@ -0,0 +1,23 @@
+export default defineEventHandler(async (event) => {
+  const auth = await getAuth(event)
+
+  const userResult = await $fetch('https://discord.com/api/users/@me', {
+    headers: {
+      authorization: `Bearer ${auth.accessToken}`
+    }
+  })
+
+  const coll = db.collection('users')
+
+  const doc = {
+    discord: {
+      id: userResult.id,
+      username: userResult.username,
+      avatarHash: userResult.avatar || null
+    },
+  }
+
+  await coll.updateOne({ 'discord.id': userResult.id }, { $set: doc })
+
+  return doc.discord
+});

web/server/utils/auth.js

@@ -36,6 +36,8 @@ export const getAuth = async (event) => {
     const coll = db.collection("users")
     const user = await coll.findOne({ 'discord.id': decodedToken.discordId })
 
+    user.accessToken = decodedToken.accessToken
+
     return user;
   } catch (err) {
     console.log(err)