From 960214efdffd34ae0130e4b880ca9cb58f28988f Mon Sep 17 00:00:00 2001 From: cyber-dream Date: Thu, 4 Aug 2022 06:03:54 +0300 Subject: [PATCH 1/3] Back cancel button on offline login view --- app/assets/css/launcher.css | 73 +++++++++++++++++++++++++++ app/assets/js/scripts/loginOffline.js | 29 +++++++---- app/loginOffline.ejs | 8 +-- 3 files changed, 96 insertions(+), 14 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index d7a52b8..e3c1d3a 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -450,6 +450,79 @@ body, button { transition: 0.25s ease; } + + + + + +/* loginOffline cancel button styles. */ +#loginOfflineCancelContainer { + position: absolute; + top: 5%; + right: 5%; +} + +/* loginOffline cancel button styles. */ +#loginOfflineCancelButton { + background: none; + border: none; + outline: none; + cursor: pointer; + transition: 0.25s ease; +} +#loginOfflineCancelButton:hover #loginOfflineCancelIcon, +#loginOfflineCancelButton:hover #loginOfflineCancelText, +#loginOfflineCancelButton:focus #loginOfflineCancelIcon, +#loginOfflineCancelButton:focus #loginOfflineCancelText { + text-shadow: 0px 0px 20px white; +} +#loginOfflineCancelButton:hover #loginOfflineCancelIcon, +#loginOfflineCancelButton:focus #loginOfflineCancelIcon { + box-shadow: 0px 0px 20px white; +} +#loginOfflineCancelButton:active #loginOfflineCancelIcon, +#loginOfflineCancelButton:active #loginOfflineCancelText { + text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75); + color: rgba(255, 255, 255, 0.75); + border-color: rgba(255, 255, 255, 0.75); +} +#loginOfflineCancelButton:active #loginOfflineCancelIcon { + box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75); +} +#loginOfflineCancelButton:disabled { + pointer-events: none; +} +#loginOfflineCancelButton:disabled #loginOfflineCancelIcon, +#loginOfflineCancelButton:disabled #loginOfflineCancelText { + color: rgba(255, 255, 255, 0.75); + border-color: rgba(255, 255, 255, 0.75); +} + +/* The X in a circle icon for the cancel button. */ +#loginOfflineCancelIcon { + border-radius: 50%; + border: 1px solid white; + box-sizing: border-box; + height: 30px; + width: 30px; + font-size: 19px; + line-height: 30px; + margin: 0 auto; + margin-bottom: 5px; + transition: 0.25s ease; +} +/* Text for the loginOffline cancel button. */ +#loginOfflineCancelText { + font-size: 15px; + transition: 0.25s ease; +} + + + + + + + /* Login content wrapper. */ #loginContent { display: flex; diff --git a/app/assets/js/scripts/loginOffline.js b/app/assets/js/scripts/loginOffline.js index dc3446f..7ee9e5a 100644 --- a/app/assets/js/scripts/loginOffline.js +++ b/app/assets/js/scripts/loginOffline.js @@ -1,6 +1,8 @@ const loggerOfflineLogin = LoggerUtil1('%c[LoginOffline]', 'color: #000668; font-weight: bold') -const loginOfflineButton = document.getElementById('loginOfflineButton') +const loginOfflineButton = document.getElementById('loginOfflineButton') +const loginOfflineCancelContainer = document.getElementById('loginOfflineCancelContainer') +const loginOfflineCancelButton = document.getElementById('loginOfflineCancelButton') function loginOfflineDisabled(v){ if(loginOfflineButton.disabled !== v){ @@ -10,21 +12,28 @@ function loginOfflineDisabled(v){ function formOfflineDisabled(v){ loginOfflineDisabled(v) - //loginCancelButton.disabled = v loginOfflineUsername.disabled = v - /*loginPassword.disabled = v - if(v){ - checkmarkContainer.setAttribute('disabled', v) - } else { - checkmarkContainer.removeAttribute('disabled') - } - loginRememberOption.disabled = v*/ } -loginOfflineButton.addEventListener('click', () => { + +loginOfflineButton.addEventListener('click', () => { formOfflineDisabled(true) AuthManager.addOfflineAccount(loginOfflineUsername.value).then((value) =>{ switchView(VIEWS.loginOffline, VIEWS.landing, 500, 500) + }) + loginOfflineUsername = '' +}) + +loginOfflineCancelButton.addEventListener('click', () => { + if (Object.keys(ConfigManager.getAuthAccounts()).length === 0) { + loginOfflineUsername.value = '' + switchView(VIEWS.loginOffline, VIEWS.loginOptions, 500, 500) + } + else + { + loginOfflineUsername.value = '' + switchView(VIEWS.loginOffline, VIEWS.landing, 500, 500) + } }) \ No newline at end of file diff --git a/app/loginOffline.ejs b/app/loginOffline.ejs index 06f6526..d0cab3b 100644 --- a/app/loginOffline.ejs +++ b/app/loginOffline.ejs @@ -1,8 +1,8 @@