feat: add support for multiple account types in database

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

@@ -1,17 +1,9 @@
 <template>
-  <div
-    v-if="mode !== 'isolated'"
-    ref="button"
+  <div v-if="mode !== 'isolated'" ref="button"
     class="button-base mt-2 px-3 py-2 bg-button-bg rounded-xl flex items-center gap-2"
-    :class="{ expanded: mode === 'expanded' }"
-    @click="toggleMenu"
-  >
-    <Avatar
-      size="36px"
-      :src="
-        selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
-      "
-    />
+    :class="{ expanded: mode === 'expanded' }" @click="toggleMenu">
+    <Avatar size="36px" :src="selectedAccount ? avatarUrl : 'https://launcher-files.modrinth.com/assets/steve_head.png'
+      " />
     <div class="flex flex-col w-full">
       <span>
         <component :is="getAccountType(selectedAccount)" v-if="selectedAccount" class="vector-icon" />
@@ -32,30 +24,23 @@
           </h4>
           <p>Selected</p>
         </div>
-        <Button
-          v-tooltip="'Log out'"
-          icon-only
-          color="raised"
-          @click="logout(selectedAccount.profile.id)"
-        >
+        <Button v-tooltip="'Log out'" icon-only color="raised" @click="logout(selectedAccount.profile.id)">
           <TrashIcon />
         </Button>
       </div>
       <div v-else class="login-section account">
         <h4>Not signed in</h4>
-        <Button
-          v-tooltip="'Log in'"
-          :disabled="loginDisabled"
-          icon-only
-          color="primary"
-          @click="login()"
-        >
-          <MicrosoftIcon v-if="!loginDisabled"/>
+        <Button v-tooltip="'Log via Microsoft'" :disabled="microsoftLoginDisabled" icon-only @click="login()">
+          <MicrosoftIcon v-if="!microsoftLoginDisabled" />
           <SpinnerIcon v-else class="animate-spin" />
         </Button>
-        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
+        <Button v-tooltip="'Add offline account'" icon-only @click="showOfflineLoginModal()">
           <PirateIcon />
         </Button>
+        <Button v-tooltip="'Log via Ely.by'" icon-only @click="loginViaElyBy()">
+          <ElyByIcon v-if="!elybyLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
+        </Button>
       </div>
       <div v-if="displayAccounts.length > 0" class="account-group">
         <div v-for="account in displayAccounts" :key="account.profile.id" class="account-row">
@@ -72,50 +57,85 @@
         </div>
       </div>
       <div v-if="accounts.length > 0" class="login-section account centered">
-        <Button v-tooltip="'Log in'" icon-only @click="login()">
-          <MicrosoftIcon />
+        <Button v-tooltip="'Log via Microsoft'" icon-only @click="login()">
+          <MicrosoftIcon v-if="!microsoftLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
         </Button>
-        <Button v-tooltip="'Add offline'" icon-only @click="tryOfflineLogin()">
+        <Button v-tooltip="'Add offline account'" icon-only @click="showOfflineLoginModal()">
           <PirateIcon />
         </Button>
+        <Button v-tooltip="'Log via Ely.by'" icon-only @click="loginViaElyBy()">
+          <ElyByIcon v-if="!elybyLoginDisabled" />
+          <SpinnerIcon v-else class="animate-spin" />
+        </Button>
       </div>
     </Card>
   </transition>
-  <ModalWrapper ref="loginOfflineModal" class="modal" header="Add new offline account">
-    <div class="modal-body">
-      <div class="label">Enter offline username</div>
-      <input type="text" v-model="playerName" placeholder="Provide offline player name" />
-      <Button icon-only color="secondary" @click="offlineLoginFinally()">
-        Continue
-      </Button>
+  <ModalWrapper ref="addOfflineModal" class="modal" header="Add new offline account">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="label">Enter your player name</label>
+      <input 
+        type="text" 
+        v-model="offlinePlayerName" 
+        placeholder="Your player name here..." 
+        class="input"
+      />
+      <div class="mt-6 ml-auto">
+        <Button 
+          icon-only 
+          color="primary" 
+          @click="addOfflineProfile()" 
+          class="continue-button"
+        >
+          Login
+        </Button>
+      </div>
     </div>
   </ModalWrapper>
-  <ModalWrapper ref="loginErrorModal" class="modal" header="Error while proceed">
-    <div class="modal-body">
-      <div class="label">Error occurred while adding offline account</div>
-      <Button color="primary" @click="retryOfflineLogin()">
-        Try again
-      </Button>
+  <ModalWrapper ref="inputErrorModal" class="modal" header="Error while proceeding">
+    <div class="flex flex-col gap-4 px-6 py-5">
+      <label class="text-base font-medium text-red-700">
+        An error occurred while adding the offline account. Please follow the instructions below.
+      </label>
+
+      <ul class="list-disc list-inside text-sm space-y-1">
+        <li>Check that you have entered the correct player name.</li>
+        <li>
+          Player name must be at least {{ minOfflinePlayerNameLength }} characters long and no more than
+          {{ maxOfflinePlayerNameLength }} characters.
+        </li>
+      </ul>
+
+      <div class="mt-6 ml-auto">
+        <Button 
+          color="primary" 
+          @click="retryAddOfflineProfile"
+          class="retry-button"
+        >
+          Try again
+        </Button>
+      </div>
     </div>
   </ModalWrapper>
