Remove error message in login page when it matches

Question

I have a login page and I have the API for matching the password. If the password doesn't match it will show an error message but my problem is if the password is matching also it showing an error message. because am looping the data so every time it is checking I need to break the loop if it matches how to do. Here is my code

HTML

$(document).ready(function() {
    localStorage.removeItem('role');
    $(".login-error").hide();
    $("#login").on("submit", function(e) {
        e.preventDefault();
        var form_data = $('#login').serialize();
        var username = $("#name").val();
        var pwd = $("#password").val();
        $.ajax({
            url: "https://api.myjson.com/bins/qt7fk",
            type: "GET",
            dataType: "json",

            success: function(data) {
                console.log(typeof(data));
                // alert(JSON.stringify(data));
                var arr = data;
                arr.forEach(function(obj) {
                    console.log('name: ' + obj.name);
                    console.log('password: ' + obj.role);
                    var pass = obj.password;
                    // var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
                    var bytes = CryptoJS.AES.decrypt(pass.toString(), 'password');
                    var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                    // alert(plaintext);
                    var role = obj.role;
                    if (role == "User") {
                        if (username == obj.name && pwd == plaintext) {
                            alert("New role");
                            document.getElementById('message').innerHTML = "Success"
                            /*   window.location.href = "./job-insert.html?role=" + role; */
                        } else {
                            $("#login p").removeClass("d-none");
                        }
                    } else {
                        if (username == obj.name && pwd == plaintext) {
                            alert("Login succes");
                            document.getElementById('message').innerHTML = "Success"

                            /* window.location.href = "./dashboard.html?role=" + role; */
                        } else {
                            $("#login p").removeClass("d-none");
                            document.getElementById('message').innerHTML = "Please enter a correct login and password"
                        }
                    }
                })
            },
            error: function(data) {
                console.log(data);
            }
        });

    });
});

can you post your response object(data) as well from the api — noone, Apr 26 '19 at 07:50
I just executed your code in jsfiddle I didn't see the issue. — Nikhil Unni, Apr 26 '19 at 07:59
@ Nikhil Unni when you give the superadmin role it shows that error message — Sam, Apr 26 '19 at 08:18
@lakshmipriya since you use foreach method, there is no natural `break` statement. But you can refer [this](https://stackoverflow.com/questions/2641347/short-circuit-array-foreach-like-calling-break) .This gives you an idea of how to break an operation. — Krishna Prashatt, Apr 26 '19 at 09:08

Sami Ahmed Siddiqui · Accepted Answer · 2019-04-26T09:00:06.337

I have forked and break your code when the password gets matched. You may test this from here: code

$(document).ready(function() {
    localStorage.removeItem('role');
    $(".login-error").hide();
    $("#login").on("submit", function(e) {
        e.preventDefault();
        var form_data = $('#login').serialize();
        var username = $("#name").val();
        var pwd = $("#password").val();
        $.ajax({
            url: "https://api.myjson.com/bins/qt7fk",
            type: "GET",
            dataType: "json",

            success: function(data) {
                console.log(typeof(data));
                // alert(JSON.stringify(data));
                var arr = data;
                var BreakException = {};
                try {
                    arr.forEach(function(obj) {
                        console.log('name: ' + obj.name);
                        console.log('password: ' + obj.role);
                        var pass = obj.password;
                        // var decryptedBytes = CryptoJS.AES.decrypt(obj.password, "password");
                        var bytes = CryptoJS.AES.decrypt(pass.toString(), 'password');
                        var plaintext = bytes.toString(CryptoJS.enc.Utf8);
                        // alert(plaintext);
                        var role = obj.role;
                        if (role == "User") {
                            if (username == obj.name && pwd == plaintext) {
                                alert("New role");
                                document.getElementById('message').innerHTML = "Success"
                                /*   window.location.href = "./job-insert.html?role=" + role; */
                            } else {
                                $("#login p").removeClass("d-none");
                            }
                        } else {
                            if (username == obj.name && pwd == plaintext) {
                                alert("Login succes");
                                document.getElementById('message').innerHTML = "Success"
                                throw BreakException;

                                /* window.location.href = "./dashboard.html?role=" + role; */
                            } else {
                                $("#login p").removeClass("d-none");
                                document.getElementById('message').innerHTML = "Please enter a correct login and password"
                            }
                        }
                    })
                } catch (e) {
                    if (e !== BreakException) throw e;
                }
            },
            error: function(data) {
                console.log(data);
            }
        });

    });
});

NOTE: You can break forEach like other loops. To make this thing done you need to add your code in try-catch and throw exception when the password gets matched. That is what I have done in your above code.

thank you but check this https://jsfiddle.net/lakshmipriya001/72yzdx64/26/ it is throwing error. i have checked for all logins only for superadmin it is working — Sam, Apr 26 '19 at 08:34
@lakshmipriya I have only checked with `superadmin`. Let me check again — Sami Ahmed Siddiqui, Apr 26 '19 at 08:56
@lakshmipriya Sorry mistakenly I have added the wring jsfiddle URL. Please check this one: https://jsfiddle.net/sasiddiqui/39gpLms8/ Also updated in the answer as well. — Sami Ahmed Siddiqui, Apr 26 '19 at 09:01

Remove error message in login page when it matches

1 Answers1