Skip to main content
1 de 2
Boris
  • 51
  • 5

Como puedo usar un bootstrap modal login en Spring MVC

Soy nuevo en esta comunidad y la verdad es que esta genial. Bueno aquí mi pregunta: Como puedo mapear bootstrap modal login desde un controlador de Spring MVC? y como puedo hacer el login por codigo sin tener que registrar nada en el web.xml?

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='<c:url value="/resources/css/bootstrap.min.css"/>' rel="stylesheet" type="text/css"/>
    <link href='<c:url value="/resources/css/modal_login.css"/>' rel="stylesheet" type="text/css"/>
    <script src='<c:url value="/resources/js/npm.js"/>' type="text/javascript"></script>
    <script src='<c:url value="resources/js/jquery.min.js"/>' type="text/javascript"></script>
    <script src='<c:url value="/resources/js/bootstrap.min.js"/>' type="text/javascript"></script>
    <style>
        body{
            margin-top: 60px;
        }
    </style>
</head>
<body>

    <c:url value="/mwp/inicio" var="urlInicio"/>
    <c:url value="/mwp/sobremi" var="urlSobreMi"/>
    <c:url value="/mwp/cursos" var="urlCursos"/>
    <c:url value="/mwp/contactar" var="urlContactar"/>
    <c:url value="/mwp/login" var="urlLogin"/>
    <c:url value="/mwp/logout" var="urlLogout"/>
    <!-- Menu -->

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="${urlInicio}">Inicio <span class="glyphicon glyphicon-home"></span></a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="${urlSobreMi}">Sobre mi <span class="glyphicon glyphicon-user"></span></a></li>
                    <li><a href="${urlCursos}">Mis cursos <span class="glyphicon glyphicon-book"></span></a></li>
                        <c:if test="'<%= request.getUserPrincipal() != null%>'">
                            <li><a href="${urlContactar}">Contactar <span class="glyphicon glyphicon-envelope"></span></a></li>
                        </c:if>                        
                </ul>    
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <c:choose>
                            <c:when test='<%= request.getUserPrincipal() == null%>'>
                                <a href="#" data-toggle="modal" data-target="#login-modal">Iniciar sesión <span class="glyphicon glyphicon-log-in"></span></a>
                                </c:when>
                                <c:otherwise>
                                <a href="#">Salir <span class="glyphicon glyphicon-log-out"></span></a>
                                </c:otherwise>
                            </c:choose>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!--Modal Login -->

    <div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog">
            <div class="loginmodal-container">
                <h1>Iniciar sesión</h1><br>
                <form action="${urlLogin}" method="POST">
                    <input type="text" name="user" placeholder="Nombre de usuario">
                    <input type="password" name="pass" placeholder="Contraseña">
                    <input type="submit" name="login" class="login loginmodal-submit" value="Iniciar sesión">
                </form>
                <div class="login-help">
                    <a href="#">Crear cuenta</a> - <a href="#">Recuperar contraseña</a>
                </div>
            </div>
        </div>
    </div>       
</body>
</html>

Este es un jsp que incluyo en todos los otros a modo cabecera ya que contiene el menú y el modal login. Un saludo

Boris
  • 51
  • 5