<div class="container login-form">
<h2 class="login-title">- Please Login -</h2>
<div class="panel panel-default">
<div class="panel-body">
<form>
<div class="input-group login-userinput">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input id="txtUser" type="text" class="form-control" name="username" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input id="txtPassword" type="password" class="form-control" name="password" placeholder="Password">
<span id="showPassword" class="input-group-btn">
<button class="btn btn-default reveal" type="button"><i class="glyphicon glyphicon-eye-open"></i></button>
</span>
</div>
<button class="btn btn-primary btn-block login-button" type="submit"><i class="fa fa-sign-in"></i> Login</button>
<div class="checkbox login-options">
<label><input type="checkbox"/> Remember Me</label>
<a href="#" class="login-forgot">Forgot Username/Password?</a>
</div>
</form>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Exo:400,500,500italic,400italic,600,600italic,700,700italic,800,800italic,300,300italic);
body {
padding-top: 250px;
/*The below background is just to add some color, you can set this to anything*/
background: url(http://www.magic4walls.com/wp-content/uploads/2014/01/texture-blue-fonchik-simple-dark-colors-glow-background.jpg) no-repeat;
}
.login-form{width:390px;}
.login-title{font-family: 'Exo', sans-serif;text-align:center;color: white;}
.login-userinput{margin-bottom: 10px;}
.login-button{margin-top:10px;}
.login-options{margin-bottom:0px;}
.login-forgot{float: right;}
window.onload = function(){$("#showPassword").hide();}
$("#txtPassword").on('change',function() {
if($("#txtPassword").val())
{
$("#showPassword").show();
}
else
{
$("#showPassword").hide();
}
});
$(".reveal").on('click',function() {
var $pwd = $("#txtPassword");
if ($pwd.attr('type') === 'password')
{
$pwd.attr('type', 'text');
}
else
{
$pwd.attr('type', 'password');
}
});