alerts and logging in

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

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

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,