/    Sign up×
Community /Pin to ProfileBookmark

multi user/page login html code

I am building a website for a friend of mine with intuit websites, they only allow html no php and as far as i know no javascript, so I’m having trouble finding an html code that will allow her clients to login and see what work they have had done, I used a code from another thread and was able to get a username/password box but I can’t get it to do anything, I need it to go to different pages for different clients. heres the code i have:

[code]
<html>
<head>
<span style=”color:#FFFFFF”>

<title>Please type your Username and Password… </title>
<script language=”JavaScript” type=”text/JavaScript” src=”login.js”></script>
</head>
<body bgcolor=”#FFFFFF”>
<form>
<br>
<center>
Username: <input type=”text” name=”username” style=”background:#bfbfbf;color:#212121;border-color:#212121;” onFocus=”this.style.background = ‘#ffffff’;” onBlur=”this.style.background = ‘#bfbfbf’;”>
<br>
Password: <input type=”password” name=”password” style=”background:#bfbfbf;color:#212121;border-color:#212121;” onFocus=”this.style.background = ‘#ffffff’;” onBlur=”this.style.background = ‘#bfbfbf’;”>
<br>
<input type=”button” value=”Login” onClick=”Login(this.form);” style=”background:#bfbfbf;color:#FFFFFF;border-color:#212121;” onMouseOver=”this.style.color = ‘#404040’;” onMouseOut=”this.style.color = ‘#FFFFFF’;” onFocusr=”this.style.color = ‘#404040’;” onBlur=”this.style.color = ‘#FFFFFF’;”>
</center>
</form>
</body>
</html>

<!– Begin

function Login(form) {
username = new Array(“u1″,”u2″,”u3″,”u4″,”u5″,”u6″,”u7″,”u8″,”u9″,”u10”);
password = new Array(“p1″,”p2″,”p3″,”p4″,”p5″,”p6″,”p7″,”p8″,”p9″,”p10”);
page = new Array (“www.watcomechanical.net/applebees610.html”;)
if (form.username.value == username[0] && form.password.value == password[0] || form.username.value == username[1] && form.password.value == password[1] || form.username.value == username[2] && form.password.value == password[2] || form.username.value == username[3] && form.password.value == password[3] || form.username.value == username[4] && form.password.value == password[4] || form.username.value == username[5] && form.password.value == password[5] || form.username.value == username[6] && form.password.value == password[6] || form.username.value == username[7] && form.password.value == password[7] || form.username.value == username[8] && form.password.value == password[8] || form.username.value == username[9] && form.password.value == password[9]) {
self.location.href = page;
}
else {
alert(“Either the username or password you entered is incorrect.nPlease try again.”);
form.username.focus();
}
return true;
}

// End –>[/code]

to post a comment
HTML

16 Comments(s)

Copy linkTweet thisAlerts:
@FangMay 17.2010 — as far as i know no javascript[/QUOTE]So why are you attempting this with JavaScript?
Copy linkTweet thisAlerts:
@PETTEMay 17.2010 — Do they have a login system already? Or some kind of logging in mechanism. If not then don't attempt with HTML/Javascript (If they support HTML javascript should be allowed). There is nothing you can do with HTML to create a complete authentication system. Most of the work goes on at the server which requires server scripting.
Copy linkTweet thisAlerts:
@cmperryauthorMay 17.2010 — i just found a spot in page properties that lets me put in javascript onload and offload
Copy linkTweet thisAlerts:
@cmperryauthorMay 18.2010 — So why are you attempting this with JavaScript?[/QUOTE]

I thought it was an html code. so what parts of the code do i put in the javascript onload and offload boxes?
Copy linkTweet thisAlerts:
@criterion9May 18.2010 — I thought it was an html code. so what parts of the code do i put in the javascript onload and offload boxes?[/QUOTE]

The code you posted above between the comments was javascript (though it wasn't within it's <script> tags). As mentioned above this will be highly difficult (and not secure) using javascript and is best suited to server-side languages.
Copy linkTweet thisAlerts:
@cmperryauthorMay 18.2010 — security really isn't that big of a deal with what i'm trying to do, the customers won't be able to edit anything just view the work they have had done. I did find another code that seems to be working thought and was wondering if someone could help me edit it for use with multiple customers:

<form>

<p>USER NAME :

<input type="text" name="text2">

</p>

<p>PASSWORD :

<input type="password" name="text1">

<input type="button" value="Check In" name="Submit" onclick=javascript:validate(text2.value,"free",text1.value,"javascript") >

</p>

</form>

<script language = "javascript">


function validate(text1,text2,text3,text4)

{

if (text1==text2 && text3==text4)

load('success.htm');

else

{

load('failure.htm');

}

}

function load(url)

{

location.href=url;

}

</script>
Copy linkTweet thisAlerts:
@FangMay 20.2010 — Do you give each customer their own password?
Copy linkTweet thisAlerts:
@cmperryauthorMay 20.2010 — I found a code that I got to work that lets each client have there own username and password redirecting them to there page, now I just need to figure out how to lock the pages for ppl who aren't logged in. any advice?
Copy linkTweet thisAlerts:
@criterion9May 20.2010 — Server-side code or .htaccess are your best options. Alternatively, you can check a cookie with a javascript and redirect to a login page if the cookie doesn't exist (this option is ridiculously not secure by any means and should not be the first pick of options).
Copy linkTweet thisAlerts:
@yamaharussMay 20.2010 — Remember that anyone who simply turns off Javascript will bypass everything you are doing.
Copy linkTweet thisAlerts:
@skilled1May 20.2010 — This is the code I have used many times in the past to achieve the same function that you are doing.

