• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 363
  • Last Modified:

placebo .htacces login/pass

HI is it possiple to make a javascript or like(pop), item like this one:
http://207.246.139.153/1.gif

i want it to pop when a user acces a html file.. and the password/login should be filled with a default value
and the ok button should lead to
http://www.blah.com target="blank_"

If there is another way to do it..then it just fine with me...
0
nicce
Asked:
nicce
  • 14
  • 11
  • 5
1 Solution
 
jbirkCommented:
You can't really do a secure password protection with client side JavaScript, but you can do some neat tricks.  Check out:
http://javascript.internet.com/passwords/
for a bunch of different tricks on JavaScript password protection.
If you want a variation of one of the scripts from that page, I or someone here can modify them for you.

As for other options, the unix .htaccess which you mentioned in the title is a good way to do it.

I'm sure there are a few other ways out there as well :)

-Josh
0
 
nicceAuthor Commented:
The thing i need is a popup that looks like the .httacces but it not protecting anything it should just look that way..
i can pop a gif screenshot..in a layer..but it loads to slow
0
 
tbain44Commented:
Okay, you can have another page that looks like this: (I called this page testPage.htm)

<HTML>
<HEAD>
<TITLE>Enter Network Password</TITLE>
<script language="JavaScript">
 function openUrl()
 {
  window.open("http://www.blah.com")
  window.close()
 }
</script>
</HEAD>
<BODY bgColor=silver>
<blockquote>
Please type your username and password.
<table cellpadding="5">
 <tr>
  <td>Site:</td>
  <td>www.whatever.com</td>
 </tr>
 <tr>
  <td>Realm</td>
  <td>Whatever</td>
 </tr>
 <tr>
  <td>Username</td>
  <td><input value="Admin"></td>
 </tr>
 <tr>
  <td>Password</td>
  <td><input value="Password"></td>
 </tr>
</table>
<INPUT type="checkbox" checked> Save this password in your password list.<p>
<blockquote><INPUT type="submit" value="OK" style="WIDTH: 60px" onClick="openUrl()"> <INPUT type="button" value="Cancel" style="WIDTH: 60px"></blockquote>
</blockquote>
</BODY>
</HTML>

---------------------------------------

and in whatever page you're in you call that page something like:

<script language="javascript">
 window.open('testPage.htm','' , 'toolbar=no,menubar=no,scrollbars=no,resizable=no,width=400,height=250');
</script>

---------------------------------------

that'll call testPage.htm (first code I wrote) in a new screen - sorta like a popup.  Then when you hit the ok button it'll open another browser with your www.blah.com page and close that popup screen.

---------------------------------------

Is that what you're looking for?

-Tara
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
jbirkCommented:
Tara, your solution simulates the window pretty well.  Just a few changes I thought were needed: input type="password" to have the stars instead of letters.  The style="width:60px" is IE only, and cause netscape to break the buttons.  So I just took it out...  And the cancel button normally closes the window without forwarding, so I added window.close() to the cancel button.

nicce,  this method is not actually doing anything with the username and password, and is also not saving the typed information even if the checkbox is checked.  This is what wanted, right?

Anyway, here is Tara's code with my mods:

<HTML>
<HEAD>
<TITLE>Enter Network Password</TITLE>
<script language="JavaScript">
function openUrl()
{
window.open("http://www.blah.com")
window.close()
}
</script>
</HEAD>
<BODY bgColor="silver">
<FORM>
<blockquote>
Please type your username and password.
<table cellpadding="5">
  <tr><td>Site:</td>
    <td>www.whatever.com</td>
  </tr>
  <tr>
    <td>Realm</td>
    <td>Whatever</td>
  </tr>
  <tr>
    <td>Username</td>
    <td><input type="text" value="Admin"></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" value="Password"></td>
  </tr>
  <TR><TD colspan=2"><INPUT type="checkbox" checked> Save this password in your password list.<p> </TD>
  </TR>
  <TR><TD>&nbsp;</TD><TD><INPUT type="submit" value="OK" onClick="openUrl()">&nbsp;<INPUT type="button" value="Cancel" onClick="window.close();"></TD></TR>
