From 74a60a61c2add76b917e74eba92006b930e7bafa Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Wed, 30 May 2018 23:32:51 -0400 Subject: [PATCH] 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 | 42 ++++++++++++++++++- app/assets/js/scripts/settings.js | 68 +++++++++++++++++++++++-------- app/assets/js/scripts/uibinder.js | 10 ++++- app/settings.ejs | 4 ++ package-lock.json | 2 +- package.json | 2 +- 6 files changed, 107 insertions(+), 21 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 6873d1a8..aa496962 100644 --- a/app/assets/css/launcher.css +++ b/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%; diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js index f6b7f687..1dcbd985 100644 --- a/app/assets/js/scripts/settings.js +++ b/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
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.

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. diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js index ada4bd97..b790ea5b 100644 --- a/app/assets/js/scripts/uibinder.js +++ b/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(() => { diff --git a/app/settings.ejs b/app/settings.ejs index 4d877f56..e3719f7d 100644 --- a/app/settings.ejs +++ b/app/settings.ejs @@ -10,6 +10,10 @@ +
+
+ +
diff --git a/package-lock.json b/package-lock.json index fc496d68..3ebc0e6f 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index f77d5b83..638869db 100644 --- a/package.json +++ b/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",