KEYCLOAK-10 Added JS library

examples/themes/login/sunrise/resources/css/styles.css

@@ -17,13 +17,13 @@ a {
 
 .content {
     position: absolute;
-    top: 25%;
+    top: 30%;
     left: 50%;
     width: 550px;
     margin-left: -225px;
 }
 
-h2 {
+h2#kc-header {
     position: fixed;
     top: 50px;
     left: 0;
@@ -149,7 +149,7 @@ div.feedback p {
     padding: 1em;
 }
 
-div.rcue-logo {
+h1.kc-title {
     background-image: url('../img/logo.png');
     background-repeat: no-repeat;
     height: 500px;
@@ -158,6 +158,7 @@ div.rcue-logo {
     top: 30px;
     width: 500px;
     z-index: -1;
+    text-indent: -9999px;
 }
 
 div.social-login span {

forms/common-freemarker/src/main/java/org/keycloak/freemarker/ThemeLoader.java

@@ -17,8 +17,8 @@ import java.util.Properties;
 public class ThemeLoader {
 
     private static final Logger logger = Logger.getLogger(ThemeLoader.class);
+    private static String DEFAULT = "keycloak";
     public static final String BASE = "base";
-    public static String DEFAULT = BASE;
 
     public static Theme createTheme(String name, Theme.Type type) throws FreeMarkerException {
         if (name == null) {

forms/common-themes/src/main/java/org/keycloak/theme/DefaultLoginThemeProvider.java

@@ -17,10 +17,6 @@ public class DefaultLoginThemeProvider implements ThemeProvider {
     public static final String RCUE = "rcue";
     public static final String KEYCLOAK = "keycloak";
 
-    static {
-        ThemeLoader.DEFAULT = KEYCLOAK;
-    }
-
     private static Set<String> defaultThemes = new HashSet<String>();
 
     static {

integration/js/pom.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<project>
+	<parent>
+		<artifactId>keycloak-parent</artifactId>
+		<groupId>org.keycloak</groupId>
+		<version>1.0-alpha-2-SNAPSHOT</version>
+		<relativePath>../pom.xml</relativePath>
+	</parent>
+	<modelVersion>4.0.0</modelVersion>
+
+	<artifactId>keycloak-js-adapter</artifactId>
+	<name>Keycloak JS Integration</name>
+	<description />
+
+	<dependencies>
+	</dependencies>
+
+	<build>
+		<plugins>
+			<plugin>
+				<groupId>org.apache.maven.plugins</groupId>
+				<artifactId>maven-compiler-plugin</artifactId>
+				<configuration>
+					<source>1.6</source>
+					<target>1.6</target>
+				</configuration>
+			</plugin>
+		</plugins>
+	</build>
+
+</project>

integration/js/src/main/resources/META-INF/resources/js/keycloak.js

@@ -0,0 +1,249 @@
+var Keycloak = function (options) {
+    options = options || {};
+
+    if (!(this instanceof Keycloak)) {
+        return new Keycloak(options);
+    }
+
+    var instance = this;
+
+    if (!options.url) {
+        var scripts = document.getElementsByTagName('script');
+        for (var i = 0; i < scripts.length; i++) {
+            if (scripts[i].src.match(/.*keycloak\.js/)) {
+                options.url = scripts[i].src.substr(0, scripts[i].src.indexOf('/auth/js/keycloak.js'));
+                break;
+            }
+        }
+    }
+
+    if (!options.url) {
+        throw 'url missing';
+    }
+
+    if (!options.realm) {
+        throw 'realm missing';
+    }
+
+    if (!options.clientId) {
+        throw 'clientId missing';
+    }
+
+    if (!options.clientSecret) {
+        throw 'clientSecret missing';
+    }
+
+    this.init = function (successCallback, errorCallback) {
+        if (window.oauth.callback) {
+            delete sessionStorage.oauthToken;
+            processCallback(successCallback, errorCallback);
+        } else if (options.token) {
+            setToken(options.token, successCallback);
+        } else if (sessionStorage.oauthToken) {
+            setToken(sessionStorage.oauthToken, successCallback);
+        } else if (options.onload) {
+            switch (options.onload) {
+                case 'login-required' :
+                    window.location = createLoginUrl(true);
+                    break;
+                case 'check-sso' :
+                    window.location = createLoginUrl(false);
+                    break;
+            }
+        }
+    }
+
+    this.login = function () {
+        window.location.href = createLoginUrl(true);
+    }
+
+    this.logout = function () {
+        setToken(undefined);
+        window.location.href = createLogoutUrl();
+    }
+
+    this.hasRealmRole = function (role) {
+        var access = this.realmAccess;
+        return access && access.roles.indexOf(role) >= 0 || false;
+    }
+
+    this.hasResourceRole = function (role, resource) {
+        if (!this.resourceAccess) {
+            return false;
+        }
+
+        var access = this.resourceAccess[resource || options.clientId];
+        return access && access.roles.indexOf(role) >= 0 || false;
+    }
+
+    this.loadUserProfile = function (success, error) {
+        var url = getRealmUrl() + '/account';
+        var req = new XMLHttpRequest();
+        req.open('GET', url, true);
+        req.setRequestHeader('Accept', 'application/json');
+        req.setRequestHeader('Authorization', 'bearer ' + this.token);
+
+        req.onreadystatechange = function () {
+            if (req.readyState == 4) {
+                if (req.status == 200) {
+                    instance.profile = JSON.parse(req.responseText);
+                    success && success(instance.profile)
+                } else {
+                    var response = { status: req.status, statusText: req.status };
+                    if (req.responseText) {
+                        response.data = JSON.parse(req.responseText);
+                    }
+                    error && error(response);
+                }
+            }
+        }
+
+        req.send();
+    }
+
+    function getRealmUrl() {
+        return options.url + '/auth/rest/realms/' + encodeURIComponent(options.realm);
+    }
+
+    function processCallback(successCallback, errorCallback) {
+        var code = window.oauth.code;
+        var error = window.oauth.error;
+        var prompt = window.oauth.prompt;
+
+        if (code) {
+            var params = 'code=' + code + '&client_id=' + encodeURIComponent(options.clientId) + '&password=' + encodeURIComponent(options.clientSecret);
+            var url = getRealmUrl() + '/tokens/access/codes';
+
+            var req = new XMLHttpRequest();
+            req.open('POST', url, true);
+            req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+
+            req.onreadystatechange = function () {
+                if (req.readyState == 4) {
+                    if (req.status == 200) {
+                        setToken(JSON.parse(req.responseText)['access_token'], successCallback);
+                    } else {
+                        errorCallback && errorCallback({ authenticated: false, status: req.status, statusText: req.statusText });
+                    }
+                }
+            };
+
+            req.send(params);
+        } else if (error) {
+            if (prompt != 'none') {
+                setTimeout(function() {
+                    errorCallback && errorCallback({  authenticated: false, error: error })
+                }, 0);
+            }
+        }
+    }
+
+    function setToken(token, successCallback) {
+        if (token) {
+            sessionStorage.oauthToken = token;
+            window.oauth.token = token;
+            instance.token = token;
+
+            instance.tokenParsed = JSON.parse(atob(token.split('.')[1]));
+            instance.authenticated = true;
+            instance.username = instance.tokenParsed.sub;
+            instance.realmAccess = instance.tokenParsed.realm_access;
+            instance.resourceAccess = instance.tokenParsed.resource_access;
+
+            setTimeout(function() {
+                successCallback && successCallback({ authenticated: instance.authenticated, username: instance.username });
+            }, 0);
+        } else {
+            delete sessionStorage.oauthToken;
+            delete window.oauth.token;
+            delete instance.token;
+        }
+    }
+
+    function createLoginUrl(prompt) {
+        var state = createUUID();
+
+        sessionStorage.oauthState = state;
+        var url = getRealmUrl()
+            + '/tokens/login'
+            + '?client_id=' + encodeURIComponent(options.clientId)
+            + '&redirect_uri=' + getEncodedRedirectUri()
+            + '&state=' + encodeURIComponent(state)
+            + '&response_type=code';
+
+        if (prompt == false) {
+            url += '&prompt=none';
+        }
+
+        return url;
+    }
+
+    function createLogoutUrl() {
+        var url = getRealmUrl()
+            + '/tokens/logout'
+            + '?redirect_uri=' + getEncodedRedirectUri();
+        return url;
+    }
+
+    function getEncodedRedirectUri() {
+        var url = (location.protocol + '//' + location.hostname + (location.port && (':' + location.port)) + location.pathname);
+        if (location.hash) {
+            url += '?redirect_fragment=' + encodeURIComponent(location.hash.substring(1));
+        }
+        return encodeURI(url);
+    }
+
+    function createUUID() {
+        var s = [];
+        var hexDigits = '0123456789abcdef';
+        for (var i = 0; i < 36; i++) {
+            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+        }
+        s[14] = '4';
+        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+        s[8] = s[13] = s[18] = s[23] = '-';
+        var uuid = s.join('');
+        return uuid;
+    }
+}
+
+window.oauth = (function () {
+    var oauth = {};
+
+    var params = window.location.search.substring(1).split('&');
+    for (var i = 0; i < params.length; i++) {
+        var p = params[i].split('=');
+        switch (decodeURIComponent(p[0])) {
+            case 'code':
+                oauth.code = p[1];
+                break;
+            case 'error':
+                oauth.error = p[1];
+                break;
+            case 'state':
+                oauth.state = decodeURIComponent(p[1]);
+                break;
+            case 'redirect_fragment':
+                oauth.fragment = decodeURIComponent(p[1]);
+                break;
+            case 'prompt':
+                oauth.prompt = p[1];
+                break;
+        }
+    }
+
+    if (oauth.state && oauth.state == sessionStorage.oauthState) {
+        oauth.callback = true;
+        delete sessionStorage.oauthState;
+    } else {
+        oauth.callback = false;
+    }
+
+    if (oauth.callback) {
+        window.history.replaceState({}, null, location.protocol + '//' + location.host + location.pathname + (oauth.fragment ? '#' + oauth.fragment : ''));
+    } else if (oauth.fragment) {
+        window.history.replaceState({}, null, location.protocol + '//' + location.host + location.pathname + (oauth.fragment ? '#' + oauth.fragment : ''));
+    }
+
+    return oauth;
+}());

integration/pom.xml

@@ -21,6 +21,7 @@
         <module>as7-eap6/adapter</module>
         <module>undertow</module>
         <module>wildfly-subsystem</module>
+        <module>js</module>
         <!-- <module>as7-eap6/jboss-modules</module> -->
     </modules>
 </project>

misc/logo/login-bg.svg

@@ -0,0 +1,318 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="1440px" height="960px" viewBox="0 0 1440 960" enable-background="new 0 0 1440 960" xml:space="preserve">
+<rect fill="#034672" width="1440" height="961.062"/>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="633.4873" y1="155.333" x2="696.1514" y2="155.333" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#FEFEFE"/>
+	<stop  offset="0.1452" style="stop-color:#F4F5F4"/>
+	<stop  offset="0.6844" style="stop-color:#DADCDB"/>
+	<stop  offset="1" style="stop-color:#CFD1D1"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M590.151-76.359c-7.205,5-14.688,3.682-23.184-3.358c-4.896-4.059-11.15-2.771-15.41-1.454
+	c-2.648,0.82-6.324,0.744-9.519,0.075c-13.978-2.93-10.929,6.038-8.339,14.015c4.757,14.64-3.236,18.031-5.983,12.815
+	c-1.766,6.615,7.138,8.572,10.937,7.701c6.007-1.377,14.052-2.153,19.043-0.627c9.545,2.916,13.125,0.513,11.543-2.57
+	c-0.521-1.012-0.229-2.446,0.582-3.126c2.834-2.374,5.295-0.373,8.008-1.947c2.107-1.226,2.076-3.927-1.19-5.463
+	c-1.731-0.813-1.649-2.881,0.185-3.84c3.729-1.952,8.75-1.036,10-5.138C587.271-70.745,588.522-74.435,590.151-76.359z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="859.5273" y1="475.5811" x2="851.2537" y2="475.5811" gradientTransform="matrix(1 0 0 -1 -300 412)">
+	<stop  offset="0" style="stop-color:#E6E6E6"/>
+	<stop  offset="1" style="stop-color:#B3B4B4"/>
+</linearGradient>
+<path fill="url(#SVGID_2_)" d="M554.198-78.152c0,4.983,0.74,22.798,4.537,30.405l-8.733-0.194v-31.473L554.198-78.152z"/>
+<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="466.3438" y1="-243.916" x2="473.3443" y2="-224.4146" gradientTransform="matrix(1 0 0 -1 88 -301.5)">
+	<stop  offset="0" style="stop-color:#F6F6F6"/>
+	<stop  offset="1" style="stop-color:#B3B4B4"/>
+</linearGradient>
+<path fill="url(#SVGID_3_)" d="M534.571-66.4c-2.762-7.458-6.51-16.625,7.469-13.695c3.193,0.669,6.869,0.745,9.518-0.075
+	c4.262-1.317,9.973-2.444,14.514,1.521c8.875,7.748,16.875,8.292,24.08,3.292c-1.629,1.924-3.105,5.563-3.33,7.083
+	c-0.188,1.293-1.133,1.873-2.381,2.379c-18.52,7.52-15.395-5.307-21.353-9.48c-3.158-2.214-7.733-2.09-11.247-0.812
+	c-3.171,1.153-6.438,0.864-9.833-0.396C536.341-78.692,532.532-77.58,534.571-66.4z"/>
+<g opacity="0.75">
+	<path fill="#FFFFFF" d="M558.897-80.461c2.719,0,4.941,0.747,6.795,2.284c5.541,4.592,10.631,6.823,15.558,6.823
+		c1.474,0,2.935-0.207,4.373-0.615c-0.317,0.854-0.56,1.602-0.714,2.111c-0.432,1.414-1.598,1.811-4.357,2.437
+		c-1.463,0.332-3.121,0.708-4.656,1.513c-1.576,0.824-2.535,2.322-2.502,3.908c0.031,1.51,0.928,2.822,2.396,3.514
+		c1.153,0.541,1.478,1.135,1.487,1.373c0.012,0.26-0.344,0.487-0.45,0.551c-0.597,0.347-1.181,0.412-2.052,0.412
+		c-0.16,0-0.32-0.002-0.481-0.004c-0.179-0.002-0.356-0.004-0.535-0.004c-1.632,0-3.394,0.211-5.219,1.74
+		c-1.545,1.294-2.019,3.742-1.078,5.573c0.138,0.267,0.142,0.405,0.149,0.407c-0.094,0.127-0.771,0.566-2.586,0.566
+		c-1.776,0-4.107-0.426-6.742-1.229c-2.004-0.613-4.512-0.924-7.45-0.924c-3.827,0-8.429,0.553-12.624,1.515
+		c-0.412,0.094-0.934,0.144-1.51,0.144c-1.875,0-4.187-0.543-5.672-1.594c1.674-0.011,3.264-0.886,4.365-2.404
+		c1.342-1.844,3.15-6.289,0.213-15.33l-0.08-0.25c-1.278-3.936-2.871-8.833-1.541-10.663c0.508-0.699,1.636-1.053,3.354-1.053
+		c1.188,0,2.632,0.177,4.295,0.525c1.76,0.369,3.618,0.563,5.375,0.563c1.944,0,3.676-0.231,5.145-0.686
+		C553.815-79.776,556.327-80.461,558.897-80.461 M558.897-82.461c-2.662,0-5.242,0.641-7.34,1.29
+		c-1.324,0.41-2.904,0.596-4.553,0.596s-3.367-0.187-4.965-0.521c-1.854-0.389-3.409-0.568-4.704-0.568
+		c-8.474,0-5.881,7.664-3.635,14.583c3.376,10.394,0.327,15.117-2.708,15.117c-1.241,0-2.479-0.789-3.276-2.302
+		c-1.506,5.643,4.751,7.896,8.979,7.896c0.729,0,1.397-0.067,1.957-0.194c3.684-0.844,8.134-1.463,12.177-1.463
+		c2.549,0,4.937,0.246,6.866,0.836c3.037,0.93,5.472,1.318,7.326,1.318c3.975,0,5.295-1.785,4.215-3.888
+		c-0.52-1.013-0.229-2.446,0.584-3.126c1.375-1.152,2.662-1.274,3.935-1.274c0.34,0,0.679,0.009,1.019,0.009
+		c1.004,0,2.011-0.076,3.055-0.682c2.107-1.227,2.076-3.927-1.19-5.463c-1.731-0.814-1.649-2.881,0.185-3.84
+		c3.729-1.952,8.75-1.036,10-5.139c0.447-1.471,1.699-5.16,3.33-7.083c-2.906,2.017-5.857,3.005-8.902,3.005
+		c-4.504,0-9.211-2.163-14.28-6.364C564.481-81.778,561.646-82.461,558.897-82.461L558.897-82.461z M590.151-76.359h0.004H590.151z"
+		/>
+</g>
+<line fill="none" stroke="#FFFFFF" stroke-width="3.5" stroke-miterlimit="10" x1="551.841" y1="-47.636" x2="551.841" y2="-78.859"/>
+<path fill="none" stroke="#034672" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+	M590.151-76.359c-7.205,5-14.688,3.682-23.184-3.358c-4.896-4.059-11.15-2.771-15.41-1.454c-2.648,0.82-6.324,0.744-9.519,0.075
+	c-13.978-2.93-10.929,6.038-8.339,14.015c4.757,14.64-3.236,18.031-5.983,12.815c-1.766,6.615,7.138,8.572,10.937,7.701
+	c6.007-1.377,14.052-2.153,19.043-0.627c9.545,2.916,13.125,0.513,11.543-2.57c-0.521-1.012-0.229-2.446,0.582-3.126
+	c2.834-2.374,5.295-0.373,8.008-1.947c2.107-1.226,2.076-3.927-1.19-5.463c-1.731-0.813-1.649-2.881,0.185-3.84
+	c3.729-1.952,8.75-1.036,10-5.138C587.271-70.745,588.522-74.435,590.151-76.359z"/>
+<path fill="#034672" d="M534.571-67.4c-2.762-7.458-6.51-16.625,7.469-13.695c3.193,0.669,6.869,0.745,9.518-0.075
+	c4.262-1.317,9.973-2.444,14.514,1.521c8.875,7.748,16.875,8.292,24.08,3.292c-1.629,1.924-3.105,5.563-3.33,7.083
+	c-0.188,1.293-1.115,1.916-2.381,2.379c-13.119,4.795-14.125-5.486-20.082-9.665c-3.158-2.214-9.004-1.908-12.518-0.63
+	c-3.171,1.153-6.438,0.864-9.833-0.396C536.341-79.692,532.532-78.58,534.571-67.4z"/>
+<path fill="#FFFFFF" d="M556.821-102.044c-1.051-0.594-4.273-2.612-5.078-3.064c-0.807-0.453-2.723-1.881-4.819-1.881
+	c-2.096,0-4.014,1.428-4.819,1.881c-0.805,0.452-4.026,2.471-5.078,3.064c-0.806,0.454-3.725,2.037-3.725,6.34
+	c0,1.309,0,3.564,0,4.521c0,2.843,1.598,4.979,4.479,6.44c0.983,0.499,1.763,1.329,1.763,3.468c0,0.943,0.353,1.161,0.918,1.161
+	h0.681c0.625,0,0.965,0.235,0.965,1.256c0,0.562,0,2.062,0,2.062v37.2l2.713,2.779h1.244l5.682-5.819v-34.16c0,0,0-1.5,0-2.062
+	c0-1.021,0.34-1.256,0.965-1.256h0.68c0.566,0,0.918-0.218,0.918-1.161c0-2.139,0.778-2.969,1.762-3.468
+	c2.883-1.462,4.479-3.598,4.479-6.44c0-0.956,0-3.212,0-4.521C560.546-100.007,557.627-101.59,556.821-102.044z"/>
+<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="643.3027" y1="149.5488" x2="674.1378" y2="141.8818" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#B8D7E8"/>
+	<stop  offset="0.3324" style="stop-color:#CCE3F1"/>
+	<stop  offset="0.6937" style="stop-color:#DAEBF8"/>
+	<stop  offset="1" style="stop-color:#E0EEF9"/>
+</linearGradient>
+<path fill="url(#SVGID_4_)" d="M556.821-102.044c-1.051-0.594-4.273-2.612-5.078-3.064c-0.807-0.453-2.723-1.881-4.819-1.881v69.29
+	l4.819-4.936v-34.16c0,0,0-1.5,0-2.062c0-1.021,0.34-1.256,0.965-1.256h0.68c0.566,0,0.918-0.218,0.918-1.161
+	c0-2.139,0.778-2.969,1.762-3.468c2.883-1.462,4.479-3.598,4.479-6.44c0-0.956,0-3.212,0-4.521
+	C560.546-100.007,557.627-101.59,556.821-102.044z"/>
+<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="646.2637" y1="125.3784" x2="654.8886" y2="167.6281" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#F1F9FE"/>
+	<stop  offset="0.4254" style="stop-color:#E9F5FD"/>
+	<stop  offset="1" style="stop-color:#E4F3FC"/>
+</linearGradient>
+<path fill="url(#SVGID_5_)" d="M546.924-106.989c-2.097,0-4.014,1.428-4.819,1.881c-0.805,0.452-4.026,2.471-5.078,3.064
+	c-0.806,0.454-3.725,2.037-3.725,6.34c0,1.309,0,3.564,0,4.521c0,2.843,1.598,4.979,4.479,6.44c0.983,0.499,1.763,1.329,1.763,3.468
+	c0,0.943,0.353,1.161,0.918,1.161h0.681c0.625,0,0.965,0.235,0.965,1.256c0,0.562,0,2.062,0,2.062v37.2l2.713,2.779h1.244
+	l0.861-0.883L546.924-106.989L546.924-106.989z"/>
+<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M546.634-106.989
+	c1.908,0.938,3.432,1.966,4.236,2.419c0.805,0.452,4.027,2.471,5.078,3.064c0.806,0.454,3.725,2.037,3.725,6.34
+	c0,1.309,0,2.806,0,3.762c0,2.843-1.597,4.979-4.479,6.44c-0.983,0.499-1.762,1.431-1.762,3.569v1.238"/>
+<path fill="none" stroke="#034672" stroke-width="2" stroke-miterlimit="10" d="M556.821-102.044
+	c-1.051-0.594-4.273-2.612-5.078-3.064c-0.807-0.453-2.723-1.881-4.819-1.881c-2.096,0-4.014,1.428-4.819,1.881
+	c-0.805,0.452-4.026,2.471-5.078,3.064c-0.806,0.454-3.725,2.037-3.725,6.34c0,1.309,0,3.564,0,4.521
+	c0,2.843,1.598,4.979,4.479,6.44c0.983,0.499,1.763,1.329,1.763,3.468c0,0.943,0.353,1.161,0.918,1.161h0.681
+	c0.625,0,0.965,0.235,0.965,1.256c0,0.562,0,2.062,0,2.062v37.2l2.713,2.779h1.244l5.682-5.819v-34.16c0,0,0-1.5,0-2.062
+	c0-1.021,0.34-1.256,0.965-1.256h0.68c0.566,0,0.918-0.218,0.918-1.161c0-2.139,0.778-2.969,1.762-3.468
+	c2.883-1.462,4.479-3.598,4.479-6.44c0-0.956,0-3.212,0-4.521C560.546-100.007,557.627-101.59,556.821-102.044z"/>
+<path fill="#E9F6FE" stroke="#034672" stroke-width="2" stroke-miterlimit="10" d="M561.743-76.796"/>
+<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="750.8477" y1="124.7031" x2="750.8477" y2="180.0502" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#055F94"/>
+	<stop  offset="0.5912" style="stop-color:#004A77"/>
+	<stop  offset="1" style="stop-color:#054167"/>
+</linearGradient>
+<path fill="url(#SVGID_6_)" d="M650.877-61.883h-11.599c0.303,2.346,1.01,3.92,2.117,4.725c1.106,0.805,2.942,1.205,5.506,1.205
+	c3.432,0,7.43-0.238,11.99-0.717l0.911,5.994c-3.346,1.607-8.015,2.411-14.01,2.411c-6.038,0-10.339-1.304-12.901-3.909
+	c-2.562-2.607-3.845-6.907-3.845-12.902c0-6.299,1.248-10.707,3.746-13.228c2.498-2.519,6.701-3.779,12.608-3.779
+	c5.345,0,9.209,0.923,11.6,2.769c2.389,1.848,3.605,4.66,3.648,8.439c0,2.997-0.771,5.245-2.312,6.744
+	C656.796-62.633,654.308-61.883,650.877-61.883z M639.083-67.683h9.122c1.173,0,1.966-0.282,2.378-0.847
+	c0.413-0.564,0.619-1.393,0.619-2.479c0-1.52-0.391-2.574-1.172-3.16c-0.782-0.586-2.217-0.88-4.301-0.88
+	c-2.478,0-4.172,0.489-5.084,1.466C639.733-72.602,639.213-70.637,639.083-67.683z"/>
+<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="784.4727" y1="124.7031" x2="784.4727" y2="180.0486" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#055F94"/>
+	<stop  offset="0.5912" style="stop-color:#004A77"/>
+	<stop  offset="1" style="stop-color:#054167"/>
+</linearGradient>
+<path fill="url(#SVGID_7_)" d="M696.294-81.171L684.892-48.59c-0.609,1.736-1.359,3.344-2.248,4.82
+	c-0.892,1.478-2.031,2.898-3.422,4.27c-1.391,1.368-3.117,2.378-5.18,3.029c-2.064,0.652-4.355,0.824-6.875,0.521l-0.781-5.671
+	c2.605-0.694,4.646-1.597,6.125-2.702c1.477-1.107,2.627-2.598,3.453-4.465l0.131-0.262h-1.824c-1.607,0-2.649-0.781-3.129-2.348
+	l-10.49-29.776h10.295l5.996,20.786c0.391,1.521,0.717,3.128,0.978,4.82h0.847c0.131-0.521,0.348-1.336,0.651-2.441
+	s0.521-1.898,0.651-2.379L686-81.173L696.294-81.171L696.294-81.171z"/>
+<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="815.5596" y1="124.7031" x2="815.5596" y2="180.0502" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#055F94"/>
+	<stop  offset="0.5912" style="stop-color:#004A77"/>
+	<stop  offset="1" style="stop-color:#054167"/>
+</linearGradient>
+<path fill="url(#SVGID_8_)" d="M722.98-56.67l0.85,6.256c-3.305,1.434-7.451,2.149-12.446,2.149c-5.907,0-10.065-1.271-12.479-3.812
+	c-2.412-2.541-3.615-6.896-3.615-13.063c0-6.214,1.216-10.59,3.646-13.131c2.436-2.541,6.625-3.812,12.576-3.812
+	c4.865,0,8.818,0.674,11.859,2.021l-1.042,5.994c-4.692-0.086-7.755-0.131-9.188-0.131c-2.953,0-4.984,0.631-6.092,1.891
+	c-1.107,1.26-1.662,3.648-1.662,7.168c0,3.518,0.555,5.907,1.662,7.167c1.107,1.261,3.139,1.89,6.092,1.89
+	C716.92-56.084,720.199-56.279,722.98-56.67z"/>
+<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="866.3086" y1="124.7031" x2="866.3086" y2="180.0509" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#055F94"/>
+	<stop  offset="0.5912" style="stop-color:#004A77"/>
+	<stop  offset="1" style="stop-color:#054167"/>
+</linearGradient>
+<path fill="url(#SVGID_9_)" d="M760.341-82.083c5.996,0,10.241,1.293,12.74,3.877c2.497,2.585,3.746,6.962,3.746,13.13
+	c0,6.17-1.249,10.523-3.746,13.064c-2.499,2.542-6.744,3.812-12.74,3.812c-6.038,0-10.308-1.271-12.804-3.812
+	c-2.499-2.541-3.747-6.896-3.747-13.064c0-6.211,1.248-10.599,3.747-13.162C750.033-80.801,754.303-82.083,760.341-82.083z
+	 M760.341-74.85c-2.562,0-4.278,0.65-5.146,1.954c-0.871,1.304-1.305,3.91-1.305,7.82c0,3.822,0.434,6.385,1.305,7.688
+	c0.867,1.303,2.584,1.955,5.146,1.955c2.478,0,4.16-0.652,5.052-1.955c0.889-1.304,1.336-3.866,1.336-7.688
+	c0-3.865-0.437-6.462-1.305-7.788C764.555-74.188,762.859-74.85,760.341-74.85z"/>
+<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="900.2178" y1="124.7031" x2="900.2178" y2="180.0502" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#055F94"/>
+	<stop  offset="0.5912" style="stop-color:#004A77"/>
+	<stop  offset="1" style="stop-color:#054167"/>
+</linearGradient>
+<path fill="url(#SVGID_10_)" d="M781.22-74.003l-0.911-6.517c5.776-1.043,11.358-1.563,16.745-1.563c4.345,0,7.537,0.88,9.578,2.64
+	c2.043,1.759,3.063,4.811,3.063,9.154v21.242h-7.625l-0.978-4.887c-3.217,3.779-7.168,5.669-11.858,5.669
+	c-3.086,0-5.604-0.814-7.56-2.443s-2.935-3.897-2.935-6.81v-3.258c0-2.562,0.869-4.562,2.607-5.994
+	c1.735-1.436,4.147-2.15,7.231-2.15h11.469v-1.434c-0.045-1.65-0.424-2.759-1.142-3.324c-0.717-0.563-2.096-0.847-4.139-0.847
+	C791.21-74.525,786.693-74.35,781.22-74.003z M788.257-60.059v1.238c0,2.215,1.261,3.32,3.779,3.32c2.606,0,5.278-1.042,8.016-3.127
+	v-4.496h-8.666C789.3-63.078,788.257-62.057,788.257-60.059z"/>
+<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="721.2734" y1="124.7031" x2="721.2734" y2="180.0485" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#055F94"/>
+	<stop  offset="0.5912" style="stop-color:#004A77"/>
+	<stop  offset="1" style="stop-color:#054167"/>
+</linearGradient>
+<path fill="url(#SVGID_11_)" d="M621.856-63.382c-0.914-1.563-1.912-2.714-2.998-3.454v-0.13c1.304-0.868,2.303-1.89,2.998-3.062
+	l8.34-11.145H619.38l-7.95,11.208h-2.997c0.303-1.781,0.455-3.736,0.455-5.865v-18.83h-2.992l-6.65,9.482v36.13h9.644v-10.1
+	c0-1.26-0.151-2.867-0.454-4.822h3.062l8.991,14.922h10.815L621.856-63.382z"/>
+<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="840.6543" y1="124.7031" x2="840.6543" y2="180.0498" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#055F94"/>
+	<stop  offset="0.5912" style="stop-color:#004A77"/>
+	<stop  offset="1" style="stop-color:#054167"/>
+</linearGradient>
+<path fill="url(#SVGID_12_)" d="M742.016-56.279h-2.607c-2.434,0-3.646-1.086-3.646-3.258v-35.122h-3.014l-6.564,9.36v28.172
+	c0,2.824,0.824,5.008,2.477,6.549c1.65,1.542,3.91,2.313,6.777,2.313c3.475,0,6.035-0.435,7.688-1.304L742.016-56.279z"/>
+<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="935.4414" y1="124.7031" x2="935.4414" y2="180.0485" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#055F94"/>
+	<stop  offset="0.5912" style="stop-color:#004A77"/>
+	<stop  offset="1" style="stop-color:#054167"/>
+</linearGradient>
+<path fill="url(#SVGID_13_)" d="M836.021-63.382c-0.91-1.563-1.91-2.714-2.998-3.454v-0.13c1.305-0.868,2.305-1.89,2.998-3.062
+	l8.342-11.145h-10.816l-7.949,11.208H822.6c0.303-1.781,0.456-3.736,0.456-5.865v-18.83h-2.991l-6.651,9.484v36.128h9.646v-10.1
+	c0-1.26-0.154-2.867-0.457-4.822h3.062l8.992,14.922h10.814L836.021-63.382z"/>
+<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="652.9258" y1="120.5371" x2="652.9258" y2="130.705" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#01649B"/>
+	<stop  offset="0.2355" style="stop-color:#03588B"/>
+	<stop  offset="0.507" style="stop-color:#004E7C"/>
+	<stop  offset="0.7167" style="stop-color:#004873"/>
+	<stop  offset="1" style="stop-color:#00446E"/>
+</linearGradient>
+<polygon fill="url(#SVGID_14_)" points="546.926,-97.068 537.874,-99.093 536.874,-95.354 546.926,-90.296 556.978,-95.354 
+	555.978,-99.093 "/>
+<polyline opacity="0.2" fill="#010202" enable-background="new    " points="546.926,-90.296 556.978,-95.354 555.978,-99.093 
+	546.926,-97.068 "/>
+<path fill="#034672" d="M542.008-77.588c3.396,1.261,6.662,1.55,9.833,0.396l-0.283-2.223c-2.647,0.82-6.324,0.744-9.518,0.075
+	L542.008-77.588z"/>
+<path fill="#034672" d="M546.653-77.941c-0.403,2.757,1.896,4.707,1.896,7.619C552.397-74.657,547.476-76.119,546.653-77.941z"/>
+<path fill="#034672" d="M546.606-77.754c-0.119,3.207-0.402,5.581-1.742,7.247C542.446-75.244,545.552-76.827,546.606-77.754z"/>
+<circle fill="#034672" cx="546.634" cy="-77.776" r="1.594"/>
+<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="663.6963" y1="172.3086" x2="663.6963" y2="172.3086" gradientTransform="matrix(1 0 0 1 -106 -219.5)">
+	<stop  offset="0" style="stop-color:#F6F6F6"/>
+	<stop  offset="0.5386" style="stop-color:#E4E4E3"/>
+	<stop  offset="1" style="stop-color:#DADADA"/>
+</linearGradient>
+<path fill="url(#SVGID_15_)" d="M557.696-47.191"/>
+<defs>
+	<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="545.96" y="-353.609" width="906.85" height="793.638">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="545.96" y="-353.609" width="906.85" height="793.638" id="SVGID_16_">
+	<g filter="url(#Adobe_OpacityMaskFilter)">
+		<polygon fill="#FFFFFF" points="1452.81,-170.972 636.18,-353.609 545.96,-16.261 1452.81,440.028 		"/>
+	</g>
+</mask>
+<linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="624.2432" y1="-457.793" x2="1695.7627" y2="582.4073">
+	<stop  offset="0" style="stop-color:#FFFFFF"/>
+	<stop  offset="1" style="stop-color:#000000"/>
+</linearGradient>
+<polygon opacity="0.04" mask="url(#SVGID_16_)" fill="url(#SVGID_17_)" points="1452.81,-170.972 636.18,-353.609 545.96,-16.261 
+	1452.81,440.028 "/>
+<defs>
+	<filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="-148.385" y="185.369" width="942.603" height="465.304">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="-148.385" y="185.369" width="942.603" height="465.304" id="SVGID_18_">
+	<g filter="url(#Adobe_OpacityMaskFilter_1_)">
+		<linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-10.3784" y1="93.8052" x2="353.6215" y2="493.8049">
+			<stop  offset="0" style="stop-color:#FFFFFF"/>
+			<stop  offset="1" style="stop-color:#000000"/>
+		</linearGradient>
+		<path fill="url(#SVGID_19_)" d="M-142.385,456.954c241.188-37.587,535.834,12.111,710.251,193.719L737.183,407.09
+			c-240.655-239.438-582.089-236.892-847.54-208.783L-142.385,456.954z"/>
+	</g>
+</mask>
+<path opacity="0.1" mask="url(#SVGID_18_)" fill="#010202" d="M-148.385,456.954c241.188-37.587,535.834,12.111,710.251,193.719
+	l232.352-172.074c-21.068-27.212-43.2-52.042-66.242-74.679C487.503,167.675,147.918,170.322-116.357,198.307L-148.385,456.954z"/>
+<defs>
+	<filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="-50.702" y="-58.489" width="287.402" height="1042.099">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="-50.702" y="-58.489" width="287.402" height="1042.099" id="SVGID_20_">
+	<g filter="url(#Adobe_OpacityMaskFilter_2_)">
+		<linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="150.8232" y1="980.0547" x2="44.8237" y2="580.0556">
+			<stop  offset="0" style="stop-color:#FFFFFF"/>
+			<stop  offset="1" style="stop-color:#000000"/>
+		</linearGradient>
+		<path opacity="0.1" fill="url(#SVGID_21_)" d="M87.395-16.937c0,163.962,24.356,750.233,149.306,1000.547l-287.402-6.396V-58.489
+			L87.395-16.937z"/>
+	</g>
+</mask>
+<path mask="url(#SVGID_20_)" fill="#010202" d="M87.395-16.937c0,163.962,24.356,750.233,149.306,1000.547l-287.402-6.396V-58.489
+	L87.395-16.937z"/>
+<defs>
+	
+		<filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="-72.785" y="-491.193" width="1622.238" height="1285.796">
+		<feFlood  style="flood-color:white;flood-opacity:1" result="back"/>
+		<feBlend  in="SourceGraphic" in2="back" mode="normal"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="-72.785" y="-491.193" width="1622.238" height="1285.796" id="SVGID_22_">
+	<g filter="url(#Adobe_OpacityMaskFilter_3_)">
+		<defs>
+			
+				<filter id="Adobe_OpacityMaskFilter_4_" filterUnits="userSpaceOnUse" x="-72.785" y="-491.193" width="1622.238" height="1285.089">
+				<feFlood  style="flood-color:white;flood-opacity:1" result="back"/>
+				<feBlend  in="SourceGraphic" in2="back" mode="normal"/>
+			</filter>
+		</defs>
+		<mask maskUnits="userSpaceOnUse" x="-72.785" y="-491.193" width="1622.238" height="1285.089" id="SVGID_22_">
+			<g filter="url(#Adobe_OpacityMaskFilter_4_)">
+			</g>
+		</mask>
+		<linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="814.3154" y1="328.0283" x2="2094.3154" y2="-719.9717">
+			<stop  offset="0" style="stop-color:#FFFFFF"/>
+			<stop  offset="1" style="stop-color:#000000"/>
+		</linearGradient>
+		<path mask="url(#SVGID_22_)" fill="url(#SVGID_23_)" d="M-72.785,410.758c848.81,35.016,1323.22-295.517,1502.614-901.951
+			c-4.743,181.709,37.787,453.373,93.752,548.953c47.774,81.209,23.788,158.081-26.479,241.24
+			C975.882,1160.862,493.92,627.783-29.659,661.768"/>
+	</g>
+</mask>
+<path opacity="0.02" fill="#FFFFFF" d="M-72.785,410.758c848.81,35.016,1323.22-295.517,1502.614-901.951
+	C1425.086-309.484,1467.616-36.58,1523.581,59c47.774,81.209,23.788,158.081-26.479,241.24
+	C975.882,1162.103,493.92,627.783-29.659,661.768"/>
+<defs>
+	
+		<filter id="Adobe_OpacityMaskFilter_5_" filterUnits="userSpaceOnUse" x="310.575" y="-10.889" width="1160.942" height="1025.949">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="310.575" y="-10.889" width="1160.942" height="1025.949" id="SVGID_24_">
+	<g filter="url(#Adobe_OpacityMaskFilter_5_)">
+		<linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="679.0371" y1="906.7842" x2="1525.0364" y2="270.7838">
+			<stop  offset="0" style="stop-color:#FFFFFF"/>
+			<stop  offset="1" style="stop-color:#000000"/>
+		</linearGradient>
+		<path opacity="0.06" fill="url(#SVGID_25_)" d="M1453.518,979.062l18-989.951h-442.43L310.575,1015.06L1453.518,979.062z"/>
+	</g>
+</mask>
+<path mask="url(#SVGID_24_)" fill="#010202" d="M1453.518,979.062l18-989.951h-442.43L310.575,1015.06L1453.518,979.062z"/>
+<defs>
+	<filter id="Adobe_OpacityMaskFilter_6_" filterUnits="userSpaceOnUse" x="-90.392" y="-409.996" width="841.456" height="736.356">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="-90.392" y="-409.996" width="841.456" height="736.356" id="SVGID_26_">
+	<g filter="url(#Adobe_OpacityMaskFilter_6_)">
+		<linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="258.9375" y1="-348.3218" x2="418.9364" y2="467.6746">
+			<stop  offset="0" style="stop-color:#FFFFFF"/>
+			<stop  offset="1" style="stop-color:#000000"/>
+		</linearGradient>
+		<path fill="url(#SVGID_27_)" d="M746.367-163.7c-72.229,10.651-98.964,78.571-50.732,125.772
+			c90.98,89.101,60.661,179.447-23.771,195.806c-108.654,20.943-167.397-74.289-289.375-28.11
+			c-34.924,13.221-61.272,57.631-55.681,97.377C343.71,348.214,196.545,386.71-87.566,178.743
+			c-28.532-20.897,168.378-588.739,168.378-588.739L746.367-163.7z"/>
+	</g>
+</mask>
+<path opacity="0.1" mask="url(#SVGID_26_)" d="M746.367-163.7c-72.229,10.651-98.964,78.571-50.732,125.772
+	c90.98,89.101,60.661,179.447-23.771,195.806c-108.654,20.943-167.397-74.289-289.375-28.11
+	c-34.924,13.221-61.272,57.631-55.681,97.377C343.71,348.214,196.545,386.71-87.566,178.743
+	c-28.532-20.897,168.378-588.739,168.378-588.739L746.367-163.7z"/>
+</svg>

server/pom.xml

@@ -113,6 +113,11 @@
             <artifactId>keycloak-admin-ui-styles</artifactId>
             <version>${project.version}</version>
         </dependency>
+        <dependency>
+            <groupId>org.keycloak</groupId>
+            <artifactId>keycloak-js-adapter</artifactId>
+            <version>${project.version}</version>
+        </dependency>
         <dependency>
             <groupId>junit</groupId>
             <artifactId>junit</artifactId>

testsuite/integration/pom.xml

@@ -61,6 +61,11 @@
             <artifactId>keycloak-model-jpa</artifactId>
             <version>${project.version}</version>
         </dependency>
+        <dependency>
+            <groupId>org.keycloak</groupId>
+            <artifactId>keycloak-js-adapter</artifactId>
+            <version>${project.version}</version>
+        </dependency>
         <!--
         <dependency>
             <groupId>org.keycloak</groupId>

testsuite/integration/src/main/java/org/keycloak/testutils/KeycloakServer.java

@@ -316,12 +316,12 @@ public class KeycloakServer {
                 return new URLResource(url, url.openConnection(), path);
             } else {
                 File file;
-                if (path.startsWith("/forms/")) {
-                    file = file(resourcesHome, "forms", "src", "main", "resources", "META-INF", "resources", path.replace('/', File.separatorChar));
-                } else if (path.startsWith("/admin/")) {
+                if (path.startsWith("/admin/")) {
                     file = file(resourcesHome, "admin-ui", "src", "main", "resources", "META-INF", "resources", path.replace('/', File.separatorChar));
                 } else if (path.startsWith("/admin-ui/")) {
                     file = file(resourcesHome, "admin-ui-styles", "src", "main", "resources", "META-INF", "resources", path.replace('/', File.separatorChar));
+                } else if (path.startsWith("/js/")) {
+                    file = file(resourcesHome, "integration", "js", "src", "main", "resources", "META-INF", "resources", path.replace('/', File.separatorChar));
                 } else {
                     throw new IOException("Unknown resource " + path);
                 }