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>

theseus_gui/src/composables/auth.js

@@ -0,0 +1,38 @@
+import { ref, onMounted } from 'vue'
+import { get as getCredentials, logout as removeCredentials } from '@/helpers/mr_auth.js'
+import { handleError } from '@/store/state.js'
+
+export const useMrAuth = () => {
+  const auth = ref(null)
+
+  const get = async () => {
+    try {
+      const creds = await getCredentials()
+      auth.value = creds
+      return creds
+    } catch (error) {
+      handleError(error)
+    }
+  }
+
+  const logout = async () => {
+    try {
+      const result = await removeCredentials()
+      auth.value = null
+      return result
+    } catch (error) {
+      handleError(error)
+    }
+    return null
+  }
+
+  onMounted(() => {
+    get()
+  })
+
+  return {
+    auth,
+    get,
+    logout,
+  }
+}

theseus_gui/src/pages/Settings.vue

@@ -16,7 +16,9 @@ import {
 import { handleError, useTheming } from '@/store/state'
 import { is_dir_writeable, change_config_dir, get, set } from '@/helpers/settings'
 import { get_max_memory } from '@/helpers/jre'
-import { get as getCreds, logout } from '@/helpers/mr_auth.js'
+
+import { useMrAuth } from '@/composables/auth'
+
 import JavaSelector from '@/components/ui/JavaSelector.vue'
 import ModrinthLoginScreen from '@/components/ui/tutorial/ModrinthLoginScreen.vue'
 import { mixpanel_opt_out_tracking, mixpanel_opt_in_tracking } from '@/helpers/mixpanel'
@@ -105,17 +107,12 @@ watch(
   { deep: true }
 )
 
-const credentials = ref(await getCreds().catch(handleError))
+const mrAuth = useMrAuth()
 const loginScreenModal = ref()
 
-async function logOut() {
-  await logout().catch(handleError)
-  credentials.value = await getCreds().catch(handleError)
-}
-
 async function signInAfter() {
   loginScreenModal.value.hide()
-  credentials.value = await getCreds().catch(handleError)
+  await mrAuth.get()
 }
 
 async function findLauncherDir() {
@@ -163,12 +160,12 @@ async function refreshDir() {
       <div class="adjacent-input">
         <label for="theme">
           <span class="label__title">Manage account</span>
-          <span v-if="credentials" class="label__description">
-            You are currently logged in as {{ credentials.user.username }}.
+          <span v-if="mrAuth.auth.value" class="label__description">
+            You are currently logged in as {{ mrAuth.auth.value?.user.username }}.
           </span>
           <span v-else> Sign in to your Modrinth account. </span>
         </label>
-        <button v-if="credentials" class="btn" @click="logOut">
+        <button v-if="mrAuth.auth.value" class="btn" @click="mrAuth.logout()">
           <LogOutIcon />
           Sign out
         </button>