Question 283328 in Javascript Question posted in
A very good W3school tutorial can be found here.

JavaScript – User can still login with wrong input

I have here a form validation registration and login form using JavaScript.

Here, I only use a simple in-memory for registered users.

This code is only for learning purposes since I’m still trying to learn vanilla JavaScript.

In this program, the user can create a registration using their desired username, valid email address, and password. They should be able to input a unique username, valid email, password, and confirm their password.

And after registration of their account, the user should be able to login using the registered credentials they have inputted earlier.

Here is the js code,

const registeredUsers = [];

const loginForm = document.getElementById('loginForm');

loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    validateRegistration();
    validateLogin();
});

function validateRegistration() {
    const username = document.getElementById("username").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const confirmPassword = document.getElementById("confirmPassword").value;

    if (username.length < 3 || username.length > 15) {
        alert("Username must be between 3 and 15 characters.");
        return;
    }

    if (registeredUsers.some(user => user.username === username)) {
        alert("Username already taken. Please choose another one.");
        return;
    }

    const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
    if (!emailRegex.test(email)) {
        alert("Invalid email address.");
        return;
    }

    if (registeredUsers.some(user => user.email === email)) {
        alert("Email address already registered.");
        return;
    }

    if (password.length < 8 || password.length > 20) {
        alert("Password must be between 8 and 20 characters.");
        return;
    }

    if (password !== confirmPassword) {
        alert("Passwords do not match.");
        return;
    }

    registeredUsers.push({ username, email, password });
    alert("Registration successful!");
}

function validateLogin() {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;

    // Find user by email
    const user = registeredUsers.find(user => user.email === email);

    if (user) {
        // User found, now check the password
        if (user.password === password) {
            alert("Welcome " + user.username + "!");
        } else {
            alert("Invalid password. Please try again.");
        }
    } else {
        alert("Invalid email. Please try again or register.");
    }
}

My problem here is that even though a user inputs an unregistered email/incorrect email/incorrect password, the user can still login to the account.

Is the issue in the validateLogin() function?

p.s. i am sorry for my bad English since it is not my first language.

Tags:

2

Answers


  1. 0

    Looks like function issue, it should be first checked – email is valid and registered, before proceeding to validate the password.

    
function isValidEmail(email) {
    const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
    return emailRegex.test(email);
}

function validateLogin() {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;

    // Check if the email is valid
    if (!isValidEmail(email)) {
        alert("Invalid email address.");
        return;
    }

    // Find user by email
    const user = registeredUsers.find(user => user.email === email);

    if (user) {
        // User found, now check the password
        if (user.password === password) {
            alert("Welcome " + user.username + "!");
        } else {
            alert("Invalid password. Please try again.");
        }
    } else {
        alert("Invalid email. Please try again or register.");
    }
}
    Login or Signup to reply.
  2. 0

    if I understand your problem correctly I guess the problem is you are registering the user when they login, that’s why it will always succeed

    in your login you are calling validateRegistration

    loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    validateRegistration();
    validateLogin();
});

    and validateRegistration after it validates the inputs it has

    registeredUsers.push({ username, email, password });

    so by the time validateLogin is executed the registeredUsers array already has the data that you entered

    so you need to separate the login logic from the register logic

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search