Validate email and password from an array of existing emails and passowrds in jQuery

Question

I have two arrays emails and passwords (though you may see more) that I want to use to authenticate users during sign in. It's a practice issue not something to implement in the industry. See below:

The other arrays checkEmails and checkPasswords are not useful here but they act as a storage for even failed sign in's. Onto the code I have a condition that authenticates using only a predetermined email and password. See below:

$("#myForm").submit(function(e) {
  e.preventDefault();
  if ($("#inputEmail").val() != '' && $("#inputPassword").val() != '') {
    if ($("#inputEmail").val() == 'quis@google.com' && $("#inputPassword").val() == 'quis') {
      window.location.href = './database.html';
    } else {
      alert('invalid username password');
    }
  } else {
    alert('username or password cann\'t be blank');
  }
});

But now I want the authentication to search through the emails and the passwords arrays. Here is the whole userscripts.js file for reference.

$("#myForm").submit(function(e) {
  e.preventDefault();
  if ($("#inputEmail").val() != '' && $("#inputPassword").val() != '') {
    if ($("#inputEmail").val() == 'quis@google.com' && $("#inputPassword").val() == 'quis') {
      window.location.href = './database.html';
    } else {
      alert('invalid username password');
    }
  } else {
    alert('username or password cann\'t be blank');
  }
});

const form = document.querySelector('form');
const input = document.getElementById('inputUsername');
const inputTwo = document.getElementById('inputEmail');
const inputThree = document.getElementById('inputPassword');
const ul = document.querySelector('ul')
const button = document.querySelector('button')

let usernamesArray = localStorage.getItem('usernames') ?
JSON.parse(localStorage.getItem('usernames')) : []

let emailsArray = localStorage.getItem('emails') ?
JSON.parse(localStorage.getItem('emails')) : []

let passwordsArray = localStorage.getItem('passwords') ?
JSON.parse(localStorage.getItem('passwords')) : []

let checkEmailsArray = localStorage.getItem('checkEmails') ?
JSON.parse(localStorage.getItem('checkEmails')) : []

let checkPasswordsArray = localStorage.getItem('checkPasswords') ?
JSON.parse(localStorage.getItem('checkPasswords')) : []

const liMaker = text => {
const li = document.createElement('li')
li.textContent = text;
ul.appendChild(li);
}

const liMakerTwo = text => {
const liTwo = document.createElement('li')
li.textContent = text;
ul.appendChild(li);
}

const liMakerThree = text => {
const liThree = document.createElement('li')
li.textContent = text;
ul.appendChild(li);
}
//let usernamesArray = []

localStorage.setItem('usernames', JSON.stringify(usernamesArray));
const data = JSON.parse(localStorage.getItem('usernames'))

//let emailsArray = []

localStorage.setItem('emails', JSON.stringify(emailsArray));
const dataTwo = JSON.parse(localStorage.getItem('emails'))

//let passwordsArray = []

localStorage.setItem('passwords', JSON.stringify(passwordsArray));
const dataThree = JSON.parse(localStorage.getItem('passwords'))

//let checkEmailsArray = []

localStorage.setItem('checkEmails', JSON.stringify(checkEmailsArray));
const dataFour = JSON.parse(localStorage.getItem('checkEmails'))

//let checkPasswordsArray = []

localStorage.setItem('checkPasswords', JSON.stringify(checkPasswordsArray));
const dataFive = JSON.parse(localStorage.getItem('checkPasswords'))

form.addEventListener('submit', function(e){
e.preventDefault()

checkEmailsArray.push(inputTwo.value)
localStorage.setItem('checkEmails', JSON.stringify(checkEmailsArray));

checkPasswordsArray.push(inputThree.value)
localStorage.setItem('checkPasswords', JSON.stringify(checkPasswordsArray));

usernamesArray.push(input.value);
localStorage.setItem('usernames', JSON.stringify(usernamesArray));

emailsArray.push(inputTwo.value)
localStorage.setItem('emails', JSON.stringify(emailsArray));

passwordsArray.push(inputThree.value)
localStorage.setItem('passwords', JSON.stringify(passwordsArray));

});

I attempted to replace 'quis@google.com' with emails array and 'quis' with passwordsArray but the authentication using this arrays failed. I have little experience with JS functions, arrays e.t.c that's why I am stuck. Help me out guys:-) Here is the signin.html file just in case.



  
    
    Signin #DB
    
    
    
    
    
  
  
    
        Please Sign In
        Email Address
        
        Password

lucas · Accepted Answer

You can check if your value (username and/or password) is included in an array by using Array#includes.

Example:

var emails = ["email@email.com", my@email.com"]
var passwords = ["1234", 5678"]

emails.includes("email@email.com") // returns true
emails.includes("foo@bar") // returns false

passwords.includes("1234") // returns true
password.includes("an actual password") // returns false

So you can validate it doing something like this: Just have in mind that the emails and passwords arrays are actually coming from your localStorage. You have to change it on this example.

var isValidEmail = emails.includes($("#inputEmail").val())
var isValidPassword = passwords.includes($("#inputPassword").val())

if (isValidEmail && isValidPassword) {
  // Do something
} else {
  // Handle error
}

Validate email and password from an array of existing emails and passowrds in jQuery

Answers (1)

Related Questions