I am unable to redirect to google.com by entering correct credentials. Please help me to rectify that what mistake I have done in my Javascript. Please let me know what I have done wrong in the code below:
var x = document.getElementById("login");
var y = document.getElementById("register");
var z = document.getElementById("btn");
function register(){
x.style.left = "-400px";
y.style.left = "50px";
z.style.left = "110px";
}
function login(){
x.style.left = "50px";
y.style.left = "450px";
z.style.left = "0";
}
var objPeople = [
{
username: "leelasaiprasad",
password: "codify"
},
{
username: "matt",
password: "academy"
},
{
username: "chris",
password: "forever"
}
]
function signin(){
var username = document.getElementById("username").value
var password = document.getElementById("password").value
for(i=0; i< objPeople.length; i++) {
if(username == objPeople[i].username && password == objPeople[i].password){
console.log(username + "is logged in!!!")
location.href = "http://google.com";
return
}
}
alert("Incorret password")
}*{
margin:0;
padding: 0;
font-family: 'Lato', sans-serif;
}
.hero{
height: 100%;
width: 100%;
background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(blue.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
#logo{
position: relative;
}
#logo img{
width: 150px;
height: 80px;
position: absolute;
top: 0px;
left: 0px;
}
.login-box{
width: 380px;
height: 500px;
position: relative;
margin: 6% auto;
top : 80px;
background: #fff;
padding: 5px;
overflow: hidden;
}
.button-box{
width:220px;
margin: 35px auto;
position: relative;
box-shadow: 0 0 20px 9px #ff61241f;
border-radius: 30px;
}
.toggle-btn{
padding:10px 30px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
}
#btn{
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background: linear-gradient(to right,#105fff,#105fff);
border-radius: 30px;
transition: .5s;
}
.input-group{
top: 150px;
position: absolute;
width: 280px;
transistion: .5s;
}
.input-field{
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
.submit-btn{
width: 85%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right,#105fff,#105fff);
border: 0;
outline: none;
border-radius: 30px;
}
.chech-box{
margin: 30px 10px 30px 0;
}
span{
color: #777;
font-size: 12px;
bottom: 66px;
position: absolute;
}
#login{
left: 50px;
}
#register{
left: 450px;
}<html>
<head>
<title>Login Form</title>
<link rel ="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<div id= "logo"><img src ="IBM.png"></div>
<div class="login-box">
<div class="button-box">
<div id="btn"></div>
<button type="button" class="toggle-btn" onclick="login()">Log In</button>
<button type="button" class="toggle-btn" onclick="register()">Register</button>
</div>
<form id="login" class= "input-group">
<input id="username" class="input-field" placeholder="User ID" required>
<input id="password" class="input-field" placeholder="Enter Password" required>
<input type="checkbox" class="chech-box"><span>Remember password</span>
<button type="button" onclick="signin()" class="submit-btn">Log in</button>
</form>
<form id="register" class= "input-group">
<input type="text" class="input-field" placeholder="User ID" required>
<input type="text" class="input-field" placeholder="Enter Email-ID" required>
<input type="text" class="input-field" placeholder="Password" required>
<input type="checkbox" class="chech-box"><span>I agree to the terms and conditions</span>
<button type="submit" class="submit-btn">Register</button>
</form>
</div>
</div>
<script src="login.js"></script>
</body>
</html>I'm guessing you're testing this code in a browser based IDE where the page is running https. This won't work because you are pointing at http://google.com instead of https://google.com - secure websites don't like hosting insecure websites in frames. You can see this on the code above by running the snippet and attempting login with your browser's developer tools open. You'll see an error message in the console about "Mixed Content" saying that this page is loaded over HTTPS, but requested an insecure frame 'http://google.com'. It will go on to say the request was blocked.
That said, simply switching it to https still won't entirely work. The frame will forward to google.com after logging in, but google.com won't actually load because that site is setup to disallow being hosted in an iFrame. This is to prevent user interface redress attacks, such as click-jacking, against their sites.