Suggestions on how to show an "invalid email address" box in the login page

underTheRadar has asked for the wisdom of the Perl Monks concerning the following question:

I need help with my website's login page.

I've already setup the login's backend. It tries to match the input from the input box with the data in the database, which enables users to get into their personal page. But I'm still unable to show an "invalid email address or password" box whenever a user inputs invalid data. I tried to make an AJAX request when the email address or password isn't found in the database, but it still calls the request when the login page loads.

Login page: index.html

<!DOCTYPE html>
<html>
    <head>
 <!-- All the unnecessary codes here -->
    </head>
    <body>
            <form method="post" action="cgi-bin/login.cgi">
                <div class="error-msg" id="error-msg">
                 <p>Invalid email address or password</p>
                 </div>
                <input type="email" name="email_address" required>
                <input type="password" name="password" required>
                <input type="submit" id="submit" value="Submit">
            </form>
        <script>        
            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            document.getElementById("error-msg").style.display = myObj
+.show;
              }
            };
            
            xmlhttp.open("GET", "cgi-bin/login.cgi", true);
            xmlhttp.send();
            
        </script>
    </body>
</html>
[download]

login.cgi

#!/usr/bin/perl

use warnings;
use CGI;
use DBI;
use DBD::mysql;
use CGI::Session '-ip_match';
use JSON;

my $cgi = CGI->new;

my $email = $cgi->param('email_address');
my $password = $cgi->param('password');

my $myConnection = DBI->connect("DBI:mysql:xxxxx:localhost","xxxxx","x
+xxxx");
my $sql = "SELECT COUNT(*) FROM UserDatabase WHERE EmailAddress = ? AN
+D Password = SHA2(?, 256)";

my $sth = $myConnection->prepare($sql);

$sth->execute;

$sth->finish;

if($myConnection->selectcol_arrayref($sql, undef, $email, $password)->
+[0] == 1)
{

    my $session = CGI::Session->new() or die CGI::Session->errstr;
        
    $session->param('email_address', $email);
        
    $session->expire('+1M');

    print $session->header("Location: https://xxxxx.xxx/dashboard");
    
}
else
{    
    my %rec_hash = ('show' => "block");
    my $json = encode_json \%rec_hash;
    print $cgi->header("https://xxxxx.xxx/login");
    print "$json";
    exit; 
}
[download]

Any suggestions on how to do that?

Comment on Suggestions on how to show an "invalid email address" box in the login page Select or Download Code

Replies are listed 'Best First'.
Re: Suggestions on how to show an "invalid email address" box in the login page by bliako (Abbot) on May 14, 2019 at 11:15 UTC
Are you sure your javascript ajax section is running? Are you sure it is running when you want it to run? And most importantly is it sending the correct parameters to the CGI script (note that you do not validate input data in your CGI script - that's a big problem) ? Is it perhaps running after you hit submit? Doesn't `action="cgi-bin/login.cgi"` in the form means that when you hit submit the CGI script is called? If so, then when does the ajax call is made? Also important is that your ajax call `xmlhttp.open("GET", "cgi-bin/login.cgi", true);` does not send any parameters. I don't think it sends the form or the user email at all! btw, unless you state in some CSS otherwise, `<div class="error-msg"` is showing by default, no?	[reply] [d/l] [select]
Re: Suggestions on how to show an "invalid email address" box in the login page by Anonymous Monk on May 14, 2019 at 11:29 UTC
This is a Javascript problem. The OP needs to put the code into an event handler of some kind, usally "onchange" for that sort of thing, so it runs when you want it to run and not right away after it got parsed. Something along the lines of `<form method="post" action="cgi-bin/login.cgi"> <input type="email" name="email_address" required onchange="ch +eckEmail()"> </form> <script> function checkEmail() { var xmlhttp = new XMLHttpRequest(); ... } </script>` [download] holli You can lead your users to water, but alas, you cannot drown them.	[reply] [d/l]
Re: Suggestions on how to show an "invalid email address" box in the login page by choroba (Cardinal) on May 14, 2019 at 10:48 UTC
Have you used CGI::Ajax or have you tried to implement the whole AJAX yourself? `map{substr$_->[0],$_->[1]\|\|0,1}[\\|\|{},3],[[]],[ref qr-1,-,-1],[{}],[sub{}^ARGV,3]`	[reply] [d/l]