-
Notifications
You must be signed in to change notification settings - Fork 0
/
login.html
76 lines (71 loc) · 2.05 KB
/
login.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script>
function validateUsername(){
var cor_username = 'photo'
var given_username = $('#username').val();
if(given_username.length < 1 || (given_username != cor_username) ){
$('#username').addClass('error');
return false;
}else{
$('#username').removeClass('error');
return true;
}
};
function validatePassword(){
var cor_pass = 'photo'
var given_pass = $('#password').val();
if(given_pass.length < 1 || (given_pass != cor_pass) ){
$('#password').addClass('error');
return false;
}else{
$('#password').removeClass('error');
return true;
}
};
$(document).ready(function() {
//login functions
$('#username').blur(validateUsername);
$('#password').blur(validatePassword);
$('#login_form').submit(function() {
if (validateUsername() && validatePassword()){
alert('Welcome Back ' + $('#username').val() );
}else{
$('#login_response').html('Please try again with all the required values');
}
return false;
});
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
</script>
<div id="panel">
<form id="login_form" >
Username: <input id="username" type="textarea"></input>
<br/>
Password: <input id="password" type="password"></input>
<br/>
<input id="rem_password" type="checkbox" name="remember" value="Yes" ></input> Remember Password
<br/>
<input id="login" type="submit" value="Login">
</form>
<div id="login_response">
</div>
</div>
<div class="tab">
<ul class="login">
<li id="toggle">
<a id="open" class="open" href="#">Log In | Register</a>
<a id="close" style="display: none;" class="close" href="#">Close Panel</a>
</li>
<li class="right"> </li>
</ul>
</div> <!-- / top -->