Need Help with scripting please

thehourman · May 2012

Hello guys,

I have a captive portal Perl script template that I got from my access point. I inserted the terms and condition under "# HTML Page Body (Bottom)". However, right now the "Agree" checkbox doesn't do anything when the I logged in to the captive portal. I can login to the captive portal wether the checkbox is checked or not. I would like to make the checkbox to work.
For example, when the user enter their username/password and clicked the "Login" button, if the checkbox is not checked, they should not be able to login to the captive portal; and a short message stating that they need to agree to the Terms and Condition by clicking the Agree checkbox. But if the Agree checkbox is checked then the user should be able to login no problem.

Here is the note that I got when inserting the an html code:

Editing the wpr.pl file can customize your splash and login screens.  When editing the value of the variables, remember that all text that is placed inside of quotes denotes the value of the 
variable.  If you are inserting html that has quotes in it, you must escape the quotes with the \
character.

I couldn't attach the .txt file, but this is the content of it.

# Company Name$html_company_name = "Xirrus";


# HTML Document Header
$html_doc_header = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">\n";


# Meta Tags
$html_head_metatags = "
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
    <meta http-equiv=\"Cache-control\" content=\"no-cache\">
    <meta http-equiv=\"Pragma\" content=\"no-cache\">";


# CSS
$html_head_css = "
    <link href=\"${imagepath}hs.css\" rel=\"stylesheet\">";


# HTML Page Body (Logo, Background, Header, and Footer)
$logo = "accesspoint_logo.gif";
$bg = "page_bg.jpg";
$html_body_header = "";
$html_body_footer = "";


# HTML Page Body (Top)
$html_body_top = "
    <div id=\"page_container\">
      <table cellspacing=\"5\" cellpadding=\"1\" border=\"0\" width=\"100%\" style=\"background: #ffffff url(${imagepath}${bg}) bottom no-repeat;\">
        <tr>
          <td valign=\"middle\"><div id=\"logo_container\"><img src=\"${imagepath}${logo}\" alt=\"Logo\" width=\"225\" height=\"35\"></div>
          $html_body_header";


# HTML Page Body (Bottom)
$html_body_bottom = "
        $html_body_footer
        </tr>
        <table><h2>Terms of Use of Internet</h2>
<h2>TERMS, CONDITION AND NOTICES</h2>
<p>TERMS PARAGRAPH IS LOCATED HERE!!!
<h5>SECURITY OF YOUR ACCESS AND USE</h5>
<p>SECURITY PARAGRAPH IS LOCATED HERE!!! 
<input type=\"checkbox\" name=\"Agree\" value=\"agree\" /> Agree<br /></form> </center><br><br></table>
    </div>";


$html_splash_submit = "
   <tr>
      <td align=\"right\">&nbsp;</td>
      <td align=\"left\"><br/><br/><br/><input type=\"submit\" name=\"button\" class=\"button\" value=\"Proceed\"></td>
      <p>By clicking the <b>Submit</b> button you agree to the Terms of Use Agreement.</p>
   </tr>
";


$html_splash_timeout = "
<script>
function wpr_timeout()
{
   document.form1.submit();
}
var TIMEOUT = 0;
setTimeout( 'wpr_timeout()', TIMEOUT * 1000 );
</script>
<input type=\"hidden\" name=\"button\" class=\"button\" value=\"Proceed\">
";


$html_splash_dismiss = $html_splash_submit;




$html_splash = "<table cellpadding=\"2\" cellspacing=\"5\" border=\"0\">$html_splash_submit</table>
";


$html_login = "<table cellpadding=\"2\" cellspacing=\"5\" border=\"0\">
                <tr>
                  <td align=\"right\"> Username:</td>
                  <td><input name=\"UserName\" type=\"text\" size=\"50\" maxlength=\"64\"></td>
                </tr>
                <tr>
                  <td align=\"right\"> Password:</td>
                  <td align=\"left\"><input name=\"Password\" type=\"password\" size=\"50\" maxlength=\"64\"></td>
                </tr>
                <tr>
                  <td align=\"right\">&nbsp;</td>
                  <td align=\"left\"><input type=\"submit\" name=\"button\" class=\"button\" value=\"Login\"></td>
                </tr>
            </table>
";


$html_splash_login = $html_login ;
1;

Thank you,
thm

RobertKaucher · May 2012

You have not really posted anything that is actually usable here. This is only a very small part of the script and seems to be used with just displaying some of the HTML. There is no logic in this that can be changed to do anything....

Do you have more of the script?

thehourman · May 2012

Unfortunately, that is all I can get from the access point template.
I found this http://www.xirrus.com/cdn/pdf/Xirrus_Application_Note_WPR_Final_011810.aspx which is the access point I am using. At page 10, this is where the part about editing the script.

The only part I added to the template is this:

