v0.0.1-alpha.6 - Finalizing the settings account tab.

Added a done button which closes the settings UI.
Displays a warning before the user logs out of the last saved account. If they proceed with the logout, they will be redirected to the login UI.
Added startup handling for when the user has 0 saved accounts. They will be brought directly to the login UI.
Accounts are now validated each time they are switched.

app/assets/css/launcher.css

@@ -922,13 +922,13 @@ body, button {
 #settingsNavItemsContent {
     display: flex;
     flex-direction: column;
+    position: relative;
 }
 
 /* Navigation item shared styles. */
 .settingsNavItem {
     background: none;
     border: none;
-    border-radius: 7px;
     text-align: left;
     margin: 5px 0px;
     padding: 0px 20px;
@@ -948,6 +948,46 @@ body, button {
     text-shadow: none;
 }
 
+/* Content container for the done button. */
+#settingsNavContentBottom {
+    position: absolute;
+    bottom: 20%;
+}
+
+/* Settings navigational divider. */
+.settingsNavDivider {
+    width: 75%;
+    height: 0.5px;
+    background: rgba(255, 255, 255, 0.75);
+    margin-left: auto;
+    margin-bottom: 25px;
+}
+
+/* Settings done button styles. */
+#settingsNavDone {
+    background: none;
+    border: none;
+    text-align: left;
+    margin: 5px 0px;
+    padding: 0px 20px;
+    color: white;
+    cursor: pointer;
+    outline: none;
+    transition: 0.25s ease;
+}
+#settingsNavDone:hover,
+#settingsNavDone:focus {
+    text-shadow: 0px 0px 20px white, 0px 0px 20px white, 0px 0px 20px white;
+}
+#settingsNavDone:active {
+    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75), 0px 0px 20px rgba(255, 255, 255, 0.75), 0px 0px 20px rgba(255, 255, 255, 0.75);
+    color: rgba(255, 255, 255, 0.75);
+}
+#settingsNavDone:disabled {
+    color: rgba(255, 255, 255, 0.75);
+    pointer-events: none;
+}
+
 /* Right hand side of the settings container, for tabs. */
 #settingsContainerRight {
     height: 100%;

app/assets/js/scripts/settings.js

@@ -1,3 +1,4 @@
+const settingsNavDone         = document.getElementById('settingsNavDone')
 const settingsAddAccount      = document.getElementById('settingsAddAccount')
 const settingsCurrentAccounts = document.getElementById('settingsCurrentAccounts')
 
@@ -32,6 +33,11 @@ function setupSettingsTabs(){
     })
 }
 
+/* Closes the settings view and saves all data. */
+settingsNavDone.onclick = () => {
+    switchView(getCurrentView(), VIEWS.landing)
+}
+
 /**
  * Account Management Tab
  */
@@ -64,9 +70,7 @@ function bindAuthAccountSelect(){
             }
             val.setAttribute('selected', '')
             val.innerHTML = 'Selected Account ✔'
-            ConfigManager.setSelectedAccount(val.closest('.settingsAuthAccount').getAttribute('uuid'))
-            ConfigManager.save()
-            updateSelectedAccount(ConfigManager.getSelectedAccount())
+            setSelectedAccount(val.closest('.settingsAuthAccount').getAttribute('uuid'))
         }
     })
 }
