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

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);
 }
 
 /* * *

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

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)
             }
         })
     })

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:<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', () => {
@@ -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)
+        })
     </script>
     <!-- Will reuse this down the line, then it will be removed from this file. -->
     <!--<div id="loginLoading">