Render reactive default UIs using lightweight templates

web/src/main/java/org/springframework/security/web/server/ui/HtmlTemplates.java

@@ -0,0 +1,108 @@
+/*
+ * 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.server.ui;
+
+import java.util.HashMap;
+import java.util.Map;
+import java.util.regex.Pattern;
+import java.util.stream.Collectors;
+
+import org.springframework.util.StringUtils;
+import org.springframework.web.util.HtmlUtils;
+
+/**
+ * Render HTML templates using string substitution. Intended for internal use. Variables
+ * can be templated using double curly-braces: {@code {{name}}}.
+ *
+ * @author Daniel Garnier-Moiroux
+ * @since 6.4
+ * @see org.springframework.security.web.authentication.ui.HtmlTemplates
+ */
+final class HtmlTemplates {
+
+	private HtmlTemplates() {
+	}
+
+	static Builder fromTemplate(String template) {
+		return new Builder(template);
+	}
+
+	static final class Builder {
+
+		private final String template;
+
+		private final Map<String, String> values = new HashMap<>();
+
+		private Builder(String template) {
+			this.template = template;
+		}
+
+		/**
+		 * HTML-escape, and inject value {@code value} in every {@code {{key}}}
+		 * placeholder.
+		 * @param key the placeholder name
+		 * @param value the value to inject
+		 * @return this instance for further templating
+		 */
+		Builder withValue(String key, String value) {
+			this.values.put(key, HtmlUtils.htmlEscape(value));
+			return this;
+		}
+
+		/**
+		 * Inject value {@code value} in every {@code {{key}}} placeholder without
+		 * HTML-escaping. Useful for injecting "sub-templates".
+		 * @param key the placeholder name
+		 * @param value the value to inject
+		 * @return this instance for further templating
+		 */
+		Builder withRawHtml(String key, String value) {
+			if (!value.isEmpty() && value.charAt(value.length() - 1) == '\n') {
+				value = value.substring(0, value.length() - 1);
+			}
+			this.values.put(key, value);
+			return this;
+		}
+
+		/**
+		 * Render the template. All placeholders MUST have a corresponding value. If a
+		 * placeholder does not have a corresponding value, throws
+		 * {@link IllegalStateException}.
+		 * @return the rendered template
+		 */
+		String render() {
+			String template = this.template;
+			for (String key : this.values.keySet()) {
+				String pattern = Pattern.quote("{{" + key + "}}");
+				template = template.replaceAll(pattern, this.values.get(key));
+			}
+
+			String unusedPlaceholders = Pattern.compile("\\{\\{([a-zA-Z0-9]+)}}")
+				.matcher(template)
+				.results()
+				.map((result) -> result.group(1))
+				.collect(Collectors.joining(", "));
+			if (StringUtils.hasLength(unusedPlaceholders)) {
+				throw new IllegalStateException("Unused placeholders in template: [%s]".formatted(unusedPlaceholders));
+			}
+
+			return template;
+		}
+
+	}
+
+}

web/src/main/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilter.java

@@ -19,6 +19,7 @@ package org.springframework.security.web.server.ui;
 import java.nio.charset.Charset;
 import java.util.HashMap;
 import java.util.Map;
+import java.util.stream.Collectors;
 
 import reactor.core.publisher.Mono;
 
@@ -37,7 +38,6 @@ import org.springframework.util.MultiValueMap;
 import org.springframework.web.server.ServerWebExchange;
 import org.springframework.web.server.WebFilter;
 import org.springframework.web.server.WebFilterChain;
