"Two phase Login form - Best login form to reduce brute force"
Bootstrap 3.0.0 Snippet by souvikmaitra124

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid" style="margin-top:30px;">
<div class="row">
<div class="col-md-6 col-md-offset-3" style="padding-right: 0px!important;padding-left: 0px!important;">
<div class="panel-body" style="padding-right: 4px!important;padding-left: 4px!important;">
<form class="form-horizontal" method="post" id="login" name="login" role="form" onSubmit='#' action="#" AUTOCOMPLETE="off">
<fieldset style="min-width: 0;padding:.35em .625em .75em!important;margin:0 2px;border: 2px solid silver!important;margin-bottom: 10em;box-shadow: -6px 15px 20px 0px;">
<legend id="first3" style="width: inherit;padding:inherit;border:2px solid silver;" class="legend">Username</legend>
<legend id="myId8" class="hidden legend" style="width: inherit;padding:inherit;border:2px solid silver;">Password</legend>
<div class="form-group" id="above" style="margin-bottom: 5px!important;">
<div class="col-sm-1 col-md-2 col-lg-2 col-xs-1"></div>
<output class="col-sm-10 col-md-8 col-lg-8 col-xs-10"
id="responseFail" type="text"
style="text-align: center; font-weight: bold; color: red;padding: 0px!important;" ></output>
<div class="col-sm-1 col-md-2 col-lg-2 col-xs-1"></div>
</div>
<div class="form-group" style="margin-bottom: 5px!important;">
<div class="col-sm-12 col-md-12 col-lg-12 col-xs-12" id="message" style="font-weight: bold; text-align: center;font-size: 10pt;">
</div>
</div>
<div class="form-group" id="first" style="margin-bottom: 0px!important;">
<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
<div
class="col-sm-10 col-md-10 col-lg-10 col-xs-10 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user" style="color: black;"></span></span> <input type="text"
class="form-control" id="username" placeholder="Enter your Username">
</div>
<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
</div>
<div class="form-group" id="first2">
<div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div>
<div class="col-sm-10 col-md-10 col-lg-10 col-xs-10"
style="text-align: right;padding-right: 0px;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
.legend{
font-family: 'Helvetica';
font-weight: 700;
color: black;
font-size: 26px;
margin-bottom: 10px;
}
.customizedPrimaryBtn:hover{
background: #003635;
color: white;
border: none;
}
.customizedPrimaryBtn{
background: #530;
color: white;
border: none;
}
.customizedPrimaryBtn:VISITED{
background: #066;
color: white;
border: none;
}
.customizedPrimaryBtn:ACTIVE{
background: #003635;
color: white;
border: none;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$(document).ready(function() {
document.getElementById("username").focus();
$("#view_button").bind("mousedown touchstart", function() {
$("#password").attr("type", "text");
}), $("#view_button").bind("mouseup touchend", function() {
$("#password").attr("type", "password");
});
});
function valUsername(){
if(document.getElementById("username").value.trim()==="" && document.getElementById("username").value!==null)
{
$('#responseFail').val('');
$('#username').val('');
// $("#above").addClass('hidden');
$('#message').css('color','red');
$('#message').html('Please enter username');
$('input:text').focus(
function(){
$(this).css({'border-color' : 'red'});
$(this).css({'box-shadow' : 'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #f15f5f'});
});
$('input:text').blur(
function(){
$(this).css({'border-color' : '#ccc'});
$(this).css({'box-shadow' : 'none'});
});
$('#username').css({'border-color' : 'red'});
$('#username').css({'box-shadow' : 'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px #f15f5f'});
document.getElementById("username").focus();
return false;
}
else{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: