keycloak-uncached

Changes

Details

diff --git a/themes/src/main/resources/theme/base/account/messages/messages_en.properties b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
index 73866cc..1398730 100755
--- a/themes/src/main/resources/theme/base/account/messages/messages_en.properties
+++ b/themes/src/main/resources/theme/base/account/messages/messages_en.properties
@@ -18,6 +18,7 @@ sessionsHtmlTitle=Sessions
 accountManagementTitle=Keycloak Account Management
 authenticatorTitle=Authenticator
 applicationsHtmlTitle=Applications
+linkedAccountsHtmlTitle=Linked Accounts
 
 accountManagementWelcomeMessage=Welcome to Keycloak Account Management
 personalInfoIntroMessage=Manage your basic information
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
index 37ad129..cddcee9 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
+++ b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
@@ -1,236 +1,237 @@
-<!DOCTYPE html>
-<html class="layout-pf-alt layout-pf-alt-fixed">
-    <head>
-        <title>${msg("accountManagementTitle")}</title>
-
-        <meta charset="UTF-8">
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-        <meta name="robots" content="noindex, nofollow">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-
-        <script>
-            var authUrl = '${authUrl}';
-            var baseUrl = '${baseUrl}';
-            var realm = '${realm.name}';
-            var resourceUrl = '${resourceUrl}';
-            var isRegistrationEmailAsUsername = ${realm.registrationEmailAsUsername?c};
-            var isEditUserNameAllowed = ${realm.editUsernameAllowed?c};
-            var isInternationalizationEnabled = ${realm.internationalizationEnabled?c};
-
-            var availableLocales = [];
-            <#list supportedLocales as locale, label>
-                availableLocales.push({locale : '${locale}', label : '${label}'});
-            </#list>
-
-            <#if referrer??>
-                var referrer = '${referrer}';
-                var referrer_uri = '${referrer_uri}';
-            </#if>
-
-            <#if msg??>
-                var locale = '${locale}';
-                var l18n_msg = JSON.parse('${msgJSON?no_esc}');
-            <#else>
-                var locale = 'en';
-                var l18n_msg = {};
-            </#if>
-        </script>
-
-        <base href="${baseUrl}/">
-
-        <link rel="icon" href="${resourceUrl}/app/assets/img/favicon.ico" type="image/x-icon"/>
-
-        <!-- PatternFly -->
-        <!-- iPad retina icon -->
-        <link rel="apple-touch-icon-precomposed" sizes="152x152"
-              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-152.png">
-        <!-- iPad retina icon (iOS < 7) -->
-        <link rel="apple-touch-icon-precomposed" sizes="144x144"
-              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-144.png">
-        <!-- iPad non-retina icon -->
-        <link rel="apple-touch-icon-precomposed" sizes="76x76"
-              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-76.png">
-        <!-- iPad non-retina icon (iOS < 7) -->
-        <link rel="apple-touch-icon-precomposed" sizes="72x72"
-              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-72.png">
-        <!-- iPhone 6 Plus icon -->
-        <link rel="apple-touch-icon-precomposed" sizes="120x120"
-              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-180.png">
-        <!-- iPhone retina icon (iOS < 7) -->
-        <link rel="apple-touch-icon-precomposed" sizes="114x114"
-              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-114.png">
-        <!-- iPhone non-retina icon (iOS < 7) -->
-        <link rel="apple-touch-icon-precomposed" sizes="57x57"
-              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-57.png">
-        <link href="${resourceUrl}/node_modules/patternfly/dist/css/patternfly.min.css" rel="stylesheet"
-              media="screen, print">
-        <link href="${resourceUrl}/node_modules/patternfly/dist/css/patternfly-additions.min.css" rel="stylesheet"
-              media="screen, print">
-
-        <script src="${resourceUrl}/node_modules/jquery/dist/jquery.min.js"></script>
-        <script src="${resourceUrl}/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
-        <script src="${resourceUrl}/node_modules/patternfly/dist/js/patternfly.min.js"></script>
-        <script src="${authUrl}/js/keycloak.js"></script>
-
-   <!-- TODO: We should save these css and js into variables and then load in
-        main.ts for better performance.  These might be loaded twice.
-        -->
-        <#if properties.styles?has_content>
-            <#list properties.styles?split(' ') as style>
-            <link href="${resourceUrl}/${style}" rel="stylesheet"/>
-            </#list>
-            <a href="../../../../../../../../keycloak-quickstarts/app-profile-jee-html5/src/main/webapp/index.html"></a>
-        </#if>
-
-        <#if properties.scripts?has_content>
-            <#list properties.scripts?split(' ') as script>
-        <script type="text/javascript" src="${resourceUrl}/${script}"></script>
-            </#list>
-        </#if>
-    </head>
-
-    <body>
-
-        <script>
-            var keycloak = Keycloak('${authUrl}/realms/${realm.name}/account/keycloak.json');
-            var loadjs = function (url,loadListener) {
-                    const script = document.createElement("script");
-                    script.src = resourceUrl + url;
-                    if (loadListener) script.addEventListener("load", loadListener);
-                    document.head.appendChild(script);
-                };
-            keycloak.init({onLoad: 'check-sso'}).success(function(authenticated) {
-                loadjs("/node_modules/core-js/client/shim.min.js", function(){
-                    loadjs("/node_modules/zone.js/dist/zone.min.js");
-                    loadjs("/node_modules/systemjs/dist/system.src.js", function() {
-                        loadjs("/systemjs.config.js");
-                        System.import('${resourceUrl}/main.js').catch(function (err) {
-                            console.error(err);
-                        });
-                        if (!keycloak.authenticated) document.getElementById("signInButton").style.visibility='visible';
-                    });
-                });
-            }).error(function() {
-                alert('failed to initialize keycloak');
-            });
-        </script>
-
-
-<!-- Top Navigation -->
-        <nav class="navbar navbar-pf-alt">
-
-            <div class="navbar-header">
-                <a href="http://www.keycloak.org" class="navbar-brand">
-                    <img class="navbar-brand-icon" type="image/svg+xml" src="${resourceUrl}/app/assets/img/keycloak-logo-min.png" alt="" width="auto" height="30px"/>
-                </a>
-            </div>
-            <nav class="collapse navbar-collapse">
-                <ul class="nav navbar-nav">
-                </ul>
-
-                <!-- This sign in button is only displayed in the rare case where we go directly to this page and we aren't logged in.
-                     Note javascript code above that changes its visibility for that case.  Also, because we are not logged in
-                     we are unable to localize the button's message.  Not sure what to do about that yet.
-                -->
-                <ul class="nav navbar-nav navbar-right navbar-iconic">
-                    <li><button id="signInButton" style="visibility:hidden" onclick="keycloak.login();" class="btn btn-primary btn-lg btn-sign" type="button">${msg("doLogIn")}</button></li>
-                    <#if realm.internationalizationEnabled  && supportedLocales?size gt 1>
-                        <li class="dropdown">
-                          <a href="#0" class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            ${msg("locale_" + locale)} <span class="caret"></span>
-                          </a>
-                          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-                          <#list supportedLocales as locale, label>
-                            <li><a href="${baseUrl}/?kc_locale=${locale}">${label}</a></li>
-                          </#list>
-                          </ul>
-                        </li>
-                    </#if>
-                </ul>
-            </nav>
-        </nav>
-
-<!--Top Nav -->
-
-<!-- Home Page -->
-
-    <div class="cards-pf" id="welcomeScreen">
-        <div class="text-center">
-          <h1>${msg("accountManagementWelcomeMessage")}</h1>
-        </div>
-        <div class="container-fluid container-cards-pf">
-            <div class="row row-cards-pf">
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
-                    <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
-                        <div class="card-pf-body text-center row">
-                            <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
-                                <span class="fa pficon-user card-pf-icon-circle"></span>
-                            </div>
-                            <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
-                              <h2>${msg("personalInfoHtmlTitle")}</h2>
-                              <p class="card-pf-content-intro">${msg("personalInfoIntroMessage")}</p>
-                              <h3><a href="${baseUrl}/#/account">${msg("personalInfoHtmlTitle")}</a></h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
-                    <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
-                        <div class="card-pf-body text-center row">
-                            <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
-                                <span class="fa fa-shield card-pf-icon-circle"></span>
-                            </div>
-                            <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
-                              <h2>${msg("accountSecurityTitle")}</h2>
-                              <p class="card-pf-content-intro">${msg("accountSecurityIntroMessage")}</p>
-                              <h3><a href="${baseUrl}/#/password">${msg("changePasswordHtmlTitle")}</a></h3>
-                              <h3><a href="${baseUrl}/#/authenticator">${msg("authenticatorTitle")}</a></h3>
-                              <h3><a href="${baseUrl}/#/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
-                              <h3><a href="${baseUrl}/#/account">${msg("federatedIdentity")}</a></h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
-                    <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
-                        <div class="card-pf-body text-center row">
-                            <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
-                                <span class="fa fa-th card-pf-icon-circle"></span>
-                            </div>
-                            <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
-                              <h2>${msg("applicationsHtmlTitle")}</h2>
-                              <p class="card-pf-content-intro">${msg("applicationsIntroMessage")}</p>
-                              <h3><a href="${baseUrl}/#/applications">${msg("applicationsHtmlTitle")}</a></h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
-                    <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
-                        <div class="card-pf-body text-center row">
-                            <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
-                                <span class="fa pficon-repository card-pf-icon-circle"></span>
-                            </div>
-                            <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
-                              <h2>${msg("myResources")}</h2>
-                              <p class="card-pf-content-intro">${msg("resourceIntroMessage")}</p>
-                              <h3><a href="${baseUrl}/#/account">${msg("myResources")}</a></h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </div>
-
-        <script>
-            var winHash = window.location.hash;
-            if ((winHash.indexOf('#/') == 0) && (!winHash.indexOf('#/&state') == 0)) {
-                document.getElementById("welcomeScreen").style.display='none';
-            }
-        </script>
-
-        <app-root></app-root>
-    </body>
-</html>
+<!DOCTYPE html>
+<html class="layout-pf-alt layout-pf-alt-fixed">
+    <head>
+        <title>${msg("accountManagementTitle")}</title>
+
+        <meta charset="UTF-8">
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+        <meta name="robots" content="noindex, nofollow">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <script>
+            var authUrl = '${authUrl}';
+            var baseUrl = '${baseUrl}';
+            var realm = '${realm.name}';
+            var resourceUrl = '${resourceUrl}';
+            var isRegistrationEmailAsUsername = ${realm.registrationEmailAsUsername?c};
+            var isEditUserNameAllowed = ${realm.editUsernameAllowed?c};
+            var isInternationalizationEnabled = ${realm.internationalizationEnabled?c};
+
+            var availableLocales = [];
+            <#list supportedLocales as locale, label>
+                availableLocales.push({locale : '${locale}', label : '${label}'});
+            </#list>
+
+            <#if referrer??>
+                var referrer = '${referrer}';
+                var referrer_uri = '${referrer_uri}';
+            </#if>
+
+            <#if msg??>
+                var locale = '${locale}';
+                var l18n_msg = JSON.parse('${msgJSON?no_esc}');
+            <#else>
+                var locale = 'en';
+                var l18n_msg = {};
+            </#if>
+        </script>
+
+        <base href="${baseUrl}/">
+
+        <link rel="icon" href="${resourceUrl}/app/assets/img/favicon.ico" type="image/x-icon"/>
+
+        <!-- PatternFly -->
+        <!-- iPad retina icon -->
+        <link rel="apple-touch-icon-precomposed" sizes="152x152"
+              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-152.png">
+        <!-- iPad retina icon (iOS < 7) -->
+        <link rel="apple-touch-icon-precomposed" sizes="144x144"
+              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-144.png">
+        <!-- iPad non-retina icon -->
+        <link rel="apple-touch-icon-precomposed" sizes="76x76"
+              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-76.png">
+        <!-- iPad non-retina icon (iOS < 7) -->
+        <link rel="apple-touch-icon-precomposed" sizes="72x72"
+              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-72.png">
+        <!-- iPhone 6 Plus icon -->
+        <link rel="apple-touch-icon-precomposed" sizes="120x120"
+              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-180.png">
+        <!-- iPhone retina icon (iOS < 7) -->
+        <link rel="apple-touch-icon-precomposed" sizes="114x114"
+              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-114.png">
+        <!-- iPhone non-retina icon (iOS < 7) -->
+        <link rel="apple-touch-icon-precomposed" sizes="57x57"
+              href="${resourceUrl}/node_modules/patternfly/dist/img/apple-touch-icon-precomposed-57.png">
+        <link href="${resourceUrl}/node_modules/patternfly/dist/css/patternfly.min.css" rel="stylesheet"
+              media="screen, print">
+        <link href="${resourceUrl}/node_modules/patternfly/dist/css/patternfly-additions.min.css" rel="stylesheet"
+              media="screen, print">
+        <link rel="stylesheet" href="${resourceUrl}/node_modules/patternfly-ng/dist/css/patternfly-ng.min.css" media="screen, print">
+
+        <script src="${resourceUrl}/node_modules/jquery/dist/jquery.min.js"></script>
+        <script src="${resourceUrl}/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
+        <script src="${resourceUrl}/node_modules/patternfly/dist/js/patternfly.min.js"></script>
+        <script src="${authUrl}/js/keycloak.js"></script>
+
+   <!-- TODO: We should save these css and js into variables and then load in
+        main.ts for better performance.  These might be loaded twice.
+        -->
+        <#if properties.styles?has_content>
+            <#list properties.styles?split(' ') as style>
+            <link href="${resourceUrl}/${style}" rel="stylesheet"/>
+            </#list>
+            <a href="../../../../../../../../keycloak-quickstarts/app-profile-jee-html5/src/main/webapp/index.html"></a>
+        </#if>
+
+        <#if properties.scripts?has_content>
+            <#list properties.scripts?split(' ') as script>
+        <script type="text/javascript" src="${resourceUrl}/${script}"></script>
+            </#list>
+        </#if>
+    </head>
+
+    <body>
+
+        <script>
+            var keycloak = Keycloak('${authUrl}/realms/${realm.name}/account/keycloak.json');
+            var loadjs = function (url,loadListener) {
+                    const script = document.createElement("script");
+                    script.src = resourceUrl + url;
+                    if (loadListener) script.addEventListener("load", loadListener);
+                    document.head.appendChild(script);
+                };
+            keycloak.init({onLoad: 'check-sso'}).success(function(authenticated) {
+                loadjs("/node_modules/core-js/client/shim.min.js", function(){
+                    loadjs("/node_modules/zone.js/dist/zone.min.js");
+                    loadjs("/node_modules/systemjs/dist/system.src.js", function() {
+                        loadjs("/systemjs.config.js");
+                        System.import('${resourceUrl}/main.js').catch(function (err) {
+                            console.error(err);
+                        });
+                        if (!keycloak.authenticated) document.getElementById("signInButton").style.visibility='visible';
+                    });
+                });
+            }).error(function() {
+                alert('failed to initialize keycloak');
+            });
+        </script>
+
+
+<!-- Top Navigation -->
+        <nav class="navbar navbar-pf-alt">
+
+            <div class="navbar-header">
+                <a href="http://www.keycloak.org" class="navbar-brand">
+                    <img class="navbar-brand-icon" type="image/svg+xml" src="${resourceUrl}/app/assets/img/keycloak-logo-min.png" alt="" width="auto" height="30px"/>
+                </a>
+            </div>
+            <nav class="collapse navbar-collapse">
+                <ul class="nav navbar-nav">
+                </ul>
+
+                <!-- This sign in button is only displayed in the rare case where we go directly to this page and we aren't logged in.
+                     Note javascript code above that changes its visibility for that case.  Also, because we are not logged in
+                     we are unable to localize the button's message.  Not sure what to do about that yet.
+                -->
+                <ul class="nav navbar-nav navbar-right navbar-iconic">
+                    <li><button id="signInButton" style="visibility:hidden" onclick="keycloak.login();" class="btn btn-primary btn-lg btn-sign" type="button">${msg("doLogIn")}</button></li>
+                    <#if realm.internationalizationEnabled  && supportedLocales?size gt 1>
+                        <li class="dropdown">
+                          <a href="#0" class="dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            ${msg("locale_" + locale)} <span class="caret"></span>
+                          </a>
+                          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                          <#list supportedLocales as locale, label>
+                            <li><a href="${baseUrl}/?kc_locale=${locale}">${label}</a></li>
+                          </#list>
+                          </ul>
+                        </li>
+                    </#if>
+                </ul>
+            </nav>
+        </nav>
+
+<!--Top Nav -->
+
+<!-- Home Page -->
+
+    <div class="cards-pf" id="welcomeScreen">
+        <div class="text-center">
+          <h1>${msg("accountManagementWelcomeMessage")}</h1>
+        </div>
+        <div class="container-fluid container-cards-pf">
+            <div class="row row-cards-pf">
+                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
+                    <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
+                        <div class="card-pf-body text-center row">
+                            <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
+                                <span class="fa pficon-user card-pf-icon-circle"></span>
+                            </div>
+                            <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
+                              <h2>${msg("personalInfoHtmlTitle")}</h2>
+                              <p class="card-pf-content-intro">${msg("personalInfoIntroMessage")}</p>
+                              <h3><a href="${baseUrl}/#/account">${msg("personalInfoHtmlTitle")}</a></h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
+                    <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
+                        <div class="card-pf-body text-center row">
+                            <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
+                                <span class="fa fa-shield card-pf-icon-circle"></span>
+                            </div>
+                            <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
+                              <h2>${msg("accountSecurityTitle")}</h2>
+                              <p class="card-pf-content-intro">${msg("accountSecurityIntroMessage")}</p>
+                              <h3><a href="${baseUrl}/#/password">${msg("changePasswordHtmlTitle")}</a></h3>
+                              <h3><a href="${baseUrl}/#/authenticator">${msg("authenticatorTitle")}</a></h3>
+                              <h3><a href="${baseUrl}/#/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
+                              <h3><a href="${baseUrl}/#/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
+                    <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
+                        <div class="card-pf-body text-center row">
+                            <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
+                                <span class="fa fa-th card-pf-icon-circle"></span>
+                            </div>
+                            <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
+                              <h2>${msg("applicationsHtmlTitle")}</h2>
+                              <p class="card-pf-content-intro">${msg("applicationsIntroMessage")}</p>
+                              <h3><a href="${baseUrl}/#/applications">${msg("applicationsHtmlTitle")}</a></h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3">
+                    <div class="card-pf card-pf-view card-pf-view-select card-pf-view-single-select">
+                        <div class="card-pf-body text-center row">
+                            <div class="card-pf-top-element col-xs-2 col-sm-12 col-md-12 col-lg-12">
+                                <span class="fa pficon-repository card-pf-icon-circle"></span>
+                            </div>
+                            <div class="card-pf-content col-xs-10 col-sm-12 col-md-12 col-lg-12">
+                              <h2>${msg("myResources")}</h2>
+                              <p class="card-pf-content-intro">${msg("resourceIntroMessage")}</p>
+                              <h3><a href="${baseUrl}/#/my-resources">${msg("myResources")}</a></h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+
+        <script>
+            var winHash = window.location.hash;
+            if ((winHash.indexOf('#/') == 0) && (!winHash.indexOf('#/&state') == 0)) {
+                document.getElementById("welcomeScreen").style.display='none';
+            }
+        </script>
+
+        <app-root></app-root>
+    </body>
+</html>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app.component.html
index cd1e829..61fabe0 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app.component.html
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app.component.html
@@ -1,11 +1,14 @@
-<div *ngIf="kcService.authenticated()">
+<!--<div *ngIf="kcService.authenticated()">
     <app-top-nav [showSideNav]="showSideNav"></app-top-nav>
 </div>
 
 <app-side-nav *ngIf="showSideNav"></app-side-nav>
 
 