-import org.springframework.web.util.HtmlUtils;
 
 /**
  * Generates a default log in page used for authenticating users.
@@ -89,80 +89,61 @@ public class LoginPageGeneratingWebFilter implements WebFilter {
 	private byte[] createPage(ServerWebExchange exchange, String csrfTokenHtmlInput) {
 		MultiValueMap<String, String> queryParams = exchange.getRequest().getQueryParams();
 		String contextPath = exchange.getRequest().getPath().contextPath().value();
-		StringBuilder page = new StringBuilder();
+
-		page.append("<!DOCTYPE html>\n");
+		return HtmlTemplates.fromTemplate(LOGIN_PAGE_TEMPLATE)
-		page.append("<html lang=\"en\">\n");
+			.withRawHtml("cssStyle", CssUtils.getCssStyleBlock().indent(4))
-		page.append("  <head>\n");
+			.withRawHtml("formLogin", formLogin(queryParams, contextPath, csrfTokenHtmlInput))
-		page.append("    <meta charset=\"utf-8\">\n");
+			.withRawHtml("oauth2Login", oauth2Login(queryParams, contextPath, this.oauth2AuthenticationUrlToClientName))
-		page.append("    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n");
+			.render()
-		page.append("    <meta name=\"description\" content=\"\">\n");
+			.getBytes(Charset.defaultCharset());
-		page.append("    <meta name=\"author\" content=\"\">\n");
-		page.append("    <title>Please sign in</title>\n");
-		page.append(CssUtils.getCssStyleBlock().indent(4));
-		page.append("  </head>\n");
-		page.append("  <body>\n");
-		page.append("     <div class=\"content\">\n");
-		page.append(formLogin(queryParams, contextPath, csrfTokenHtmlInput));
-		page.append(oauth2LoginLinks(queryParams, contextPath, this.oauth2AuthenticationUrlToClientName));
-		page.append("    </div>\n");
-		page.append("  </body>\n");
-		page.append("</html>");
-		return page.toString().getBytes(Charset.defaultCharset());
 	}
 
 	private String formLogin(MultiValueMap<String, String> queryParams, String contextPath, String csrfTokenHtmlInput) {
 		if (!this.formLoginEnabled) {
 			return "";
 		}
+
 		boolean isError = queryParams.containsKey("error");
 		boolean isLogoutSuccess = queryParams.containsKey("logout");
-		StringBuilder page = new StringBuilder();
+
-		page.append("      <form class=\"login-form\" method=\"post\" action=\"" + contextPath + "/login\">\n");
+		return HtmlTemplates.fromTemplate(LOGIN_FORM_TEMPLATE)
-		page.append("        <h2>Please sign in</h2>\n");
+			.withValue("loginUrl", contextPath + "/login")
-		page.append(createError(isError));
+			.withRawHtml("errorMessage", createError(isError))
-		page.append(createLogoutSuccess(isLogoutSuccess));
+			.withRawHtml("logoutMessage", createLogoutSuccess(isLogoutSuccess))
-		page.append("        <p>\n");
+			.withRawHtml("csrf", csrfTokenHtmlInput)
-		page.append("          <label for=\"username\" class=\"screenreader\">Username</label>\n");
+			.render();
-		page.append("          <input type=\"text\" id=\"username\" name=\"username\" "
-				+ "placeholder=\"Username\" required autofocus>\n");
-		page.append("        </p>\n" + "        <p>\n");
-		page.append("          <label for=\"password\" class=\"screenreader\">Password</label>\n");
-		page.append("          <input type=\"password\" id=\"password\" name=\"password\" "
-				+ "placeholder=\"Password\" required>\n");
-		page.append("        </p>\n");
-		page.append(csrfTokenHtmlInput);
-		page.append("        <button class=\"primary\" type=\"submit\">Sign in</button>\n");
-		page.append("      </form>\n");
-		return page.toString();
 	}
 
-	private static String oauth2LoginLinks(MultiValueMap<String, String> queryParams, String contextPath,
+	private static String oauth2Login(MultiValueMap<String, String> queryParams, String contextPath,
 			Map<String, String> oauth2AuthenticationUrlToClientName) {
 		if (oauth2AuthenticationUrlToClientName.isEmpty()) {
 			return "";
 		}
 		boolean isError = queryParams.containsKey("error");
-		StringBuilder sb = new StringBuilder();
+
-		sb.append("<div class=\"content\"><h2>Login with OAuth 2.0</h2>");
+		String oauth2Rows = oauth2AuthenticationUrlToClientName.entrySet()
-		sb.append(createError(isError));
+			.stream()
-		sb.append("<table class=\"table table-striped\">\n");
+			.map((urlToName) -> oauth2LoginLink(contextPath, urlToName.getKey(), urlToName.getValue()))
-		for (Map.Entry<String, String> clientAuthenticationUrlToClientName : oauth2AuthenticationUrlToClientName
+			.collect(Collectors.joining("\n"))
-			.entrySet()) {
+			.indent(2);
-			sb.append(" <tr><td>");
+		return HtmlTemplates.fromTemplate(OAUTH2_LOGIN_TEMPLATE)
-			String url = clientAuthenticationUrlToClientName.getKey();
+			.withRawHtml("errorMessage", createError(isError))
-			sb.append("<a href=\"").append(contextPath).append(url).append("\">");
+			.withRawHtml("oauth2Rows", oauth2Rows)
-			String clientName = HtmlUtils.htmlEscape(clientAuthenticationUrlToClientName.getValue());
+			.render();
-			sb.append(clientName);
+	}
-			sb.append("</a>");
+
-			sb.append("</td></tr>\n");
+	private static String oauth2LoginLink(String contextPath, String url, String clientName) {
-		}
+		return HtmlTemplates.fromTemplate(OAUTH2_ROW_TEMPLATE)
-		sb.append("</table></div>\n");
+			.withValue("url", contextPath + url)
-		return sb.toString();
+			.withValue("clientName", clientName)
+			.render();
 	}
 
 	private static String csrfToken(CsrfToken token) {
-		return "          <input type=\"hidden\" name=\"" + token.getParameterName() + "\" value=\"" + token.getToken()
+		return HtmlTemplates.fromTemplate(CSRF_INPUT_TEMPLATE)
-				+ "\">\n";
+			.withValue("name", token.getParameterName())
+			.withValue("value", token.getToken())
+			.render();
 	}
 
 	private static String createError(boolean isError) {
@@ -174,4 +155,53 @@ public class LoginPageGeneratingWebFilter implements WebFilter {
 				: "";
 	}
 
+	private static final String LOGIN_PAGE_TEMPLATE = """
+			<!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>
+			{{cssStyle}}
+			  </head>
+			  <body>
+			    <div class="content">
+			{{formLogin}}
+			{{oauth2Login}}
+			    </div>
+			  </body>
+			</html>""";
+
+	private static final String LOGIN_FORM_TEMPLATE = """
+			      <form class="login-form" method="post" action="{{loginUrl}}">
+			        <h2>Please sign in</h2>
+			{{errorMessage}}{{logoutMessage}}
+			        <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>
+			{{csrf}}
+			        <button type="submit" class="primary">Sign in</button>
+			      </form>""";
+
+	private static final String CSRF_INPUT_TEMPLATE = """
+			<input name="{{name}}" type="hidden" value="{{value}}" />
+			""";
+
+	private static final String OAUTH2_LOGIN_TEMPLATE = """
+			<h2>Login with OAuth 2.0</h2>
+			{{errorMessage}}
+			<table class="table table-striped">
+			{{oauth2Rows}}
+			</table>""";
+
+	private static final String OAUTH2_ROW_TEMPLATE = """
+			<tr><td><a href="{{url}}">{{clientName}}</a></td></tr>""";
+
 }

web/src/main/java/org/springframework/security/web/server/ui/LogoutPageGeneratingWebFilter.java

@@ -70,33 +70,45 @@ public class LogoutPageGeneratingWebFilter implements WebFilter {
 	}
 
 	private static byte[] createPage(String csrfTokenHtmlInput, String contextPath) {
-		StringBuilder page = new StringBuilder();
+		return HtmlTemplates.fromTemplate(LOGOUT_PAGE_TEMPLATE)
-		page.append("<!DOCTYPE html>\n");
+			.withRawHtml("cssStyle", CssUtils.getCssStyleBlock().indent(4))
-		page.append("<html lang=\"en\">\n");
+			.withValue("contextPath", contextPath)
-		page.append("  <head>\n");
+			.withRawHtml("csrf", csrfTokenHtmlInput.indent(8))
-		page.append("    <meta charset=\"utf-8\">\n");
+			.render()
-		page.append("    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n");
+			.getBytes(Charset.defaultCharset());
-		page.append("    <meta name=\"description\" content=\"\">\n");
-		page.append("    <meta name=\"author\" content=\"\">\n");
-		page.append("    <title>Confirm Log Out?</title>\n");
-		page.append(CssUtils.getCssStyleBlock().indent(4));
-		page.append("  </head>\n");
-		page.append("  <body>\n");
-		page.append("     <div class=\"content\">\n");
-		page.append("      <form class=\"logout-form\" method=\"post\" action=\"" + contextPath + "/logout\">\n");
-		page.append("        <h2>Are you sure you want to log out?</h2>\n");
-		page.append(csrfTokenHtmlInput);
-		page.append("        <button class=\"primary\" type=\"submit\">Log Out</button>\n");
-		page.append("      </form>\n");
-		page.append("    </div>\n");
-		page.append("  </body>\n");
-		page.append("</html>");
-		return page.toString().getBytes(Charset.defaultCharset());
 	}
 
 	private static String csrfToken(CsrfToken token) {
-		return "          <input type=\"hidden\" name=\"" + token.getParameterName() + "\" value=\"" + token.getToken()
+		return HtmlTemplates.fromTemplate(CSRF_INPUT_TEMPLATE)
-				+ "\">\n";
+			.withValue("name", token.getParameterName())
+			.withValue("value", token.getToken())
+			.render();
 	}
 
+	private static final String LOGOUT_PAGE_TEMPLATE = """
+			<!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>
+			{{cssStyle}}
+			  </head>
+			  <body>
+			    <div class="content">
+			      <form class="logout-form" method="post" action="{{contextPath}}/logout">
+			        <h2>Are you sure you want to log out?</h2>
+			{{csrf}}
+			        <button class="primary" type="submit">Log Out</button>
+			      </form>
+			    </div>
+			  </body>
+			</html>""";
+
+	private static final String CSRF_INPUT_TEMPLATE = """
+			<input name="{{name}}" type="hidden" value="{{value}}" />
+			""";
+
 }

web/src/test/java/org/springframework/security/web/server/ui/LoginPageGeneratingWebFilterTests.java

@@ -16,6 +16,8 @@
 
 package org.springframework.security.web.server.ui;
 
+import java.util.Collections;
+
 import org.junit.jupiter.api.Test;
 import reactor.core.publisher.Mono;
 
@@ -45,4 +47,175 @@ public class LoginPageGeneratingWebFilterTests {
 		assertThat(exchange.getResponse().getBodyAsString().block()).contains("action=\"/login\"");
 	}
 
+	@Test
+	void filtersThenRendersPage() {
+		String clientName = "Google < > \" \' &";
+		LoginPageGeneratingWebFilter filter = new LoginPageGeneratingWebFilter();
+		filter.setOauth2AuthenticationUrlToClientName(
+				Collections.singletonMap("/oauth2/authorization/google", clientName));
+		filter.setFormLoginEnabled(true);
+		MockServerWebExchange exchange = MockServerWebExchange
+			.from(MockServerHttpRequest.get("/test/login").contextPath("/test"));
+		filter.filter(exchange, (e) -> Mono.empty()).block();
+		assertThat(exchange.getResponse().getBodyAsString().block()).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="/test/login">
+				        <h2>Please sign in</h2>
+
+				        <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>
+
+				<table class="table table-striped">
+				  <tr><td><a href="/test/oauth2/authorization/google">Google &lt; &gt; &quot; &#39; &amp;</a></td></tr>
+				</table>
+				    </div>
+				  </body>
+				</html>""");
+	}
+
 }

web/src/test/java/org/springframework/security/web/server/ui/LogoutPageGeneratingWebFilterTests.java

@@ -49,6 +49,151 @@ public class LogoutPageGeneratingWebFilterTests {
 		MockServerWebExchange exchange = MockServerWebExchange
 			.from(MockServerHttpRequest.get("/test/logout").contextPath("/test"));
 		filter.filter(exchange, (e) -> Mono.empty()).block();
+		assertThat(exchange.getResponse().getBodyAsString().block()).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>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="/test/logout">
+				        <h2>Are you sure you want to log out?</h2>
+
+				        <button class="primary" type="submit">Log Out</button>
+				      </form>
+				    </div>
+				  </body>
+				</html>""");
 	}
 
 }