</table>
</blockquote>
</FORM>
</BODY>
</HTML>


-Josh
0
 
nicceAuthor Commented:
Thanks alot:-) i´ll try it out on my site!
is it impossiple to pop something exactly like the gif file?
0
 
jbirkCommented:
That was a pretty close approximation.  HTML and the web is a very inexact science at the moment, and since all the different browsers and versions seem to display the same code slightly differently (or some times not at all:) it's impossible to ever have an exact design (with HTML).

Was there something in particular about this popup that you wanted to look more like the gif file?

-Josh
0
 
nicceAuthor Commented:
Hmm the reason i want it to look like the gif is because its a pop people know.., and it have to be a copy of it, just with other behavoirs...i dont care if it made in html ot any other web langui..as long as its the same...
0
 
jbirkCommented:
The only things that I see different are that the little image isn't there.  If you have a copy of the image it can easily be thrown in...

The buttons aren't as wide.  Tara added code which makes them a little wider but it was throwing netscape off.  It doesn't like to make them bigger than the default for some reason.

Also the title bar is a little different since it has the netscape icon, and "- Netscape" appended to the end of the title, and the htree buttons on the right instead of the two.  Unfortunately there's nothing that can be done about these.

Last, the spacing is a little different, but all the browsers like to make their table spacing just a little different.

I don't see much that can be improved upon.  Is this still not close enough for you??  Are you trying to actually fool them into thinking it's an official microsoft popup?  If not, I think ANYBODY who is familiar with the normal popup will recognize this one.

-Josh
0
 
tbain44Commented:
Here's the image from that popup.

http://tarabain.webhostme.com/images/login.gif

So you can copy that, it's the key thing that's on the popup you want.

I don't know how much background you have, but to insert the image it's,

<img src="login.gif">

I guess i'll just format the html for you since it would need to be a bit different.

Cont...

0
 
tbain44Commented:
So this is with the image added in.  But note that you have to go to my site listed above and copy that image.

Also you don't mention what you want to look different so we can't really help make any other changes.  But what we have here is very very similar to that gif we're looking at.  I'm sure no one would know the difference.  

But if you'd like some changes to it, let us know what so we can see if it's possible.

<HTML>
<HEAD>
<TITLE>Enter Network Password</TITLE>
<script language="JavaScript">
function openUrl()
{
window.open("http://www.blah.com")
window.close()
}
</script>
</HEAD>
<BODY bgColor="silver">
<FORM>
<table>
<tr><td valign="top"><img src="login.gif"></td>
<td>
&nbsp;&nbsp;Please type your username and password.
<table cellpadding="5">
  <tr>
    <td>Site:</td>
    <td>www.whatever.com</td>
  </tr>
  <tr>
    <td>Realm</td>
    <td>Whatever</td>
  </tr>
  <tr>
    <td>Username</td>
    <td><input type="text" value="Admin"></td>
  </tr>
  <tr>
    <td>Password</td>
    <td><input type="password" value="Password"></td>
  </tr>
  <TR><TD colspan=2"><INPUT type="checkbox" checked> Save this password in your password list.<p> </TD>
  </TR>
  <TR><TD>&nbsp;</TD><TD><INPUT type="submit" value="OK" onClick="openUrl()">&nbsp;<INPUT type="button" value="Cancel" onClick="window.close();"></TD></TR>
</table>
</td></tr></table>
</FORM>
</BODY>
</HTML>
0
 
nicceAuthor Commented:
Im more than happy with the effords u all put into this. But im not satisfied with the html solution..
Isnt it possiple to do it in a nother type of programming? im not very used to .htacces..but its htacces that pops the one that im trieng to copy right?
cant it be popped with default value in pass/login..and a default url on the ok button?
0
 