-<div class="container-fluid container-pf-alt-nav-pf-vertical-alt {{this.contentWidthClass}}"> <!-- collapsed-nav hidden-nav -->
+<div class="container-fluid container-pf-alt-nav-pf-vertical-alt {{this.contentWidthClass}}"> <!-- collapsed-nav hidden-nav 
 
     <router-outlet></router-outlet>
-</div>
\ No newline at end of file
+</div>-->
+
+
+<vertical-nav *ngIf="showSideNav"></vertical-nav>
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app.module.ts
index 3aec819..3391ed7 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app.module.ts
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app.module.ts
@@ -1,78 +1,83 @@
-/*
- * Copyright 2017 Red Hat, Inc. and/or its affiliates
- * and other contributors as indicated by the @author tags.
- *
- * 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
- *
- * http://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.
- */
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
-import { RouterModule, Routes } from '@angular/router';
-import { LocationStrategy, HashLocationStrategy } from '@angular/common';
-
-import { TranslateLoader } from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { KeycloakService } from './keycloak-service/keycloak.service';
-import { KEYCLOAK_HTTP_PROVIDER } from './keycloak-service/keycloak.http';
-import {KeycloakGuard} from './keycloak-service/keycloak.guard';
-
-import {ResponsivenessService} from './responsiveness-service/responsiveness.service'
-
-import { AccountServiceClient } from './account-service/account.service';
-import {TranslateUtil} from './ngx-translate/translate.util';
-
-import { DeclaredVarTranslateLoader } from './ngx-translate/declared.var.translate.loader';
-import { AppComponent } from './app.component';
-import { TopNavComponent } from './top-nav/top-nav.component';
-import { NotificationComponent } from './top-nav/notification.component';
-import { ToastNotifier } from './top-nav/toast.notifier';
-import { SideNavComponent } from './side-nav/side-nav.component';
-
-/* Routing Module */
-import { AppRoutingModule } from './app-routing.module';
-
-const decs = [
-    AppComponent,
-    TopNavComponent,
-    NotificationComponent,
-    SideNavComponent,
-];
-
-export const ORIGINAL_INCOMING_URL: Location = window.location;
-
-@NgModule({
-  declarations: decs,
-  imports: [
-    BrowserModule,
-    FormsModule,
-    HttpModule,
-    TranslateModule.forRoot({
-        loader: {provide: TranslateLoader, useClass: DeclaredVarTranslateLoader}
-    }),
-    AppRoutingModule,
-  ],
-  providers: [
-    KeycloakService,
-    KeycloakGuard,
-    KEYCLOAK_HTTP_PROVIDER,
-    ResponsivenessService,
-    AccountServiceClient,
-    TranslateUtil,
-    ToastNotifier,
-    { provide: LocationStrategy, useClass: HashLocationStrategy }
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+/*
+ * Copyright 2017 Red Hat, Inc. and/or its affiliates
+ * and other contributors as indicated by the @author tags.
+ *
+ * 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
+ *
+ * http://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.
+ */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule, Routes } from '@angular/router';
+import { LocationStrategy, HashLocationStrategy } from '@angular/common';
+
+import { TranslateLoader } from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { KeycloakService } from './keycloak-service/keycloak.service';
+import { KEYCLOAK_HTTP_PROVIDER } from './keycloak-service/keycloak.http';
+import {KeycloakGuard} from './keycloak-service/keycloak.guard';
+
+import {ResponsivenessService} from './responsiveness-service/responsiveness.service'
+
+import { AccountServiceClient } from './account-service/account.service';
+import {TranslateUtil} from './ngx-translate/translate.util';
+
+import { DeclaredVarTranslateLoader } from './ngx-translate/declared.var.translate.loader';
+import { AppComponent } from './app.component';
+import { TopNavComponent } from './top-nav/top-nav.component';
+import { NotificationComponent } from './top-nav/notification.component';
+import { ToastNotifier } from './top-nav/toast.notifier';
+import { SideNavComponent } from './side-nav/side-nav.component';
+import {VerticalNavComponent} from './vertical-nav/vertical-nav.component';
+
+import { NavigationModule } from 'patternfly-ng/navigation';
+
+/* Routing Module */
+import { AppRoutingModule } from './app-routing.module';
+
+const decs = [
+    AppComponent,
+    TopNavComponent,
+    NotificationComponent,
+    SideNavComponent,
+    VerticalNavComponent,
+];
+
+export const ORIGINAL_INCOMING_URL: Location = window.location;
+
+@NgModule({
+  declarations: decs,
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    NavigationModule,
+    TranslateModule.forRoot({
+        loader: {provide: TranslateLoader, useClass: DeclaredVarTranslateLoader}
+    }),
+    AppRoutingModule,
+  ],
+  providers: [
+    KeycloakService,
+    KeycloakGuard,
+    KEYCLOAK_HTTP_PROVIDER,
+    ResponsivenessService,
+    AccountServiceClient,
+    TranslateUtil,
+    ToastNotifier,
+    { provide: LocationStrategy, useClass: HashLocationStrategy }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app-routing.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app-routing.module.ts
index 792c48a..1753028 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app-routing.module.ts
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/app-routing.module.ts
@@ -1,45 +1,47 @@
-/*
- * Copyright 2018 Red Hat, Inc. and/or its affiliates
- * and other contributors as indicated by the @author tags.
- *
- * 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
- *
- * http://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.
- */
-import { NgModule }             from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import {KeycloakGuard} from './keycloak-service/keycloak.guard';
-
-import { HomePageComponent } from './content/home-page/home-page.component';
-
-declare const resourceUrl: string;
-
-export const routes: Routes = [
-        {path: '', canActivateChild:[KeycloakGuard], children: [
-            { path: 'account', loadChildren: resourceUrl + '/app/content/account-page/account.module.js#AccountModule' },
-            { path: 'password', loadChildren: resourceUrl + '/app/content/password-page/password.module.js#PasswordModule' },
-            { path: 'authenticator', loadChildren: resourceUrl + '/app/content/authenticator-page/authenticator.module.js#AuthenticatorModule' },
-            { path: 'device-activity', loadChildren: resourceUrl + '/app/content/device-activity-page/device-activity.module.js#DeviceActivityModule' },
-            { path: 'sessions', loadChildren: resourceUrl + '/app/content/sessions-page/sessions.module.js#SessionsModule' },
-            { path: 'applications', loadChildren: resourceUrl + '/app/content/applications-page/applications.module.js#ApplicationsModule' },
-            { path: ':**', loadChildren: resourceUrl + '/app/content/page-not-found/page-not-found.module.js#PageNotFoundModule' },
-            ]
-        }
-    ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-  declarations: [HomePageComponent]
-})
-export class AppRoutingModule {}
-
+/*
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates
+ * and other contributors as indicated by the @author tags.
+ *
+ * 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
+ *
+ * http://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.
+ */
+import { NgModule }             from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import {KeycloakGuard} from './keycloak-service/keycloak.guard';
+
+import { HomePageComponent } from './content/home-page/home-page.component';
+
+declare const resourceUrl: string;
+
+export const routes: Routes = [
+        {path: '', canActivateChild:[KeycloakGuard], children: [
+            { path: 'account', loadChildren: resourceUrl + '/app/content/account-page/account.module.js#AccountModule' },
+            { path: 'password', loadChildren: resourceUrl + '/app/content/password-page/password.module.js#PasswordModule' },
+            { path: 'authenticator', loadChildren: resourceUrl + '/app/content/authenticator-page/authenticator.module.js#AuthenticatorModule' },
+            { path: 'device-activity', loadChildren: resourceUrl + '/app/content/device-activity-page/device-activity.module.js#DeviceActivityModule' },
+            { path: 'sessions', loadChildren: resourceUrl + '/app/content/sessions-page/sessions.module.js#SessionsModule' },
+            { path: 'applications', loadChildren: resourceUrl + '/app/content/applications-page/applications.module.js#ApplicationsModule' },
+            { path: 'linked-accounts', loadChildren: resourceUrl + '/app/content/linked-accounts-page/linked-accounts.module.js#LinkedAccountsModule' },
+            { path: 'my-resources', loadChildren: resourceUrl + '/app/content/my-resources-page/my-resources.module.js#MyResourcesModule' },
+            { path: ':**', loadChildren: resourceUrl + '/app/content/page-not-found/page-not-found.module.js#PageNotFoundModule' },
+            ]
+        }
+    ];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+  declarations: [HomePageComponent]
+})
+export class AppRoutingModule {}
+
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts.module.ts
new file mode 100644
index 0000000..7ae52f5
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts.module.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates
+ * and other contributors as indicated by the @author tags.
+ *
+ * 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
+ *
+ * http://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.
+ */
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { LinkedAccountsPageComponent } from './linked-accounts-page.component';
+import { LinkedAccountsRoutingModule } from './linked-accounts-routing.module';
+
+@NgModule({
+  imports:      [ CommonModule, FormsModule, TranslateModule, LinkedAccountsRoutingModule ],
+  declarations: [ LinkedAccountsPageComponent ],
+  providers:    [ ]
+})
+export class LinkedAccountsModule {}
+
+
+
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.css
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
new file mode 100644
index 0000000..d86e441
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
@@ -0,0 +1 @@
+<h1>Placeholder for Linked Accounts Page (formerly known as Federated Identity)</h1>
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.ts
new file mode 100644
index 0000000..184e14b
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates
+ * and other contributors as indicated by the @author tags.
+ *
+ * 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
+ *
+ * http://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.
+ */
+import {Component, OnInit} from '@angular/core';
+
+
+@Component({
+    selector: 'app-linked-accounts-page',
+    templateUrl: './linked-accounts-page.component.html',
+    styleUrls: ['./linked-accounts-page.component.css']
+})
+export class LinkedAccountsPageComponent implements OnInit {
+
+    constructor() {
+    }
+    
+    ngOnInit() {
+    }
+}
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-routing.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-routing.module.ts
new file mode 100644
index 0000000..eaa36b5
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-routing.module.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates
+ * and other contributors as indicated by the @author tags.
+ *
+ * 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
+ *
+ * http://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.
+ */
+import { NgModule }             from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LinkedAccountsPageComponent } from './linked-accounts-page.component';
+
+const routes: Routes = [
+    { path: '**', component: LinkedAccountsPageComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LinkedAccountsRoutingModule {}
+
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources.module.ts
new file mode 100644
index 0000000..11f1e27
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources.module.ts
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates
+ * and other contributors as indicated by the @author tags.
+ *
+ * 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
+ *
+ * http://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.
+ */
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+import { MyResourcesPageComponent } from './my-resources-page.component';
+import { MyResourcesRoutingModule } from './my-resources-routing.module';
+
+@NgModule({
+  imports:      [ CommonModule, FormsModule, TranslateModule, MyResourcesRoutingModule ],
+  declarations: [ MyResourcesPageComponent ],
+  providers:    [ ]
+})
+export class MyResourcesModule {}
+
+
+
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.css
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.html
new file mode 100644
index 0000000..e1d9ed9
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.html
@@ -0,0 +1 @@
+<h1>Placeholder for My Resources Page</h1>
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.ts
new file mode 100644
index 0000000..208b850
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-page.component.ts
@@ -0,0 +1,32 @@
+/*
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates
+ * and other contributors as indicated by the @author tags.
+ *
+ * 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
+ *
+ * http://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.
+ */
+import {Component, OnInit} from '@angular/core';
+
+
+@Component({
+    selector: 'app-my-resources-page',
+    templateUrl: './my-resources-page.component.html',
+    styleUrls: ['./my-resources-page.component.css']
+})
+export class MyResourcesPageComponent implements OnInit {
+
+    constructor() {
+    }
+    
+    ngOnInit() {
+    }
+}
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-routing.module.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-routing.module.ts
new file mode 100644
index 0000000..2e4bcf2
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/my-resources-routing.module.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates
+ * and other contributors as indicated by the @author tags.
+ *
+ * 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
+ *
+ * http://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.
+ */
+import { NgModule }             from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { MyResourcesPageComponent } from './my-resources-page.component';
+
+const routes: Routes = [
+    { path: '**', component: MyResourcesPageComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MyResourcesRoutingModule {}
+
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/side-nav/side-nav.component.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/side-nav/side-nav.component.ts
index df0577c..3ccca2e 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/side-nav/side-nav.component.ts
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/side-nav/side-nav.component.ts
@@ -25,6 +25,8 @@ import {ResponsivenessService, SideNavClasses, MenuClickListener} from "../respo
 import {Media} from "../responsiveness-service/media";
 import {Referrer} from "../page/referrer";
 
+declare const baseUrl: string;
+
 @Component({
     selector: 'app-side-nav',
     templateUrl: './side-nav.component.html',
@@ -80,7 +82,7 @@ export class SideNavComponent implements OnInit, MenuClickListener {
     }
     
     private logout() {
-        this.keycloakService.logout();
+        this.keycloakService.logout(baseUrl);
     }
 
     public menuClicked(): void {
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.css
new file mode 100644
index 0000000..18a4765
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.css
@@ -0,0 +1,29 @@
+.faux-layout {
+    position: fixed;
+    top: 37px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #f5f5f5;
+    padding-top: 15px;
+    z-index: 1100;
+}
+.example-page-container.container-fluid {
+    position: fixed;
+    top: 37px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #f5f5f5;
+    padding-top: 15px;
+}
+
+.hide-vertical-nav {
+    margin-top: 15px;
+    margin-left: 30px;
+}
+
+.navbar-brand-txt {
+    line-height: 34px;
+}
+
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.html b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.html
new file mode 100644
index 0000000..f6548e0
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.html
@@ -0,0 +1,50 @@
+<div id="verticalNavLayout" class="layout-pf layout-pf-fixed faux-layout" style="background-color: white;">
+    <pfng-vertical-navigation
+        #pfVerticalNav
+        [brandSrc]="resourceUrl + '/app/assets/img/keycloak-logo-min.png'"
+        [contentContainer]="contentContainer"
+        [items]="navigationItems"
+        [persistentSecondary]="false"
+        [pinnableMenus]="true"
+        [showBadges]="true"
+        [showIcons]="true"
+        [updateActiveItemsOnClick]="true"
+        (onItemClickEvent)="onItemClicked($event)">
+
+        <div>
+            <ul class="nav navbar-nav navbar-right navbar-iconic">
+                <li *ngIf="referrer.exists()">
+                    <a class="nav-item-iconic" href="{{referrer.getUri()}}"><span class="pficon-arrow"></span> {{'backTo' | translate:referrer.getName()}}</a>
+                </li>
+                <li class="dropdown" >
+                    <a class="dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                        <span title="Username" class="fa pficon-user"></span>
+                        <span class="caret"></span>
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
+                        <li><a href="#" (click)="logout()">{{'doSignOut' | translate}}</a></li>
+                        <li *ngIf="isShowLocales()" class="dropdown-submenu pull-left">
+                            <a class="test" tabindex="-1" href="#">Change language</a>
+                            <ul class="dropdown-menu">
+                                <li *ngFor="let locale of availableLocales" (click)="changeLocale(locale.locale)"><a tabindex="-1" href="#">{{ locale.label }}</a></li>
+                            </ul>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </div>
+    </pfng-vertical-navigation>
+
+
+
+    <div #contentContainer
+        class="container-fluid container-cards-pf container-pf-nav-pf-vertical example-page-container nav-pf-vertical-with-badges"
+        style="background-color: white;">
+        <div class="row">
+            <div class="col-sm-12">
+                <router-outlet></router-outlet>
+            </div>
+        </div>
+    </div>
+
+</div>
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.ts b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.ts
new file mode 100644
index 0000000..b70f236
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/vertical-nav/vertical-nav.component.ts
@@ -0,0 +1,97 @@
+import {Component, OnInit, ViewEncapsulation, ViewChild} from '@angular/core';
+import {NavigationItemConfig, VerticalNavigationComponent} from 'patternfly-ng/navigation';
+import {TranslateUtil} from '../ngx-translate/translate.util';
+import {KeycloakService} from '../keycloak-service/keycloak.service';
+import {Referrer} from "../page/referrer";
+
+declare const baseUrl: string;
+declare const resourceUrl: string;
+declare const isInternationalizationEnabled: boolean;
+declare const availableLocales: Array<Object>;
+
+@Component({
+    encapsulation: ViewEncapsulation.None,
+    selector: 'vertical-nav',
+    styleUrls: ['./vertical-nav.component.css'],
+    templateUrl: './vertical-nav.component.html'
+})
+export class VerticalNavComponent implements OnInit {
+    @ViewChild('pfVerticalNav') pfVerticalNav: VerticalNavigationComponent;
+
+    public resourceUrl: string = resourceUrl;
+    public availableLocales: Array<Object> = availableLocales;
+
+    private referrer: Referrer;
+
+    navigationItems: NavigationItemConfig[];
+
+    constructor(private keycloakService: KeycloakService,
+                private translateUtil: TranslateUtil, ) {
+        this.referrer = new Referrer(translateUtil);
+    }
+
+    ngOnInit(): void {
+        this.navigationItems = [
+            {
+                title: this.translateUtil.translate('personalInfoHtmlTitle'),
+                iconStyleClass: 'pficon pficon-user',
+                url: 'account',
+                mobileItem: false
+            },
+            {
+                title: this.translateUtil.translate('accountSecurityTitle'),
+                iconStyleClass: 'fa fa-shield',
+                children: [
+                    {
+                        title: this.translateUtil.translate('changePasswordHtmlTitle'),
+                        iconStyleClass: 'fa fa-shield',
+                        url: 'password',
+                    },
+                    {
+                        title: this.translateUtil.translate('authenticatorTitle'),
+                        iconStyleClass: 'fa fa-shield',
+                        url: 'authenticator',
+                    },
+                    {
+                        title: this.translateUtil.translate('device-activity'),
+                        iconStyleClass: 'fa fa-shield',
+                        url: 'device-activity',
+                    },
+                    {
+                        title: this.translateUtil.translate('linkedAccountsHtmlTitle'),
+                        iconStyleClass: 'fa fa-shield',
+                        url: 'linked-accounts',
+                    },
+                ],
+            },
+            {
+                title: this.translateUtil.translate('applicationsHtmlTitle'),
+                iconStyleClass: 'fa fa-th',
+                url: 'applications',
+            },
+            {
+                title: this.translateUtil.translate('myResources'),
+                iconStyleClass: 'fa fa-file-o',
+                url: 'my-resources',
+            }
+        ];
+    }
+
+    private logout() {
+        this.keycloakService.logout(baseUrl);
+    }
+
+    private isShowLocales(): boolean {
+        return isInternationalizationEnabled && (this.availableLocales.length > 1);
+    }
+
+    private changeLocale(newLocale: string) {
+        this.keycloakService.login({kcLocale: newLocale});
+    }
+
+    onItemClicked($event: NavigationItemConfig): void {
+        if (this.pfVerticalNav.hoverSecondaryNav) {
+            this.pfVerticalNav.collapseSecondaryNav($event);
+        }
+    }
+}
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/package.json b/themes/src/main/resources/theme/keycloak-preview/account/resources/package.json
index df9d429..efc4d01 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/package.json
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/package.json
@@ -40,9 +40,11 @@
     "core-js": "^2.4.1",
     "jquery": "^3.3.1",
     "patternfly": "^3.23.2",
+    "patternfly-ng": "^3.3.1",
     "rxjs": "5.5.2",
     "rxjs-system-bundle": "^5.5.6",
     "systemjs": "^0.20.17",
+    "systemjs-plugin-babel": "0.0.25",
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/package-lock.json b/themes/src/main/resources/theme/keycloak-preview/account/resources/package-lock.json
index 83e9da5..516a90b 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/package-lock.json
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/package-lock.json
@@ -102,6 +102,12 @@
       "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-9.1.1.tgz",
       "integrity": "sha1-rhA5KINrip4Gn9Li52+iGYzH5ig="
     },
+    "@swimlane/ngx-datatable": {
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-11.3.2.tgz",
+      "integrity": "sha512-Fn1RMJ991elSvp+LV2SGzG28ypuLM2DFyXAb7o8p4kzuhqtELwB25doXrLLVrtE2QtKmzoD9fRfbEUNsBKgoWA==",
+      "optional": true
+    },
     "@types/jasmine": {
       "version": "2.5.36",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.5.36.tgz",
@@ -176,6 +182,17 @@
         "json-stable-stringify": "1.0.1"
       }
     },
+    "angular-tree-component": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/angular-tree-component/-/angular-tree-component-7.2.0.tgz",
+      "integrity": "sha512-xUQvY18WjA8SqNlhDVPWVK0UyPSv2biCRGVrfRiFXEDJQAevLKiXJkw/awTa2mfH/4cuJhmjZuDGXubpcj6Tvw==",
+      "optional": true,
+      "requires": {
+        "lodash": "4.17.10",
+        "mobx": "3.6.2",
+        "mobx-angular": "2.1.1"
+      }
+    },
     "ansi-regex": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
@@ -289,6 +306,12 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "atoa": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/atoa/-/atoa-1.0.0.tgz",
+      "integrity": "sha1-DMDpGkgOc4+SPrwQNnZHF3mzSkk=",
+      "optional": true
+    },
     "aws-sign2": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
@@ -931,6 +954,15 @@
       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
       "dev": true
     },
+    "c3": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/c3/-/c3-0.4.23.tgz",
+      "integrity": "sha512-fI6hbx1QoATU0gRQtPWsUGWX+ssXhxGH1ogew32KjVmGHFE4WmfmBkh+RkuHDoeCIoGFon7XTpKcwUZpBGW4mQ==",
+      "optional": true,
+      "requires": {
+        "d3": "3.5.17"
+      }
+    },
     "callsite": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
@@ -1134,6 +1166,16 @@
       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
       "dev": true
     },
