Creating a login page with HTML

Question

I am trying to make a webpage where a user logs in and then once logged in, the page keeps track of the amount of time idle (not pressing keys or moving mouse). I have created both pages separately on codepen (see attached links). However, I am not sure how to link the two so that the user can login and after waiting too long automatically log out.

Login page: http://codepen.io/joebob461/pen/MwdPzN

 //incomplete code sample from link
function check(form) { 
  if (form.userid.value == "myuserid" && form.pswrd.value == "mypswrd") {
     window.open('target.html') 
  } else {
  alert("Error Password or Username") 
 }
}

Idle Time page: http://codepen.io/joebob461/pen/BNeqvP

//incomplete code sample from link
#welcome {
  text-align: center;
}

Answer 1

You'll want to post the login form data back to the server to authenticate. The form post will redirect you to the second page with the idletimer javascript method.

Once the idletimer code determines it is time to log the user out, you can use an ajax post back to your server to have the server do this. You haven't specified what server framework you are using. However, in ASP.NET when using the ASP.NET Membership provider, you would just have the server call

FormsAuthentication.Signout()