Render default UIs using lightweight templates
This commit is contained in:
committed by
Rob Winch
parent
a953a3d162
commit
8d47906191
@@ -16,10 +16,12 @@
|
||||
|
||||
package org.springframework.security.web.authentication;
|
||||
|
||||
import java.io.IOException;
|
||||
import java.util.Collections;
|
||||
import java.util.Locale;
|
||||
|
||||
import jakarta.servlet.FilterChain;
|
||||
import jakarta.servlet.ServletException;
|
||||
import org.junit.jupiter.api.Test;
|
||||
|
||||
import org.springframework.context.support.MessageSourceAccessor;
|
||||
@@ -195,15 +197,204 @@ public class DefaultLoginPageGeneratingFilterTests {
|
||||
filter.doFilter(new MockHttpServletRequest("GET", "/login"), response, this.chain);
|
||||
assertThat(response.getContentAsString()).contains("Request a One-Time Token");
|
||||
assertThat(response.getContentAsString()).contains("""
|
||||
<form id="ott-form" class="login-form" method="post" action="/ott/authenticate">
|
||||
<form id="ott-form" class="login-form" method="post" action="/ott/authenticate">
|
||||
<h2>Request a One-Time Token</h2>
|
||||
<p>
|
||||
\s
|
||||
<p>
|
||||
<label for="ott-username" class="screenreader">Username</label>
|
||||
<input type="text" id="ott-username" name="username" placeholder="Username" required>
|
||||
</p>
|
||||
<button class="primary" type="submit" form="ott-form">Send Token</button>
|
||||
\s
|
||||
<button class="primary" type="submit" form="ott-form">Send Token</button>
|
||||
</form>
|
||||
""");
|
||||
}
|
||||
|
||||
@Test
|
||||
void generatesThenRenders() throws ServletException, IOException {
|
||||
DefaultLoginPageGeneratingFilter filter = new DefaultLoginPageGeneratingFilter(
|
||||
new UsernamePasswordAuthenticationFilter());
|
||||
filter.setLoginPageUrl(DefaultLoginPageGeneratingFilter.DEFAULT_LOGIN_PAGE_URL);
|
||||
filter.setSaml2LoginEnabled(true);
|
||||
String clientName = "Google < > \" \' &";
|
||||
filter.setSaml2AuthenticationUrlToProviderName(Collections.singletonMap("/saml/sso/google", clientName));
|
||||
filter.setOauth2LoginEnabled(true);
|
||||
clientName = "Google < > \" \' &";
|
||||
filter.setOauth2AuthenticationUrlToClientName(
|
||||
Collections.singletonMap("/oauth2/authorization/google", clientName));
|
||||
|
||||
MockHttpServletRequest request = new MockHttpServletRequest("GET", "/login");
|
||||
request.setQueryString("error");
|
||||
MockHttpServletResponse response = new MockHttpServletResponse();
|
||||
request.getSession()
|
||||
.setAttribute(WebAttributes.AUTHENTICATION_EXCEPTION, new BadCredentialsException("Bad credentials"));
|
||||
filter.doFilter(request, response, this.chain);
|
||||
assertThat(response.getContentAsString()).isEqualTo("""
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<title>Please sign in</title>
|
||||
<style>
|
||||
/* General layout */
|
||||
body {
|
||||
font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #eee;
|
||||
padding: 40px 0;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
\s\s\s\s
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
line-height: 2rem;
|
||||
}
|
||||
\s\s\s\s
|
||||
.content {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
\s\s\s\s
|
||||
@media (min-width: 800px) {
|
||||
.content {
|
||||
max-width: 760px;
|
||||
}
|
||||
}
|
||||
\s\s\s\s
|
||||
/* Components */
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #06f;
|
||||
}
|
||||
\s\s\s\s
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: #003c97;
|
||||
}
|
||||
\s\s\s\s
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
\s\s\s\s
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
border: none;
|
||||
border-radius: 0.1rem;
|
||||
width: 100%;
|
||||
}
|
||||
\s\s\s\s
|
||||
button.primary {
|
||||
color: #fff;
|
||||
background-color: #06f;
|
||||
}
|
||||
\s\s\s\s
|
||||
.alert {
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.1rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
\s\s\s\s
|
||||
.alert.alert-danger {
|
||||
color: #6b1922;
|
||||
background-color: #f7d5d7;
|
||||
border-color: #eab6bb;
|
||||
}
|
||||
\s\s\s\s
|
||||
.alert.alert-success {
|
||||
color: #145222;
|
||||
background-color: #d1f0d9;
|
||||
border-color: #c2ebcb;
|
||||
}
|
||||
\s\s\s\s
|
||||
.screenreader {
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
\s\s\s\s
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
\s\s\s\s
|
||||
.table-striped tr:nth-of-type(2n + 1) {
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
\s\s\s\s
|
||||
td {
|
||||
padding: 0.75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
\s\s\s\s
|
||||
/* Login / logout layouts */
|
||||
.login-form,
|
||||
.logout-form {
|
||||
max-width: 340px;
|
||||
padding: 0 15px 15px 15px;
|
||||
margin: 0 auto 2rem auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<form class="login-form" method="post" action="null">
|
||||
<h2>Please sign in</h2>
|
||||
<div class="alert alert-danger" role="alert">Bad credentials</div>
|
||||
<p>
|
||||
<label for="username" class="screenreader">Username</label>
|
||||
<input type="text" id="username" name="username" placeholder="Username" required autofocus>
|
||||
</p>
|
||||
<p>
|
||||
<label for="password" class="screenreader">Password</label>
|
||||
<input type="password" id="password" name="password" placeholder="Password" required>
|
||||
</p>
|
||||
|
||||
|
||||
<button type="submit" class="primary">Sign in</button>
|
||||
</form>
|
||||
|
||||
<h2>Login with OAuth 2.0</h2>
|
||||
<div class="alert alert-danger" role="alert">Bad credentials</div>
|
||||
<table class="table table-striped">
|
||||
<tr><td><a href="/oauth2/authorization/google">Google < > " ' &</a></td></tr>
|
||||
</table>
|
||||
<h2>Login with SAML 2.0</h2>
|
||||
<div class="alert alert-danger" role="alert">Bad credentials</div>
|
||||
<table class="table table-striped">
|
||||
<tr><td><a href="/saml/sso/google">Google < > " ' &</a></td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>""");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -59,4 +59,156 @@ public class DefaultLogoutPageGeneratingFilterTests {
|
||||
.andExpect(content().string(containsString("action=\"/context/logout\"")));
|
||||
}
|
||||
|
||||
@Test
|
||||
void doFilterWhenRequestContextAndHiddenInputsSetThenRendered() throws Exception {
|
||||
this.filter.setResolveHiddenInputs((r) -> Collections.singletonMap("_csrf", "csrf-token-1"));
|
||||
MockMvc mockMvc = MockMvcBuilders.standaloneSetup(new Object()).addFilters(this.filter).build();
|
||||
|
||||
mockMvc.perform(get("/context/logout").contextPath("/context")).andExpect(content().string("""
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<title>Confirm Log Out?</title>
|
||||
<style>
|
||||
/* General layout */
|
||||
body {
|
||||
font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #eee;
|
||||
padding: 40px 0;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
\s\s\s\s
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 2rem;
|
||||
font-weight: 500;
|
||||
line-height: 2rem;
|
||||
}
|
||||
\s\s\s\s
|
||||
.content {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
\s\s\s\s
|
||||
@media (min-width: 800px) {
|
||||
.content {
|
||||
max-width: 760px;
|
||||
}
|
||||
}
|
||||
\s\s\s\s
|
||||
/* Components */
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
color: #06f;
|
||||
}
|
||||
\s\s\s\s
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
color: #003c97;
|
||||
}
|
||||
\s\s\s\s
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
\s\s\s\s
|
||||
button {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
border: none;
|
||||
border-radius: 0.1rem;
|
||||
width: 100%;
|
||||
}
|
||||
\s\s\s\s
|
||||
button.primary {
|
||||
color: #fff;
|
||||
background-color: #06f;
|
||||
}
|
||||
\s\s\s\s
|
||||
.alert {
|
||||
padding: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.1rem;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
\s\s\s\s
|
||||
.alert.alert-danger {
|
||||
color: #6b1922;
|
||||
background-color: #f7d5d7;
|
||||
border-color: #eab6bb;
|
||||
}
|
||||
\s\s\s\s
|
||||
.alert.alert-success {
|
||||
color: #145222;
|
||||
background-color: #d1f0d9;
|
||||
border-color: #c2ebcb;
|
||||
}
|
||||
\s\s\s\s
|
||||
.screenreader {
|
||||
position: absolute;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
\s\s\s\s
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
\s\s\s\s
|
||||
.table-striped tr:nth-of-type(2n + 1) {
|
||||
background-color: #e1e1e1;
|
||||
}
|
||||
\s\s\s\s
|
||||
td {
|
||||
padding: 0.75rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
\s\s\s\s
|
||||
/* Login / logout layouts */
|
||||
.login-form,
|
||||
.logout-form {
|
||||
max-width: 340px;
|
||||
padding: 0 15px 15px 15px;
|
||||
margin: 0 auto 2rem auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<form class="logout-form" method="post" action="/context/logout">
|
||||
<h2>Are you sure you want to log out?</h2>
|
||||
<input name="_csrf" type="hidden" value="csrf-token-1" />
|
||||
<button class="primary" type="submit">Log Out</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>"""));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
/*
|
||||
* Copyright 2002-2024 the original author or authors.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* https://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
package org.springframework.security.web.authentication.ui;
|
||||
|
||||
import org.junit.jupiter.api.Test;
|
||||
|
||||
import static org.assertj.core.api.Assertions.assertThat;
|
||||
import static org.assertj.core.api.Assertions.assertThatExceptionOfType;
|
||||
|
||||
/**
|
||||
* @author Daniel Garnier-Moiroux
|
||||
* @since 6.4
|
||||
*/
|
||||
class HtmlTemplatesTests {
|
||||
|
||||
@Test
|
||||
void processTemplateWhenNoVariablesThenRendersTemplate() {
|
||||
String template = """
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>consectetur adipiscing elit</li>
|
||||
<li>sed do eiusmod tempor incididunt ut labore</li>
|
||||
<li>et dolore magna aliqua</li>
|
||||
</ul>
|
||||
""";
|
||||
|
||||
assertThat(HtmlTemplates.fromTemplate(template).render()).isEqualTo(template);
|
||||
}
|
||||
|
||||
@Test
|
||||
void renderWhenVariablesThenRendersTemplate() {
|
||||
String template = """
|
||||
<ul>
|
||||
<li>{{one}}</li>
|
||||
<li>{{two}}</li>
|
||||
</ul>
|
||||
""";
|
||||
|
||||
String renderedTemplate = HtmlTemplates.fromTemplate(template)
|
||||
.withValue("one", "Lorem ipsum dolor sit amet")
|
||||
.withValue("two", "consectetur adipiscing elit")
|
||||
.render();
|
||||
|
||||
assertThat(renderedTemplate).isEqualTo("""
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>consectetur adipiscing elit</li>
|
||||
</ul>
|
||||
""");
|
||||
}
|
||||
|
||||
@Test
|
||||
void renderWhenVariablesThenEscapedAndRender() {
|
||||
String template = "<p>{{content}}</p>";
|
||||
|
||||
String renderedTemplate = HtmlTemplates.fromTemplate(template)
|
||||
.withValue("content", "The <a> tag is very common in HTML.")
|
||||
.render();
|
||||
|
||||
assertThat(renderedTemplate).isEqualTo("<p>The <a> tag is very common in HTML.</p>");
|
||||
}
|
||||
|
||||
@Test
|
||||
void renderWhenRawHtmlVariablesThenRendersTemplate() {
|
||||
String template = """
|
||||
<p>
|
||||
The {{title}} is a placeholder text used in print.
|
||||
</p>
|
||||
""";
|
||||
|
||||
String renderedTemplate = HtmlTemplates.fromTemplate(template)
|
||||
.withRawHtml("title", "<strong>Lorem Ipsum</strong>")
|
||||
.render();
|
||||
|
||||
assertThat(renderedTemplate).isEqualTo("""
|
||||
<p>
|
||||
The <strong>Lorem Ipsum</strong> is a placeholder text used in print.
|
||||
</p>
|
||||
""");
|
||||
}
|
||||
|
||||
@Test
|
||||
void renderWhenRawHtmlVariablesThenTrimsTrailingNewline() {
|
||||
String template = """
|
||||
<ul>
|
||||
{{content}}
|
||||
</ul>
|
||||
""";
|
||||
|
||||
String renderedTemplate = HtmlTemplates.fromTemplate(template)
|
||||
.withRawHtml("content", "<li>Lorem ipsum dolor sit amet</li>".indent(2))
|
||||
.render();
|
||||
|
||||
assertThat(renderedTemplate).isEqualTo("""
|
||||
<ul>
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
</ul>
|
||||
""");
|
||||
}
|
||||
|
||||
@Test
|
||||
void renderWhenEmptyVariablesThenRender() {
|
||||
String template = """
|
||||
<li>One: {{one}}</li>
|
||||
{{two}}
|
||||
""";
|
||||
|
||||
String renderedTemplate = HtmlTemplates.fromTemplate(template)
|
||||
.withValue("one", "")
|
||||
.withRawHtml("two", "")
|
||||
.render();
|
||||
|
||||
assertThat(renderedTemplate).isEqualTo("""
|
||||
<li>One: </li>
|
||||
|
||||
""");
|
||||
}
|
||||
|
||||
@Test
|
||||
void renderWhenMissingVariablesThenThrows() {
|
||||
String template = """
|
||||
<li>One: {{one}}</li>
|
||||
<li>Two: {{two}}</li>
|
||||
{{three}}
|
||||
""";
|
||||
|
||||
HtmlTemplates.Builder templateBuilder = HtmlTemplates.fromTemplate(template)
|
||||
.withValue("one", "Lorem ipsum dolor sit amet");
|
||||
assertThatExceptionOfType(IllegalStateException.class).isThrownBy(templateBuilder::render)
|
||||
.withMessage("Unused placeholders in template: [two, three]");
|
||||
}
|
||||
|
||||
}
|
||||
@@ -43,4 +43,12 @@ public class LogoutPageGeneratingWebFilterTests {
|
||||
assertThat(exchange.getResponse().getBodyAsString().block()).contains("action=\"/logout\"");
|
||||
}
|
||||
|
||||
@Test
|
||||
void filterThenRendersPage() {
|
||||
LogoutPageGeneratingWebFilter filter = new LogoutPageGeneratingWebFilter();
|
||||
MockServerWebExchange exchange = MockServerWebExchange
|
||||
.from(MockServerHttpRequest.get("/test/logout").contextPath("/test"));
|
||||
filter.filter(exchange, (e) -> Mono.empty()).block();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user