# [SOLVED] javascript password script with IE7 prompt?



## Aaron777 (Mar 27, 2008)

Hello all, I am a javascript newb, and I want to put simple password protection on a webpage. I found a simple script that gets the job done (goes in the head section of my webpage), except it doesnt work in IE7, because prompts no longer work in IE7:
-----
<script>
var p=confirm("This page is password protected, do you still want to enter?")
if(p){ 
var ans="asdfasdf"
var pass=prompt("Please enter the password.")
if(pass!==ans)
{
alert("Wrong password, please try again.")
window.location="www.google.com"
}else{alert("Welcome!");}
}else{window.location="www.google.com"}
</script>
-----
This works in everything but IE7
I found a solution to the prompt problem in IE7, which creates a prompt, see this page:
http://www.hunlock.com/blogs/Working_around_IE7s_prompt_bug,_er_feature
heres an example of how it works:
----
<script type='text/javascript' src='IEprompt.js'></script>
<script type='text/javascript'>
function promptCallback(val) {
alert(val);
}

IEprompt('Enter some text','default value');
</script>
-----

Can anyone show me how to incorporate the IEprompt into the password script? i have no idea how to do it?
Thanks in advance.


----------



## jamiemac2005 (Jul 5, 2007)

*Re: javascript password script with IE7 prompt?*

Hey, password protection with javascript is almost useless and whoever you ask will tell you this... because anyone can see the source... all i'd have to do to get into your site there (after having heard that it's password protected) is view the source and copy the password...

However there are scripts out there which do make password protection almost able in javascript...

If you want to use your IEprompt script you'll have to post the source, because we need to know whats going on in IEprompt.js... could you not just use a form?

Cheers,
Jamey


----------



## Aaron777 (Mar 27, 2008)

*Re: javascript password script with IE7 prompt?*

Thanks for the response.
i realize that this password script is quite crappy,:
---
<script>
var p=confirm("This page is password protected, do you still want to enter?")
if(p){
var ans="asdfasdf"
var pass=prompt("Please enter the password.")
if(pass!==ans)
{
alert("Wrong password, please try again.")
window.location="www.google.com"
}else{alert("Welcome!");}
}else{window.location="www.google.com"}
</script>
---
but thats okay, I want to get it working anyways, and I know nothing in javascript.
If you go to http://www.hunlock.com/blogs/Working_around_IE7s_prompt_bug,_er_feature you can see the source, and what its supposed to do.
here's the code in IEprompt.js:


```
///////////////////////////////////////////////////////////
// Usage IEprompt("dialog descriptive text", "default starting value");
// 
// IEprompt will call promptCallback(val)
// Where val is the user's input or null if the dialog was canceled.
///////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////
// This source code has been released into the public domain
// January 14th, 2007.
// You may use it and modify it freely without compensation
// and without the need to tell everyone where you got it.
///////////////////////////////////////////////////////////


///////////////////////////////////////////////////////////
// You must create a promptCallback(val) function to handle
// the user input.  If you don't this script will fail and
// Bunnies will die.
///////////////////////////////////////////////////////////


///////////////////////////////////////////////////////////
// These are global scope variables, they should remain global.
///////////////////////////////////////////////////////////
var _dialogPromptID=null;
var _blackoutPromptID=null;
///////////////////////////////////////////////////////////


function IEprompt(innertxt,def) {

   that=this;   // A workaround to javascript's oop idiosyncracies.

   // Check to see if this is MSIE 7.   This isn't a great general purpose
   // detection system but it works well enough just to find MSIE 7.
   var _isIE7=(navigator.userAgent.indexOf('MSIE 7')>0);

   this.wrapupPrompt = function (cancled) {
      // wrapupPrompt is called when the user enters or cancels the box.
      // It's called only by the IE7 dialog box, not the non IE prompt box
      if (_isIE7) {
         // Make sure we're in IE7 mode and get the text box value
         val=document.getElementById('iepromptfield').value;
         // clear out the dialog box
         _dialogPromptID.style.display='none';
         // clear out the screen
         _blackoutPromptID.style.display='none';
         // clear out the text field
         document.getElementById('iepromptfield').value = '';
         // if the cancel button was pushed, force value to null.
         if (cancled) { val = '' }
         // call the user's function
         promptCallback(val);
      }
      return false;
   }

   //if def wasn't actually passed, initialize it to null
   if (def==undefined) { def=''; }

   if (_isIE7) {
      // If this is MSIE 7.0 then...
      if (_dialogPromptID==null) {
         // Check to see if we've created the dialog divisions.
         // This block sets up the divisons
         // Get the body tag in the dom
         var tbody = document.getElementsByTagName("body")[0];
         // create a new division
         tnode = document.createElement('div');
         // name it
         tnode.id='IEPromptBox';
         // attach the new division to the body tag
         tbody.appendChild(tnode);
         // and save the element reference in a global variable
         _dialogPromptID=document.getElementById('IEPromptBox');
         // Create a new division (blackout)
         tnode = document.createElement('div');
         // name it.
         tnode.id='promptBlackout';
         // attach it to body.
         tbody.appendChild(tnode);
         // And get the element reference
         _blackoutPromptID=document.getElementById('promptBlackout');
         // assign the styles to the blackout division.
         _blackoutPromptID.style.opacity='.9';
         _blackoutPromptID.style.position='absolute';
         _blackoutPromptID.style.top='0px';
         _blackoutPromptID.style.left='0px';
         _blackoutPromptID.style.backgroundColor='#555555';
         _blackoutPromptID.style.filter='alpha(opacity=90)';
         _blackoutPromptID.style.height=(document.body.offsetHeight<screen.height) ? screen.height+'px' : document.body.offsetHeight+20+'px'; 
         _blackoutPromptID.style.display='block';
         _blackoutPromptID.style.zIndex='50';
         // assign the styles to the dialog box
         _dialogPromptID.style.border='2px solid blue';
         _dialogPromptID.style.backgroundColor='#DDDDDD';
         _dialogPromptID.style.position='absolute';
         _dialogPromptID.style.width='330px';
         _dialogPromptID.style.zIndex='100';
      }
      // This is the HTML which makes up the dialog box, it will be inserted into
      // innerHTML later. We insert into a temporary variable because
      // it's very, very slow doing multiple innerHTML injections, it's much
      // more efficient to use a variable and then do one LARGE injection.
      var tmp = '<div style="width: 100%; background-color: blue; color: white; ";
      tmp += 'font-family: verdana; font-size: 10pt; font-weight: bold; height: 20px">Input Required</div>';
      tmp += '<div style="padding: 10px">'+innertxt + '<BR><BR>';
      tmp += '<form action="" onsubmit="return that.wrapupPrompt()">';
      tmp += '<input id="iepromptfield" name="iepromptdata" type=text size=46 value="'+def+'">';
      tmp += '<br><br><center>';
      tmp += '<input type="submit" value="   OK   ">';
      tmp += '      ';
      tmp += '<input type="button" onclick="that.wrapupPrompt(true)" value=" Cancel ">';
      tmp += '</form></div>';
      // Stretch the blackout division to fill the entire document
      // and make it visible.  Because it has a high z-index it should
      // make all other elements on the page unclickable.
      _blackoutPromptID.style.height=(document.body.offsetHeight<screen.height) ? screen.height+'px' : document.body.offsetHeight+20+'px'; 
      _blackoutPromptID.style.width='100%';
      _blackoutPromptID.style.display='block';
      // Insert the tmp HTML string into the dialog box.
      // Then position the dialog box on the screen and make it visible.
      _dialogPromptID.innerHTML=tmp;
      _dialogPromptID.style.top=parseInt(document.documentElement.scrollTop+(screen.height/3))+'px';
      _dialogPromptID.style.left=parseInt((document.body.offsetWidth-315)/2)+'px';
      _dialogPromptID.style.display='block';
      // Give the dialog box's input field the focus.
      document.getElementById('iepromptfield').focus();
   } else {
      // we are not using IE7 so do things "normally"
      promptCallback(prompt(innertxt,def));
   }
}
```
This will create a dialog box, same as a normal prompt box, where the person will type a password, and the value will be passed to this:
---
function promptCallback(val) {
alert(val);
}
---
i'm using it because a regular prompt does not work in IE7.
So I just want to know how to replace the normal prompt in the original password code with this "IEprompt":
---
IEprompt('Please enter password.', 'default value');
---
Thanks!


----------



## jamiemac2005 (Jul 5, 2007)

*Re: javascript password script with IE7 prompt?*

Ah okay, i don't think your problem is in browser compatibility as the script clearly checks for IE7, i believe the problem is within your understanding (or it could be in mine) i think that what the script does is is send the value typed in to the function "promptCallback(val)" so that the function can use it... I think what you need to do is modify the function "promptCallback" to run your password protection script... so its something like this:


