I'm using thymeleaf and spring security in project and "sec:authorize" is not working.
So I've edited the code and "sec:~" tag doesn't work itself.
I just add spring security dependency in build.gradle,
still not set security configuration.
I'm trying to resolve this problem using some hours, but I don't know why :(
please help me.
navbar.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<!-- bootstrap-navbar : Supported content[](https://i.stack.imgur.com/CDSjN.png) -->
<nav th:fragment="navbar" class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<span sec:authentication="name"></span>
<a class="navbar-brand" href="/">Buddy</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul sec:authorize="isAnonymous()" class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/signin">signin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/signup">signup</a>
</li>
</ul>
<ul sec:authorize="isAuthenticated()" class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="/board/form">write</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/user/info">info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">logout</a>
</li>
</ul>
<!-- 네비게이션: 검색창 -->
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- bootstrap-navbar : Supported content -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</html>
build.gradle
plugins {
id 'org.springframework.boot' version '2.7.5'
id 'io.spring.dependency-management' version '1.0.15.RELEASE'
id 'java'
id 'jacoco'
}
group = 'ho'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '11'
configurations {
compileOnly {
extendsFrom annotationProcessor
}
}
repositories {
mavenCentral()
}
dependencies {
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
implementation 'org.springframework.boot:spring-boot-starter-web'
implementation 'org.springframework.boot:spring-boot-starter-security'
// implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
compileOnly 'org.projectlombok:lombok'
developmentOnly 'org.springframework.boot:spring-boot-devtools'
runtimeOnly 'org.mariadb.jdbc:mariadb-java-client'
annotationProcessor 'org.projectlombok:lombok'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}
tasks.named('test') {
useJUnitPlatform()
}
jacocoTestReport {
reports {
csv.enabled true
xml.enabled true
}
}
Related
Plain navbar from bootstrap 5 docs is used.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">¿qué es?</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Acciones subvencionables</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Nuestro equipo</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Contacta con nosotros</a></li>
<li class="nav-item"><a class="nav-item nav-link" href="#">Recursos y más información</a></li>
</ul>
</div>
</div>
</nav>
Bootstram.min.css at top of page. No extra css used, and jquery is placed at the bottom of my page.
There are no console errors.
By the way, using laravel.
I cant seem to find any reason for not dropping down/collapse my hamburger.
Thanks in advance
Sorry if anyone got on research it was a dumb error.
bootstrap css was placed prior to styles.css
Thanks anyway
As a relative newbee to Bootstrap I have been trying to code a menu with dropdowns. Code is listed below, but I find some issues:
The menu code was copied from GetBootstrap.com docs. Looked at other sites to see where the problem may be, tried alternatives but no luck.
bootstrap.min.css and bootstrap.bundle.min.js, both version 5, have been linked in to the code. Have tried these files directly on site and via links. Also tried popper.js plus bootstrap.min.js; same result.
Direct links do work, but the dropdown part does not. Clicking on the dropdown item produces nothing. It would be great if it would show on hover and stay in place so that sub-items can be clicked.
The menu should be on the righthand side of the screen; looking at answers, ms-auto should do this. It does not.
When the screen is collapsed to tablet or phone size, the menu goes to the expected compressed symbol, but does not function at all; it will not show anything when clicked.
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item" dropdown>
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
dropdown should be a class .. not an attribute:
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="//via.placeholder.com/160x48" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Everything works as expected
Using CDN to integrate Bootstrap 5.0.0-beta3 resources, following should work.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Custom Navbar with <strong>Bootstrap 5.0.0-beta3</strong></title>
</head>
<body>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/text835.png" width="160" height="48" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarConsultants" role="button" data-bs-toggle="dropdown"
aria-expanded="false">Consultants</a>
<ul class="dropdown-menu" aria-labelledby="navbarConsultants">
<li><a class="dropdown-item" href="#">Consultants</a></li>
<div class="dropdown-divider"></div>
<li><a class="dropdown-item" href="#">Andy</a></li>
<li><a class="dropdown-item" href="#">Bill</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
I hope, this will help you out!
Feel free to Upvote the answer
Thank you both to Manifest Man and Zim. I was using an earlier version of bootstrap 5 and when the latest version of bootstrap.min.css and bootstrap.bundle.min.js were used it started to work.
In addition, yes, dropdown is a class, not an attribute.
I'm trying to add this bootstrap nav menu to my Laravel application, but in smaller screensize when I click on the hamburger icon it won't open.
I checked similar questions here and tried the solutions but none of them worked for me.
I also checked, bootsrap css and js are properly included in the document, in my footer first comes jquery, then popper then bootstrap.js.
Here is my header code:
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="{{ route('home') }}"><img src="{{ asset('public/assets/frontend/images/logo.png') }}"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="{{ route('home') }}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('frontend.courses') }}">Courses</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="{{ route('contact') }}">Contact</a></li>
#guest
<li class="nav-item"><a class="btn btn-red" href="{{ route('login') }}">Sign In</a></li>
#else
#if(Auth::user())
<li class="nav-item logged-in">
<div class="dropdown">
<a href="" class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user fa-lg" aria-hidden="true"></i> My Dashboard
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
#if(Auth::user()->role_id == 1)
<a class="dropdown-item" href="{{ url('admin') }}">Admin</a>
#endif
<a class="dropdown-item" href="#">My Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">Log out</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</div>
</li>
#endif
#endguest
</ul>
</div>
</div>
</nav>
</header>
I also have these error messages in the console:
Uncaught TypeError: Cannot convert object to primitive value
at RegExp.test ()
at HTMLDivElement. (collapse.js:346)
at Function.each (jquery-3.5.0.min.js:2)
at S.fn.init.each (jquery-3.5.0.min.js:2)
at S.fn.init.a._jQueryInterface [as collapse] (collapse.js:337)
at HTMLDivElement. (collapse.js:385)
at Function.each (jquery-3.5.0.min.js:2)
at S.fn.init.each (jquery-3.5.0.min.js:2)
at HTMLButtonElement. (collapse.js:381)
at HTMLDocument.dispatch (jquery-3.5.0.min.js:2)
I got it.
Thanks to this answer: https://stackoverflow.com/a/61198996/7133015
This is an incompatibility between bootstrap and kquery (3.5.0). needed to switch back to jquery 3.4.1
I'm struggling with the following. I have a nav-bar and i want to show/hide specific content depending on whether the user is anonymous/role_user/role_admin. Here is my html:
<html lang="en" xmlns:th="http://www.thymeleaf.org xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
<title>Beer Tag Home</title>
</head>
<body>
<nav class="navbar" role="navigation" id="mainNav">
<div class="container">
<a class="navbar-brand">Foo App</a>
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a About</li>
<li class="nav-item">FAQ</li>
<div class="row" th:if="not${#authentication.isAuthenticated()}">
//this here will not even let spring boot up the app
<li class="nav-item">LOGIN</li>
</div>
<div class="row" <div th:if="${#httpServletRequest.isUserInRole('ROLE_USER')}">
<li class="nav-item">USER PANEL</li>
</div>
</ul>
</div>
</div>
</nav>
Essentially I want to see if a user is Anonymous if so he can only log in. If a user is logged in he can access other content on the page. Here are my gradle dependencies as well:
compile("org.springframework.boot:spring-boot-devtools")
compile 'mysql:mysql-connector-java'
implementation 'org.springframework.boot:spring-boot-starter-web'
testImplementation 'org.springframework.boot:spring-boot-starter-test'
implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
compile group: 'org.thymeleaf', name: 'thymeleaf', version: '3.0.11.RELEASE'
compile group: 'org.thymeleaf.extras', name: 'thymeleaf-extras-springsecurity4', version: '3.0.4.RELEASE'
implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
I've read almost all posts on SO regarding this subject, but none of them gives a definitive answer.
Thank you.
To display a block for anonymous only:
<div th:if="!${#request.userPrincipal}">
<!-- content for anonymous -->
</div>
There is also a nice thymeleaf extras module: https://github.com/thymeleaf/thymeleaf-extras-springsecurity
After adding it you can use it like this:
<div sec:authorize="isAuthenticated()">
This content is only shown to authenticated users.
</div>
<div sec:authorize="hasRole('ROLE_ADMIN')">
This content is only shown to administrators.
</div>
<div sec:authorize="hasRole('ROLE_USER')">
This content is only shown to users.
</div>
I have a menu in thymleaf and i have a login - logout button inside it.
Here is the complete page of this menu:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" th:fragment="header">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RentIt Company</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li th:if="${#authorization.expression('!isAuthenticated()')}">
Sign in
</li>
<li th:if="${#authorization.expression('isAuthenticated()')}">
Logout
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
The problem is, when i run, it complains with:
There was an unexpected error (type=Internal Server Error, status=500).
Exception evaluating SpringEL expression: "#authorization.expression('isAuthenticated()')"
It seems that, it does not recognize the isAuthenticated method, so how can i fix it?
You have to add the dependencies in you project, see below the piece of code in the build.gradle (I'm using gradle, adapt to your build system if different):
dependencies {
// your dependencies ...
compile "org.thymeleaf:thymeleaf-spring4:3.0.1.RELEASE"
compile "org.thymeleaf.extras:thymeleaf-extras-springsecurity4:3.0.1.RELEASE"
}
And also is necessary add a Spring Security extension to Thymeleaf in your configuration as follow:
#ComponentScan(basePackageClasses = HomeController.class)
public class ServletContextConfig extends WebMvcConfigurerAdapter {
#Bean
public TemplateEngine templateEngine(ApplicationContext applicationContext) {
final SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setEnableSpringELCompiler(true);
templateEngine.addDialect(new SpringSecurityDialect(););
templateEngine.setTemplateResolver(defaultTemplateResolver(applicationContext));
return templateEngine;
}
// other #Bean configurations ...
}
Change version of org.thymeleaf.extras as below
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-springsecurity4</artifactId>
<version>3.0.1.RELEASE</version>
It will solve your problem