+    "contra": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/contra/-/contra-1.9.4.tgz",
+      "integrity": "sha1-9TveQtfltZhcrk2ZqNYQUm3o8o0=",
+      "optional": true,
+      "requires": {
+        "atoa": "1.0.0",
+        "ticky": "1.0.1"
+      }
+    },
     "cookie": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
@@ -1150,6 +1192,23 @@
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
+    "crossvent": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/crossvent/-/crossvent-1.5.4.tgz",
+      "integrity": "sha1-2ixPj0DJR4JRe/K+7BBEFIGUq5I=",
+      "optional": true,
+      "requires": {
+        "custom-event": "1.0.0"
+      },
+      "dependencies": {
+        "custom-event": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.0.tgz",
+          "integrity": "sha1-LkYovhncSyFLXAJjDFlx6BFhgGI=",
+          "optional": true
+        }
+      }
+    },
     "cryptiles": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
@@ -1165,6 +1224,12 @@
       "integrity": "sha1-XQKkaFCt8bSjF5RqOSj8y1v9BCU=",
       "dev": true
     },
+    "d3": {
+      "version": "3.5.17",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
+      "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=",
+      "optional": true
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -1271,6 +1336,16 @@
       "resolved": "https://registry.npmjs.org/domino/-/domino-1.0.30.tgz",
       "integrity": "sha512-ikq8WiDSkICdkElud317F2Sigc6A3EDpWsxWBwIZqOl95km4p/Vc9Rj98id7qKgsjDmExj0AVM7JOd4bb647Xg=="
     },
