I have a html login page and use javascript to hide the user name and password:
Javascript:
function myFunction(){
var user = document.getElementById("username").value;
var pass = document.getElementById("pass").value;
if(user == "user1" && pass == "zzxx"){
window.location.href="about.html"}
else if(user == "user2" && pass == "xxzz"){
window.location.href="about2.html"}
else if(user == "user3" && pass == "ooppp"){
window.location.href="about3.html"
} else{
alert("Incorrect username or password");
}
HTML:
html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/invisible_debut.js" ></script>
</head>
<body>
<div class="loginBox">
<h1>Login</h1>
<div class="textbox">
<i class="fas fa-user"></i>
<input name="username" id="username" type="text"placeholder="Username">
</div>
<div class="textbox">
<i class="fas fa-lock"></i>
<input name="pass" id="pass" type="password"placeholder="Password">
</div>
<button value="Submit" class="btn btn-success"
onclick="myFunction()">Submit</button>
</form>
</div>
</body>
<div class="bg"></div>
</html>
I want to prevent the user to go to about.html by directly typing ..../about.html I only want people to login through user name and password. How can I do that? Many Thanks!
you can use document.referrer to check if its your website or not
You will need to store some information on
localStorage
to make sure that this user already visited and logged in to your website. When users will try to go directly to the about page without logging in - you can redirect them to the login page.
Use session-storage or local-storage to store the value of the user, then check that value in about page, if not exists then redirect the user back to the index page.
function myFunction() {
var user = document.getElementById("username").value;
var pass = document.getElementById("pass").value;
if(user == "user1" && pass == "zzxx") {
window.sessionStorage.setItem("user", "user1");
window.location.href="about.html"
} else if(user == "user2" && pass == "xxzz") {
window.sessionStorage.setItem("user", "user2");
window.location.href="about2.html"
} else if(user == "user3" && pass == "ooppp") {
window.sessionStorage.setItem("user", "user3");
window.location.href="about3.html"
} else {
alert("Incorrect username or password");
}
Use the above session-storage-item in about page
window.onload = function() {
if (window.sessionStorage.getItem("user")) {
var usr = window.sessionStorage.getItem("user");
if(user != "user1") {
window.location.replace("index.html");
}
} else {
window.location.replace("index.html");
}
}