redirect html page if not login

Question

I have simple Login Form on my webpage. It uses javascript to login user and works fine. problem is that is user types the landing page url directly into the adress bar he directly can acess the page without login. i want to redirect him to the login page if he didn't login. below are the links of loding and target page.

login: http://samdesign.comli.com/protected/index.html

target: http://samdesign.comli.com/protected/user-soft.html

and here is the script used are below..

<form>
<table align=center>
  <tr>
     <td>Username:</td>
     <td><input type="text" name="username" style="background:#bfbfbf;color:#212121;border-color:#212121;" onFocus="this.style.background = '#ffffff';" onBlur="this.style.background = '#bfbfbf';"></td>
  </tr>

  <tr>
     <td>Password:</td>
     <td><input type="password" name="password" style="background:#bfbfbf;color:#212121;border-color:#212121;" onFocus="this.style.background = '#ffffff';" onBlur="this.style.background = '#bfbfbf';"></td>
  </tr>

  <tr>
  <td></td>
  <td align=right><input type="button" value="Login" onClick="Login(this.form);" style="background:#bfbfbf;color:#000000;border-color:#212121;" onMouseOver="this.style.color = '#404040';" onMouseOut="this.style.color = '#000000';" onFocusr="this.style.color = '#404040';" onBlur="this.style.color = '#000000';"></td>
  </tr>
</table>
</form>

script is this

function Login(form) {
username = new Array("numair","sam","u3","u4","u5","u6","u7","u8","u9","u10","temporary");
password = new Array("nk1994","sf1993","p3","p4","p5","p6","p7","p8","p9","p10","user");
page = "/protected/user-soft.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] || form.username.value == username[10] && form.password.value == password[10]) {
self.location.href = page;
}
else {
alert("Either the username or password you entered is incorrect.\nPlease try again.");
form.username.focus();
}
return true;
}

can any one help with exapmle?

Answer 1

// Put this in your login function, just before the redirect
var sessionTimeout = 1; //hours
var loginDuration = new Date();
loginDuration.setTime(loginDuration.getTime()+(sessionTimeout*60*60*1000));
document.cookie = "CrewCentreSession=Valid; "+loginDuration.toGMTString()+"; path=/";


// Put this at the top of index page
if (document.cookie.indexOf("CrewCentreSession=Valid") == -1) {
  location.href = "/Login.html";
}

Answer 2

this is not the right way doing authentication, you must keep authentication logic at server-end, you can use Node.js/Ruby-on-Rails(ROR)/JSP/ASP.NET (etc what ever you want) at your server-end.

and for making your page secure you have to add before filter at server-end (that will check user's session).

Answer 3

JavaScript authentication?? This isn't secure. All authentication should be done server side.