فهرست منبع

Use static CSS in reactive default UI

Daniel Garnier-Moiroux 1 سال پیش
والد
کامیت
e958ff2d4a

+ 2 - 3
web/src/main/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilter.java

@@ -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">

+ 1 - 3
web/src/main/java/org/springframework/security/web/server/ui/LogoutPageGeneratingWebFilter.java

@@ -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">

+ 1 - 125
web/src/test/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilterTests.java

@@ -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">

+ 1 - 125
web/src/test/java/org/springframework/security/web/server/ui/LogoutPageGeneratingWebFilterTests.java

@@ -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">