Merge ac8a325c37 into 03dac9ed6d

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

@@ -3688,10 +3688,6 @@ input:checked + .toggleSwitchSlider:before {
     position: relative;
     background: rgba(131, 131, 131, 0.25);
 }
-.serverListing[selected] {
-    cursor: default;
-    opacity: 1.0;
-}
 .serverListing:hover,
 .serverListing:focus {
     outline: none;
@@ -3854,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.
  * 
@@ -22,8 +25,12 @@ let overlayHandlerContent
  */
 function overlayKeyHandler (e){
     if(e.key === 'Enter' || e.key === 'Escape'){
+        if (overlayContainer.hasAttribute('popup')) {
+            toggleOverlay(false)
+        } else {
             document.getElementById(overlayHandlerContent).getElementsByClassName('overlayKeybindEnter')[0].click()
         }
+    }
 }
 /**
  * Overlay keydown handler for a dismissable overlay.
@@ -64,8 +71,9 @@ function bindOverlayKeys(state, content, dismissable){
  * @param {boolean} toggleState True to display, false to hide.
  * @param {boolean} dismissable Optional. True to show the dismiss option, otherwise false.
  * @param {string} content Optional. The content div to be shown.
+ * @param {boolean} popup Optional. True to show the overlay as a popup that is easily dismissable and interactible.
  */
-function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent'){
+function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent', popup = false){
     if(toggleState == null){
         toggleState = !document.getElementById('main').hasAttribute('overlay')
     }
@@ -76,6 +84,9 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
     bindOverlayKeys(toggleState, content, dismissable)
     if(toggleState){
         document.getElementById('main').setAttribute('overlay', true)
+        overlayContainer.setAttribute('content', content)
+        overlayContainer.setAttribute('popup', popup)
+
         // Make things untabbable.
         $('#main *').attr('tabindex', '-1')
         $('#' + content).parent().children().hide()
@@ -95,6 +106,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({
@@ -119,7 +132,21 @@ function toggleOverlay(toggleState, dismissable = false, content = 'overlayConte
 
 async function toggleServerSelection(toggleState){
     await prepareServerSelectionList()
-    toggleOverlay(toggleState, true, 'serverSelectContent')
+    toggleOverlay(toggleState, false, 'serverSelectContent', true)
+}
+
+async function toggleAccountSelection(toggleState, popup = false){    
+    if (popup) {
+        // set the accountSelectActions div to display: none to avoid colliding with the validateSelectedAccount function
+        document.getElementById('accountSelectActions').style.display = 'none'
+    } else {
+        // set the overlayContainer div to display: block, this is not done while closing the overlay because of the fadeOut effect
+        document.getElementById('accountSelectActions').style.display = 'block'
+    }
+
+    // show the overlay
+    await prepareAccountSelectionList()
+    toggleOverlay(toggleState, false, 'accountSelectContent', popup)
 }
 
 /**
@@ -169,27 +196,9 @@ function setDismissHandler(handler){
     }
 }
 
-/* Server Select View */
+/* Account Select button */
-
-document.getElementById('serverSelectConfirm').addEventListener('click', async () => {
-    const listings = document.getElementsByClassName('serverListing')
-    for(let i=0; i<listings.length; i++){
-        if(listings[i].hasAttribute('selected')){
-            const serv = (await DistroAPI.getDistribution()).getServerById(listings[i].getAttribute('servid'))
-            updateSelectedServer(serv)
-            refreshServerStatus(true)
-            toggleOverlay(false)
-            return
-        }
-    }
-    // None are selected? Not possible right? Meh, handle it.
-    if(listings.length > 0){
-        const serv = (await DistroAPI.getDistribution()).getServerById(listings[i].getAttribute('servid'))
-        updateSelectedServer(serv)
-        toggleOverlay(false)
-    }
-})
 
+// Bind account select confirm button.
 document.getElementById('accountSelectConfirm').addEventListener('click', async () => {
     const listings = document.getElementsByClassName('accountListing')
     for(let i=0; i<listings.length; i++){
@@ -218,40 +227,60 @@ document.getElementById('accountSelectConfirm').addEventListener('click', async
     }
 })
 
-// Bind server select cancel button.
+// Bind account select cancel button.
-document.getElementById('serverSelectCancel').addEventListener('click', () => {
-    toggleOverlay(false)
-})
-
 document.getElementById('accountSelectCancel').addEventListener('click', () => {
     $('#accountSelectContent').fadeOut(250, () => {
         $('#overlayContent').fadeIn(250)
     })
 })
 
-function setServerListingHandlers(){
+// Bind account select manage button.
+document.getElementById('accountSelectManage').addEventListener('click', async () => {
+    await prepareSettings()
+    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 if the overlay is a popup
+        if(overlayContainer.hasAttribute('popup')) {
+            toggleOverlay(false)
+        }
+    }
+})
+
+async function setServerListingHandlers(){
     const listings = Array.from(document.getElementsByClassName('serverListing'))
-    listings.map((val) => {
+    listings.map(async (val) => {
-        val.onclick = e => {
+        val.onclick = async e => {
-            if(val.hasAttribute('selected')){
+            const serv = (await DistroAPI.getDistribution()).getServerById(val.getAttribute('servid'))
-                return
+            updateSelectedServer(serv)
-            }
+            refreshServerStatus(true)
-            const cListings = document.getElementsByClassName('serverListing')
+            toggleOverlay(false)
-            for(let i=0; i<cListings.length; i++){
-                if(cListings[i].hasAttribute('selected')){
-                    cListings[i].removeAttribute('selected')
-                }
-            }
-            val.setAttribute('selected', '')
-            document.activeElement.blur()
         }
     })
 }
 
-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(overlayContainer.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
                 }
@@ -264,6 +293,7 @@ function setAccountListingHandlers(){
                 val.setAttribute('selected', '')
                 document.activeElement.blur()
             }
+        }
     })
 }
 
@@ -304,7 +334,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 && !overlayContainer.hasAttribute("popup") ? 'selected' : ''}>
             <img src="https://mc-heads.net/head/${accounts[i].uuid}/40">
             <div class="accountListingName">${accounts[i].displayName}</div>
         </button>`
@@ -315,10 +345,10 @@ function populateAccountListings(){
 
 async function prepareServerSelectionList(){
     await populateServerListings()
-    setServerListingHandlers()
+    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"
@@ -42,11 +42,10 @@ cancelButton = "Cancel"
 
 [ejs.overlay]
 serverSelectHeader = "Available Servers"
-serverSelectConfirm = "Select"
-serverSelectCancel = "Cancel"
 accountSelectHeader = "Select an Account"
 accountSelectConfirm = "Select"
 accountSelectCancel = "Cancel"
+accountSelectManage = "Manage Accounts"
 
 [ejs.settings]
 navHeaderText = "Settings"

app/overlay.ejs

@@ -6,12 +6,6 @@
                 <!-- Server listings populated here. -->
             </div>
         </div>
-        <div id="serverSelectActions">
-            <button id="serverSelectConfirm" class="overlayKeybindEnter" type="submit"><%- lang('overlay.serverSelectConfirm') %></button>
-            <div id="serverSelectCancelWrapper">
-                <button id="serverSelectCancel" class="overlayKeybindEsc"><%- lang('overlay.serverSelectCancel') %></button>
-            </div>
-        </div>
     </div>
     <div id="accountSelectContent" style="display: none;">
         <span id="accountSelectHeader"><%- lang('overlay.accountSelectHeader') %></span>
@@ -26,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>