Javascript Login System checks if ("UserPassword") == Undefined not working

Question

So basically in an html file, I have an input field, with the id "UserPassword". In my .js file I have a function register() where it checks if you are Registered, and if not, if this is your first time logging in. If not, then it checks if your inputted password == undefined. If it does, it says "Invalid Username or Password." in the console log.

How I've set it up is that when the function register() is run, when it gets down to the (FirstTimeLoggedIn == "No" else statement, it does if ("UserPassword" = undefined"), then it will tell you "Invalid Username or Password. Problem is, it doesn't do that, properly. Regardless of if I have entered a password into the input, it still says "Invalid Username or Password"

Here's the code: The whole script, seeing as it's not much else besides a login and logout button. And yes, I'm planning on implementing this to the login button as-well, but I needed to get this working first.

var Date = Date()
let Username = undefined
let Password = undefined
let LoggedIn = "No"
let CorrectPassword = undefined
let FirstTimeLoggingIn = "Yes"
let Registered = "No"
let ConsoleMessage = undefined

//Hello Message
console.log("Welcome to the Cosmic Online Interactable Interface, or COII.");
ConsoleMessage = "Welcome to Cosmic."
document.getElementById('content').innerHTML = (ConsoleMessage);

//Registration Function                                                  
function register() {                                                 
    if (Registered == "Yes") {
        console.log("Already Registered");
        ConsoleMessage = "Already Registered."
        document.getElementById('content').innerHTML = (ConsoleMessage)
    } 
    else if (FirstTimeLoggingIn == "No") {
            console.log("Account Already Registered.");
        ConsoleMessage = "Account Already Registered.";
        document.getElementById('content').innerHTML = (ConsoleMessage);
        }
         else {
            document.getElementById("UserPassword".value)
                if  ("UserPassword" == undefined) {
        console.log("Invalid Username or Password.");
        ConsoleMessage = "Invalid Username or Password.";
        document.getElementById('content').innerHTML = (ConsoleMessage);
                }
            
                 else {
            console.log("Registered at: " + Date);
            Username = document.getElementById("UserUsername").value;
            Password = document.getElementById("UserPassword").value;
            console.log("Welcome, " + Username);
        ConsoleMessage = "Welcome, " + Username;
        document.getElementById('content').innerHTML = (ConsoleMessage);
        Registered = "Yes";
        FirstTimeLoggingIn = "No";
        LoggedIn = "Yes";
        CorrectPassword = Password;
        //redirect to account page
        setTimeout(() => {  window.location.href = "Home.html"; }, 2000);
        console.log("Redirecting to Home Page");
        ConsoleMessage = "Redirecting to Home Page";
        document.getElementById('content').innerHTML = (ConsoleMessage);
         }
        }
    }


//Login Function  // Login is WIP

function login() {
    if (Registered == "No") {
     console.log("Not Registered.");
     ConsoleMessage = "Not Registered."
     document.getElementById('content').innerHTML = (ConsoleMessage)
    }
    if (LoggedIn == "Yes") {
        console.log("Already Logged In, " + Username);
           ConsoleMessage = "Already Logged In, " + Username
           document.getElementById('content').innerHTML = (ConsoleMessage)
        }
    
    if (Registered == "Yes" && LoggedIn == "No")
     {
         //if (LoggedIn == "No")
        console.log("Welcome, " + Username);
        ConsoleMessage = "Welcome, " + Username
        console.log("Logged In At: " + Date)
        document.getElementById('content').innerHTML = (ConsoleMessage)
        LoggedIn = "Yes"
        //redirect to account page
        setTimeout(() => {  window.location.href = "home.html"; }, 2000);
        console.log("Redirecting to Home Page");
        ConsoleMessage = "Redirecting to Home Page";
        document.getElementById('content').innerHTML = (ConsoleMessage);
     }
}

//Log Out Function.
function LogOut() {
if (LoggedIn == "No") {
    console.log("Not Logged In.");
        ConsoleMessage = "Not Logged In."
        document.getElementById('content').innerHTML = (ConsoleMessage)
} else {
    LoggedIn = "Yes"
    console.log("Logged Out " + Username);
        ConsoleMessage = "Logged Out " + Username;
        document.getElementById('content').innerHTML = (ConsoleMessage)
        LoggedIn = "No"
        console.log("Logged Out At: " + Date)
    }
}```

user_11926970 · Answer

If the user left any input field empty, then mostly the value will be empty, which means that if you use the length property on your input you will get zero as the length of the input by the user.

Checking for NULL or undefined is not much required here, but still, you can check for the same if you want.

document.getElementById("register-user").addEventListener("click", register);

function register() {


  let userName = document.getElementById("user-name");
  let userPassword = document.getElementById("user-password");

  if (userName.value == undefined || 
      userName.value == null || 
      userName.value.length == 0) {

          console.log("Please provide user name");
  }
  else if (userPassword.value == undefined || 
           userPassword.value == null || 
           userPassword.value.length == 0) {
 
             console.log("Please provide user password");
  }
  else {
      console.log("Everything is fine. You can register user.");  
  }
}

If you like to reduce some lines of code, you can use the exclamation mark (!) symbol, called a bang, which is the logical NOT operator.

You can replace

 userName.value == undefined || 
 userName.value == null || 
 userName.value.length == 0

To

!userName

And for

userPassword.value == undefined || 
userPassword.value == null || 
userPassword.value.length == 0

To

!userPassword

And it will evaluate everything to empty strings (""), NULL, undefined, false.

document.getElementById("register-user").addEventListener("click", register);

function register() {


  let userName = document.getElementById("user-name");
  let userPassword = document.getElementById("user-password");

  if (!userName.value) {
     console.log("Please provide user name");
  }
  else if (!userPassword.value) {
      console.log("Please provide user password");
  }
  else {
      console.log("Everything is fine. You can register user.");  
  }
}

Thus by using an exclamation mark (!) you get more flexibility to change for a variety of range of user input.

Javascript Login System checks if ("UserPassword") == Undefined not working

1 Answers