-  <ModalWrapper ref="unexpectedErrorModal" class="modal" header="Ошибка">
+  <ModalWrapper ref="exceptionErrorModal" class="modal" header="Unexpected error occurred">
     <div class="modal-body">
-      <div class="label">Unexcepted error</div>
+      <label class="label">An unexpected error has occurred. Please try again later.</label>
     </div>
   </ModalWrapper>
 </template>
 
 <script setup>
-import { 
+import {
   DropdownIcon,
-  PlusIcon,
   TrashIcon,
-  LogInIcon,
   PirateIcon as Offline,
   MicrosoftIcon as License,
+  ElyByIcon as ElyBy,
   MicrosoftIcon,
   PirateIcon,
-  SpinnerIcon } from '@modrinth/assets'
+  ElyByIcon,
+  SpinnerIcon
+} from '@modrinth/assets'
 import { Avatar, Button, Card } from '@modrinth/ui'
 import { ref, computed, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
 import {
@@ -145,48 +165,80 @@ defineProps({
 const emit = defineEmits(['change'])
 
 const accounts = ref({})
-const loginDisabled = ref(false)
+const microsoftLoginDisabled = ref(false)
+const elybyLoginDisabled = ref(false)
 const defaultUser = ref()
-const loginOfflineModal = ref(null)
-const loginErrorModal = ref(null)
-const unexpectedErrorModal = ref(null)
-const playerName = ref('')
 
-async function tryOfflineLogin() { // [AR] Feature
-  loginOfflineModal.value.show()
+// [AR] • Feature
+const addOfflineModal = ref(null)
+const inputErrorModal = ref(null)
+const exceptionErrorModal = ref(null)
+const offlinePlayerName = ref('')
+const minOfflinePlayerNameLength = 2
+const maxOfflinePlayerNameLength = 20
+
+// [AR] • Feature
+function getAccountType(account) {
+  switch (account.account_type) {
+    case 'microsoft':
+      return License
+    case 'pirate':
+      return Offline
+    case 'elyby':
+      return ElyBy
+  }
 }
 
-async function offlineLoginFinally() { // [AR] Feature
-  const name = playerName.value
-  if (name.length > 1 && name.length < 20 && name !== '') {
-    const loggedIn = await offline_login(name).catch(handleError)
-    loginOfflineModal.value.hide()
-    if (loggedIn) {
-      await setAccount(loggedIn)
+// [AR] • Feature
+function showOfflineLoginModal() {
+  addOfflineModal.value?.show()
+}
+
+// [AR] • Feature
+function retryAddOfflineProfile() {
+  inputErrorModal.value?.hide()
+  showOfflineLoginModal()
+}
+
+// [AR] • Feature
+async function addOfflineProfile() {
+  const name = offlinePlayerName.value.trim()
+  const isValidName = name.length >= minOfflinePlayerNameLength && name.length <= maxOfflinePlayerNameLength
+
+  if (!isValidName) {
+    addOfflineModal.value?.hide()
+    inputErrorModal.value?.show()
+    offlinePlayerName.value = ''
+    return
+  }
+
+  try {
+    const result = await offline_login(name)
+
+    addOfflineModal.value?.hide()
+
+    if (result) {
+      await setAccount(result)
       await refreshValues()
     } else {
-      unexpectedErrorModal.value.show()
+      exceptionErrorModal.value?.show()
     }
-    playerName.value = ''
-  } else {
-    playerName.value = ''
-    loginOfflineModal.value.hide()
-    loginErrorModal.value.show()
+  } catch (error) {
+    handleError(error)
+    exceptionErrorModal.value?.show()
+  } finally {
+    offlinePlayerName.value = ''
   }
 }
 
-function retryOfflineLogin() { // [AR] Feature
-  loginErrorModal.value.hide()
-  tryOfflineLogin()
+// [AR] • Feature
+// TODO:
+async function loginViaElyBy() {
+  elybyLoginDisabled.value = true
+  console.log("Login via Ely.by clicked!")
+  elybyLoginDisabled.value = false
 }
 
-function getAccountType(account) { // [AR] Feature
-  if (account.access_token != "null" && account.access_token != null && account.access_token != "") {
-    return License
-  } else {
-    return Offline
-  }
-}
 const equippedSkin = ref(null)
 const headUrlCache = ref(new Map())
 
@@ -212,13 +264,13 @@ async function refreshValues() {
 }
 
 function setLoginDisabled(value) {
-  loginDisabled.value = value
+  microsoftLoginDisabled.value = value
 }
 
 defineExpose({
   refreshValues,
   setLoginDisabled,
-  loginDisabled,
+  loginDisabled: microsoftLoginDisabled,
 })
 await refreshValues()
 
@@ -264,7 +316,7 @@ async function setAccount(account) {
 }
 
 async function login() {
-  loginDisabled.value = true
+  microsoftLoginDisabled.value = true
   const loggedIn = await login_flow().catch(handleSevereError)
 
   if (loggedIn) {
@@ -273,7 +325,7 @@ async function login() {
   }
 
   trackEvent('AccountLogIn')
-  loginDisabled.value = false
+  microsoftLoginDisabled.value = false
 }
 
 const logout = async (id) => {