Help to combine CSS with Javascipt - Login form

codernoob · 09-18-2012, 11:09 PM

Hi,

Am building a website - which will run on bunch of network computers.
Practically new to Javascript and CSS and so been using available templates and code snippets to build this.

I have a CSS code for the login box which is as below

Code:

H2>Admin Login</H2>
    <br />
    <br />
    <div id="login-box-name" style="margin-top:20px;">Username:</div><div id="login-box-field" style="margin-top:20px;"><input name="q" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div>
    <div id="login-box-name">Password:</div><div id="login-box-field"><input name="q" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>
    <br />
    <span class="login-box-options"><input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a></span>
    <br />
    <br />
    <a href="#"><img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" /></a>

Now I have a simple javascript username/password script which I would like to combine (this works fine - but i would like to add the above css /PSD combination for login with this code below):

Code:

 <script type="text/javascript">
    <!--
    if (location.search.indexOf("auth=failed") != -1) {
    	document.write("<span style=\"color:#ff0000\">Authorization Failed! Please Enter correct Details</span>");
    }
    // -->
    </script>
    <form id="form1" action="javascript://"
     onsubmit="return authPass(this.user.value,this.pass.value)">
      <table>
        <tbody>
          <tr>
            <td>Username: </td>
            <td><input name="user" type="text"></td>
          </tr>
          <tr>
            <td>Password: </td>
            <td><input name="pass" type="password"></td>
          </tr>
          <tr>
            <td colspan="2" align="center"><input
     value="Login" type="submit"></td>
          </tr>
        </tbody>
      </table>
    </form>

Can anyone help me combine these two??
I am absolutely clueless on how to go about this...

Would be great help!

Thanks

Sammy12 · 09-18-2012, 11:14 PM

You shouldn't be securing a login with JavaScript (especially an admin panel), it can easily be bypassed by disabling JavaScript or tampering with the code.

Try googling PHP login and finding something server-side, something people can't see or tamper with (easily).

And by the way, the scripts you provided aren't related and you are probably missing a large portion of it.

Code:

onsubmit="return authPass(this.user.value,this.pass.value)">

There should be a JavaScript function authPass() which submits the user and pass inputs and returns whether it is valid, JavaScript validation like this should be used for checking whether the username is at least 0 characters or something that is not really important to security.

codernoob · 09-18-2012, 11:24 PM

Actually i cant use a PHP/Server side setup atm.

The JS login page isnt secure, but amongst the few who work with us on the systems, its fine. Its just to act as a reminder to not edit certain articles

I didnt want to add the whole code as it was lengthy, but here you go:

For CSS:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="login-box.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div style="padding: 100px 0 0 250px;">


<div id="login-box">

<H2>Login</H2>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
<br />
<br />
<div id="login-box-name" style="margin-top:20px;">Email:</div><div id="login-box-field" style="margin-top:20px;"><input name="q" class="form-login" title="Username" value="" size="30" maxlength="2048" /></div>
<div id="login-box-name">Password:</div><div id="login-box-field"><input name="q" type="password" class="form-login" title="Password" value="" size="30" maxlength="2048" /></div>
<br />
<span class="login-box-options"><input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a></span>
<br />
<br />
<a href="#"><img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" /></a>

</div>
</div>

For Javascript login page:

Code:

<body>
<div id="container"><br>
<div id="Layer1"
 style="position: absolute; text-align: left; top: 1px; height: 671px; z-index: 6; width: 843px; left: 36px;"
 title="">
<div id="Html1"
 style="position: absolute; left: 27px; top: 280px; width: 18px; height: 100px; z-index: 2;">
<script type="text/javascript">
<!--
function authPass(u,p) {
	if (u && p) self.location = "./Login/auth.htm?" + u + p;
	return false;
}
// -->
</script>
<div>
<script type="text/javascript">
<!--
if (location.search.indexOf("auth=failed") != -1) {
	document.write("<span style=\"color:#ff0000\">Authorization Failed! Please Enter correct Details</span>");
}
// -->
</script>
<form id="form1" action="javascript://"
 onsubmit="return authPass(this.user.value,this.pass.value)">
  <table>
    <tbody>
      <tr>
        <td>Username: </td>
        <td><input name="user" type="text"></td>
      </tr>
      <tr>
        <td>Password: </td>
        <td><input name="pass" type="password"></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input
 value="Login" type="submit"></td>
      </tr>
    </tbody>
  </table>
</form>

Hope this makes it easier for you to review.

I basically want to fit the Javascript actions into the CSS code/style while continuing to use the Javascript login method.
IS this practically possible?

Thanks for your help!

Sammy12 · 09-18-2012, 11:41 PM

What exactly do you want the script to do?
I could help write a simple script like this, but I'm not sure what you are looking for.

Edit:
Oh, I see the form is method="GET" (by default), so the variables are passed in the URL, and the script relocates (?) to the variables.
Is this correct? Perhaps you could post a page of the login, so we can get a better look? Or describe what you want the script to check for.

codernoob · 09-18-2012, 11:51 PM

The javascript is a contribution from the forum :
http://www.codingforums.com/showthread.php?t=10114

What the script does is, when you enter the user name and password - and click login - it checks for a 'pre'created UsernamePassword.js file.

Once it finds it, it redirects to auth.htm

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<title>Authorization in progress...</title>
<script type="text/javascript">
<!--

var authstring = "<script type=\"text/javascript\" src=\"" + location.search.substring(1) + ".js\"><\/script>";
if (location.search) document.write(authstring);
// -->
</script>
	</head>
	<body>
<script type="text/javascript">
<!--
window.auth ? location.replace(redirect) : location.replace("login.htm?auth=failed");
// -->
</script>
	</body>
</html>

and redirects you to the target/admin page.

its quite smart, tbh.

codernoob · 09-19-2012, 12:05 AM

the script works like a charm on my site.

Just that i wanted the css-PSD file act as the interface...

Sammy12 · 09-19-2012, 12:09 AM

After downloading and looking over the files, the answer is yes, you can make it work for your case:

Code:

<script type="text/javascript">
    if (location.search.indexOf("auth=failed") != -1) {
    	document.write("<span style=\"color:#ff0000\">Authorization Failed! Please Enter correct Details</span>");
    }
</script>
<form id="form1" action="javascript://" onsubmit="return authPass(this.user.value,this.pass.value)">
    <!-- Your code, but neatly formatted -->
    <h2>Admin Login</h2>
    <br />
    <br />

    <div id="login-box-name" style="margin-top:20px;">Username:</div>
    <div id="login-box-field" style="margin-top:20px;">
         <input name="user" type="text" class="form-login" title="Username" size="30" maxlength="2048" />
    </div>
    
    <div id="login-box-name">Password:</div>
    <div id="login-box-field">
         <input name="pass" type="password" class="form-login" title="Password" size="30" maxlength="2048" />
    </div>
    <br />

    <span class="login-box-options">
         <input type="checkbox" name="1" value="1"> Remember Me <a href="#" style="margin-left:30px;">Forgot password?</a>
    </span>
    <br />
    <br />
    <!-- ending Your Code -->

    <input type="submit" value="Login" class="submit" style="background: url('images/login-btn.png');" />
</form>

The main thing, is that you were previously using an <a> to submit your form, when the login was using an input[type="submit"]. Your code also needs a <form> with onsubmit="return authPass(this.user.value,this.pass.value)".

Which brings me to your original question, why were you unable to mix these together?

codernoob · 09-19-2012, 12:29 AM

you my friend, is a superstar!

How can I thank you enough!? It works brilliant!