Merge pull request #90 from kingmancho/main

Added autofill compatibility to login
Infinite-Chess · Jul 16, 2024 · 4145cb3 · 4145cb3
2 parents d77506d + 2ddae9d
commit 4145cb3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 21 deletions.
diff --git a/src/client/scripts/login.js b/src/client/scripts/login.js
@@ -2,23 +2,19 @@
 const usernameInputElement = document.getElementById('username');
 const passwordInputElement = document.getElementById('password');
 const submitButton = document.getElementById('submit');
-let loginErrorElement = undefined;
 const forgotElement = document.getElementById('forgot');
+let loginErrorElement = undefined;
 
-usernameInputElement.addEventListener('input', (event) => { // When username field changes...
-    loginErrorElement?.remove();
-    loginErrorElement = undefined;
-    updateSubmitButton();
-    // Make forgot password message hidden
-    forgotElement.className = 'forgothidden';
-});
 
-passwordInputElement.addEventListener('input', (event) => { // When username field changes...
-    loginErrorElement?.remove();
-    loginErrorElement = undefined;
-    updateSubmitButton();
-    // Make forgot password message hidden
-    forgotElement.className = 'forgothidden';
+//Event Listeners
+usernameInputElement.addEventListener('input', handleInput); // When username field changes...
+passwordInputElement.addEventListener('input', handleInput); // When username field changes...
+
+//Checks for autofilled inputs on load
+window.addEventListener('load', (event) => {
+    if (usernameInputElement.value && passwordInputElement.value) {
+        updateSubmitButton();
+    }
 });
 
 submitButton.addEventListener('click', (event) => {
@@ -27,6 +23,17 @@ submitButton.addEventListener('click', (event) => {
     if (usernameInputElement.value && passwordInputElement.value && !loginErrorElement) sendLogin(usernameInputElement.value, passwordInputElement.value);
 });
 
+function handleInput(event) {
+    if (loginErrorElement) {
+        loginErrorElement.remove();
+        loginErrorElement = undefined;
+    }
+
+    updateSubmitButton();
+    // Make forgot password message hidden
+    forgotElement.className = 'forgothidden';
+}
+
 const sendLogin = (username, password) => {
     submitButton.disabled = true;
 
@@ -45,7 +52,7 @@ const sendLogin = (username, password) => {
     .then((result) => {
         if (OK) { // Username & password accepted! Handle our access token
             // const token = getCookieValue('token')
-            
+
             // Check for a redirectTo query parameter, and if it exists, use it
             const redirectTo = getQueryParam('redirectTo');
             if (redirectTo) window.location.href = redirectTo;
@@ -87,10 +94,10 @@ function createErrorElement(id, insertAfter) {
 
 function getCookieValue(cookieName) {
     const cookieArray = document.cookie.split("; ");
-    
+
     for (let i = 0; i < cookieArray.length; i++) {
         const cookiePair = cookieArray[i].split("=");
-  
+
         if (cookiePair[0] === cookieName) {
             return cookiePair[1];
         }

diff --git a/src/client/scripts/validation.js b/src/client/scripts/validation.js
@@ -81,7 +81,7 @@ const validation = (function(){
 
     /**
      * Inits our token, and, if we're logged in, inits member, and changes navigation links if we're logged in.
-     * 
+     *
      * If we're not signed in, the server will give/renew us a browser-id cookie for validation.
      */
     function refreshToken() {
@@ -131,13 +131,13 @@ const validation = (function(){
         if (areLoggedIn) {
             loginLink.setAttribute('href', `/member/${member.toLowerCase()}`);
             loginText.textContent = 'Profile';
-    
+
             createaccountLink.setAttribute('href', '/logout');
             createaccountText.textContent = 'Log Out';
         } else {
             loginLink.setAttribute('href', `/login`);
             loginText.textContent = 'Log In';
-    
+
             createaccountLink.setAttribute('href', '/createaccount');
             createaccountText.textContent = 'Create Account';
         }
@@ -150,7 +150,7 @@ const validation = (function(){
      */
     function getCookieValue(cookieName) {
         const cookieArray = document.cookie.split("; ");
-        
+
         for (let i = 0; i < cookieArray.length; i++) {
             const cookiePair = cookieArray[i].split("=");
             if (cookiePair[0] === cookieName) return cookiePair[1];