👥 Fluid account selection

Edited the account selection menu so that it can be oppened in "popup" mode, allowing similar behavior to the fluid server selection without disturbing the account selection already in place in case of an account validation failure. This new popup menu also adds a "manage accounts" button to open the settings in the same way the old account selection menu did

app/assets/css/launcher.css

@@ -3850,7 +3850,8 @@ input:checked + .toggleSwitchSlider:before {
 
 /* Server selection confirm button styles. */
 #serverSelectConfirm,
-#accountSelectConfirm {
+#accountSelectConfirm,
+#accountSelectManage {
     background: none;
     border: 1px solid #ffffff;
     color: white;

app/assets/js/scripts/landing.js

@@ -133,14 +133,6 @@ document.getElementById('settingsMediaButton').onclick = async e => {
     switchView(getCurrentView(), VIEWS.settings)
 }
 
-// Bind avatar overlay button.
-document.getElementById('avatarOverlay').onclick = async e => {
-    await prepareSettings()
-    switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
-        settingsNavItemListener(document.getElementById('settingsNavAccount'), false)
-    })
-}
-
 // Bind selected account
 function updateSelectedAccount(authUser){
     let username = Lang.queryJS('landing.selectedAccount.noAccountSelected')
@@ -176,6 +168,12 @@ server_selection_button.onclick = async e => {
     await toggleServerSelection(true)
 }
 
+// Bind avatar overlay button.
+document.getElementById('avatarOverlay').onclick = async e => {
+    e.target.blur()
+    await toggleAccountSelection(true, true)
+}
+
 // Update Mojang Status Color
 const refreshMojangStatuses = async function(){
     loggerLanding.info('Refreshing Mojang Statuses..')

app/assets/js/scripts/overlay.js

@@ -15,6 +15,9 @@ function isOverlayVisible(){
 
 let overlayHandlerContent
 
+let overlayContainer = document.getElementById('overlayContainer')
+let accountSelectContent = document.getElementById('accountSelectContent')
+
 /**
  * Overlay keydown handler for a non-dismissable overlay.
  * 
@@ -76,6 +79,8 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
     bindOverlayKeys(toggleState, content, dismissable)
     if(toggleState){
         document.getElementById('main').setAttribute('overlay', true)
+        overlayContainer.setAttribute('content', content)
+
         // Make things untabbable.
         $('#main *').attr('tabindex', '-1')
         $('#' + content).parent().children().hide()
@@ -95,6 +100,8 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
         })
     } else {
         document.getElementById('main').removeAttribute('overlay')
+        overlayContainer.removeAttribute('content')
+
         // Make things tabbable.
         $('#main *').removeAttr('tabindex')
         $('#overlayContainer').fadeOut({
@@ -122,6 +129,22 @@ async function toggleServerSelection(toggleState){
     toggleOverlay(toggleState, true, 'serverSelectContent')
 }
 
+async function toggleAccountSelection(toggleState, popup = false){    
+    if (popup) {
+        // set the popup=true attribute to the accountSelectContent div and set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function
+        accountSelectContent.setAttribute('popup', 'true')
+        document.getElementById('accountSelectActions').style.display = 'none'
+    } else {
+        // remove the popup attribute and set the accountSelectActions div to display: block, this is not done while closing the overlay because of the fadeOut effect
+        accountSelectContent.removeAttribute('popup')
+        document.getElementById('accountSelectActions').style.display = 'block'
+    }
+
+    // show the overlay
+    await prepareAccountSelectionList()
+    toggleOverlay(toggleState, true, 'accountSelectContent')
+}
+
 /**
  * Set the content of the overlay.
  * 
@@ -169,8 +192,9 @@ function setDismissHandler(handler){
     }
 }
 
-/* Account Select View */
+/* Account Select button */
 
+// Bind account select confirm button.
 document.getElementById('accountSelectConfirm').addEventListener('click', async () => {
     const listings = document.getElementsByClassName('accountListing')
     for(let i=0; i<listings.length; i++){
@@ -200,18 +224,30 @@ document.getElementById('accountSelectConfirm').addEventListener('click', async
 })
 
 // Bind account select cancel button.
-
 document.getElementById('accountSelectCancel').addEventListener('click', () => {
     $('#accountSelectContent').fadeOut(250, () => {
         $('#overlayContent').fadeIn(250)
     })
 })
 
-// Make the Server Selection background clickable to close the overlay.
+// Bind account select manage button.
-let overlayContainer = document.getElementById('overlayContainer')
+document.getElementById('accountSelectManage').addEventListener('click', async () => {
-overlayContainer.addEventListener('click', e => {
+    await prepareSettings()
-    if(e.target === overlayContainer){
+    switchView(getCurrentView(), VIEWS.settings, 500, 500, () => {
+        settingsNavItemListener(document.getElementById('settingsNavAccount'), false)
+    })
     toggleOverlay(false)
+})
+
+// Make the Server Selection background clickable to close the overlay.
+overlayContainer.addEventListener('click', e => {
+    if (e.target === overlayContainer) {
+        // This function only works for the server selection overlay or if the account selection is a popup
+        if(overlayContainer.getAttribute('content') === 'serverSelectContent') {
+            toggleOverlay(false)
+        } else if(overlayContainer.getAttribute('content') === 'accountSelectContent' && accountSelectContent.hasAttribute('popup')) {
+            toggleOverlay(false)
+        }
     }
 })
 
@@ -219,7 +255,6 @@ async function setServerListingHandlers(){
     const listings = Array.from(document.getElementsByClassName('serverListing'))
     listings.map(async (val) => {
         val.onclick = async e => {
-            console.log(e)
             const serv = (await DistroAPI.getDistribution()).getServerById(val.getAttribute('servid'))
             updateSelectedServer(serv)
             refreshServerStatus(true)
@@ -228,10 +263,22 @@ async function setServerListingHandlers(){
     })
 }
 
-function setAccountListingHandlers(){
+async function setAccountListingHandlers(){
     const listings = Array.from(document.getElementsByClassName('accountListing'))
-    listings.map((val) => {
+    listings.map(async (val) => {
-        val.onclick = e => {
+        val.onclick = async e => {
+            // popup mode
+            if(accountSelectContent.hasAttribute('popup')){
+                const authAcc = ConfigManager.setSelectedAccount(val.getAttribute('uuid'))
+                ConfigManager.save()
+                updateSelectedAccount(authAcc)
+                if(getCurrentView() === VIEWS.settings) {
+                    await prepareSettings()
+                }
+                toggleOverlay(false)
+                validateSelectedAccount()
+                return    
+            } else {
                 if(val.hasAttribute('selected')){
                     return
                 }
@@ -244,6 +291,7 @@ function setAccountListingHandlers(){
                 val.setAttribute('selected', '')
                 document.activeElement.blur()
             }
+        }
     })
 }
 
@@ -284,7 +332,7 @@ function populateAccountListings(){
     const accounts = Array.from(Object.keys(accountsObj), v=>accountsObj[v])
     let htmlString = ''
     for(let i=0; i<accounts.length; i++){
-        htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${i===0 ? 'selected' : ''}>
+        htmlString += `<button class="accountListing" uuid="${accounts[i].uuid}" ${!i && !accountSelectContent.hasAttribute("popup") ? 'selected' : ''}>
             <img src="https://mc-heads.net/head/${accounts[i].uuid}/40">
             <div class="accountListingName">${accounts[i].displayName}</div>
         </button>`
@@ -298,7 +346,7 @@ async function prepareServerSelectionList(){
     await setServerListingHandlers()
 }
 
-function prepareAccountSelectionList(){
+async function prepareAccountSelectionList(){
     populateAccountListings()
-    setAccountListingHandlers()
+    await setAccountListingHandlers()
 }

app/assets/js/scripts/uibinder.js

@@ -381,9 +381,9 @@ async function validateSelectedAccount(){
                 toggleOverlay(false)
                 switchView(getCurrentView(), VIEWS.loginOptions)
             })
-            setDismissHandler(() => {
+            setDismissHandler(async () => {
                 if(accLen > 1){
-                    prepareAccountSelectionList()
+                    await prepareAccountSelectionList()
                     $('#overlayContent').fadeOut(250, () => {
                         bindOverlayKeys(true, 'accountSelectContent', true)
                         $('#accountSelectContent').fadeIn(250)

app/assets/lang/en_US.toml

@@ -1,7 +1,7 @@
 [ejs.landing]
 updateAvailableTooltip = "Update Available"
 usernamePlaceholder = "Username"
-usernameEditButton = "Edit"
+usernameEditButton = "Switch"
 settingsTooltip = "Settings"
 serverStatus = "SERVER"
 serverStatusPlaceholder = "OFFLINE"
@@ -45,6 +45,7 @@ serverSelectHeader = "Available Servers"
 accountSelectHeader = "Select an Account"
 accountSelectConfirm = "Select"
 accountSelectCancel = "Cancel"
+accountSelectManage = "Manage Accounts"
 
 [ejs.settings]
 navHeaderText = "Settings"

app/overlay.ejs

@@ -20,6 +20,7 @@
                 <button id="accountSelectCancel" class="overlayKeybindEsc"><%- lang('overlay.accountSelectCancel') %></button>
             </div>
         </div>
+        <button id="accountSelectManage" class="overlayKeybindEnter" type="submit"><%- lang('overlay.accountSelectManage') %></button>
     </div>
     <div id="overlayContent">
         <span id="overlayTitle">Lorem Ipsum:<br>Finis Illud</span>