diff --git a/resources/js/authAlert.js b/resources/js/authAlert.js index 9b3f462..476f21f 100644 --- a/resources/js/authAlert.js +++ b/resources/js/authAlert.js @@ -1,6 +1,6 @@ let alertTimeout, alertCooldown = 3000 -async function displayLoginAlert(message, type) { +async function displayLoginAlert(message, type, cooldown = null) { const elm = document.getElementById('loginAlert'); const text = document.getElementById('loginAlertText'); @@ -11,6 +11,10 @@ async function displayLoginAlert(message, type) { elm.classList.add('error'); break; + case 'success': + elm.classList.add('success'); + break; + case 'warn': default: elm.classList.add('warn'); @@ -19,14 +23,15 @@ async function displayLoginAlert(message, type) { text.innerText = message; - // Disappear after 5 seconds + // Disappear after cooldown alertTimeout = setTimeout(() => { elm.style.display = 'none'; - }, alertCooldown) + }, cooldown || alertCooldown) } -async function displayRegisterAlert(message, type) { +async function displayRegisterAlert(message, type, cooldown = null) { const elm = document.getElementById('registerAlert'); + const text = document.getElementById('registerAlertText'); elm.style.removeProperty('display'); @@ -35,6 +40,10 @@ async function displayRegisterAlert(message, type) { elm.classList.add('error'); break; + case 'success': + elm.classList.add('success'); + break; + case 'warn': default: elm.classList.add('warn'); @@ -43,8 +52,8 @@ async function displayRegisterAlert(message, type) { text.innerText = message; - // Disappear after 5 seconds + // Disappear after cooldown alertTimeout = setTimeout(() => { elm.style.display = 'none'; - }, alertCooldown) + }, cooldown || alertCooldown) } \ No newline at end of file diff --git a/resources/js/login.js b/resources/js/login.js index 1b13d1b..388acba 100644 --- a/resources/js/login.js +++ b/resources/js/login.js @@ -64,8 +64,6 @@ async function login() { const { data } = await axios.post(url + '/grasscutter/login', reqBody) - console.log(data) - switch(data.message) { case 'INVALID_ACCOUNT': displayLoginAlert('Invalid username or password', 'error'); @@ -73,20 +71,25 @@ async function login() { case 'NO_PASSWORD': // No account password, create one with change password + displayLoginAlert('No password set, please change password', 'warn'); break; case 'UNKNOWN': // Unknown error, contact server owner + displayLoginAlert('Unknown error, contact server owner', 'error'); break; case 'AUTH_DISABLED': // Authentication is disabled, we can just connect the user + displayLoginAlert('Authentication is disabled, no need to log in!', 'warn'); break; default: // Success! Copy the JWT token to their clipboard const tkData = parseJwt(data.jwt) await Neutralino.clipboard.writeText(tkData.token) + + displayLoginAlert('Login successful! Token copied to clipboard. Paste this token into the username field of the game to log in.', 'success', 8000); break; } } @@ -112,23 +115,34 @@ async function register() { const { data } = await axios.post(url + '/grasscutter/register', reqBody) - console.log(data) - switch(data.message) { case 'USERNAME_TAKEN': // Username is taken + displayRegisterAlert('Username is taken', 'error'); break; case 'PASSWORD_MISMATCH': // The password and password confirmation do not match + displayRegisterAlert('Password and password confirmation do not match', 'error'); break; case 'UNKNOWN': // Unknown error, contact server owner + displayRegisterAlert('Unknown error, contact server owner', 'error'); break; case 'AUTH_DISABLED': // Authentication is disabled, we can just connect the user + displayRegisterAlert('Authentication is disabled, no need to register!', 'warn'); + break; + + default: + // Success!! Bring them to the login screen and auto-input their username + const loginUsername = document.getElementById('loginUsername'); + loginUsername.value = username; + + setLoginSection(); + displayLoginAlert('Registration successful!', 'success', 5000); break; } } diff --git a/resources/style/index.css b/resources/style/index.css index a164105..d66290f 100644 --- a/resources/style/index.css +++ b/resources/style/index.css @@ -34,7 +34,7 @@ body { } #loginPanel { - height: 40%; + height: 50%; width: 32%; } @@ -121,9 +121,12 @@ body { background: #e90000; } -#registerAlert .warn, -#loginAlert .warn { +.warn { + background: #ffc61e; +} +.success { + background: #00c200; } #registerAlert, @@ -133,6 +136,7 @@ body { align-items: center; border-radius: 5px; color: #fff; + text-align: center; } #registerAlert img,