@@ -79,23 +83,55 @@ function bindAuthAccountSelect(){
 function bindAuthAccountLogOut(){
     Array.from(document.getElementsByClassName('settingsAuthAccountLogOut')).map((val) => {
         val.onclick = (e) => {
-            const parent = val.closest('.settingsAuthAccount')
-            const uuid = parent.getAttribute('uuid')
-            const prevSelAcc = ConfigManager.getSelectedAccount()
-            AuthManager.removeAccount(uuid).then(() => {
-                if(uuid === prevSelAcc.uuid){
-                    const selAcc = ConfigManager.getSelectedAccount()
-                    refreshAuthAccountSelected(selAcc.uuid)
-                    updateSelectedAccount(selAcc)
-                }
-            })
-            $(parent).fadeOut(250, () => {
-                parent.remove()
-            })
+            let isLastAccount = false
+            if(Object.keys(ConfigManager.getAuthAccounts()).length === 1){
+                isLastAccount = true
+                setOverlayContent(
+                    'Warning<br>This is Your Last Account',
+                    'In order to use the launcher you must be logged into at least one account. You will need to login again after.<br><br>Are you sure you want to log out?',
+                    'I\'m Sure',
+                    'Cancel'
+                )
+                setOverlayHandler(() => {
+                    processLogOut(val, isLastAccount)
+                    switchView(getCurrentView(), VIEWS.login)
+                    toggleOverlay(false)
+                })
+                setDismissHandler(() => {
+                    toggleOverlay(false)
+                })
+                toggleOverlay(true, true)
+            } else {
+                processLogOut(val, isLastAccount)
+            }
+            
         }
     })
 }
 
+/**
+ * Process a log out.
+ * 
+ * @param {Element} val The log out button element.
+ * @param {boolean} isLastAccount If this logout is on the last added account.
+ */
+function processLogOut(val, isLastAccount){
+    const parent = val.closest('.settingsAuthAccount')
+    const uuid = parent.getAttribute('uuid')
+    const prevSelAcc = ConfigManager.getSelectedAccount()
+    AuthManager.removeAccount(uuid).then(() => {
+        if(!isLastAccount && uuid === prevSelAcc.uuid){
+            const selAcc = ConfigManager.getSelectedAccount()
+            refreshAuthAccountSelected(selAcc.uuid)
+            updateSelectedAccount(selAcc)
+            validateSelectedAccount()
+        }
+    })
+    $(parent).fadeOut(250, () => {
+        parent.remove()
+    })
+}
+
 /**
  * Refreshes the status of the selected account on the auth account
  * elements.

app/assets/js/scripts/uibinder.js

@@ -61,9 +61,11 @@ function showMainUI(){
         document.body.style.backgroundImage = `url('assets/images/backgrounds/${document.body.getAttribute('bkid')}.jpg')`
         $('#main').show()
 
+        const isLoggedIn = Object.keys(ConfigManager.getAuthAccounts()).length > 0
+
         // If this is enabled in a development environment we'll get ratelimited.
         // The relaunch frequency is usually far too high.
-        if(!isDev){
+        if(!isDev && isLoggedIn){
             validateSelectedAccount().then((v) => {
                 if(v){
                     console.log('%c[AuthManager]', 'color: #209b07; font-weight: bold', 'Account access token validated.')
@@ -76,7 +78,11 @@ function showMainUI(){
         if(ConfigManager.isFirstLaunch()){
             $(VIEWS.welcome).fadeIn(1000)
         } else {
-            $(VIEWS.landing).fadeIn(1000)
+            if(isLoggedIn){
+                $(VIEWS.landing).fadeIn(1000)
+            } else {
+                $(VIEWS.login).fadeIn(1000)
+            }
         }
 
         setTimeout(() => {

app/settings.ejs

@@ -10,6 +10,10 @@
                     <button class="settingsNavItem" rSc="settingsTabMinecraft">Minecraft</button>
                     <button class="settingsNavItem" rSc="settingsTabJava">Java</button>
                     <button class="settingsNavItem" rSc="settingsTabLauncher">Launcher</button>
+                    <div id="settingsNavContentBottom">
+                        <div class="settingsNavDivider"></div>
+                        <button id="settingsNavDone">Done</button>
+                    </div>
                 </div>
             </div>
         </div>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "westeroscraftlauncher",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "westeroscraftlauncher",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.7",
   "description": "Custom modded launcher for Westeroscraft",
   "productName": "WesterosCraft Launcher",
   "main": "index.js",