Add landing account menu

app/assets/js/scripts/landing.js

@@ -1,6 +1,7 @@
 /**
  * Script for landing.ejs
  */
+(() => {
 // Requirements
 const { URL }                 = require('url')
 const {
@@ -28,6 +29,7 @@ const {
 }                             = require('helios-core/java')
 
 // Internal Requirements
+const AuthManager             = require('./assets/js/authmanager')
 const DiscordWrapper          = require('./assets/js/discordwrapper')
 const ProcessBuilder          = require('./assets/js/processbuilder')
 
@@ -38,10 +40,79 @@ const launch_progress         = document.getElementById('launch_progress')
 const launch_progress_label   = document.getElementById('launch_progress_label')
 const launch_details_text     = document.getElementById('launch_details_text')
 const server_selection_button = document.getElementById('server_selection_button')
-const user_text               = document.getElementById('user_text')
+const avatarMenuButton        = document.getElementById('avatarMenuButton')
+const avatarContainer         = document.getElementById('avatarContainer')
+const accountMenu             = document.getElementById('accountMenu')
+const accountMenuName         = document.getElementById('accountMenuName')
+const accountMenuLogoutButton = document.getElementById('accountMenuLogoutButton')
 
 const loggerLanding = LoggerUtil.getLogger('Landing')
 
+function setAccountMenuOpen(open){
+    if(open && ConfigManager.getSelectedAccount() == null){
+        return
+    }
+
+    avatarMenuButton.setAttribute('aria-expanded', open ? 'true' : 'false')
+    if(open){
+        accountMenu.removeAttribute('hidden')
+    } else {
+        accountMenu.setAttribute('hidden', '')
+    }
+}
+
+function showAccountError(message){
+    if(typeof setOverlayContent === 'function'){
+        setOverlayContent(
+            Lang.queryJS('settings.msftLogout.errorTitle'),
+            message,
+            Lang.queryJS('landing.launch.okay')
+        )
+        setOverlayHandler(() => toggleOverlay(false))
+        toggleOverlay(true)
+    }
+}
+
+async function logoutSelectedAccount(){
+    const selectedAccount = ConfigManager.getSelectedAccount()
+    if(selectedAccount == null){
+        return
+    }
+
+    const accountCount = Object.keys(ConfigManager.getAuthAccounts()).length
+    accountMenuLogoutButton.disabled = true
+
+    try {
+        if(selectedAccount.type === 'microsoft'){
+            await AuthManager.removeMicrosoftAccount(selectedAccount.uuid)
+        } else {
+            await AuthManager.removeMojangAccount(selectedAccount.uuid)
+        }
+
+        setAccountMenuOpen(false)
+
+        const nextAccount = ConfigManager.getSelectedAccount()
+        if(nextAccount != null){
+            updateSelectedAccount(nextAccount)
+            validateSelectedAccount()
+        } else if(accountCount === 1){
+            updateSelectedAccount(null)
+            loginOptionsCancelEnabled(false)
+            loginOptionsViewOnLoginSuccess = VIEWS.landing
+            loginOptionsViewOnLoginCancel = VIEWS.loginOptions
+            switchView(getCurrentView(), VIEWS.loginOptions)
+        }
+    } catch (error) {
+        console.error(error)
+        const message = selectedAccount.type === 'microsoft'
+            ? Lang.queryJS('settings.msftLogout.errorMessage')
+            : Lang.queryJS('landing.selectedAccount.logoutFailed')
+        showAccountError(message)
+    } finally {
+        accountMenuLogoutButton.disabled = false
+    }
+}
+
 /* Launch Progress Wrapper Functions */
 
 /**
@@ -147,13 +218,24 @@ document.getElementById('landingInstallButton').onclick = async () => {
     switchView(getCurrentView(), VIEWS.install)
 }
 
-// Bind avatar overlay button.
-document.getElementById('avatarOverlay').onclick = async e => {
-    await prepareSettings()
-    switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
-        settingsNavItemListener(document.getElementById('settingsNavAccount'), false)
-    })
-}
+avatarMenuButton.addEventListener('click', (e) => {
+    e.stopPropagation()
+    setAccountMenuOpen(accountMenu.hasAttribute('hidden'))
+})
+
+accountMenu.addEventListener('click', (e) => {
+    e.stopPropagation()
+})
+
+accountMenuLogoutButton.addEventListener('click', async () => {
+    await logoutSelectedAccount()
+})
+
+document.addEventListener('click', () => {
+    if(!accountMenu.hasAttribute('hidden')){
+        setAccountMenuOpen(false)
+    }
+})
 
 // Bind selected account
 function updateSelectedAccount(authUser){
@@ -163,10 +245,16 @@ function updateSelectedAccount(authUser){
             username = authUser.displayName
         }
         if(authUser.uuid != null){
-            document.getElementById('avatarContainer').style.backgroundImage = `url('https://mc-heads.net/body/${authUser.uuid}/right')`
+            avatarContainer.style.backgroundImage = `url('https://mc-heads.net/avatar/${authUser.uuid}/64')`
         }
+    } else {
+        avatarContainer.style.backgroundImage = `url('assets/images/Icon.png')`
+    }
+    accountMenuName.textContent = username
+    avatarMenuButton.disabled = authUser == null
+    if(authUser == null){
+        setAccountMenuOpen(false)
     }
-    user_text.innerHTML = username
 }
 updateSelectedAccount(ConfigManager.getSelectedAccount())
 
@@ -1038,3 +1126,9 @@ async function loadNews(){
 
     return await promise
 }
+
+window.updateSelectedAccount = updateSelectedAccount
+window.updateSelectedServer = updateSelectedServer
+window.refreshServerStatus = refreshServerStatus
+window.initNews = initNews
+})()