Demo- Login Cultura Informatica. - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

lunes, 12 de marzo de 2018

Demo- Login Cultura Informatica.

Demo- Login Cultura Informatica.




Buenos dias colegas, les compartimso este login para que puedan usarlo en sus practicas o ejemplos.
Practiquen y exito.



DESCARGA EL CODIGO AQUI :

clic




Codigo HTML

<div class="container">
  <h2 class="text-center text-primary text-titulo-sombra"><span class="glyphicon glyphicon-wrench"></span> Demos- Cultura</h2>
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6">
      <div id="mensaje" class="box-shadow"></div>
    </div>
    <div class="col-md-3"></div>
  </div>
  <div class="row" id="form">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <div class="jumbotron box-shadow">

        <form>
          <div class="form-group">
            <label for="usuario">Usuario:</label>
            <div class="input-group">
              <div class="input-group-addon"><span class="glyphicon glyphicon-user text-primary"></span></div>
              <input type="text" class="form-control" id="usuario" placeholder="Usuario" autocomplete="off" required autofocus>
            </div>
          </div>

          <div class="form-group">
            <label for="password">Password:</label>
            <div class="input-group">
              <div class="input-group-addon"><span class="glyphicon glyphicon-lock text-primary"></span></div>
              <input type="password" class="form-control" id="password" placeholder="Password" autocomplete="off" required>
            </div>
          </div>
          <button type="button" class="btn btn-primary btn-block " id="btn-ingresar">Ingresar <span class="glyphicon glyphicon-log-in"></span></button>
        </form>
      </div>

    </div>
    <div class="col-md-4"></div>
  </div>

</div>


Codigo CSS

         .text-titulo-sombra {
            text-shadow: 3px 3px 1px rgba(150, 150, 150, 6);        }

        .box-shadow{
            -webkit-box-shadow: 7px 11px 20px -1px rgba(0,0,0,0.65);
            -moz-box-shadow: 7px 11px 20px -1px rgba(0,0,0,0.65);
            box-shadow: 7px 11px 20px -1px rgba(0,0,0,0.65);
        }
        h2{
            padding-bottom: 15px;
        }


Codigo JS


 $(document).ready(function (){
            $('#btn-ingresar').prop("disabled", true);
            var enviar =false;
            let usuario = $('#usuario');
            let pass = $('#password');

            $('#usuario, #password').blur (function(){
                if( usuario.val().length>=3 && pass.val().length>=4 && enviar===false){
                    $('#btn-ingresar').prop("disabled", false)
                }else{
                    $('#btn-ingresar').prop("disabled", true)
                }
            });

            $('#btn-ingresar').hover(function(){
                console.log(enviar);
                if( usuario.val().length>=3 && pass.val().length>=4 && enviar===false){
                    $('#btn-ingresar').prop("disabled", false)
                }else{
                    $('#btn-ingresar').prop("disabled", true)
                }
            });


            $('#btn-ingresar').on('click', function(){
                 enviar =true;
                    var parametros = {
                        "usuario" : usuario.val(),
                        "password" : pass.val()
                    };
                    $.ajax({
                        data:  parametros, //datos que se envian a traves de ajax
                        url:   'login_validar.php', //archivo que recibe la peticion
                        type:  'post', //método de envio
                        beforeSend: function () {
                            let msj = '<div class="alert alert-info" role="alert"><strong>Procesando!</strong> espere por favor.</div>';
                            $("#mensaje").html(msj);
                        },
                        success:  function (response) { //una vez que el archivo recibe el request lo procesa y lo devuelve

                            $("#mensaje").empty();
                            if(response.success===false){
                                let msj = '<div class="alert alert-danger" role="alert"><strong>Error!</strong> '+response.message+'</div>';
                                $("#mensaje").html(msj);
                                $(".form-group").addClass('has-error has-feedback');
                                usuario.focus();
                                setTimeout(function(){  $("#mensaje").empty();  $(".form-group").removeClass('has-error has-feedback');  }, 6000);
                            }
                            if(response.success===true){
                                let msj = '<div class="alert alert-success" role="alert"><strong class="text-capitalize"> '+response.message+'</strong> bienvenido, ingresando</div>';
                                $("#mensaje").html(msj);
                                $("#form").empty();
                                setTimeout(function(){  location.href = "../index.php";  }, 6000);
                            }

                        }
                    });


            });

        });



Post Top Ad

Responsive Ads Here