Untitled

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            #teveo, #fueraForm{
                visibility: hidden;
            }
            input{
                margin: 0 20px 0 9px;
            }
            form{
                margin: 20px 0 20px 0;
            }
            #elh2{
                display: inline-block;
            }
            #logout{
                margin: 0 0 12px 15px;
            }
        </style>
    </head>
    <body>

        <div class="container">
            <div class="col-lg-12">

                <div class="page-header">
                    <h1>LoginMaven con sesiones</h1>
                </div>

                <div id="adios"></div>

                <form id="fueraForm" class="form-inline">
                    <div class="form-group">
                        <label for="user">User:</label>
                        <input type="text" class="form-control" id="user" name="user" placeholder="Usuario...">
                    </div>

                    <div class="form-group">
                        <label for="pass">Password:</label>
                        <input type="password" class="form-control" id="pass" name="pass" placeholder="Password...">
                    </div>
                    <button id="loguear" type="submit" class="btn btn-primary">Logueate</button>
                </form>

                <div id="errores"></div>


                <div id="teveo">
                    <span id="elh2"></span>
                    <button id="logout" type="submit" class="btn btn-primary">Logout</button>
                </div>

            </div>
        </div>


        <script>
            $(document).ready(function () {
                $.ajax({
                    url: 'http://localhost:8080/mavenlogin/session?op=check',
                    type: 'GET',
                    datatype: 'json',
                    success: function (data) {
                        //si existe una sesion, se esconde el formulario de login.
                        if (data.user != null) {
                            visualizarSesion();
                            $("#elh2").empty().append("<h2>Bienvenido: " + data.user + "!</h2>");
                        } else {
                            visualizarLogin();
                        }
                        $("#loguear").click(function () {
                            event.preventDefault();
                            nomUser = $("#user").val();
                            nomPass = $("#pass").val();
                            function asd(nomUser, nomPass) {
                                $.ajax({
                                    url: 'http://localhost:8080/mavenlogin/session?op=login&user=' + nomUser + '&pass=' + nomPass,
                                    type: 'GET',
                                    datatype: 'json',
                                    success: function (data) {

                                        if (data.status == 200) {
                                            visualizarSesion();
                                            $("#elh2").empty().append("<h2>Bienvenido: " + data.user + "!</h2>");

                                        } else {
                                            $("#errores").html('<p>Error, revise la contrasenya</p>');
                                        }
                                    },
                                    error: function () {
                                        $("#errores").html("<p>Error.</p>");
                                    }
                                });
                            }
                            asd(nomUser, nomPass);


                        });

                        $("#logout").click(function () {
                            event.preventDefault();
                            $.ajax({
                                url: 'http://localhost:8080/mavenlogin/session?op=logout',
                                type: 'GET',
                                datatype: 'json',
                                success: function (data) {
                                    if (data.status == 200) {
                                        visualizarLogin();
                                        $("#adios").html("<h3>Has sido desconectado correctamente</h3>");
                                    }
                                },
                                error: function () {
                                    $("#errores").html("<p>Error.</p>");
                                }
                            });
                        });

                        function visualizarSesion() {
                            $("#fueraForm").css("display", "none");
                            $("#fueraForm").css("visibility", "hidden");
                            $("#teveo").css("visibility", "visible");
                            $("#errores").empty();
                            $("#adios").empty();
                        }

                        function visualizarLogin() {
                            $("#fueraForm").css("display", "block");
                            $("#fueraForm").css("visibility", "visible");
                            $("#teveo").css("visibility", "hidden");
                            $("#elh2").empty();
                            $("#errores").empty();
                        }
                    },
                    error: function () {
                        $("#errores").html("<p>Error.</p>");
                    }
                });


            });
        </script>

    </body>
</html>