+    "dragula": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/dragula/-/dragula-3.7.2.tgz",
+      "integrity": "sha1-SjXJ05gf+sGpScKcpyhQWOhzk84=",
+      "optional": true,
+      "requires": {
+        "contra": "1.9.4",
+        "crossvent": "1.5.4"
+      }
+    },
     "easy-extender": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/easy-extender/-/easy-extender-2.3.2.tgz",
@@ -2867,8 +2942,7 @@
     "lodash": {
       "version": "4.17.10",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
-      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
-      "dev": true
+      "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
     "lodash.isfinite": {
       "version": "3.3.2",
@@ -2997,6 +3071,18 @@
         }
       }
     },
+    "mobx": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz",
+      "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg==",
+      "optional": true
+    },
+    "mobx-angular": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/mobx-angular/-/mobx-angular-2.1.1.tgz",
+      "integrity": "sha1-1eNlOayyABht1aEXCAa0d2uai4g=",
+      "optional": true
+    },
     "moment": {
       "version": "2.22.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
@@ -3021,6 +3107,21 @@
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
       "dev": true
     },
+    "ng2-dragula": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/ng2-dragula/-/ng2-dragula-1.5.0.tgz",
+      "integrity": "sha512-uSVq66Rv+ZhDLBGYCGZ7mTaseP7rvYJOijiQZlzfy8dxL614Sw7rhtnLqvK8nqa3tI/wVv8CEGZaZkMnWJokwQ==",
+      "optional": true,
+      "requires": {
+        "dragula": "3.7.2"
+      }
+    },
+    "ngx-bootstrap": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-2.0.5.tgz",
+      "integrity": "sha512-IduTVb78RDVlrz2+bn6GXK/REfM/RsRnz/AENwmrgTOg1AtvahJ9qANxXRNn33Kv9GJmkOYy/MhD3DyzeMb16w==",
+      "optional": true
+    },
     "normalize-package-data": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
