keycloak-uncached

KEYCLOAK-7751 Auth welcome page

7/19/2018 4:09:08 AM

Changes

themes/src/main/resources/theme/keycloak/welcome/resources/keycloak.css 69(+0 -69)

themes/src/main/resources-product/theme/rh-sso/welcome/index.ftl 135(+0 -135)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/brand.svg 101(+0 -101)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/keycloak.css 172(+0 -172)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-Bold.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-BoldItalic.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-ExtraBold.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-ExtraBoldItalic.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-Italic.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-Light.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-LightItalic.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-Regular.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-Semibold.ttf 0(+0 -0)

themes/src/main/resources-product/theme/rh-sso/welcome/resources/OpenSans-SemiboldItalic.ttf 0(+0 -0)

Details

diff --git a/services/src/main/java/org/keycloak/services/resources/WelcomeResource.java b/services/src/main/java/org/keycloak/services/resources/WelcomeResource.java
index f80241e..6cf7edf 100755
--- a/services/src/main/java/org/keycloak/services/resources/WelcomeResource.java
+++ b/services/src/main/java/org/keycloak/services/resources/WelcomeResource.java
@@ -18,6 +18,7 @@ package org.keycloak.services.resources;
 
 import org.jboss.logging.Logger;
 import org.keycloak.common.ClientConnection;
+import org.keycloak.common.Version;
 import org.keycloak.common.util.Base64Url;
 import org.keycloak.common.util.MimeTypeUtil;
 import org.keycloak.models.BrowserSecurityHeaders;
@@ -25,6 +26,7 @@ import org.keycloak.models.KeycloakSession;
 import org.keycloak.models.utils.KeycloakModelUtils;
 import org.keycloak.services.ForbiddenException;
 import org.keycloak.services.ServicesLogger;
+import org.keycloak.services.Urls;
 import org.keycloak.services.managers.ApplianceBootstrap;
 import org.keycloak.services.util.CacheControlUtil;
 import org.keycloak.services.util.CookieHelper;
@@ -171,8 +173,19 @@ public class WelcomeResource {
 
     private Response createWelcomePage(String successMessage, String errorMessage) {
         try {
-            Map<String, Object> map = new HashMap<>();
-            map.put("bootstrap", bootstrap);
+          Theme theme = getTheme();
+
+          Map<String, Object> map = new HashMap<>();
+
+          map.put("productName", Version.NAME);
+
+          map.put("properties", theme.getProperties());
+
+          URI uri = Urls.themeRoot(session.getContext().getUri().getBaseUri());
+          String resourcesPath = uri.getPath() + "/" + theme.getType().toString().toLowerCase() +"/" + theme.getName();
+          map.put("resourcesPath", resourcesPath);
+
+           map.put("bootstrap", bootstrap);
             if (bootstrap) {
                 boolean isLocal = isLocal();
                 map.put("localUser", isLocal);
@@ -189,7 +202,7 @@ public class WelcomeResource {
                 map.put("errorMessage", errorMessage);
             }
             FreeMarkerUtil freeMarkerUtil = new FreeMarkerUtil();
-            String result = freeMarkerUtil.processTemplate(map, "index.ftl", getTheme());
+            String result = freeMarkerUtil.processTemplate(map, "index.ftl", theme);
 
             ResponseBuilder rb = Response.status(errorMessage == null ? Status.OK : Status.BAD_REQUEST)
                     .entity(result)
diff --git a/themes/src/main/resources/theme/keycloak/welcome/index.ftl b/themes/src/main/resources/theme/keycloak/welcome/index.ftl
index cbb08d6..406195e 100755
--- a/themes/src/main/resources/theme/keycloak/welcome/index.ftl
+++ b/themes/src/main/resources/theme/keycloak/welcome/index.ftl
@@ -20,94 +20,113 @@
   ~ 02110-1301 USA, or see the FSF site: http://www.fsf.org.
   -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
-
+ 
 <html>
 <head>
-    <title>Welcome to Keycloak</title>
+    <title>Welcome to ${productName}</title>
 
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="robots" content="noindex, nofollow">
 
     <link rel="shortcut icon" href="welcome-content/favicon.ico" type="image/x-icon">
-    <link rel="StyleSheet" href="welcome-content/keycloak.css" type="text/css">
-    <style>
-        label {
-            display: inline-block;
-            width: 200px;
-            text-align: right;
-            margin-right: 10px;
-        }
-
-        button {
-            margin-left: 215px;
-        }
 
-        form {
-            background-color: #eee;
-            border: 1px solid #666;
-            padding-bottom: 1em;
-        }
-
-        .error {
-            color: #a30000;
-        }
-    </style>
+    <#if properties.styles?has_content>
+        <#list properties.styles?split(' ') as style>
+            <link href="${resourcesPath}/${style}" rel="stylesheet" />
+        </#list>
+    </#if>
 </head>
 
 <body>
-<div class="wrapper">
-    <div class="content">
-        <div class="logo">
-                <img src="welcome-content/keycloak_logo.png" alt="Keycloak" border="0" />
-        </div>
-        <h1>Welcome to Keycloak</h1>
-
-        <#if successMessage?has_content>
-            <p>${successMessage}</p>
-        <#elseif errorMessage?has_content>
-            <p class="error">${errorMessage}</p>
-        <#elseif bootstrap>
-            <#if localUser>
-                <p>Please create an initial admin user to get started.</p>
-            <#else>
-                <p>
-                    You need local access to create the initial admin user. Open <a href="http://localhost:8080/auth">http://localhost:8080/auth</a>
-                    or use the add-user-keycloak script.
-                </p>
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-8 col-lg-offset-2">
+      <div class="welcome-header">
+        <img src="${resourcesPath}/logo.png" alt="${productName}" border="0" />
+        <h1>Welcome to <strong>${productName}</strong></h1>
+      </div>
+      <div class="row">
+        <div class="col-xs-12 col-sm-4">
+          <div class="card-pf h-l">
+            <#if successMessage?has_content>
+                <p class="alert success">${successMessage}</p>
+            <#elseif errorMessage?has_content>
+                <p class="alert error">${errorMessage}</p>
+                <h3><img src="welcome-content/user.png">Administration Console</h3>
+            <#elseif bootstrap>
+                <#if localUser>
+                    <h3><img src="welcome-content/user.png">Administration Console</h3>
+                    <p>Please create an initial admin user to get started.</p>
+                <#else>
+                    <p class="welcome-message">
+                        <img src="welcome-content/alert.png">You need local access to create the initial admin user. <br><br>Open <a href="http://localhost:8080/auth">http://localhost:8080/auth</a>
+                        <br>or use the add-user-keycloak script.
+                    </p>
+                </#if>
             </#if>
-        </#if>
 
-        <#if bootstrap && localUser>
-            <form method="post">
-                <p>
-                    <label for="username">Username</label>
-                    <input id="username" name="username" />
-                </p>
+            <#if bootstrap && localUser>
+                <form method="post" class="welcome-form">
+                    <p>
+                        <label for="username">Username</label>
+                        <input id="username" name="username" />
+                    </p>
 
-                <p>
-                    <label for="password">Password</label>
-                    <input id="password" name="password" type="password" />
-                </p>
+                    <p>
+                        <label for="password">Password</label>
+                        <input id="password" name="password" type="password" />
+                    </p>
 
-                <p>
-                    <label for="passwordConfirmation">Password confirmation</label>
-                    <input id="passwordConfirmation" name="passwordConfirmation" type="password" />
-                </p>
+                    <p>
+                        <label for="passwordConfirmation">Password confirmation</label>
+                        <input id="passwordConfirmation" name="passwordConfirmation" type="password" />
+                    </p>
 
-                <input id="stateChecker" name="stateChecker" type="hidden" value="${stateChecker}" />
+                    <input id="stateChecker" name="stateChecker" type="hidden" value="${stateChecker}" />
 
-                <button id="create-button" type="submit">Create</button>
-            </form>
-        </#if>
+                    <button id="create-button" type="submit" class="btn btn-primary">Create</button>
+                </form>
+            </#if>
+            <div class="welcome-primary-link">
+              <h3><a href="admin/"><img src="welcome-content/user.png">Administration Console <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
+              <div class="description">
+                Centrally manage all aspects of the KeyCloak server
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4">
+          <div class="card-pf h-l">
+            <h3><a href="${properties.documentationUrl}"><img class="doc-img" src="welcome-content/admin-console.png">Documentation <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
+            <div class="description">
 
-        <p><a href="http://www.keycloak.org/docs">Documentation</a> | <a href="admin/">Administration Console</a> </p>
+              User Guide, Admin REST API and Javadocs
 
-        <p><a href="http://www.keycloak.org">Keycloak Project</a> |
-            <a href="https://lists.jboss.org/mailman/listinfo/keycloak-user">Mailing List</a> |
-            <a href="https://issues.jboss.org/browse/KEYCLOAK">Report an issue</a></p>
-        <p class="logos"><a href="http://www.jboss.org"><img src="welcome-content/jboss_community.png" alt="JBoss and JBoss Community" width="254" height="31" border="0"></a></p>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4">
+        <#if properties.displayCommunityLinks = "true">
+          <div class="card-pf h-m">
+            <h3><a href="http://www.keycloak.org"><img src="welcome-content/keycloak-project.png">Keycloak Project <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
+          </div>
+          <div class="card-pf h-m">
+            <h3><a href="https://lists.jboss.org/mailman/listinfo/keycloak-user"><img src="welcome-content/mail.png">Mailing List <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
+          </div>
+          <div class="card-pf h-m">
+            <h3><a href="https://issues.jboss.org/browse/KEYCLOAK"><img src="welcome-content/bug.png">Report an issue <i class="fa fa-angle-right link" aria-hidden="true"></i></a></h3>
+          </div>
+        </#if>
+        </div>
+      </div>
+      <div class='footer'>
+        <#if properties.displayCommunityLinks = "true">
+        <a href="http://www.jboss.org"><img src="welcome-content/jboss_community.png" alt="JBoss and JBoss Community"></a>
+        </#if>
+      </div>
     </div>
+  </div>
 </div>
 </body>
 </html>
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/admin-console.png b/themes/src/main/resources/theme/keycloak/welcome/resources/admin-console.png
new file mode 100644
index 0000000..ac73497
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak/welcome/resources/admin-console.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/alert.png b/themes/src/main/resources/theme/keycloak/welcome/resources/alert.png
new file mode 100644
index 0000000..74b4bc7
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak/welcome/resources/alert.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/bg.png b/themes/src/main/resources/theme/keycloak/welcome/resources/bg.png
new file mode 100644
index 0000000..b722a00
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak/welcome/resources/bg.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/bug.png b/themes/src/main/resources/theme/keycloak/welcome/resources/bug.png
new file mode 100644
index 0000000..4f00775
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak/welcome/resources/bug.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/css/welcome.css b/themes/src/main/resources/theme/keycloak/welcome/resources/css/welcome.css
new file mode 100644
index 0000000..c6a679a
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak/welcome/resources/css/welcome.css
@@ -0,0 +1,140 @@
+body {
+	background: #fff url(../bg.png) no-repeat center bottom fixed;
+	background-size: cover;
+}
+.welcome-header {
+	margin-top: 10px;
+	margin-bottom: 50px;
+	margin-left: -10px;
+}
+.welcome-header img {
+	width: 150px;
+	margin-bottom: 40px;
+}
+.welcome-message {
+	margin-top: 20px;
+}
+.h-l {
+	min-height: 370px;
+	padding: 10px 20px 10px;
+	overflow: hidden;
+}
+.h-l h3 {
+	margin-bottom: 10px;
+}
+.h-m {
+	height: 110px;
+	padding-top: 23px;
+}
+.card-pf img {
+	width: 22px;
+	margin-right: 10px;
+	vertical-align: bottom;
+}
+img.doc-img {
+	width: auto;
+	height: 22px;
+}
+.link {
+	font-size: 16px;
+	vertical-align: baseline;
+	margin-left: 5px;
+}
+h3 {
+	font-weight: 550;
+}
+h3 a:link,
+h3 a:visited {
+	color: #333;
+	font-weight: 550;
+}
+h3 a:hover,
+h3 a:hover .link {
+	text-decoration: none;
+	color: #00659c;
+}
+.h-l h3 a img {
+	height: 30px;
+	width: auto;
+}
+
+.description {
+	margin-top: 30px;
+}
+
+.card-pf {
+	border-top: 1px solid rgba(3, 3, 3, 0.1);
+	box-shadow: 0 1px 1px rgba(3, 3, 3, 0.275);
+}
+
+.welcome-form label,
+.welcome-form input {
+	display: block;
+	width: 100%;
+}
+
+.welcome-form label {
+	color: #828486;
+	font-weight: normal;
+	margin-top: 18px;
+}
+.welcome-form input {
+	border: 0;
+	border-bottom: solid 1px #cbcbcb;
+}
+.welcome-form input:focus {
+	border-bottom: solid 1px #5e99c6;
+	outline-width: 0;
+}
+.welcome-form button {
+	margin-top: 10px;
+}
+.error {
+  color: #c00;
+	border-color: #c00;
+	padding: 5px 10px;
+}
+.success {
+	color: #3f9c35;
+	border-color: #3f9c35;
+	padding: 5px 10px;
+}
+.welcome-form + .welcome-primary-link,
+.welcome-message + .welcome-primary-link {
+	display: none;
+}
+
+.footer img {
+	float: right;
+	width: 150px;
+	margin-top: 30px;
+}
+
+@media (max-width: 768px) {
+	.welcome-header {
+		margin-top: 10px;
+		margin-bottom: 20px;
+	}
+	.welcome-header img {
+		margin-bottom: 20px;
+	}
+	h3 {
+		margin-top: 10px;
+	}
+	.h-l,
+	.h-m {
+		height: auto;
+		min-height: auto;
+		padding: 5px 10px;
+	}
+	.h-l img {
+		display: inline;
+		margin-bottom: auto;
+	}
+	.description {
+		display: none;
+	}
+	.footer img {
+		margin-top: 10px;
+	}
+}
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/jboss_community.png b/themes/src/main/resources/theme/keycloak/welcome/resources/jboss_community.png
index 946e8f9..c4a133c 100644
Binary files a/themes/src/main/resources/theme/keycloak/welcome/resources/jboss_community.png and b/themes/src/main/resources/theme/keycloak/welcome/resources/jboss_community.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/keycloak-project.png b/themes/src/main/resources/theme/keycloak/welcome/resources/keycloak-project.png
new file mode 100644
index 0000000..cd63e5a
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak/welcome/resources/keycloak-project.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/logo.png b/themes/src/main/resources/theme/keycloak/welcome/resources/logo.png
new file mode 100644
index 0000000..134440b
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak/welcome/resources/logo.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/mail.png b/themes/src/main/resources/theme/keycloak/welcome/resources/mail.png
new file mode 100644
index 0000000..3a63e7b
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak/welcome/resources/mail.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/resources/user.png b/themes/src/main/resources/theme/keycloak/welcome/resources/user.png
new file mode 100644
index 0000000..0d61bb4
Binary files /dev/null and b/themes/src/main/resources/theme/keycloak/welcome/resources/user.png differ
diff --git a/themes/src/main/resources/theme/keycloak/welcome/theme.properties b/themes/src/main/resources/theme/keycloak/welcome/theme.properties
new file mode 100644
index 0000000..154ff32
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak/welcome/theme.properties
@@ -0,0 +1,6 @@
+import=common/keycloak
+
+styles=node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.css css/welcome.css
+
+documentationUrl=https://www.keycloak.org/documentation.html
+displayCommunityLinks=true
\ No newline at end of file
diff --git a/themes/src/main/resources-product/theme/rh-sso/welcome/resources/bg.png b/themes/src/main/resources-product/theme/rh-sso/welcome/resources/bg.png
new file mode 100644
index 0000000..531d563
Binary files /dev/null and b/themes/src/main/resources-product/theme/rh-sso/welcome/resources/bg.png differ
diff --git a/themes/src/main/resources-product/theme/rh-sso/welcome/resources/bg-login.png b/themes/src/main/resources-product/theme/rh-sso/welcome/resources/bg-login.png
new file mode 100644
index 0000000..c408a65
Binary files /dev/null and b/themes/src/main/resources-product/theme/rh-sso/welcome/resources/bg-login.png differ
diff --git a/themes/src/main/resources-product/theme/rh-sso/welcome/resources/css/welcome-rhsso.css b/themes/src/main/resources-product/theme/rh-sso/welcome/resources/css/welcome-rhsso.css
new file mode 100644
index 0000000..68e903c
--- /dev/null
+++ b/themes/src/main/resources-product/theme/rh-sso/welcome/resources/css/welcome-rhsso.css
@@ -0,0 +1,12 @@
+body {
+  background-image: url(../bg.png),url(../bg-login.png);
+  background-repeat: no-repeat,no-repeat;
+  background-position: right bottom, left top;
+  background-size: auto, auto;
+  background-color: #1a1a1a;
+  height: 100%;
+}
+
+.welcome-header {
+  color: #fff;
+}
diff --git a/themes/src/main/resources-product/theme/rh-sso/welcome/resources/logo.png b/themes/src/main/resources-product/theme/rh-sso/welcome/resources/logo.png
new file mode 100644
index 0000000..3a2fc56
Binary files /dev/null and b/themes/src/main/resources-product/theme/rh-sso/welcome/resources/logo.png differ
diff --git a/themes/src/main/resources-product/theme/rh-sso/welcome/theme.properties b/themes/src/main/resources-product/theme/rh-sso/welcome/theme.properties
new file mode 100644
index 0000000..f9e3152
--- /dev/null
+++ b/themes/src/main/resources-product/theme/rh-sso/welcome/theme.properties
@@ -0,0 +1,7 @@
+parent=keycloak
+import=common/rh-sso
+
+styles=node_modules/rcue/dist/css/rcue.min.css node_modules/rcue/dist/css/rcue-additions.min.css css/welcome.css css/welcome-rhsso.css
+
+documentationUrl=https://access.redhat.com/documentation/en/red-hat-single-sign-on/
+displayCommunityLinks=false
\ No newline at end of file