Мне трудно понять, как проверить имя пользователя и пароль пользователя, а затем, нажав кнопку, они входят в свою домашнюю страницу, которая является новым окном.Я беру предположение и говорю, что способ, которым я сделал это, хорош в моем html, а не.Но я не уверен.
Спасибо
var objPeople = [
{
username: "username@google.com"
password: "password2019"
}
]
function getInfo(){
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){
document.getElementById("login_btn").onclick = function(){
location.href = "adminHome.html";
};
})
}
}
body{
background-image: url(https://www.ucalgary.ca/mediacentre/files/mediacentre/aerials_011a7179_fe.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: 'Numans', sans-serif;
}
html, body{
height: 100%;
}
.container{
height: 100%;
align-content: center;
overflow: hidden;
}
.card{
height: 370px;
margin: 10% auto auto 30%;
width: 450px;
background-color: rgba(0,0,0,0.50);
border-radius: 10px;
}
.card-header h3{
color: white;
text-align: center;
padding-top: 40px;
font-size: 30px;
}
.login_btn{
color: black;
background-color: #FFC312;
border-color: #FFC312;
width:100px;
padding: 12px;
border-radius: 5px;
margin-left: 300px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 10px;
font-family: 'Numans', sans-serif;
text-decoration: none;
}
.login_btn:hover{
color:black;
background-color: white;
border-color: white;
.card{
height: calc(100vh - 20%);
margin: 10% 15% 0 15%;
}
<!DOCTYPE html>
<html>
<head>
<title>Administrator Login</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="adminLogin.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class = "container">
<div class="d-flex justify-content-center h-100">
<div class = "card">
<div class ="card-header">
<h3>Sign In</h3>
</div>
<div class = "card-body">
<form>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="username" required>
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="password" required>
</div>
<div class="form-group">
<input id = "login_btn" type="submit" value="Login" class="btn float-right login_btn" onclick="getInfo()">
</div>
</form>
</div>
</div>
</div>
</div>
<script type="adminLogin.js"></script>
</body>
</html>