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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Basic JavaScript encryption question

    For starters yes this for a school assignment and I know it's not perfect. I'm working with encryption here. All I'm trying to do is get those little black dots to appear as the password is being typed. I've done this before successfully using <input type="password" name="password" id="password" />
    However I can't figure out how to get it to work in my password line in the following code. My grade is not dependent on this however I would like to figure this out. My password code currently looks like this: Password:&nbsp;&nbsp;
    <input name=input type=text size=20/>

    Ideally I would like my code to have black dots appear when the password appears. But I would also like to allow my decrype and encrype buttons to still work as well. Any suggestions guys?


    Here's my code
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http:/www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    
    
    <!-- Moved JavaScript functions to external JavaScript file -->
    <script type="text/javascript" src="login.js"></script>
    
    <title>Login</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="description" content="Login" />
    <meta name="keywords" content="Matthew Freeman, Login, Zakk Wylde, bleacherreport.com,
     zakkwylde.com, login to Matthew Freeman's Guitar Shop" />
    
    <!-- Moved styles to external css file-->
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <h4 align="center">Home/Login &nbsp;&#124;&nbsp; 
    <a href="companyinfo.html">Company Information</a>&nbsp;&#124;&nbsp;   
    <a href="profile.html">User Profile</a></h4>
    
    
    
    <h1 align="center">Matthew Freeman's Week 1 Assignment Login Page</h1>
    <h4 align="center">Enter Your Username and Password</h4>
    
    <script language="javascript" type="text/javascript">
    <!-- Begin
    var str_in;
    var str_out = "";
    var num_in;
    var num_out = "";
    var e = "Enter Text!";
    
    function str_to_num(form) {
    num_out = "";
    if(form.input.value == "") alert(e);
    else {
    str_in = escape(form.input.value);
    for(i = 0; i < str_in.length; i++) {
    num_out += str_in.charCodeAt(i) - 23;
    }
    form.output.value = num_out;
    form.input.value = "";
       }
    }
    
    function num_to_str(form) {
    str_out = "";
    if(form.output.value == "") alert(e)
    else {
    num_out = form.output.value; 
    for(i = 0; i < num_out.length; i += 2) {
    num_in = parseInt(num_out.substr(i,[2])) + 23;
    num_in = unescape('%' + num_in.toString(16));
    str_out += num_in;
    }
    form.input.value = unescape(str_out);
    form.output.value = "";
       }
    }
    //  End -->
    </script>
    <center><form name=encryptform>
    
    Username: &nbsp;<input type="text" id="username" onblur="this.value=removeSpaces(this.value);" onchange="myFunction()"/><br />
    <p></p>
    Password:&nbsp;&nbsp;
    <input name=input type=text size=20/>
    
    
    
    <p></p>
    <input type="submit" value="Login" onClick="javascript:str_to_num(this.form)">&nbsp;&nbsp;&nbsp;
    <input type ="reset" value = "Reset Form" onclick="alert('Your information has been cleared')"/>&nbsp;&nbsp;&nbsp;
    <input type="button" value="Joke of the Day" onclick="alert('Two snowmen are standing in a field. One snowman says to the other........');alert('Funny, I smell carrots too.')"/>
    <h4 align="center">For your peace of mind feel free to Encrypt and Decrypt your password to let us prove we work hard to protect your personal information.</h4>
    <p></p>
    
    <input type=button value="Show Decrypted Password" onClick="javascript:num_to_str(this.form)">&nbsp;&nbsp;&nbsp;
    <input type=button value="Show Encrypted Password" onClick="javascript:str_to_num(this.form)">
    <p></p>
    <input name=output type=text size=30>
    
    
    </form></center>
    <script type="text/javascript" language="JavaScript">
    document.forms['encryptform'].elements['username'].focus();
    </script>
    
    
    
    
    
    
    
    <p></p>
    
    
    <div align="center"><a href="http://www.zakkwylde.com/"><img src="zakk.jpg" alt="image description" height="143" width="353"></img></a></div>
    
    <h4 align="center">Click on the Gibson Bullseye guitar above to visit my favorite guitarists website</h4>
    
    <h4 align="center">Click <a href="http://www.bleacherreport.com/home.cfm">HERE</a> to see my favorite sports website!!!</h4>
    
    <h4 align="center"><small>Copyright &copy; Matthew D. Freeman. All Rights Reserved</small></h4>
    
    
    <center><h4><small><script type="text/javascript">
    document.write(Date());
    </script></small></h4></center>
    
    <h4 align="center"><a href="http://validator.w3.org/check?uri=referer"><img
          src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a></h4>
      
    
    </body>
    
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I don't really understand your question.

    As you say, the way to show dots in the password field is <input type="password" name="password" id="password" />

    Obviously the characters actually typed by the user are those passed to the function.


    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9). The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code.

    form name=encryptform - the name should be in quotes, but assigning a name to a form is obsolete. Use an id instead.

    Don't use onClick="javascript: and prefer to spell onclick all in lower case.


    Quizmaster: What Indian yoghurt drink has a name that sounds like a famous dog?
    Contestant: Scooby Doo
    Last edited by Philip M; 05-13-2013 at 07:33 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    To add to Philip's comments on outdated code:

    alert is for debugging only.

    escape is long deprecated - you should be using encodeURI instead.

    <center> and align=center were removed from HTML back in 1997 and replaced by CSS.


    If you want to be able to swap the field between text and dots then take a look at http://javascriptexample.net/domform08.php
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the response. I know there are some other issues in there to fix as well but I'm only worrying about the encryption aspect now. Ideally based on my code I would like the user to enter a username and password and have the password be encrypted by some form of string manipulation like I currently have. While the password is being typed I would like the black dots to appear. I also added encrypt and decrypt buttons strictly for academic purpose that show the user what their password will be encrypted to when they click to encrypt. Then the user has the option to decrypt as well. The problem I'm having is getting the user to be allowed to have the password field have the black dots and when user clicks the encrypt button for the encrypted string to appear in the demonstration box. I feel like I'm coding the password box wrong.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Is there any reason why you don't want to use input type="password"?


  •  

    Posting Permissions

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