From 8ea4ae8ec27ed275f1246617667cf9aa56aad728 Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Mon, 29 Jan 2018 01:23:20 -0500 Subject: [PATCH] Adding login functionality to login view (connection with authmanager). --- app/assets/css/launcher.css | 18 ++++++++- app/assets/js/authmanager.js | 6 ++- app/assets/js/mojang.js | 2 +- app/login.ejs | 73 +++++++++++++++++++++++++++++++++--- 4 files changed, 89 insertions(+), 10 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index d830400..9e07048 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -141,6 +141,7 @@ p { align-items: center; height: 100%; width: 100%; + transition: 0.25s ease; } /* Login content wrapper. */ @@ -320,6 +321,9 @@ p { color: rgba(255, 255, 255, 0.75); pointer-events: none; } +#loginButton[loading] { + color: #fff; +} #loginButton:hover, #loginButton:focus { text-shadow: 0px 0px 20px #fff; @@ -567,9 +571,9 @@ p { background: rgba(0, 0, 0, 0.50); } -#loginContainer[error] > #loginErrorContainer { +/*#loginContainer[error] > #loginErrorContainer { display: flex; -} +}*/ #loginContainer[error] > div:not(#loginErrorContainer) { filter: blur(3px) contrast(0.9) brightness(1.0); @@ -613,6 +617,16 @@ p { border-radius: 2px; width: 75px; cursor: pointer; + transition: 0.25s ease; +} +#loginErrorAcknowledge:hover, +#loginErrorAcknowledge:focus { + box-shadow: 0px 0px 10px 0px #fff; + outline: none; +} +#loginErrorAcknowledge:active { + border-color: rgba(255, 255, 255, 0.75); + color: rgba(255, 255, 255, 0.75); } /* * * diff --git a/app/assets/js/authmanager.js b/app/assets/js/authmanager.js index 039d3ea..8d1bbf8 100644 --- a/app/assets/js/authmanager.js +++ b/app/assets/js/authmanager.js @@ -2,7 +2,11 @@ const ConfigManager = require('./configmanager.js') const Mojang = require('./mojang.js') exports.addAccount = async function(username, password){ - const session = await Mojang.authenticate(username, password, ConfigManager.getClientToken) + try{ + const session = await Mojang.authenticate(username, password, ConfigManager.getClientToken) + } catch (err){ + return Promise.reject(err) + } const ret = ConfigManager.addAuthAccount(session.selectedProfile.id, session.accessToken, username, session.selectedProfile.name) ConfigManager.save() return ret diff --git a/app/assets/js/mojang.js b/app/assets/js/mojang.js index 47457bc..1547ee9 100644 --- a/app/assets/js/mojang.js +++ b/app/assets/js/mojang.js @@ -122,7 +122,7 @@ exports.authenticate = function(username, password, clientToken, requestUser = t if(response.statusCode === 200){ fulfill(body) } else { - reject() + reject(body) } }) }) diff --git a/app/login.ejs b/app/login.ejs index 2a61007..3ee8c9e 100644 --- a/app/login.ejs +++ b/app/login.ejs @@ -70,6 +70,11 @@ const basicEmail = /^\S+@\S+\.\S+$/ // DOM cache. + const loginContainer = document.getElementById('loginContainer') + const loginErrorTitle = document.getElementById('loginErrorTitle') + const loginErrorDesc = document.getElementById('loginErrorDesc') + const loginErrorAcknowledge = document.getElementById('loginErrorAcknowledge') + const loginEmailError = document.getElementById('loginEmailError') const loginUsername = document.getElementById('loginUsername') const loginPasswordError = document.getElementById('loginPasswordError') @@ -159,10 +164,11 @@ // Enable or disable loading elements. function loginLoading(v){ - loginButton.setAttribute('loading', v) if(v){ + loginButton.setAttribute('loading', v) loginButton.innerHTML = loginButton.innerHTML.replace('LOGIN', 'LOGGING IN') } else { + loginButton.removeAttribute('loading') loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'LOGIN') } } @@ -170,10 +176,45 @@ // Disable or enable login form. function formDisabled(v){ loginDisabled(v) - loginUsername.disabled = true - loginPassword.disabled = true - checkmarkContainer.setAttribute('disabled', true) - loginRememberOption.disabled = true + loginUsername.disabled = v + loginPassword.disabled = v + if(v){ + checkmarkContainer.setAttribute('disabled', v) + } else { + checkmarkContainer.removeAttribute('disabled') + } + loginRememberOption.disabled = v + } + + function resolveError(err){ + if(err.cause != null && err.cause === 'UserMigratedException') { + return { + title: 'Error During Login:
Invalid Credentials', + desc: 'You\'ve attempted to login with a migrated account. Try again using the account email as the username.' + } + } else { + if(err.error != null){ + if(err.error === 'ForbiddenOperationException'){ + if(err.errorMessage != null){ + if(err.errorMessage === 'Invalid credentials. Invalid username or password.'){ + return { + title: 'Error During Login:
Invalid Credentials', + desc: 'The email or password you\'ve entered is incorrect. Please try again.' + } + } else if(err.errorMessage === 'Invalid credentials.'){ + return { + title: 'Error During Login:
Too Many Attempts', + desc: 'There have been too many login attempts with this account recently. Please try again later.' + } + } + } + } + } + } + return { + title: err.error, + desc: err.errorMessage + } } loginButton.addEventListener('click', () => { @@ -183,15 +224,35 @@ // Show loading stuff. loginLoading(true) + AuthManager.addAccount(loginUsername.value, loginPassword.value).then((value) => { + loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'SUCCESS') + $('.circle-loader').toggleClass('load-complete') + $('.checkmark').toggle() + console.log(value) + }).catch((err) => { + loginLoading(false) + $('#loginErrorContainer').css('display', 'flex').hide().fadeIn(250) + loginContainer.setAttribute('error', true) + const errF = resolveError(err) + loginErrorTitle.innerHTML = errF.title + loginErrorDesc.innerHTML = errF.desc + console.log(err) + }) + // Temp for debugging, use procedure with real code. setTimeout(() => { loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'SUCCESS') - loginButton.style.color = '#ffffff' $('.circle-loader').toggleClass('load-complete') $('.checkmark').toggle() }, 2500) }) + + loginErrorAcknowledge.addEventListener('click', () => { + formDisabled(false) + loginContainer.removeAttribute('error', false) + $('#loginErrorContainer').fadeOut(250) + })