написать ф-ию авторизации через Dom
Задача: при нажатии на кнопку вызвать форму (ввести логин и пароль)и на выходе получить авторизация пройдена или нет. На данный момент при запуске программы выдает - авторизация не пройдена, а уже затем только выводит саму форму, в которую, собственно, необходимо вводить пароль и логин. Помогите добить данную программу, пожалуйста.код привожу ниже:<html>
<head>
<title>Домашнее задание - авторизация</title>
<meta charset="utf-8">
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#prompt-form {
display: inline-block;
padding: 5px 5px 5px 70px;
width: 200px;
border: 1px solid black;
<!-- background: white url(prompt.png) no-repeat left 5px;-->
vertical-align: middle;
}
#prompt-form-container {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: none;
width: 100%;
height: 100%;
text-align: center;
}
#prompt-form-container:before {
display: inline-block;
height: 100%;
content: '';
vertical-align: middle;
}
#cover-div {
position: fixed;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.3;
filter: alpha(opacity=30);
}
#prompt-form input[name="login"] {
display: block;
margin: 5px;
width: 180px;
}
#prompt-form input[name="pass"] {
display: block;
margin: 5px;
width: 180px;
}
</style>
</head>
<body style="height:3000px">
<h1 align = "center">Домашнее задание - авторизация</h1>
<input type="button" value="Нажмите для показа формы ввода" id="show-button">
<div id="prompt-form-container">
<form id="prompt-form">
<div id="prompt-message"></div>
<input name="login" type="text">
<input name="pass" type="text">
<input type="submit" value="Ок">
<input type="button" name="cancel" value="Отмена">
</form>
</div>
<script>
var gvalueLogin;
var gvaluePass;
var vlogin = 'admin';
var vpass = 'qwerty';
function validUser(logins,passw)
{
if (logins == vlogin && passw == vpass)
{
{ alert('Проверка пройдена');}
return "Привет" + " " + login;
}else
{
alert('Проверка yt пройдена');
return "Я вас не знаю"
}
}
/* Показать полупрозрачный DIV, затеняющий всю страницу
(а форма будет не в нем, а рядом с ним, чтобы не полупрозрачная) */
function showCover() {
var coverDiv = document.createElement('div');
coverDiv.id = 'cover-div';
document.body.appendChild(coverDiv);
}
function hideCover() {
document.body.removeChild(document.getElementById( 'cover-div')); // удалить элемент
}
function showPrompt(textLogin,textPass, callback) {
showCover();
var form = document.getElementById('prompt-form');
var container = document.getElementById('prompt-form-container');
document.getElementById('prompt-message').innerHTML = textLogin;
document.getElementById('prompt-message').innerHTML = textPass;
form.elements.login.value = '';
form.elements.pass.value = '';
function complete(value) {
hideCover();
container.style.display = 'none';
document.onkeydown = null;
callback(value);
}
form.onsubmit = function() {
var valueLogin = form.elements.login.value;
var valuePass = form.elements.pass.value;
var gvalueLogin = form.elements.login.value;
var gvaluePass = form.elements.pass.value;
if (gvalueLogin == '') return false; // игнорировать пустой submit
if (gvaluePass == '') return false; // игнорировать пустой submit
complete(gvalueLogin);
complete(gvaluePass);
return false;
};
form.elements.cancel.onclick = function() {
complete(null);
};
container.style.display = 'block';
form.elements.login.focus();
}
document.getElementById('show-button').onclick = function() {
if((gvalueLogin!=false)&&(gvaluePass!=false))
{
showPrompt("Введите что-нибудь","Введите login", validUser(gvalueLogin,gvaluePass)
);}
};
</script>
</body>
</html>
|