```
<script type='text/javascript' src='IEprompt.js'></script>
<script type='text/javascript'>
function promptCallback(val) {
//val here is then the password the user entered
if(val){
var ans="asdfasdf"
if(val!==ans)
{
alert("Wrong password, please try again.")
window.location="www.google.com"
}else{alert("Welcome!");}
}else{window.location="www.google.com"}
}

IEprompt('Please enter the password','default value');
</script>
```
do you understand what i think's going on?

Actually a way to confirm this would be to use the script as in the example(provided by the site) and see if what you type is "alert"ed... then use what i've tried and see if that works...

Post back with results... if it's not right then i'll take an in-depth look...

Cheers,
Jamey


----------



## Aaron777 (Mar 27, 2008)

*Re: javascript password script with IE7 prompt?*

Thanks, that was all i needed, problem solved. That code was all i needed to get the job done, i just adjusted a few things.
thanks again.


----------



## jamiemac2005 (Jul 5, 2007)

Thats ok, glad to help

Cheers,
Jamey


----------



## mrme6 (Jan 23, 2010)

that is great but it still reveals the users password by looking up the source code. You can use the form here that will make the password unviewable by the source. I dont remember where I got this but it is a great tool to have. You will copy the form below and then save it as ???.html, load it with ie and change user and pass, once this is done it will generate the form for you to copy and paste into your site and will not show the pass in the source code!!! How I dont really know :4-dontkno
but it just works :grin:
<HTML>
<HEAD>
<META NAME="Generator" CONTENT="TextPad 4.4">
<LINK href="general.css" rel="stylesheet" type="text/css">

</HEAD>

<BODY Background=../graphics/grayback.jpg>
<center><BR><BR><BR>
<table border=1>
<tr><form name=members><td rowspan=4>
<select name=memlist size=10 onChange="showmem(this.form)">

<!-- Original: Dion -->
<!-- Web Site: http://www.iinet.net.au/~biab/ -->




