From f05592f023fdb72b3f01c31366ed49b5f69d2e33 Mon Sep 17 00:00:00 2001
From: Joe Grandja <jgrandja@vmware.com>
Date: Tue, 2 May 2023 06:30:11 -0400
Subject: [PATCH] Update web ui design for demo-client

Issue gh-1196
---
 .../demo-client/samples-demo-client.gradle    |   5 +-
 .../resources/static/assets/css/style.css     |  13 --
 .../resources/static/assets/img/devices.png   | Bin 0 -> 19071 bytes
 .../static/assets/img/spring-security.svg     |   1 +
 .../resources/templates/device-activate.html  |  45 +++---
 .../resources/templates/device-authorize.html | 152 +++++++++---------
 .../src/main/resources/templates/index.html   |  72 ++-------
 .../main/resources/templates/logged-out.html  |  24 ++-
 .../resources/templates/page-templates.html   |  65 ++++++++
 9 files changed, 196 insertions(+), 181 deletions(-)
 delete mode 100644 samples/demo-client/src/main/resources/static/assets/css/style.css
 create mode 100644 samples/demo-client/src/main/resources/static/assets/img/devices.png
 create mode 100644 samples/demo-client/src/main/resources/static/assets/img/spring-security.svg
 create mode 100644 samples/demo-client/src/main/resources/templates/page-templates.html

diff --git a/samples/demo-client/samples-demo-client.gradle b/samples/demo-client/samples-demo-client.gradle
index 1c95c65f..3c374bde 100644
--- a/samples/demo-client/samples-demo-client.gradle
+++ b/samples/demo-client/samples-demo-client.gradle
@@ -21,6 +21,7 @@ dependencies {
 	implementation "org.springframework:spring-webflux"
 	implementation "io.projectreactor.netty:reactor-netty"
 	implementation "org.webjars:webjars-locator-core"
-	implementation "org.webjars:bootstrap:3.4.1"
-	implementation "org.webjars:jquery:3.4.1"
+	implementation "org.webjars:bootstrap:5.2.3"
+	implementation "org.webjars:popper.js:2.9.3"
+	implementation "org.webjars:jquery:3.6.4"
 }