Place this in the <head>

[CODE]<SCRIPT LANGUAGE="JavaScript">

function Getstats()
{
window.status=('Attempting to Login to user area.')

var AccId;
var iName;
AccId = document.iAccInput.iAccID.value
iName = document.iAccInput.iName.value

if (AccId == "" || iName == "")
{
alert('nERRORnYou must enter ALL Details,nto View your statistics.n');
window.status=('Missing data or Invalid. Check spelling and Ensure Names are in Correct Case.')
}
else
{

var location=("pw" + iName + AccId + ".html");
this.location.href = location;
window.status=(' Verifying: ' + iName + '-' + AccId + ' Please wait........');
}
}

</SCRIPT>
[/CODE]


this will be your login box

[CODE]<hr><FORM NAME="iAccInput">
<CENTER>
<TABLE BORDER="1px" bordercolor="#c0c0c0" cellpadding="5" cellspacing="0">
<TR>
<TD ALIGN="RIGHT">
<p><FONT SIZE="3" FACE="Arial"><B>User Name:</B></FONT>
</p></td>

<TD>
<INPUT TYPE="TEXT" NAME="iName" MAXLENGTH="15">
</td>
<TD> &nbsp;
</td>
</tr>
<tr>
<TD ALIGN="RIGHT">

<p><FONT SIZE="3" FACE="Arial"><B>Password:</B></FONT>
</p></TD>
<td>
<INPUT NAME="iAccID" MAXLENGTH="15" HEIGHT="50">
</TD>
<td align="center">
<INPUT TYPE="BUTTON" VALUE=" Login " onClick="Getstats()" HEIGHT="40" WIDTH="50"><BR><br>
<INPUT TYPE="RESET" VALUE=" Reset " onClick="window.status=('RESET: Please enter your USERNAME and ACCOUNT ID.')" WIDTH="50">

</td>
</TR>
</TABLE>
[/CODE]


what this code does is look for pw**.html

you can modify the code by editing the 'pw' in the javascript to be /lockedfileonserver/pw which will move it to another directory

if the username you give them is baseball, and password is isfun the script as is will look for

pwbaseballisfun.html

this way you can have as many users viewing as many different files as you want all using the exact same login

pwbaseballisfun.html

pwfootballisgreat.html

pwilikeapples.html

whatever you want. only problem is that the usernames and passwords ARE case sensitive. pwBaseBallisFun.html will not load if they have all lowercase or caps. but this is also great for peopl;e that want to set their own usernames and passwords. just remember to set the folder that you place all the user's html files in, to make sure that it is not open to the web.

it also does not matter if people understand that the system works with a pw suffix (or whatever you change it to) because they will have to guess at all the usernames and passwords to try and find the files.
Copy linkTweet thisAlerts:
@criterion9May 21.2010 — 
just remember to set the folder that you place all the user's html files in, to make sure that it is not open to the web.[/quote]

Those files would still have to be exposed over http in order for the client-side javascript to access them...just saying.
Copy linkTweet thisAlerts:
@skilled1May 21.2010 — Those files would still have to be exposed over http in order for the client-side javascript to access them...just saying.[/QUOTE]

That is true, you just set the directory the files are in to not 'be read' by browsers, just don't password protect the files, and you are set.
Copy linkTweet thisAlerts:
@criterion9May 21.2010 — That is true, you just set the directory the files are in to not 'be read' by browsers, just don't password protect the files, and you are set.[/QUOTE]

The AJAX calls make the same request as if a user typed it into the location bar in their browser. How would you set the file to not "be read" by browsers and still allow the AJAX call?
Copy linkTweet thisAlerts:
@tann98May 23.2010 — &#160
Copy linkTweet thisAlerts:
@skilled1May 26.2010 — The AJAX calls make the same request as if a user typed it into the location bar in their browser. How would you set the file to not "be read" by browsers and still allow the AJAX call?[/QUOTE]


If you login to your cpanel if you have one, or simply create the .htaccess file to enable a leech protect access you will be fine. You can't read from the parent folder why trying to modify the url in the browser to look at other files in that 'restricted' folder.

Code:
[CODE]
RewriteEngine on
RewriteCond ${LeechProtect:/home/public_html/FOLDERNAME:&#37;{REMOTE_USER}:%{REMOTE_ADDR}:4} leech
RewriteRule .* http://www.YOURDOMAIN.com/login.html
Options All -Indexes
[/CODE]


with login.html being the name of the file that i provided code to previously and it is placed in the public_html folder. You edit the code for login.html to correspond with the 'FOLDERNAME' in the .htaccess to correspond

ie.

public.html/login.html

public.html/restricted/

public.html/restricted/.htaccess (which is the code above)


and place all the pwUsernamePassword.html files inside /restricted/ and make sure login.html looks for /restricted/pw*.html
×

Success!

Help @cmperry spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...