<!-- "member name | password | destination pagename |" -->
<option selected value="John Smith|password|mainpage|">John Smith
<option value="Peter Jones|theirpwd|endpages|">Peter Jones
<option value="Sue Brown|asdfvcxz|nowheres|">Sue Brown
<option value="Sally West|zaqxswde|logintop|">Sally West
</select></td>
<td align=right>User:</td><td><input type=hidden value="0" name=entry>
<input type=text name=memname size=8 value=""></td></tr>
<tr><td align=right>Password:</td><td><input type=text name=password size=8 maxlength=8><font size="-1"><-- Must be exactly 8 characters</font></td></tr>
<tr><td align=right>Page Name:</td><td><input type=text name=pagename size=8 maxlength=8><b>.html</b><font size="-1"><-- Must be exactly 8 characters</font></td></tr>
<tr><td colspan=2 align=center>
<input type=button value="New User" onclick="addnew(this.form);">
<input type=button value="Delete User" onclick="delthis(this.form);">
<input type=button value="Update/Show Coding" onclick="update(this.form); create(this.form);"></td></tr>
<tr><td colspan=3 align=center>
<input type=text size=60 name=message value="Note: Password/Page Name must be exactly 8 letters! (a-z)">
<input type=hidden name=num value=1></td>
</form></tr>
</table>
<hr size=2 width=75%>
<form name=js><textarea cols=75 rows=10 name=scrpt wrap=virtual>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var params=new Array(4);
var alpha="ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHI";
function check(form) {
which=form.memlist.selectedIndex;
choice = form.memlist.options[which].value+"|";
if (choice=="x|") {
alert("Please Select Your Name From The List");
return;
}
p=0;
for (i=0;i<3;i++) {
a=choice.indexOf("|",p);
params_=choice.substring(a,p);
p=a+1;
}
h1=makehash(form.pass.value,3);
h2=makehash(form.pass.value,10)+" ";
if (h1!=params[1]) {
alert("Incorrect Password!"); return; };
var page="";
for (var i=0;i<8;i++) {
letter=params[2].substring(i,i+1)
ul=letter.toUpperCase();
a=alpha.indexOf(ul,0);
a-=(h2.substring(i,i+1)*1);
if (a<0) a+=26;
page+=alpha.substring(a,a+1); };
top.location=page.toLowerCase()+".html";
}
function makehash(pw,mult) {
pass=pw.toUpperCase();
hash=0;
for (i=0;i<8;i++) {
letter=pass.substring(i,i+1);
c=alpha.indexOf(letter,0)+1;
hash=hash*mult+c;
}
return(hash);
}
// End -->
</script>
</textarea>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var params=new Array(4);
var script=document.js.scrpt.value;
document.js.scrpt.value="Create your users, their passwords, and their destination pages using the form above.\n\nThen, click 'Show Coding' to see the login HTML and JavaScript that you need to put on your page to password-protect your site with that info.\n\nQuestions about this script or how to put it on your site should be directed to it's author via email: [email protected]\n\n*Honestly, we don't even totally understand this JavaScript!*";
var alpha="ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHI";
showmem(document.members);
function showmem(form) {
document.members.num.value=document.members.memlist.length;
var which=form.memlist.selectedIndex;
splt(form.memlist[which].value);
form.entry.value=which+1;
for (i=2;i<5;i++) {
form.elements.value=params[i-2]; };
}
function splt(choice) {
p=0;
for (i=0;i<3;i++) {
a=choice.indexOf("|",p);
params=choice.substring(a,p);
p=a+1;
}
}
function addnew(form) {
newmem=getfields(form);
var who=prompt("New User's Name:","");
form.memlist[form.memlist.length] = new Option(who, newmem, false, true);
if (navigator.appName=="Netscape") {
document.js.scrpt.value=script;
history.go(0);
}
else {
showmem(document.members);
}
}
function getfields(form) {
newmem="";
for (i=2;i<5;i++) {
newmem+=form.elements.value+"|"; };
for (i=3;i<5;i++) {
a=form.elements;
for (k=0;k<8;k++) {
}
}
return(newmem);
}
function delthis(form) {
if (confirm("Delete "+form.memname.value+"?")) {
form.memlist.options[form.entry.value-1]=null;
form.message.value=form.memname.value+" Deleted";
form.memlist.selectedIndex=0;
if (navigator.appName=="Netscape") {
document.js.scrpt.value=script;
history.go(0);
}
else {
showmem(document.members);
}
}
}
function update(form) {
msg="no";
a=form.elements;
for (k=0;k<8;k++) {
b=a.value.substring(k,k+1);
c=b.toUpperCase();
form.memlist[form.entry.value-1].value=getfields(form);
form.message.value=form.memname.value+"'s record was updated";
}
}
function create(form) {

var html="<center><form name=login>\n";
html+="<table border=1 cellpadding=3>\n\n";
html+="<!-- Original: Dion -->\n";
html+="<!-- Web Site: http://www.iinet.net.au/~biab/ -->\n";
html+="\n";
html+="\n\n";
html+='<tr><td colspan=2 align=center><font size="+2">';
html+='<b>Members-Only Area!</b></font></td></tr>\n';
html+="<tr><td>Username:</td><td><select name=memlist>\n<option value='x'>";
for (j=0;j<form.memlist.length;j++) {
splt(form.memlist.options[j].value);
h1=makehash(params[1],3);
h2=makehash(params[1],10)+" ";
var page="";
for (var i=0;i<8;i++) {
letter=params[2].substring(i,i+1);
ul=letter.toUpperCase();
a=alpha.indexOf(ul,0);
a+=(h2.substring(i,i+1)*1);
page+=alpha.substring(a,a+1);
}
html+="\n<option value='"+params[0]+"|"+h1+"|"+page+"'>"+params[0];
};
html+="\n</select></td></tr>\n";
html+="<tr><td>Password:</td><td><input type=password size=10 maxlength=8 name=pass></td></tr>\n";
html+='<tr><td colspan=2 align=center><input type=button value="Login" onclick="check(this.form)"></td>\n';
html+="</tr>\n</table>\n</form>\n";
document.js.scrpt.value=html+script+"</center>";
}
function makehash(pw,mult) {
pass=pw.toUpperCase();
hash=0;
for (i=0;i<8;i++) {
letter=pass.substring(i,i+1);
c=alpha.indexOf(letter,0)+1;
hash=hash*mult+c;
}
return(hash);
}
// End -->
</script>

</center>
</BODY>
</HTML>_


----------



## dm01 (Oct 10, 2006)

Please do not post in old topics, people find it very annoying, and it causes the first page to get cluttered with topics where the OP has often left for parts unknown or solved their problem by other means.

Thank you.


----------

