create mr_auth composables

theseus_gui/src/components/ui/platform/AccountDropdown.vue

@@ -1,10 +1,18 @@
 <template>
   <div class="account-dropdown">
+    <Modal
+      ref="modrinthLoginModal"
+      class="login-screen-modal"
+      :noblur="!themeStore.advancedRendering"
+    >
+      <ModrinthLoginScreen :modal="true" :prev-page="signInAfter" :next-page="signInAfter" />
+    </Modal>
     <OverflowMenu
+      v-if="mrAuth.auth.value?.user"
       class="btn btn-transparent headless-button"
       :options="[
         {
-          id: 'play',
+          id: 'sign-out',
           color: 'danger',
           action: () => {},
           hoverFilledOnly: true,
@@ -13,44 +21,73 @@
       direction="up"
       position="right"
     >
-      <Avatar circle size="sm" :src="credentials?.user?.avatar_url" />
-      <template #play> <LogOutIcon /> Sign out </template>
+      <Avatar circle size="sm" :src="mrAuth.auth.value?.user?.avatar_url" />
+      <template #sign-out> <LogOutIcon /> Sign out </template>
+    </OverflowMenu>
+    <OverflowMenu
+      v-else
+      class="btn btn-transparent headless-button"
+      :options="[
+        {
+          id: 'sign-in',
+          color: 'primary',
+          action: () => {
+            modrinthLoginModal?.show()
+          },
+        },
+      ]"
+      direction="up"
+      position="right"
+    >
+      <Avatar circle size="sm" />
+      <template #sign-in> <LogInIcon /> Sign in </template>
     </OverflowMenu>
   </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { Avatar, OverflowMenu, LogOutIcon } from 'omorphia'
-import { get as getCredentials } from '@/helpers/mr_auth.js'
-import { useNotifications } from '@/store/notifications.js'
+import { Avatar, OverflowMenu, LogOutIcon, LogInIcon, Modal } from 'omorphia'
 
-const notifs = useNotifications()
+import { useTheming } from '@/store/state'
+import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vue'
+import { useMrAuth } from '@/composables/auth.js'
 
-const credentials = ref(null)
+const themeStore = useTheming()
+
+const mrAuth = useMrAuth()
+
+const modrinthLoginModal = ref(null)
 
 const refreshCredentials = async () => {
-  try {
-    credentials.value = await getCredentials()
-  } catch (error) {
-    notifs.addNotification({
-      title: 'An error occurred',
-      text: error.message ?? error,
-      type: 'error',
-    })
-    console.error(error)
-  }
+  await mrAuth.get()
 }
 
 onMounted(async () => {
   await refreshCredentials()
 })
+
+const signInAfter = async () => {
+  modrinthLoginModal.value?.hide()
+  await refreshCredentials()
+}
 </script>
 
-<style lang="scss">
-.account-dropdown {
-  *.headless-button {
+<style scoped lang="scss">
+:deep {
+  .headless-button {
     padding: 0 !important;
+    border-radius: 99999px;
+  }
+
+  .login-screen-modal {
+    .modal-container .modal-body {
+      width: auto;
+
+      .content {
+        background: none;
+      }
+    }
   }
 }
 </style>