Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    26
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Question Help to combine CSS with Javascipt - Login form

    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

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.
    Last edited by Sammy12; 09-18-2012 at 11:21 PM.

  • Users who have thanked Sammy12 for this post:

    codernoob (09-18-2012)

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    26
    Thanks
    17
    Thanked 0 Times in 0 Posts
    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!
    Last edited by codernoob; 09-18-2012 at 11:26 PM.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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.
    Last edited by Sammy12; 09-18-2012 at 11:47 PM.

  • Users who have thanked Sammy12 for this post:

    codernoob (09-19-2012)

  • #5
    New Coder
    Join Date
    Sep 2012
    Posts
    26
    Thanks
    17
    Thanked 0 Times in 0 Posts
    The javascript is a contribution from the forum :
    Secure Login with javascript

    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.

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    26
    Thanks
    17
    Thanked 0 Times in 0 Posts
    the script works like a charm on my site.

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

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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?
    Last edited by Sammy12; 09-19-2012 at 12:24 AM.

  • Users who have thanked Sammy12 for this post:

    codernoob (09-19-2012)

  • #8
    New Coder
    Join Date
    Sep 2012
    Posts
    26
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Thumbs up

    you my friend, is a superstar!

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •