Bump to 0.7.0 + Add sign-in error (#1133)

theseus_gui/src/components/ui/ErrorModal.vue

@@ -1,7 +1,11 @@
 <script setup>
-import { Modal, XIcon } from 'omorphia'
+import { Modal, XIcon, IssuesIcon, LogInIcon } from 'omorphia'
 import { ChatIcon } from '@/assets/icons'
 import { ref } from 'vue'
+import { login as login_flow, set_default_user } from '@/helpers/auth.js'
+import { handleError } from '@/store/notifications.js'
+import mixpanel from 'mixpanel-browser'
+import { handleSevereError } from '@/store/error.js'
 
 const errorModal = ref()
 const error = ref()
@@ -25,6 +29,10 @@ defineExpose({
       if (errorVal.message.includes('because the target machine actively refused it')) {
         metadata.value.hostsFile = true
       }
+    } else if (errorVal.message && errorVal.message.includes('User is not logged in')) {
+      title.value = 'Sign in to Minecraft'
+      errorType.value = 'minecraft_sign_in'
+      supportLink.value = 'https://support.modrinth.com'
     } else {
       title.value = 'An error occurred'
       errorType.value = 'unknown'
@@ -36,6 +44,25 @@ defineExpose({
     errorModal.value.show()
   },
 })
+
+const loadingMinecraft = ref(false)
+async function loginMinecraft() {
+  try {
+    loadingMinecraft.value = true
+    const loggedIn = await login_flow()
+
+    if (loggedIn) {
+      await set_default_user(loggedIn.id).catch(handleError)
+    }
+
+    await mixpanel.track('AccountLogIn')
+    loadingMinecraft.value = false
+    errorModal.value.hide()
+  } catch (err) {
+    loadingMinecraft.value = false
+    handleSevereError(err)
+  }
+}
 </script>
 
 <template>
@@ -90,7 +117,11 @@ defineExpose({
               Once you're done, come back here and sign in!
             </p>
           </template>
-
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Sign in to Minecraft
+            </button>
+          </div>
           <hr />
           <p>
             If nothing is working and you need help, visit
@@ -103,19 +134,86 @@ defineExpose({
             {{ error.message ?? error }}
           </details>
         </template>
+        <div v-else-if="errorType === 'minecraft_sign_in'">
+          <div class="warning-banner">
+            <div class="warning-banner__title">
+              <IssuesIcon />
+              <span>Installed the app before April 23rd, 2024?</span>
+            </div>
+            <div class="warning-banner__description">
+              Modrinth has updated our sign-in workflow to allow for better stability, security, and
+              performance. You must sign in again so your credentials can be upgraded to this new
+              flow.
+            </div>
+          </div>
+          <p>
+            To play this instance, you must sign in through Microsoft below. If you don't have a
+            Minecraft account, you can purchase the game on the
+            <a href="https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
+              >Minecraft website</a
+            >.
+          </p>
+          <div class="cta-button">
+            <button class="btn btn-primary" :disabled="loadingMinecraft" @click="loginMinecraft">
+              <LogInIcon /> Sign in to Minecraft
+            </button>
+          </div>
+        </div>
         <template v-else>
           {{ error.message ?? error }}
         </template>
       </div>
       <div class="input-group push-right">
         <a :href="supportLink" class="btn" @click="errorModal.hide()"><ChatIcon /> Get support</a>
-        <button class="btn btn-primary" @click="errorModal.hide()"><XIcon /> Close</button>
+        <button class="btn" @click="errorModal.hide()"><XIcon /> Close</button>
       </div>
     </div>
   </Modal>
 </template>
 
+<style>
+.light-mode {
+  --color-orange-bg: rgba(255, 163, 71, 0.2);
+}
+
+.dark-mode,
+.oled-mode {
+  --color-orange-bg: rgba(224, 131, 37, 0.2);
+}
+</style>
+
 <style scoped lang="scss">
+.cta-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.warning-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: var(--gap-lg);
+  background-color: var(--color-orange-bg);
+  border: 2px solid var(--color-orange);
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+}
+
+.warning-banner__title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 700;
+
+  svg {
+    color: var(--color-orange);
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
 .modal-body {
   display: flex;
   flex-direction: column;