Adding login functionality to login view (connection with authmanager).

This commit is contained in:
Daniel Scalzi 2018-01-29 01:23:20 -05:00
parent 52aea274a7
commit 8ea4ae8ec2
4 changed files with 89 additions and 10 deletions

View File

@ -141,6 +141,7 @@ p {
align-items: center; align-items: center;
height: 100%; height: 100%;
width: 100%; width: 100%;
transition: 0.25s ease;
} }
/* Login content wrapper. */ /* Login content wrapper. */
@ -320,6 +321,9 @@ p {
color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75);
pointer-events: none; pointer-events: none;
} }
#loginButton[loading] {
color: #fff;
}
#loginButton:hover, #loginButton:hover,
#loginButton:focus { #loginButton:focus {
text-shadow: 0px 0px 20px #fff; text-shadow: 0px 0px 20px #fff;
@ -567,9 +571,9 @@ p {
background: rgba(0, 0, 0, 0.50); background: rgba(0, 0, 0, 0.50);
} }
#loginContainer[error] > #loginErrorContainer { /*#loginContainer[error] > #loginErrorContainer {
display: flex; display: flex;
} }*/
#loginContainer[error] > div:not(#loginErrorContainer) { #loginContainer[error] > div:not(#loginErrorContainer) {
filter: blur(3px) contrast(0.9) brightness(1.0); filter: blur(3px) contrast(0.9) brightness(1.0);
@ -613,6 +617,16 @@ p {
border-radius: 2px; border-radius: 2px;
width: 75px; width: 75px;
cursor: pointer; 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);
} }
/* * * /* * *

View File

@ -2,7 +2,11 @@ const ConfigManager = require('./configmanager.js')
const Mojang = require('./mojang.js') const Mojang = require('./mojang.js')
exports.addAccount = async function(username, password){ exports.addAccount = async function(username, password){
try{
const session = await Mojang.authenticate(username, password, ConfigManager.getClientToken) 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) const ret = ConfigManager.addAuthAccount(session.selectedProfile.id, session.accessToken, username, session.selectedProfile.name)
ConfigManager.save() ConfigManager.save()
return ret return ret

View File

@ -122,7 +122,7 @@ exports.authenticate = function(username, password, clientToken, requestUser = t
if(response.statusCode === 200){ if(response.statusCode === 200){
fulfill(body) fulfill(body)
} else { } else {
reject() reject(body)
} }
}) })
}) })

View File

@ -70,6 +70,11 @@
const basicEmail = /^\S+@\S+\.\S+$/ const basicEmail = /^\S+@\S+\.\S+$/
// DOM cache. // 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 loginEmailError = document.getElementById('loginEmailError')
const loginUsername = document.getElementById('loginUsername') const loginUsername = document.getElementById('loginUsername')
const loginPasswordError = document.getElementById('loginPasswordError') const loginPasswordError = document.getElementById('loginPasswordError')
@ -159,10 +164,11 @@
// Enable or disable loading elements. // Enable or disable loading elements.
function loginLoading(v){ function loginLoading(v){
loginButton.setAttribute('loading', v)
if(v){ if(v){
loginButton.setAttribute('loading', v)
loginButton.innerHTML = loginButton.innerHTML.replace('LOGIN', 'LOGGING IN') loginButton.innerHTML = loginButton.innerHTML.replace('LOGIN', 'LOGGING IN')
} else { } else {
loginButton.removeAttribute('loading')
loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'LOGIN') loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'LOGIN')
} }
} }
@ -170,10 +176,45 @@
// Disable or enable login form. // Disable or enable login form.
function formDisabled(v){ function formDisabled(v){
loginDisabled(v) loginDisabled(v)
loginUsername.disabled = true loginUsername.disabled = v
loginPassword.disabled = true loginPassword.disabled = v
checkmarkContainer.setAttribute('disabled', true) if(v){
loginRememberOption.disabled = true 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:<br>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:<br>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:<br>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', () => { loginButton.addEventListener('click', () => {
@ -183,15 +224,35 @@
// Show loading stuff. // Show loading stuff.
loginLoading(true) 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. // Temp for debugging, use procedure with real code.
setTimeout(() => { setTimeout(() => {
loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'SUCCESS') loginButton.innerHTML = loginButton.innerHTML.replace('LOGGING IN', 'SUCCESS')
loginButton.style.color = '#ffffff'
$('.circle-loader').toggleClass('load-complete') $('.circle-loader').toggleClass('load-complete')
$('.checkmark').toggle() $('.checkmark').toggle()
}, 2500) }, 2500)
}) })
loginErrorAcknowledge.addEventListener('click', () => {
formDisabled(false)
loginContainer.removeAttribute('error', false)
$('#loginErrorContainer').fadeOut(250)
})
</script> </script>
<!-- Will reuse this down the line, then it will be removed from this file. --> <!-- Will reuse this down the line, then it will be removed from this file. -->
<!--<div id="loginLoading"> <!--<div id="loginLoading">