Login Form with Password View Option



Login Form with Password View Option




 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="login-form">
     <h1>Gonna Fly Now</h1>
     <div class="form-group ">
       <input type="text" class="form-control" placeholder="Username " id="UserName">
       <i class="fa fa-user"></i>
     </div>
     <div class="form-group log-status">
       <div class="f-view">
         <input type="password" class="form-control" placeholder="Password" id="passwod">
         <i class="fa fa-lock"></i>
         <i class="view-pass fa fa-eye"></i>
       </div>
       <span class="alert">Invalid Credentials <i class="fa fa-thumbs-down"></i></span>
     </div>
     
     <button type="button" class="log-btn" >Log in</button>
     <a class="link" href="#">Lost your password?</a>
    
   </div>


<script class="cssdeck" src="//code.jquery.com/jquery-1.11.2.min.js"></script>                    
                  
                



 *{
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-family:arial;
}
body{
  background:url("http://www.a-cphotography.com/data/photos/3246_1a_c_photography_lifestyle_port_09.jpg") no-repeat fixed;
background-size:cover ;
  margin:0;
}

h1{
  color:#FFF;
  text-shadow:0 1px 1px #83FF77;
  text-align:center;
  font-faimly:icon;
}

.login-form{
  width:350px;
  padding:40px 30px;
  background:rgba(25,186,255,0.5);
  position:fixed;
  bottom:0;
  top:0;
}
.form-group{
  position: relative;
  margin-bottom:15px;
}
.form-control{
  width:100%;
  height:50px;
  border:none;
  padding:5px 7px 5px 35px;
  background:#fff;
  color:#aaa;
  border:1px solid #ddd;
  -moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;
  -webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;
  box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  &:focus{
 border-color: #19BAFF;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
   color:#19BAFF;
 
}
}
.form-group {
  .fa{
    position: absolute;
    left:15px;
    top:17px;
    color:#ccc;
  }
  .view-pass{
    left:auto;
    right:15px;
    cursor:pointer;
    color:#ccc;
    display:none;
    &:hover{color:#666}
  }
}
.form-control:focus + .fa{
   color:#19BAFF;
}
.log-status.wrong-entry .form-control, .wrong-entry .form-control + .fa {
  border-color: #ed1c24;
  color: #ed1c24;
}
.log-btn{
  background:#FFA500;
  dispaly:inline-block;
  width:100%;
  font-size:16px;
  height:50px;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  border:none;
  box-shadow:0px -3px #C98104 inset;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  
  &:active{
    margin-top:2px;
    margin-bottom:-2px;
    box-shadow:0px -1px #C98104 inset;
  }
}

.link{
  text-decoration:none;
  text-align:center;
  color:#fff;
  display:block;
  font-size:13px;
  margin-top:15px;
  &:hover{
    text-decoration: underline;
  }
}
.alert{
  background:#f00;
  color:#fff;
  width:100%;
  height:50px;
  line-height:50px;
  text-align:center;
  display:none;
  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  position:absolute;
  top:0;
  .fa{color:#fff; position:static;font-size:18px}
}
.log-status{
  transition:all 0.5s;
  -moz-transition:all 0.5s;
  -webkit-transition:all 0.5s;
  position:relative;
  &.wrong-entry {
    transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
    .alert{
      display:block;
      transform: rotateX(180deg);
      -moz-transform: rotateX(180deg);
      -webkit-transform: rotateX(180deg);
    }
    
    
  }
}
                
              



  $(document).ready(function(){
        $('.log-btn').click(function(){
            $('.log-status').addClass('wrong-entry');
           setTimeout( "$('.log-status').removeClass('wrong-entry');",2000 );
        });
    
        $('.form-control').keyup(function(){
            $('.log-status').removeClass('wrong-entry');
          
          if($('#passwod').val().length > 0){
             $('.view-pass').show();
             }
          else{
             $('.view-pass').hide();
          }
        });
     $('.view-pass').mousedown(function(){
       $('#passwod').attr('type', 'text');
     });
     $('.view-pass').mouseup(function(){
       $('#passwod').attr('type', 'password');
     });
    

    });