@@ -3472,6 +3573,20 @@
         }
       }
     },
+    "patternfly-ng": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/patternfly-ng/-/patternfly-ng-3.3.1.tgz",
+      "integrity": "sha512-VR/gUZIAo0jr4ah5eCpgSgr9mk2R+E7zBr2yy2JiYVvD3KhgFQULUg/c+yKXUdESjAkYyErJdPpLYnsb6tWrLw==",
+      "requires": {
+        "@swimlane/ngx-datatable": "11.3.2",
+        "angular-tree-component": "7.2.0",
+        "c3": "0.4.23",
+        "lodash": "4.17.10",
+        "ng2-dragula": "1.5.0",
+        "ngx-bootstrap": "2.0.5",
+        "patternfly": "3.45.0"
+      }
+    },
     "performance-now": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
@@ -4433,6 +4548,11 @@
       "resolved": "https://registry.npmjs.org/systemjs/-/systemjs-0.20.19.tgz",
       "integrity": "sha512-H/rKwNEEyej/+IhkmFNmKFyJul8tbH/muiPq5TyNoVTwsGhUjRsN3NlFnFQUvFXA3+GQmsXkCNXU6QKPl779aw=="
     },
+    "systemjs-plugin-babel": {
+      "version": "0.0.25",
+      "resolved": "https://registry.npmjs.org/systemjs-plugin-babel/-/systemjs-plugin-babel-0.0.25.tgz",
+      "integrity": "sha512-RMKSizWWlw4+IpDB385ugxn7Owd9W+HEtjYDQ6yO1FpsnER/vk6FbXRweUF+mvRi6EHgk8vDdUdtui7ReDwX3w=="
+    },
     "tfunk": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/tfunk/-/tfunk-3.1.0.tgz",