[LEFT][COLOR=#174169] <table><h2>Terms of Use of Internet</h2>[/COLOR][/LEFT]
<h2>TERMS, CONDITION AND NOTICES</h2><p>TERMS PARAGRAPH IS LOCATED HERE!!!<h5>SECURITY OF YOUR ACCESS AND USE</h5><p>SECURITY PARAGRAPH IS LOCATED HERE!!!  [LEFT][COLOR=#174169]<input type=\"checkbox\" name=\"Agree\" value=\"agree\" /> Agree<br /></form> </center><br><br></table>[/COLOR][/LEFT]

RobertKaucher · May 2012

So there isn't really anything you can do to get this to work. The check box is just a holder for a value and the file you posted is not an actual Perl script. It just holds some configuration information for some variables - it's not an actual Perl script in itself.

thehourman · May 2012

I thought it was a perl script because it was a .pl file. Is there a way around this to make the checkbox to work or may be something to replace the checkbox to make this to work?
I was told a javascript would do it, but I have 0 experience about scripting.

Pash · May 2012

javascript will do this deffinately.

Javascript Checkbox Validation

Thats one of millions of examples after a google search. You just need to add the script part at the top of your markup file and the form object wherever you need to in your document.

You just need to have a play but it is VERY easy.

RobertKaucher · May 2012

thehourman wrote: »

I thought it was a perl script because it was a .pl file.

Sure, in that sense it is technically a Perl script but it's a script used for configuration values for another script where all the logic is written.

As far as the JavaScript: just keep in mind that if the person is running no-script or has JavaScript turned off, then it does not work.

Pash · May 2012

RobertKaucher wrote: »

Just keep in mind that if the person is running no-script or has JavaScript turned off, then it does not work.

There is that. There are other options like AJAX as well which would provide live user feedback regarding the checkbox being ticked or not before you even process the form. There are many options available and its worth testing on a simple test page before integrating further. Might be worth using the same html doc type in your test as in your target addition.

RobertKaucher · May 2012

Well, the issue with AJAX in this case is that it still uses JavaScript... Asynch JavaScript and XML.

AJAX is not a programming language as much as it is a way to use JavaScript and the HTTP protocol.

thehourman · May 2012

I am gonna try the javascript for now. I still need to figure this one out how to write it.

RobertKaucher · May 2012

I would look at learning some jQuery. It's very easy to verify form data using jQuery; which is a JavaScript library.

AlexNguyen · May 2012

When you're at the login page from your AP, select "view source code" from your browser and paste it here. So we can have more infos to help.

thehourman · May 2012

Ok will do that tomorrow. I was very busy at work and couldn't work on the AP.

Pash · May 2012

All I meant regarding Ajax is that its another option but with live checking.

thehourman · May 2012

This is what I got from the page source:



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    <html>
    <head>
        <title>Wi-Fi Network Login</title>
        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
        
    <link href="../icons/hs.css" rel="stylesheet">
        <script language="JavaScript">
            function doOnLoad(result, userurl, redirurl) {
                if (result == 1) {
                    if (redirurl) {
                        window.location = redirurl;
                    }
                    else if (userurl) {
                        window.location = userurl;
                    }
                    self.focus();
                }


                if (result == 2 || result == 4) {
                    if (document.form1.UserName && document.form1.UserName.type != 'hidden')
                        document.form1.UserName.focus();
                }
            }
        </script>
    </head>
    <body onLoad="javascript:doOnLoad(4, 'http://www.mobiles24.com/downloads/s/471562-294-sygic_gps_navigation', '')" bgColor = '#c0d8f4'>
    
    <div id="page_container">
      <table cellspacing="5" cellpadding="1" border="0" width="100%" style="background: #ffffff url(../icons/page_bg.jpg) bottom no-repeat;">
        <tr>
          <td valign="middle"><div id="logo_container"><img src="../icons/xirrus_logo.gif" alt="Logo" width="225" height="35"></div>
          
		<h1>Wi-Fi Network Login</h1>
		<form name="form1" method="post" action="">
		<INPUT TYPE="hidden" NAME="challenge" VALUE="9216f5a1ca8c0d42b92965ac535300ca">
		<INPUT TYPE="hidden" NAME="uamip" VALUE="185.0.0.1">
		<INPUT TYPE="hidden" NAME="uamport" VALUE="10000">
		<INPUT TYPE="hidden" NAME="userurl" VALUE="http://www.mobiles24.com/downloads/s/471562-294-sygic_gps_navigation">
        <table cellpadding="2" cellspacing="5" border="0">
                <tr>
                  <td align="right"> Username:</td>
                  <td><input name="UserName" type="text" size="50" maxlength="64"></td>
                </tr>
                <tr>
                  <td align="right"> Password:</td>
                  <td align="left"><input name="Password" type="password" size="50" maxlength="64"></td>
                </tr>
                <tr>
                  <td align="right">&nbsp;</td>
                  <td align="left"><input type="submit" name="button" class="button" value="Login"></td>
                </tr>
            </table>


		</form>
		
        
        </tr>
        <table><h2>Terms of Use of Internet</h2>
<h2>TERMS, CONDITION AND NOTICES</h2>
<p>TERMS PARAGRAPH IS LOCATED HERE!!!
<h5>SECURITY OF YOUR ACCESS AND USE</h5>
<p>SECURITY PARAGRAPH IS LOCATED HERE!!! 
<input type="checkbox" name="Agree" value="agree" /> Agree<br /></form> </center><br><br></table>
    </div>
	</body>
	</html>

Pash · May 2012

The thing is, we need to see the page the form takes you to = to see about the check box validation. The form action="" is empty. The designer of the page could have other methods of hiding this from us but usually even if there was a snippet of PHP as an example in the action quotes the page source should at least have an action value.

I would still recommend AJAX if you can find something workable quickly. Its still using Javascript yes, but you could force the form to grey or hide the Login button until the check box is checked. This means editing one page and thats it.

RobertKaucher · May 2012

Using jQuery you can attach an event to submit process and over-ride it. You would then use jQuery to check of the agree box is checked and if so allow, otherwise throw up a dialog and cancel. Try something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
                 <script>            $(document).ready(
            function(){
                    $("form").submit( function(){
                        if($('input[value="agree"]').attr('checked'))
                        {
                            return true;
                        }else{
                            alert(' You must agree to the terms of service.');
                            return false;
                            
                        }
                    }
                    );
            });
        </script>

This was tested in Chrome and IE9. Notice I am getting jQuery from the Google CDN.

EDIT: I originally posted an old version that used a setter and therefore didn't work. This one does.

thehourman · May 2012

@RobertKaucher
Where do I insert your script?

@Pash
I like your idea, but this is a completely new to me. I don't know how am I going to start and what code to use.

Are you guys able to view what the script I posted at post#1?

RobertKaucher · May 2012

thehourman wrote: »

@RobertKaucher
Where do I insert your script?

Are you guys able to view what the script I posted at post#1?

Paste it into the front of the $html_splash variable.

We were able to view your script, but that does not contain any of the logic needed to do anything. It's just setting a bunch of variables allowing your to make changes to the HTML output.

You need to be able to modify the Perl script that it posts to if you want to do anything more complex. The problem is they are not likely to allow this.

Pash · May 2012

thehourman wrote: »

@RobertKaucher
Where do I insert your script?

@Pash
I like your idea, but this is a completely new to me. I don't know how am I going to start and what code to use.

Are you guys able to view what the script I posted at post#1?

Roberts example is a good choice, hes given an example using google cdn as well which is nice if you don't wanna host jquery.

thehourman · May 2012

May I know what program do you guys use to view the scripts?
For me, I have to load it to the AP and reboot it then I can see it.

I got an "502 Bad Gateway. The CGI was not CGI/1.1 compliant" after adding the script after $html_splash
I did it two different ways the first one is this:

$html_splash = <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>                 <script>            $(document).ready(
            function(){
                    $("form").submit( function(){
                        if($('input[value="agree"]').attr('checked'))
                        {
                            return true;
                        }else{
                            alert(' You must agree to the terms of service.');
                            return false;
                            
                        }
                    }
                    );
            });
        </script>
";

THe 2nd one is this:

$html_splash = "<table cellpadding=\"2\" cellspacing=\"5\" border=\"0\">$html_splash_submit</table><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>                 <script>            $(document).ready(
            function(){
                    $("form").submit( function(){
                        if($('input[value="agree"]').attr('checked'))
                        {
                            return true;
                        }else{
                            alert(' You must agree to the terms of service.');
                            return false;
                            
                        }
                    }
                    );
            });
        </script>
";

Both gave me 502 Bad Gateway error

RobertKaucher · May 2012

You need to escape the quotes. Example: $(\"form\")

thehourman · May 2012

I will add the escape to every quotes. I posted two different ones of inserting the your script, but which one is the correct one the 1st or the 2nd?
I am going to test this on Friday because I am going to be away for installation.

RobertKaucher · May 2012

$html_splash = "<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
                <script>
					$(document).ready(
					function(){
							$(\"form\").submit( function(){
								if($('input[value="agree"]').attr('checked'))
								{
									return true;
								}else{
									alert(' You must agree to the terms of service.');
									return false;
									
								}
							}
							);
					});
				</script>
				<table cellpadding=\"2\" cellspacing=\"5\" border=\"0\">$html_splash_submit</table>";

thehourman · May 2012

Hello Robert,
I am sorry for my late reply. I have been away for installation and just got back.
I copied your script and replaced my $html_splash, but I got an 502 error again. I also tried to add the escape to the value=\"agree\", but still getting 502 error.

Need Help with scripting please

Comments