It shows  the password in plain text and help user to check whether password entered is correct or not. Basically   it Reveals the hidden passwords in the form of characters and numbers and provide convenience for checking your password and rectifying it if entered wrongly.

HTML Code:

<div class="container  super">
        <h1 class="align-center text-primary log">
            <span>Log In</span>
        </h1>
         <form class="form-signin">
            <div class="form-group">
                <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
            </div>
            <div class="form-group">
                <input type="password" id="pass" class="form-control" placeholder="Password" required>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" id="show_hide" value="remember-me"> Show my Password
              </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block butt" type="submit">Login in</button>
        </form>
    </div>

jquery Code:

function showpass() {
	var i = $("#show_hide");
	i.click(function() {
		if ($("#pass").attr("type")=="password") {
			$("#pass").attr("type", "text");// this will show the text of password
		} else {
			$("#pass").attr("type", "password");// this condition hides the entered password
		}
	})
}

$(document).ready(function () {
	
	showpass();
});


CSS Code:

.log span{
  color:gray; 
}
.super .butt{
	background-color: green;/* backgorund-color of login button */ 
}
.super {
    font-size: 20px;
    margin-top:150px;
}



.align-center {
	text-align: center;
}