feat(app): better external browser Modrinth login flow (#4033)

* fix(app-frontend): do not emit exceptions when no loaders are available

* refactor(app): simplify Microsoft login code without functional changes

* feat(app): external browser auth flow for Modrinth account login

* chore: address Clippy lint

* chore(app/oauth_utils): simplify `handle_reply` error handling according to review

* chore(app-lib): simplify `Url` usage out of MC auth module

apps/app-frontend/src/components/ui/InstanceCreationModal.vue

@@ -305,12 +305,16 @@ const [
   get_game_versions().then(shallowRef).catch(handleError),
   get_loaders()
     .then((value) =>
-      value
-        .filter((item) => item.supported_project_types.includes('modpack'))
-        .map((item) => item.name.toLowerCase()),
+      ref(
+        value
+          .filter((item) => item.supported_project_types.includes('modpack'))
+          .map((item) => item.name.toLowerCase()),
+      ),
     )
-    .then(ref)
-    .catch(handleError),
+    .catch((err) => {
+      handleError(err)
+      return ref([])
+    }),
 ])
 loaders.value.unshift('vanilla')
 

apps/app-frontend/src/components/ui/modal/AuthGrantFlowWaitModal.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { LogInIcon, SpinnerIcon } from '@modrinth/assets'
+import { ref } from 'vue'
+import ModalWrapper from '@/components/ui/modal/ModalWrapper.vue'
+
+defineProps({
+  onFlowCancel: {
+    type: Function,
+    default() {
+      return async () => {}
+    },
+  },
+})
+
+const modal = ref()
+
+function show() {
+  modal.value.show()
+}
+
+function hide() {
+  modal.value.hide()
+}
+
+defineExpose({ show, hide })
+</script>
+<template>
+  <ModalWrapper ref="modal" @hide="onFlowCancel">
+    <template #title>
+      <span class="items-center gap-2 text-lg font-extrabold text-contrast">
+        <LogInIcon /> Sign in
+      </span>
+    </template>
+
+    <div class="flex justify-center gap-2">
+      <SpinnerIcon class="w-12 h-12 animate-spin" />
+    </div>
+    <p class="text-sm text-secondary">
+      Please sign in at the browser window that just opened to continue.
+    </p>
+  </ModalWrapper>
+</template>