fix: mojang username not modrinth username

Author: IMB11

apps/app-frontend/src/components/ui/skin/EditSkinModal.vue

@@ -211,6 +211,8 @@ async function save() {
       blob = new Uint8Array(buf)
     }
 
+    await unequip_skin();
+
     if (mode.value === 'new') {
       await add_and_equip_custom_skin(blob, variant.value, selectedCape.value)
       emit('saved')

apps/app-frontend/src/pages/Skins.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { UpdatedIcon, PlusIcon } from '@modrinth/assets'
 import { ButtonStyled, SkinPreviewRenderer } from '@modrinth/ui'
-import { ref, computed, useTemplateRef } from 'vue'
+import {ref, computed, useTemplateRef, onMounted} from 'vue'
 import SkinButton from '@/components/ui/skin/SkinButton.vue'
 import EditSkinModal from '@/components/ui/skin/EditSkinModal.vue'
 import SelectCapeModal from '@/components/ui/skin/SelectCapeModal.vue'
@@ -16,14 +16,15 @@ import { get as getSettings } from '@/helpers/settings.ts'
 import { get as getCreds } from '@/helpers/mr_auth'
 import { get_user } from '@/helpers/cache'
 import type { Cape, Skin } from '@/helpers/skins.ts'
+import {get_default_user, users} from "@/helpers/auth";
 
 const editSkinModal = useTemplateRef('editSkinModal')
 const selectCapeModal = useTemplateRef('selectCapeModal')
 
 const settings = ref(await getSettings())
-const credentials = ref()
 const skins = ref<Skin[]>([])
 const capes = ref<Cape[]>([])
+const username = ref<string | undefined>(undefined)
 
 const selectedSkin = ref<Skin | null>(null)
 
@@ -36,31 +37,22 @@ const defaultSkins = computed(() => filterDefaultSkins(skins.value))
 
 const currentCape = ref<Cape>()
 
-await Promise.all([fetchCredentials(), loadCapes(), loadSkins()])
-
-async function fetchCredentials() {
-  const creds = await getCreds().catch(handleError)
-  if (creds?.user_id) {
-    creds.user = await get_user(creds.user_id).catch(handleError)
-  }
-  credentials.value = creds
-}
+await Promise.all([loadCapes(), loadSkins(), loadUsername()])
 
 async function loadCapes() {
   capes.value = (await get_available_capes().catch(handleError)) ?? []
   currentCape.value = capes.value.find((c) => c.is_equipped)
 }
 
 async function loadSkins() {
-  skins.value = [];
+  console.log(skins.value)
   skins.value = (await get_available_skins().catch(handleError)) ?? []
+  console.log(skins.value)
   selectedSkin.value = skins.value.find((s) => s.is_equipped) ?? null;
 }
 
 async function changeSkin(newSkin: Skin) {
-  console.log(newSkin);
-  selectedSkin.value = newSkin;
-  await equip_skin(selectedSkin.value).catch(handleError);
+  await equip_skin(newSkin).catch(handleError);
   await loadSkins();
 }
 
@@ -70,6 +62,18 @@ async function handleCapeSelected(cape: Cape | undefined) {
   await loadSkins();
   await loadCapes();
 }
+
+async function loadUsername() {
+  try {
+    const defaultId = await get_default_user()
+    const allAccounts = await users();
+    const current = allAccounts.find(acc => acc.profile.id === defaultId)
+    username.value = current?.profile.name ?? null
+  } catch (e) {
+    handleError(e)
+    username.value = null
+  }
+}
 </script>
 
 <template>
@@ -98,7 +102,7 @@ async function handleCapeSelected(cape: Cape | undefined) {
         <SkinPreviewRenderer
           wide-model-src="/src/assets/models/classic_player.gltf"
           slim-model-src="/src/assets/models/slim_player.gltf"
-          :nametag="settings.hide_nametag_skins_page ? undefined : credentials?.user?.username"
+          :nametag="settings.hide_nametag_skins_page ? undefined : username"
           :texture-src="previewSkin"
           :variant="selectedSkin?.variant"
         />