@@ -4494,6 +4614,12 @@
         }
       }
     },
+    "ticky": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ticky/-/ticky-1.0.1.tgz",
+      "integrity": "sha1-t8+nHnaPHJAAxJe5FRswlHxQ5G0=",
+      "optional": true
+    },
     "tmp": {
       "version": "0.0.31",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.31.tgz",
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/systemjs.config.js b/themes/src/main/resources/theme/keycloak-preview/account/resources/systemjs.config.js
index 6a100cd..52ba67e 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/systemjs.config.js
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/systemjs.config.js
@@ -25,8 +25,35 @@
       
       // other libraries
       '@ngx-translate/core':       'npm:@ngx-translate/core/bundles/core.umd.min.js',
-      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
+      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
+      
+      // libraries that may be required by patternfly-ng, depending on which modules are loaded
+      'lodash': 'npm:lodash/lodash.js',
+      //  'angular-tree-component': 'npm:angular-tree-component/dist/angular-tree-component.umd.js',
+      //  'ng2-dragula': 'npm:ng2-dragula/bundles/ng2-dragula.umd.js',
+      //  '@swimlane/ngx-datatable': 'npm:@swimlane/ngx-datatable/release/index.js',
+      //  'd3': 'npm:d3/dist/d3.js',
+      //  'c3': 'npm:c3/c3.js',
+      
+      // We load only the needed submodules for better performance. Using the root 'patternfly-ng' would require all pf-ng depenencies.
+      //'patternfly-ng': 'npm:patternfly-ng',
+      //'patternfly-ng/empty-state': 'npm:patternfly-ng/empty-state',
+      'patternfly-ng/navigation': 'npm:patternfly-ng/navigation',
+      'patternfly-ng/utilities': 'npm:patternfly-ng/utilities',
+  
+      // ngx-bootstrap
+      'ngx-bootstrap': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
+      'ngx-bootstrap/dropdown': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
+      'ngx-bootstrap/popover': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
+      'ngx-bootstrap/tooltip': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.min.js',
+    
+      // patternfly-ng currently requires us to install transpiler.  Need to get rid of this.
+      'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
+      'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
     },
+    
+    transpiler: 'plugin-babel',
+    
     bundles: {
         "npm:rxjs-system-bundle/Rx.system.min.js": [
           "rxjs",
@@ -40,6 +67,7 @@
           "rxjs/util/*"
         ]
       },
+      
     // packages tells the System loader how to load when no filename and/or no extension
     packages: {
       app: {
@@ -55,7 +83,14 @@
       },
       rxjs: {
         defaultExtension: false
-      }
+      },
+      
+      'lodash': { defaultExtension: 'js' },
+    
+     // 'patternfly-ng': { main: './index.js', defaultExtension: 'js' },
+     // 'patternfly-ng/empty-state': { main: './index.js', defaultExtension: 'js' },
+      'patternfly-ng/navigation': { main: './index.js', defaultExtension: 'js' },
+      'patternfly-ng/utilities': { main: './index.js', defaultExtension: 'js' },
     }
   });
 })(this);