Модал по шаблону макета из тимьяна - PullRequest
Новая
       15

Модал по шаблону макета из тимьяна

1 голос
/ 14 марта 2019

У меня проблема с модалом.Мой логин осуществляется через модальный режим и находится в навигационной панели в шаблоне макета тимелист в качестве компонента для всех страниц, кроме логина.Это работает нормально, но если вход в систему неправильный, он возвращает вас к полноразмерной странице, а не к модальному, почему это не так?Spring Security и UserDetailsService

https://e -commerce-springboot.herokuapp.com /

это layout.hmtl 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Buy-A-Thing</title>
<meta
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
name="viewport" />
<link rel="stylesheet" type="text/css"
th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1  /jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1    /js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Lobster);



.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: black;
color: white;
height: 20px;
text-align: center;
}
.glyphicon {
font-size: 17px;
}
h6 {
margin: 5px;
}
#homeButton{
font-family:Lobster;
font-size:20px;
}
 #userNameDisplay {
color: rgba(250, 250, 250, 0.4);
margin: 15px;
}
</style>
</head>
<body>  
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
    <a class="navbar-brand active" id="homeButton" th:href="@{/}">Buy-A-Thing</a>&nbsp;

            <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#myNavbar">
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                  <!--    <li id="userNameDisplay" sec:authorize="isAuthenticated()"
                    th:text="${#authentication.principal.username}">
                    </li>-->
                <li sec:authorize="isAuthenticated()"><a
                    class="dropdown-toggle" data-toggle="dropdown" href="#" th:text="${#authentication.principal.username}">
                        <span class="caret"></span>
                </a>
                    <ul class="dropdown-menu">
                        <li sec:authorize="hasRole('ROLE_ADMIN')">
                        <a th:href="@{/admin}">Administrator</a>
                            </li>
                        <li>
                        <a th:href="${'/user/' + #authentication.principal.username}">User</a>
                        </li>
                    </ul>
                    </li>

                <li sec:authorize="!isAuthenticated()">
                <a  th:href="@{/registration}" data-target="#theModalRegistration"
                    data-toggle="modal"><span class="glyphicon glyphicon-user"></span>
                        Sign Up</a>
                        </li>

                <li sec:authorize="!isAuthenticated()">
                <a th:href="@{/login}"
                    data-target="#theModalLogin" data-toggle="modal"> <span
                        class="glyphicon glyphicon-log-in"></span>Login
                </a>
                </li>   
                <li sec:authorize="isAuthenticated()">
                <a th:href="@{/cartOfUser/}" role="dialog"
                    data-target="#theModalCart" data-toggle="modal"> <span
                        class="glyphicon glyphicon-shopping-cart"></span>
                </a>
                </li>
                <li sec:authorize="isAuthenticated()"><a th:href="@{/logout}"><span
                        class="glyphicon glyphicon-log-out"></span> Logout</a>
                </li>

            </ul>
        </div>
    </div>
</nav>


<div class="modal fade text-center" id="theModalLogin">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>
<div class="modal fade text-center" id="theModalRegistration">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>
    <div class="modal fade text-center" id="theModalCart">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>

<div class="container">
<div layout:fragment="custom-content">

        <!-- Your Page Content Here -->
    </div>

</div>

<div class="footer">
    <h6>@2019 Buy-A-Thing</h6>
</div>

</body>
</html>

этоlogin.html 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"
>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

 <link rel="stylesheet" type="text/css"
th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.min.css}" />

<title>Login</title>
</head>
<body>

  <!-- Modal content-->

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;  </button>
      <h5 class="modal-title">Login</h5>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>Login</h1>
            <form th:action="@{/login}" method="post">
                <div th:if="${param.error}">
                    <div class="alert alert-danger">Invalid username or
                        password.</div>
                </div>
                <div th:if="${param.logout}">
                    <div class="alert alert-info">You have been logged out.</div>
                </div>
                <div class="form-group">
                    <label for="username">Email</label>: <input type="text"
                        id="username" name="username" class="form-control"
                        autofocus="autofocus" placeholder="Username" />
                </div>
                <div class="form-group">
                    <label for="password">Password</label>: <input type="password"
                        id="password" name="password" class="form-control"
                        placeholder="Password" />
                </div>
                <div class="form-group">
                <label>
                <input type="checkbox" name="remember-me">
                Remember me</label> 
                </div>

                <div class="form-group">
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3">
                            <input type="submit" name="login-submit" id="login-submit"
                                class="form-control btn btn-primary" value="Log In" />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <span>New user? <a href="/" th:href="@{/registration}">Register
                            here</a></span>
                </div>
            </form>
        </div>
    </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>

<script type="text/javascript"
    th:src="@{/webjars/jquery/3.2.1/jquery.min.js/}"></script>
<script type="text/javascript"
    th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.min.js}"></script>

</body>
</html>

antMatchers 

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
    .anonymous()
    .and()
            .authorizeRequests()
            .antMatchers("/login")
            .permitAll()
            .antMatchers("/admin/**").hasRole("ADMIN")
                .antMatchers(
                        "/**",
                        "/products**",
                        "/registration**",
                        "/js/**",
                        "/css/**",
                        "/fonts.googleapis.com/css**",
                        "/img/**",
                        "/webjars/**").permitAll()

                .anyRequest().authenticated()
            .and()
                .formLogin()
                    .loginPage("/login")  
                   .defaultSuccessUrl("/products", true)
                     .permitAll()
            .and()
                .logout()
                    .invalidateHttpSession(true)
                    .clearAuthentication(true)
                    .logoutRequestMatcher(new AntPathRequestMatcher("/logout"))
                    .logoutSuccessUrl("/products")
                    .deleteCookies("my-remember-me-cokie")
            .permitAll()
            .and()
            .rememberMe()
            //.key("my-secure-key")
            .rememberMeCookieName("my-remember-me-cookie")
            .tokenRepository(persistentTokenRepository())
            .tokenValiditySeconds(24 * 60 * 60)
            .and()
            .exceptionHandling();
}

Контроллер 

 @GetMapping("/login")
public String login(Model model) {
    return "login";
}

спасибо!

...