Use static CSS in reactive default UI

This commit is contained in:
Daniel Garnier-Moiroux 2024-09-02 14:34:10 +02:00 committed by Rob Winch
parent 45d53973ab
commit e958ff2d4a
4 changed files with 5 additions and 256 deletions

View File

@ -32,7 +32,6 @@ import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.security.web.server.csrf.CsrfToken;
import org.springframework.security.web.server.util.matcher.ServerWebExchangeMatcher;
import org.springframework.security.web.server.util.matcher.ServerWebExchangeMatchers;
import org.springframework.security.web.util.CssUtils;
import org.springframework.util.Assert;
import org.springframework.util.MultiValueMap;
import org.springframework.web.server.ServerWebExchange;
@ -91,7 +90,7 @@ public class LoginPageGeneratingWebFilter implements WebFilter {
String contextPath = exchange.getRequest().getPath().contextPath().value();
return HtmlTemplates.fromTemplate(LOGIN_PAGE_TEMPLATE)
.withRawHtml("cssStyle", CssUtils.getCssStyleBlock().indent(4))
.withRawHtml("contextPath", contextPath)
.withRawHtml("formLogin", formLogin(queryParams, contextPath, csrfTokenHtmlInput))
.withRawHtml("oauth2Login", oauth2Login(queryParams, contextPath, this.oauth2AuthenticationUrlToClientName))
.render()
@ -164,7 +163,7 @@ public class LoginPageGeneratingWebFilter implements WebFilter {
<meta name="description" content="">
<meta name="author" content="">
<title>Please sign in</title>
{{cssStyle}}
<link href="{{contextPath}}/default-ui.css" rel="stylesheet" />
</head>
<body>
<div class="content">

View File

@ -29,7 +29,6 @@ import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.security.web.server.csrf.CsrfToken;
import org.springframework.security.web.server.util.matcher.ServerWebExchangeMatcher;
import org.springframework.security.web.server.util.matcher.ServerWebExchangeMatchers;
import org.springframework.security.web.util.CssUtils;
import org.springframework.web.server.ServerWebExchange;
import org.springframework.web.server.WebFilter;
import org.springframework.web.server.WebFilterChain;
@ -71,7 +70,6 @@ public class LogoutPageGeneratingWebFilter implements WebFilter {
private static byte[] createPage(String csrfTokenHtmlInput, String contextPath) {
return HtmlTemplates.fromTemplate(LOGOUT_PAGE_TEMPLATE)
.withRawHtml("cssStyle", CssUtils.getCssStyleBlock().indent(4))
.withValue("contextPath", contextPath)
.withRawHtml("csrf", csrfTokenHtmlInput.indent(8))
.render()
@ -94,7 +92,7 @@ public class LogoutPageGeneratingWebFilter implements WebFilter {
<meta name="description" content="">
<meta name="author" content="">
<title>Confirm Log Out?</title>
{{cssStyle}}
<link href="{{contextPath}}/default-ui.css" rel="stylesheet" />
</head>
<body>
<div class="content">

View File

@ -66,131 +66,7 @@ public class LoginPageGeneratingWebFilterTests {
<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>
<link href="/test/default-ui.css" rel="stylesheet" />
</head>
<body>
<div class="content">

View File

@ -58,131 +58,7 @@ public class LogoutPageGeneratingWebFilterTests {
<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>
<link href="/test/default-ui.css" rel="stylesheet" />
</head>
<body>
<div class="content">