diff --git a/samples/demo-client/src/main/resources/static/assets/css/style.css b/samples/demo-client/src/main/resources/static/assets/css/style.css
deleted file mode 100644
index d50ee00e..00000000
--- a/samples/demo-client/src/main/resources/static/assets/css/style.css
+++ /dev/null
@@ -1,13 +0,0 @@
-html, body, .container, .jumbotron {
-    height: 100%;
-}
-.jumbotron {
-    margin-bottom: 0;
-}
-.gap {
-    margin-top: 70px;
-}
-.code {
-    font-size: 2em;
-    letter-spacing: 2rem;
-}
\ No newline at end of file
diff --git a/samples/demo-client/src/main/resources/static/assets/img/devices.png b/samples/demo-client/src/main/resources/static/assets/img/devices.png
new file mode 100644
index 0000000000000000000000000000000000000000..fda6b12e312ff705176efdb8db7f8400ba9fb1d6
GIT binary patch
literal 19071
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
a1q~^)FZa(e1RnpylG+{3+ht0YA^!_vu?F@4

literal 0
HcmV?d00001

diff --git a/samples/demo-client/src/main/resources/static/assets/img/spring-security.svg b/samples/demo-client/src/main/resources/static/assets/img/spring-security.svg
new file mode 100644
index 00000000..897f986d
--- /dev/null
+++ b/samples/demo-client/src/main/resources/static/assets/img/spring-security.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.08 150.97"><defs><style>.cls-1{fill:#6bb344;}</style></defs><title>logo-security</title><path class="cls-1" d="M108.08,13,54,0,0,13V54.6H28.67a23.94,23.94,0,0,0,0,6H0V80.14C0,125,54,151,54,151s54-26,54-70.83V60.62H79.4a22.75,22.75,0,0,0,0-6h28.68ZM54,77.15A19.54,19.54,0,1,1,73.58,57.61,19.54,19.54,0,0,1,54,77.15Z"/><path class="cls-1" d="M54,48.34a5.06,5.06,0,0,0-2.32,9.56v1.31l1.49,1.49v1l1,1v1l-.88.88.94,1.55v1l-1,1.19,1.4,1.4,1.55-1.55V58A5.06,5.06,0,0,0,54,48.34Zm0,5.26a1.88,1.88,0,1,1,1.88-1.88A1.88,1.88,0,0,1,54,53.6Z"/></svg>
\ No newline at end of file
diff --git a/samples/demo-client/src/main/resources/templates/device-activate.html b/samples/demo-client/src/main/resources/templates/device-activate.html
index 22a30ad8..f248d3d3 100644
--- a/samples/demo-client/src/main/resources/templates/device-activate.html
+++ b/samples/demo-client/src/main/resources/templates/device-activate.html
@@ -1,26 +1,27 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Device Grant Example</title>
-        <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
-        <link rel="stylesheet" href="/assets/css/style.css" th:href="@{/assets/css/style.css}" />
-    </head>
-    <body>
-        <div class="jumbotron">
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-8">
-                        <h2>Activation Required</h2>
-                        <p>You must activate this device.</p>
-                        <a th:href="@{/device_authorize}" class="btn btn-primary" role="button">Activate</a>
-                    </div>
-                    <div class="col-md-4">
-                        <img src="https://cdn.pixabay.com/photo/2017/07/03/15/20/technology-2468063_1280.png" class="img-responsive" alt="Devices">
-                    </div>
-                </div>
-            </div>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Spring Authorization Server sample</title>
+    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
+</head>
+<body>
+<div th:replace="~{page-templates :: navbar}"></div>
+<div class="container">
+    <div class="row">
+        <div class="col-md-5">
+            <h2>Activation Required</h2>
+            <p>You must activate this device.</p>
+            <a th:href="@{/device_authorize}" class="btn btn-primary" role="button">Activate</a>
         </div>
-    </body>
+        <div class="col-md-7">
+            <img src="/assets/img/devices.png" th:src="@{/assets/img/devices.png}" class="img-responsive" alt="Devices">
+        </div>
+    </div>
+</div>
+<script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
+<script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
+<script src="/webjars/popper.js/umd/popper.js" th:src="@{/webjars/popper.js/umd/popper.js}"></script>
+</body>
 </html>
diff --git a/samples/demo-client/src/main/resources/templates/device-authorize.html b/samples/demo-client/src/main/resources/templates/device-authorize.html
index e378ab9b..95c3223b 100644
--- a/samples/demo-client/src/main/resources/templates/device-authorize.html
+++ b/samples/demo-client/src/main/resources/templates/device-authorize.html
@@ -1,87 +1,87 @@
 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>Device Grant Example</title>
-        <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
-        <link rel="stylesheet" href="/assets/css/style.css" th:href="@{/assets/css/style.css}" />
-    </head>
-    <body>
-        <div class="jumbotron">
-            <div class="container">
-                <div class="row">
-                    <div class="col-md-8">
-                        <h2>Device Activation</h2>
-                        <p>Please visit <a th:href="${verificationUri}" th:text="${verificationUri?.replaceFirst('https?://', '')}"></a> on another device to continue.</p>
-                        <p class="gap">Activation Code</p>
-                        <div class="well">
-                            <span class="code" th:text="${userCode}"></span>
-                            <form id="authorize-form" th:action="@{/device_authorize}" method="post">
-                                <input type="hidden" id="device_code" name="device_code" th:value="${deviceCode}" />
-                            </form>
-                        </div>
-                    </div>
-                    <div class="col-md-4">
-                        <img src="https://cdn.pixabay.com/photo/2017/07/03/15/20/technology-2468063_1280.png" class="img-responsive" alt="Devices">
-                    </div>
-                </div>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Spring Authorization Server sample</title>
+    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
+</head>
+<body>
+<div th:replace="~{page-templates :: navbar}"></div>
+<div class="container">
+    <div class="row">
+        <div class="col-md-5">
+            <h2>Device Activation</h2>
+            <p>Please visit <a th:href="${verificationUri}" th:text="${verificationUri?.replaceFirst('https?://', '')}"></a> on another device to continue.</p>
+            <p style="margin-top: 70px">Activation Code</p>
+            <div class="card text-bg-light">
+                <span class="card-body" style="font-size: 2em; letter-spacing: 2rem" th:text="${userCode}"></span>
+                <form id="authorize-form" th:action="@{/device_authorize}" method="post">
+                    <input type="hidden" id="device_code" name="device_code" th:value="${deviceCode}" />
+                </form>
             </div>
         </div>
-        <script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
-        <script type="text/javascript">
-            function authorize() {
-                let deviceCode = $('#device_code').val();
-                let csrfToken = $('[name=_csrf]').val();
-                if (deviceCode) {
-                    $.ajax({
-                        url: '/device_authorize',
-                        method: 'POST',
-                        data: {
-                            device_code: deviceCode,
-                            _csrf: csrfToken
-                        },
-                        timeout: 0
-                    }).fail((err) => {
-                        let response = err.responseJSON;
-                        if (response.errorCode === 'authorization_pending') {
-                            console.log('authorization pending, continuing to poll...');
-                        } else if (response.errorCode === 'slow_down') {
-                            console.log('slowing down...');
-                            slowDown();
-                        } else if (response.errorCode === 'token_expired') {
-                            console.log('token expired, stopping...');
-                            clear();
-                            location.href = '/';
-                        } else if (response.errorCode === 'access_denied') {
-                            console.log('access denied, stopping...');
-                            clear();
-                            location.href = '/';
-                        }
-                    }).done(() => window.location.href = '/device_authorized');
+        <div class="col-md-7">
+            <img src="/assets/img/devices.png" th:src="@{/assets/img/devices.png}" class="img-responsive" alt="Devices">
+        </div>
+    </div>
+</div>
+<script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
+<script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
+<script src="/webjars/popper.js/umd/popper.js" th:src="@{/webjars/popper.js/umd/popper.js}"></script>
+<script type="text/javascript">
+    function authorize() {
+        let deviceCode = $('#device_code').val();
+        let csrfToken = $('[name=_csrf]').val();
+        if (deviceCode) {
+            $.ajax({
+                url: '/device_authorize',
+                method: 'POST',
+                data: {
+                    device_code: deviceCode,
+                    _csrf: csrfToken
+                },
+                timeout: 0
+            }).fail((err) => {
+                let response = err.responseJSON;
+                if (response.errorCode === 'authorization_pending') {
+                    console.log('authorization pending, continuing to poll...');
+                } else if (response.errorCode === 'slow_down') {
+                    console.log('slowing down...');
+                    slowDown();
+                } else if (response.errorCode === 'token_expired') {
+                    console.log('token expired, stopping...');
+                    clear();
+                    location.href = '/';
+                } else if (response.errorCode === 'access_denied') {
+                    console.log('access denied, stopping...');
+                    clear();
+                    location.href = '/';
                 }
-            }
+            }).done(() => window.location.href = '/device_authorized');
+        }
+    }
 
-            function schedule() {
-                authorize.handler = window.setInterval(authorize, authorize.interval * 1000);
-            }
+    function schedule() {
+        authorize.handler = window.setInterval(authorize, authorize.interval * 1000);
+    }
 
-            function clear() {
-                if (authorize.handler !== null) {
-                    window.clearInterval(authorize.handler);
-                }
-            }
+    function clear() {
+        if (authorize.handler !== null) {
+            window.clearInterval(authorize.handler);
+        }
+    }
 
-            function slowDown() {
-                authorize.interval += 5;
-                clear();
-                schedule();
-            }
+    function slowDown() {
+        authorize.interval += 5;
+        clear();
+        schedule();
+    }
 
-            authorize.interval = 5;
-            authorize.handler = null;
+    authorize.interval = 5;
+    authorize.handler = null;
 
-            window.addEventListener('load', schedule);
-        </script>
-    </body>
+    window.addEventListener('load', schedule);
+</script>
+</body>
 </html>
diff --git a/samples/demo-client/src/main/resources/templates/index.html b/samples/demo-client/src/main/resources/templates/index.html
index 0d162b0c..c0ef10bf 100644
--- a/samples/demo-client/src/main/resources/templates/index.html
+++ b/samples/demo-client/src/main/resources/templates/index.html
@@ -1,57 +1,19 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
-    <head>
-        <title>Spring Security OAuth 2.0 Sample</title>
-        <meta charset="utf-8" />
-        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
-    </head>
-    <body>
-        <div th:fragment="header">
-            <nav class="navbar navbar-default">
-                <div class="container-fluid">
-                    <div class="collapse navbar-collapse">
-                        <form class="navbar-form navbar-right" th:action="@{/logout}" method="post">
-                            <button type="submit" class="btn btn-default navbar-btn">Logout</button>
-                        </form>
-                    </div>
-                </div>
-            </nav>
-        </div>
-        <div class="container">
-            <div th:if="${error}" class="alert alert-danger alert-dismissible" role="alert">
-                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                <h4 th:text="${error}" class="text-center"></h4>
-            </div>
-            <div class="panel panel-default">
-                <div class="panel-heading">
-                    <h3 class="panel-title">Authorize the client using <span style="font-family:monospace">grant_type</span>:</h3>
-                </div>
-                <ul class="list-group">
-                    <li class="list-group-item">
-                        <a href="/authorize?grant_type=authorization_code" th:href="@{/authorize?grant_type=authorization_code}"><span style="font-size:medium">Authorization Code</span></a>
-                    </li>
-                    <li class="list-group-item">
-                        <a href="/authorize?grant_type=client_credentials" th:href="@{/authorize?grant_type=client_credentials}"><span style="font-size:medium">Client Credentials</span></a>
-                    </li>
-                    <li class="list-group-item">
-                        <a href="/authorize?grant_type=device_code" th:href="@{/authorize?grant_type=device_code}"><span style="font-size:medium">Device Code</span></a>
-                    </li>
-                </ul>
-                <div th:if="${messages}" class="panel-footer">
-                    <h4>Messages:</h4>
-                    <table class="table table-condensed">
-                        <tbody>
-                            <tr class="row" th:each="message : ${messages}">
-                                <td th:text="${message}">message</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-        <script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
-        <script src="/webjars/bootstrap/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
-    </body>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Spring Authorization Server sample</title>
+    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
+</head>
+<body>
+<div th:replace="~{page-templates :: navbar}"></div>
+<div class="container">
+    <div th:replace="~{page-templates :: error-message}"></div>
+    <div th:replace="~{page-templates :: message-list}"></div>
+</div>
+<script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
+<script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
+<script src="/webjars/popper.js/umd/popper.js" th:src="@{/webjars/popper.js/umd/popper.js}"></script>
+</body>
 </html>
diff --git a/samples/demo-client/src/main/resources/templates/logged-out.html b/samples/demo-client/src/main/resources/templates/logged-out.html
index 3c8ec0a5..a0ee9c53 100644
--- a/samples/demo-client/src/main/resources/templates/logged-out.html
+++ b/samples/demo-client/src/main/resources/templates/logged-out.html
@@ -1,22 +1,20 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
 <head>
-	<title>Spring Security OAuth 2.0 Sample</title>
-	<meta charset="utf-8"/>
-	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css"
-		  th:href="@{/webjars/bootstrap/css/bootstrap.css}"/>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Spring Authorization Server sample</title>
+    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
 </head>
 <body>
-<div th:fragment="header">
-	<nav class="navbar navbar-default"></nav>
-</div>
+<div th:replace="~{page-templates :: navbar}"></div>
 <div class="container">
-	<h1>You are now logged out.</h1>
-	<a href="/" th:href="@{/}">Go back home</a>
+    <div class="row">
+        <h2>You are now logged out.</h2>
+    </div>
 </div>
+<script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
 <script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
-<script src="/webjars/bootstrap/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
+<script src="/webjars/popper.js/umd/popper.js" th:src="@{/webjars/popper.js/umd/popper.js}"></script>
 </body>
 </html>
diff --git a/samples/demo-client/src/main/resources/templates/page-templates.html b/samples/demo-client/src/main/resources/templates/page-templates.html
new file mode 100644
index 00000000..acfdb097
--- /dev/null
+++ b/samples/demo-client/src/main/resources/templates/page-templates.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Spring Authorization Server sample</title>
+    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.css" th:href="@{/webjars/bootstrap/css/bootstrap.css}" />
+</head>
+<body>
+<nav th:fragment="navbar" class="navbar navbar-expand-lg bg-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">
+            <img src="/assets/img/spring-security.svg" th:src="@{/assets/img/spring-security.svg}" width="40" height="32">
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="/" th:href="@{/}">Home</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Authorize</a>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item" href="/authorize?grant_type=authorization_code" th:href="@{/authorize?grant_type=authorization_code}">Authorization Code</a></li>
+                        <li><a class="dropdown-item" href="/authorize?grant_type=client_credentials" th:href="@{/authorize?grant_type=client_credentials}">Client Credentials</a></li>
+                        <li><a class="dropdown-item" href="/authorize?grant_type=device_code" th:href="@{/authorize?grant_type=device_code}">Device Code</a></li>
+                    </ul>
+                </li>
+            </ul>
+            <form class="d-flex" th:action="@{/logout}" method="post">
+                <button class="btn btn-outline-dark" type="submit">Logout</button>
+            </form>
+        </div>
+    </div>
+</nav>
+<div class="container">
+    <div th:fragment="error-message" th:if="${error}" class="row alert alert-danger alert-dismissible fade show" role="alert">
+        <strong th:text="${error}"></strong>
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+    <div th:fragment="message-list" th:if="${messages}" class="row">
+        <table class="table table-striped caption-top">
+            <caption>Messages</caption>
+            <thead>
+            <tr>
+                <th scope="col">#</th>
+                <th scope="col">Message</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr th:each="message,iterStat : ${messages}">
+                <th scope="row" th:text="${iterStat.count}"></th>
+                <td th:text="${message}"></td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+</div>
+<script src="/webjars/bootstrap/js/bootstrap.bundle.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.bundle.min.js}"></script>
+<script src="/webjars/jquery/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
+<script src="/webjars/popper.js/umd/popper.js" th:src="@{/webjars/popper.js/umd/popper.js}"></script>
+</body>
+</html>