jbirkCommented:
The one you are trying to copy is a Microsoft popup, and you will only see it when booting/logging in on a microsoft OS.  The .htaccess popup is different.  It is smaller and only asks for username and password, has nothing else on the popup.  The only other possibility I can think of would be to use Java, but I'm very unfamiliar with that and it's capabilities, so I don't even know if it can do this or not.  I'm pretty sure that any windows poped up via java have the java cup icon on the title bar though...

-Josh
0
 
tbain44Commented:
nicce,
Okay, other work arounds.

Let's see, first of all what browsers does this need to be compatable with?  That will help us know what type of things we can try to do.  Netscape, IE, both, 4.0 and up, or higher versions even?

Well, one thing I can sorta think of is using that gif (if you need the image to load faster we can try to compress it a little more too - but it's only 5k which is rather small).  We can have that image load on some page overlapping the text so it looks like a popup.  We can even make it so when the user scrolls on the webpage in the background that the image doesn't move (might be an ie thing though - have to check if that'll work in netscape too).  Then we can try a onclick method to see where the user clicked and if it is where the ok is then change the page to that whatever.com and if where the cancel button is then maybe hide the image.

Just a suggestion, but I'm not even gonna try to work on something till you say what you're looking for.  
0
 
tbain44Commented:
This is the code that when the user scrolls the background page that the image will stay in place.  You can try that out and see how it looks.  It just sort of simulates the popup because it looks like it's sorta unattached to the page.  (note: all the <p>blah</p> is just so that the page is long so you can try scrolling)

<html>

<head>

<script language="JavaScript">

function moveObject()
{
        myObject.style.left = document.body.scrollLeft + 250;
        myObject.style.top = document.body.scrollTop + 150;
}

window.onscroll = moveObject;

</script>

<title>Scrolling Objects</title>
</head>

<BODY bgcolor="#FFFFFF">

<font size="1"></font>

<SPAN ID="myObject" STYLE="position:absolute; left:250; top:150">
<img src="loginscreen.gif">
</SPAN>


<h2>Login Screen</h2>

<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>

</body>
</html>
0
 
tbain44Commented:
oh, and i copied that image you wanted the login to look like and called it loginscreen.gif.
0
 
nicceAuthor Commented:
tbain44:
thanks alot for your try...its kinda what im doing now..just without the scrolling effect...
the reason why i need it load so fast..if not say, i need allmost no loading time at all is, that speed is the most important factor on my site..
but i think this is the best solution sofar..
lets just stick to tthis..
if u can learn me how i can expand the imgmap, to letting the giffile disapear on cansel..or the x in the corner then i´ll give you the points for helping me..
nicce  

<html>

<head>
<title>INDEX/MEMBERS..</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<script language="javascript">
popi=0;
function pop() {
popi=popi+1
if (popi==1){
window.focus();
mydiv=document.all.tags("div");
mydiv[0].style.visibility='visible';

}
}
</script>

<meta content="Microsoft FrontPage 3.0" name="GENERATOR">
</head>

<body onload="setTimeout('pop()',4000)" text="#FFFFFF" bgcolor="#000000" vlink="#505CFE"
alink="#0000FF" link="#2636FD">
<div id="Layer1"
style="HEIGHT: 254px; LEFT: 300px; POSITION: absolute; TOP: 180px; VISIBILITY: hidden; WIDTH: 403px; Z-INDEX: 1">
<dd><!--webbot bot="ImageMap"
  rectangle="(0,0) (403,254)  http://www.crispyteens.com/cgi-bin/ucj/c.cgi?link=members##_blank"
  style="CURSOR: nw-resize" src="http://www.crispyteens.com/loginani.gif" border="0"
  width="403" height="254" --></dd>
</div>

<h1>login/members/area/</h1>
</body>
</html>
0
 
nicceAuthor Commented:
and another problem with the gif...
I have 100.000-130.000 visitors a day..so it also a bandwith issue:-!
0
 
tbain44Commented:
Then the idea proposed above with the popup would be best.  Can't think of any way to make it look "exactly" alike.  Again, I don't think people would really notice the difference.

But what else from the popup did you want to look more similar?
0
 
tbain44Commented:
This sites a little slow, so my last message may sound strange.  I'll try out some imagemap things though.
0
 
nicceAuthor Commented:
ok thanks:-)
0
 
tbain44Commented:
Okay, changed things around a bit.  Still using div's though and it won't work on ie, but i don't think the code you gave from above will either.

Well, instead of your div with the image map..

<div id="divlogin" style="POSITION: absolute; top: 200px; left: 200px;">
<img src="http://www.crispyteens.com/loginani.gif">
</div>
----------------------------
then have other divs whose coordinates will be where the buttons and X will be (note: These coordinates are NOT correct)  These div's have onClick methods which will call a javascript function.

<div onClick="goPage()" style="POSITION: absolute; top: 200px; left: 400px; height: 200px; width: 200px;">
</div>
<div onClick="hideImg()" style="POSITION: absolute; top: 200px; left: 200px; height: 200px; width: 200px;">
</div>
------------------------------
and the functions will look like this..

<script language="javascript">

function hideImg() {
  window.divlogin.style.display='none';
}

function goPage() {  window.location.href="http://www.crispyteens.com/cgi-bin/ucj/c.cgi?link=members##_blank";
}

************************************

or if you want to use your image maps then you can create another page without the image on it and have the cancel and X go to that page or just any other url.
0
 
tbain44Commented:
whoa, I wrote won't work on ie, i mean won't work on netscape.

So how does that work for you nicce?
0
 
nicceAuthor Commented:
Im not sure ofcourse it would be nice if the code works on all browsors..but its probably to easy to achive:-(
the thing with the 2 divs looks good, and i´ll go try it now...
thanks
nicce
0
 
tbain44Commented:
Ok, cross browser.  It used div's for IE and layers for NET.  Will work for netscape 4.X.  Again the div's and layer's which will represent where the ok and cancel are, are not over the ok and cancel.  If you want to take exactly this code and try it out, the ok is around the upper left corner of the image, and the cancel is around the top middle-right.  Also when the cancel is pressed, the image dissapears and clicking on the space where the ok div/layer would be won't be like pressing ok.

<html>

<head>

<script language="javascript">
function init() {
  if (document.layers) {
    document.cancel.captureEvents(Event.CLICK)
    document.cancel.onclick=hideImg;
    document.ok.captureEvents(Event.CLICK)
    document.ok.onclick=goPage;
  }
}

function hideImg() {
  if (document.all) {
    window.login.style.display='none';
    window.ok.onclick='';
  }
  if (document.layers) {
    window.document.login.visibility='hide';
    document.ok.releaseEvents(Event.CLICK)
  }
  return false;
}

function goPage() {
  location.href="test2.htm";
}

</script>

<title>INDEX/MEMBERS..</title>

</head>

<body onLoad="init()">

<script language="JavaScript">
if (document.all) {
  document.write("<div id='login' style='POSITION: absolute; top: 200px; left: 200px;'><img src='http://www.crispyteens.com/loginani.gif'></div>");
  document.write("<div onClick='hideImg()' style='POSITION: absolute; top: 200px; left: 400px; height: 200px; width: 200px;'></div>");
  document.write("<div id='ok' onClick='goPage()' style='POSITION: absolute; top: 200px; left: 200px; height: 200px; width: 200px;'></div>");
} else if (document.layers) {
  document.write("<layer id='login' top='200' left='200' src='http://www.crispyteens.com/loginani.gif' visibility='show'></layer>");
  document.write("<layer id='cancel' top='200' left='400' height='200' width='200'></layer>");
  document.write("<layer id='ok' top='200' left='200' height='200' width='200'></layer>");
}
</script>
<h1>login/members/area/</h1>

</body>
</html>
0
 
tbain44Commented:
Ok, cross browser.  It used div's for IE and layers for NET.  Will work for netscape 4.X.  Again the div's and layer's which will represent where the ok and cancel are, are not over the ok and cancel.  If you want to take exactly this code and try it out, the ok is around the upper left corner of the image, and the cancel is around the top middle-right.  Also when the cancel is pressed, the image dissapears and clicking on the space where the ok div/layer would be won't be like pressing ok.

<html>

<head>

<script language="javascript">
function init() {
  if (document.layers) {
    document.cancel.captureEvents(Event.CLICK)
    document.cancel.onclick=hideImg;
    document.ok.captureEvents(Event.CLICK)
    document.ok.onclick=goPage;
  }
}

function hideImg() {
  if (document.all) {
    window.login.style.display='none';
    window.ok.onclick='';
  }
  if (document.layers) {
    window.document.login.visibility='hide';
    document.ok.releaseEvents(Event.CLICK)
  }
  return false;
}

function goPage() {
  location.href="test2.htm";
}

</script>

<title>INDEX/MEMBERS..</title>

</head>

<body onLoad="init()">

<script language="JavaScript">
if (document.all) {
  document.write("<div id='login' style='POSITION: absolute; top: 200px; left: 200px;'><img src='http://www.crispyteens.com/loginani.gif'></div>");
  document.write("<div onClick='hideImg()' style='POSITION: absolute; top: 200px; left: 400px; height: 200px; width: 200px;'></div>");
  document.write("<div id='ok' onClick='goPage()' style='POSITION: absolute; top: 200px; left: 200px; height: 200px; width: 200px;'></div>");
} else if (document.layers) {
  document.write("<layer id='login' top='200' left='200' src='http://www.crispyteens.com/loginani.gif' visibility='show'></layer>");
  document.write("<layer id='cancel' top='200' left='400' height='200' width='200'></layer>");
  document.write("<layer id='ok' top='200' left='200' height='200' width='200'></layer>");
}
</script>
<h1>login/members/area/</h1>

</body>
</html>
0
 
nicceAuthor Commented:
the idea is great..but i cant get it working? when i run the code all i get is a broken image..?
0
 
tbain44Commented:
I can't see how you have a broken image because the path is an absolute reference and I checked and it's still up on the site.

And you copied this code directly?  Because I'm at a different computer now and this code directly works here.  

What Browser and version by the way?
0
 
nicceAuthor Commented:
its working now:-() it was my fault..i messed something up!
Im not sure how to make the correct koordinates fort the ok/cancel buttons?
can a imagemap be used`?
nicce
0
 
tbain44Commented:
Here are the coordinates, replace this part in the code.

These coordinates are all from top left corner, so if you move around the login gif you also need to adjust the div/layer coordinates accordingly.

------------------------------------

if (document.all) {
  document.write("<div id='login' style='POSITION: absolute; top: 200px; left: 200px;'><img src='http://www.crispyteens.com/loginani.gif'></div>");
  document.write("<div id='ok' onClick='goPage()' style='POSITION: absolute; top: 408px; left: 418px; height: 25px; width: 80px;'></div>");
  document.write("<div onClick='hideImg()' style='POSITION: absolute; top: 408px; left: 510px; height: 25px; width: 80px;'></div>");
} else if (document.layers) {
  document.write("<layer id='login' top='200' left='200' src='http://www.crispyteens.com/loginani.gif' visibility='show'></layer>");
  document.write("<layer id='ok' top='408' left='418' height='25' width='80'></layer>");
  document.write("<layer id='cancel' top='408' left='510' height='25' width='80'></layer>");
}
0
 
nicceAuthor Commented:
Thanks alot for your great help:-)
I´ll upload the page with the new codes:-)

nicce
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 14
  • 11
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now