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

<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;"> <a href="#" style="color:teal">Forgot Username ?</a> </div> <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div> </div> <div class="form-group" id="first1"> <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div> <div class="col-sm-11 col-md-11 col-lg-11 col-xs-10" style="text-align:center;"> <button id="valuser" type="button" onclick="valUsername()" class="btn btn-primary customizedPrimaryBtn"> Next</button> </div> <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div> </div> <!--<div class="form-group hidden" id="myId" style="margin-bottom: 5px!important;"> <div class="col-sm-1 col-md-2 col-lg-2 col-xs-1"></div> <div class="col-sm-10 col-md-8 col-lg-8 col-xs-10" id="Response" style="text-align: center; font-weight: bold;padding-top: 0px;" ></div> <div class="col-sm-1 col-md-2 col-lg-2 col-xs-1"></div> </div> --> <div class="form-group hidden" id="myId1" 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-lock" style="color: black;"></span></span> <input type="password" class="form-control" id="password" style="width: 100%;" placeholder="Enter your Password"><span class="input-group-btn"> <button class="btn btn-defaultCUST" id="view_button" style="height: 34px;border-color: #ccc;" type="button"> <span class="glyphicon glyphicon-eye-open" ></span> </button> </span> </div> <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div> </div> <div class="form-group hidden" id="myId4"> <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;"> <a href="#" style="color: teal;">Forgot password ?</a> </div> <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div> </div> <div class="form-group hidden" id="myId3"> <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div> <div class="col-sm-11 col-md-11 col-lg-11 col-xs-10 button_Pad" style="text-align:center"> <button type="button" onclick="prevPage()" class="btn btn-primary" style=" font-size: 13px;"> Back</button>   <button id="submitbtn" type="submit" class="btn btn-success" onClick="javascript:return loginStatus();" style=" font-size: 13px;"> Login</button> </div> <div class="col-sm-1 col-md-1 col-lg-1 col-xs-1"></div> </div> <div class="form-group" style="text-align:center;font-weight:bold"> Please pay a visit to <a target="_blank" href="https://www.formulaestack.com">Formulae Stack</a> to explore more interesting snippets and articles </div> </fieldset> </form> </div> </div> </div> <h2 style="text-align: center">Enter any username other than Admin else you would see invalid username message</h2> </div>
.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; }
$(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{ var name = $('#username').val(); if(name.toLowerCase()=="admin"){ //$("#above").removeClass('hidden'); $('#message').html(''); $('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'}); }); document.getElementById("username").focus(); $('#responseFail').css({'color' : 'red'}); $('#responseFail').text('You have entered invalid username'); } else{ $('#responseFail').css({'color' : '#555'}); $('#responseFail').text('Enter the password for '+name); $("#first").addClass('hidden'); // $("#above").addClass('hidden'); $("#first1").addClass('hidden'); $("#first2").addClass('hidden'); $("#first3").addClass('hidden');//to hide // $("#myId").removeClass('hidden'); //to show $("#myId1").removeClass('hidden'); $("#myId2").removeClass('hidden'); $("#myId3").removeClass('hidden'); $("#myId4").removeClass('hidden'); $("#myId8").removeClass('hidden'); $('#message').html(''); // $('#message1').html(''); $('input:password').focus( function(){ $(this).css({'border-color' : '#66afe9'}); $(this).css({'box-shadow' : 'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)'}); }); $('input:password').blur( function(){ $(this).css({'border-color' : '#ccc'}); $(this).css({'box-shadow' : 'none'}); }); $('Response').html('Enter the password for'); document.getElementById("password").focus(); } } } function prevPage() { $('#message').html(''); // $('#message1').html(''); $('#password').val(''); $('#responseFail').val(''); $("#first").removeClass('hidden'); $("#first1").removeClass('hidden'); $("#first2").removeClass('hidden'); $("#first3").removeClass('hidden');//to hide //$("#myId").addClass('hidden'); //to show $("#myId1").addClass('hidden'); $("#myId2").addClass('hidden'); $("#myId3").addClass('hidden'); $("#myId4").addClass('hidden'); $("#myId8").addClass('hidden'); $('#ajaxResponse').css('color','#555'); $('input:text').focus( function(){ $(this).css({'border-color' : '#66afe9'}); $(this).css({'box-shadow' : 'inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6)'}); }); $('input:text').blur( function(){ $(this).css({'border-color' : '#ccc'}); $(this).css({'box-shadow' : 'none'}); }); // document.getElementById("username").blur();// to remove auto focus on usename after back is clicked document.getElementById("username").focus(); } function loginStatus(){ alert("This is a demo login application"); return false; }

Related: See More


Questions / Comments: