From fe5966d224c1f59665f556aa4e22e4e3bbdb21cc Mon Sep 17 00:00:00 2001
From: Stan Silvert <ssilvert@redhat.com>
Date: Thu, 21 Feb 2019 16:06:39 -0500
Subject: [PATCH] KEYCLOAK-8602: PatternFly 4 integration

---
 .../resources/account/AccountConsole.java     |   7 +-
 .../theme/keycloak-preview/account/index.ftl  | 270 ++++---
 .../account/resources/app/App.tsx             |  22 +-
 .../app/content/account-page/AccountPage.tsx  |   2 +-
 .../authenticator-page/AuthenticatorPage.tsx  |  35 +
 .../DeviceActivityPage.tsx                    |  35 +
 .../LinkedAccountsPage.tsx                    |  35 +
 .../my-resources-page/MyResourcesPage.tsx     |  35 +
 .../account/resources/app/page/Referrer.tsx   |   6 +-
 .../account/resources/app/widgets/Logout.tsx  |   2 +-
 .../account/resources/package-lock.json       | 501 +------------
 .../account/resources/package.json            |   3 +-
 .../account/resources/styles.css              | 657 ------------------
 .../account/resources/systemjs.config.js      |   4 +
 14 files changed, 309 insertions(+), 1305 deletions(-)
 create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/AuthenticatorPage.tsx
 create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/DeviceActivityPage.tsx
 create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/LinkedAccountsPage.tsx
 create mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/MyResourcesPage.tsx
 delete mode 100644 themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
diff --git a/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java b/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
index 7f15b086f3..804e287c41 100644
--- a/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
+++ b/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
@@ -94,7 +94,8 @@ public class AccountConsole {
             String[] referrer = getReferrer();
             if (referrer != null) {
                 map.put("referrer", referrer[0]);
-                map.put("referrer_uri", referrer[1]);
+                map.put("referrerName", referrer[1]);
+                map.put("referrer_uri", referrer[2]);
             }
             
             UserModel user = null;
@@ -204,7 +205,7 @@ public class AccountConsole {
                 if (Validation.isBlank(referrerName)) {
                     referrerName = referrer;
                 }
-                return new String[]{referrerName, referrerUri};
+                return new String[]{referrer, referrerName, referrerUri};
             }
         } else if (referrerUri != null) {
             referrerClient = realm.getClientByClientId(referrer);
@@ -212,7 +213,7 @@ public class AccountConsole {
                 referrerUri = RedirectUtils.verifyRedirectUri(session.getContext().getUri(), referrerUri, realm, referrerClient);
 
                 if (referrerUri != null) {
-                    return new String[]{referrer, referrerUri};
+                    return new String[]{referrer, referrer, referrerUri};
                 }
             }
         }
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 5aea8327b1..bdd5f54c1a 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
+++ b/themes/src/main/resources/theme/keycloak-preview/account/index.ftl
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="layout-pf-alt layout-pf-alt-fixed">
+<html>
     <head>
         <title>${msg("accountManagementTitle")}</title>
 
@@ -30,6 +30,7 @@
 
             <#if referrer??>
                 var referrer = '${referrer}';
+                var referrerName = '${referrerName}';
                 var referrer_uri = '${referrer_uri}';
             </#if>
 
@@ -43,37 +44,8 @@
         </script>
         
         <link rel="icon" href="${resourceUrl}/app/assets/img/favicon.ico" type="image/x-icon"/>
+        <link rel="stylesheet" href="${resourceUrl}/node_modules/@patternfly/patternfly/patternfly.min.css">
 
-        <!-- 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>
         
         <#if properties.developmentMode?has_content && properties.developmentMode == "true">
@@ -141,115 +113,141 @@
 <div id="main_react_container"></div>
 
 <div id="welcomeScreen" style="display:none">
-<!-- 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">
-                    <#if referrer?has_content && referrer_uri?has_content>
-                        <li><a class="nav-item-iconic" href="${referrer_uri}" id="referrer"><span class="pficon-arrow"></span>${msg("backTo",referrer)}</a></li>
-                    </#if>
-                    <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="localeDropdownBtn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            ${msg("locale_" + locale)} <span class="caret"></span>
-                          </a>
-                          <ul class="dropdown-menu" aria-labelledby="localeDropdownBtn" id="localeDropdownMenu">
-                          <#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">
-        <div class="text-center" id="welcomeMsg">
-          <h1>${msg("accountManagementWelcomeMessage")}</h1>
+    <div class="pf-c-background-image">
+      <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
+        <filter id="image_overlay" width="">
+          <feColorMatrix type="matrix" values="1 0 0 0 0
+                  1 0 0 0 0
+                  1 0 0 0 0
+                  0 0 0 1 0" />
+          <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
+            <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
+            <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
+            <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
+            <feFuncA type="table" tableValues="0 1"></feFuncA>
+          </feComponentTransfer>
+        </filter>
+      </svg>
+    </div>
+    <div class="pf-c-page" id="page-layout-default-nav">
+      <header role="banner" class="pf-c-page__header">
+        <div class="pf-c-page__header-brand">
+          <a class="pf-c-page__header-brand-link">
+            <img class="pf-c-brand" src="${resourceUrl}/app/assets/img/keycloak-logo-min.png" alt="Keycloak Logo">
+          </a>
         </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" id="personalInfoCard">
-                    <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 id="personalInfoLink"><a href="#/app/account">${msg("personalInfoHtmlTitle")}</a></h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" id="accountSecurityCard">
-                    <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 id="changePasswordLink"><a href="#/app/password">${msg("changePasswordHtmlTitle")}</a></h3>
-                              <h3 id="authenticatorLink"><a href="#/app/authenticator">${msg("authenticatorTitle")}</a></h3>
-                              <h3 id="deviceActivityLink"><a href="#/app/device-activity">${msg("deviceActivityHtmlTitle")}</a></h3>
-                              <h3 id="linkedAccountsLink" style="display:none"><a href="#/app/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" id="applicationsCard">
-                    <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 id="applicationsLink"><a href="#/app/applications">${msg("applicationsHtmlTitle")}</a></h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-3" style="display:none" id="myResourcesCard">
-                    <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 id="myResourcesLink"><a href="#/app/my-resources">${msg("myResources")}</a></h3>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+        <div class="pf-c-page__header-tools">
+          <#if referrer?has_content && referrer_uri?has_content>
+          <div class="pf-c-page__header-tools-group pf-m-icons pf-screen-reader">
+            <a class="nav-item-iconic" href="${referrer_uri}" id="referrer"><span class="pf-icon pf-icon-arrow"></span>${msg("backTo",referrerName)}</a>
+          </div>
+          </#if>
+          <div class="pf-c-page__header-tools-group">
+            <button id="signInButton" style="visibility:hidden" onclick="keycloak.login();" class="pf-c-button pf-m-primary" type="button">${msg("doLogIn")}</button>
+          </div>
+          <div class="pf-c-page__header-tools-group">
+            <button class="pf-c-button pf-m-plain pf-m-mobile" aria-label="Overflow actions">
+              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            </button>
 
+            <#if realm.internationalizationEnabled  && supportedLocales?size gt 1>
+            <div class="pf-m-user pf-screen-reader">
+              <script>
+                  var toggleLocaleDropdown = function() {
+                      var localeDropdownList = document.getElementById("landing-locale-dropdown-list");
+                      if (localeDropdownList.hasAttribute("hidden")) {
+                          localeDropdownList.removeAttribute("hidden");
+                          document.getElementById("landing-locale-dropdown-button").setAttribute("aria-expanded", true);
+                          //document.getElementById("landing-locale-dropdown").classList.add("pf-m-expanded"));
+                      } else {
+                          localeDropdownList.setAttribute("hidden", true);
+                          document.getElementById("landing-locale-dropdown-button").setAttribute("aria-expanded", false);
+                          //document.getElementById("landing-locale-dropdown").classList.remove("pf-m-expanded"));
+                      }
+                  }
+              </script>
+              <div id="landing-locale-dropdown" class="pf-c-dropdown">
+                <button onclick="toggleLocaleDropdown();" class="pf-c-dropdown__toggle pf-m-plain" id="landing-locale-dropdown-button" aria-expanded="false" aria-haspopup="true">
+                  <span class="pf-c-dropdown__toggle-text">
+                        ${msg("locale_" + locale)}
+                  </span>
+                  <i class="fas fa-caret-down pf-c-dropdown__toggle-icon" aria-hidden="true"></i>
+                </button>
+                <ul id="landing-locale-dropdown-list" class="pf-c-dropdown__menu" aria-labeledby="pf-toggle-id-20" role="menu" hidden>
+                    <#list supportedLocales as locale, label>
+                        <#if referrer?has_content && referrer_uri?has_content>
+                        <li role="none"><a href="${baseUrl}/?kc_locale=${locale}&referrer=${referrer}&referrer_uri=${referrer_uri}" role="menuitem" tabindex="-1" aria-disabled="false" class="pf-c-dropdown__menu-item">${label}</a></li>
+                        <#else>
+                        <li role="none"><a href="${baseUrl}/?kc_locale=${locale}" role="menuitem" tabindex="-1" aria-disabled="false" class="pf-c-dropdown__menu-item">${label}</a></li>
+                        </#if>
+                    </#list>
+                </ul>
+              </div>
             </div>
+            </#if>
+
+          </div>
         </div>
+      </header>
+
+      <main role="main" class="pf-c-page__main">
+        <section class="pf-c-page__main-section pf-m-light">
+          <div class="pf-c-content">
+            <h1>${msg("accountManagementWelcomeMessage")}</h1>
+          </div>
+        </section>
+        <section class="pf-c-page__main-section">
+          <div class="pf-l-gallery pf-m-gutter">
+            <div class="pf-l-gallery__item">
+              <div class="pf-c-card">
+                <div class="pf-c-card__header pf-c-content">
+                    <h2><i class="pf-icon pf-icon-user"></i>&nbsp${msg("personalInfoHtmlTitle")}</h2>
+                    <h6>${msg("personalInfoIntroMessage")}</h6>
+                </div>
+                <div class="pf-c-card__body pf-c-content">
+                    <h5 id="personalInfoLink"><a href="#/app/account">${msg("personalInfoHtmlTitle")}</a></h5>
+                </div>
+              </div>
+            </div>
+            <div class="pf-l-gallery__item">
+              <div class="pf-c-card">
+                <div class="pf-c-card__header pf-c-content">
+                    <h2><i class="pf-icon pf-icon-security"></i>&nbsp${msg("accountSecurityTitle")}</h2>
+                    <h6>${msg("accountSecurityIntroMessage")}</h6>
+                </div>
+                <div class="pf-c-card__body pf-c-content">
+                    <h5 id="changePasswordLink"><a href="#/app/password">${msg("changePasswordHtmlTitle")}</a></h5>
+                    <h5 id="authenticatorLink"><a href="#/app/authenticator">${msg("authenticatorTitle")}</a></h5>
+                    <h5 id="deviceActivityLink"><a href="#/app/device-activity">${msg("deviceActivityHtmlTitle")}</a></h5>
+                    <h5 id="linkedAccountsLink" style="display:none"><a href="#/app/linked-accounts">${msg("linkedAccountsHtmlTitle")}</a></h5>
+                </div>
+              </div>
+            </div>
+            <div class="pf-l-gallery__item">
+              <div class="pf-c-card">
+                <div class="pf-c-card__header pf-c-content">
+                    <h2><i class="pf-icon pf-icon-applications"></i>&nbsp${msg("applicationsHtmlTitle")}</h2>
+                    <h6>${msg("applicationsIntroMessage")}</h6>
+                </div>
+                <div class="pf-c-card__body pf-c-content">
+                    <h5 id="applicationsLink"><a href="#/app/applications">${msg("applicationsHtmlTitle")}</a></h5>
+                </div>
+              </div>
+            </div>
+            <div class="pf-l-gallery__item" style="display:none" id="myResourcesCard">
+              <div class="pf-c-card">
+                <div class="pf-c-card__header pf-c-content">
+                    <h2><i class="pf-icon pf-icon-repository"></i>&nbsp${msg("myResources")}</h2>
+                    <h6>${msg("resourceIntroMessage")}</h6>
+                </div>
+                <div class="pf-c-card__body pf-c-content">
+                    <h5 id="myResourcesLink"><a href="#/app/my-resources">${msg("myResources")}</a></h5>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
     </div>
 </div>
 
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx
index 097d85dfe8..8466aff5ae 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/App.tsx
@@ -26,8 +26,12 @@ import {Msg} from './widgets/Msg';
 import {Referrer} from './page/Referrer';
 
 import {AccountPage} from './content/account-page/AccountPage';
-import {ApplicationsPage} from './content/applications-page/ApplicationsPage';
 import {PasswordPage} from './content/password-page/PasswordPage';
+import {AuthenticatorPage} from './content/authenticator-page/AuthenticatorPage';
+import {DeviceActivityPage} from './content/device-activity-page/DeviceActivityPage';
+import {LinkedAccountsPage} from './content/linked-accounts-page/LinkedAccountsPage';
+import {ApplicationsPage} from './content/applications-page/ApplicationsPage';
+import {MyResourcesPage} from './content/my-resources-page/MyResourcesPage';
 import {ExtensionPages} from './content/extensions/ExtensionPages';
 
 declare function toggleReact():void;
@@ -61,14 +65,22 @@ export class App extends React.Component<AppProps> {
             <span>
                 <Referrer/>
                 <nav>
-                    <Link to="/app/account" className="btn btn-primary btn-lg btn-sign" type="button"><Msg msgKey="account"/></Link>
-                    <Link to="/app/applications" className="btn btn-primary btn-lg btn-sign" type="button"><Msg msgKey="applications"/></Link>
-                    <Link to="/app/password" className="btn btn-primary btn-lg btn-sign" type="button"><Msg msgKey="password"/></Link>
+                    <Link to="/app/account" className="pf-c-button pf-m-primary" type="button"><Msg msgKey="account"/></Link>
+                    <Link to="/app/password" className="pf-c-button pf-m-primary" type="button"><Msg msgKey="password"/></Link>
+                    <Link to="/app/authenticator" className="pf-c-button pf-m-primary" type="button"><Msg msgKey="authenticator"/></Link>
+                    <Link to="/app/device-activity" className="pf-c-button pf-m-primary" type="button"><Msg msgKey="device-activity"/></Link>
+                    <Link to="/app/linked-accounts" className="pf-c-button pf-m-primary" type="button"><Msg msgKey="linkedAccountsHtmlTitle"/></Link>
+                    <Link to="/app/applications" className="pf-c-button pf-m-primary" type="button"><Msg msgKey="applications"/></Link>
+                    <Link to="/app/my-resources" className="pf-c-button pf-m-primary" type="button"><Msg msgKey="myResources"/></Link>
                     {ExtensionPages.Links}
                     <Logout/>
                     <Route path='/app/account' component={AccountPage}/>
-                    <Route path='/app/applications' component={ApplicationsPage}/>
                     <Route path='/app/password' component={PasswordPage}/>
+                    <Route path='/app/authenticator' component={AuthenticatorPage}/>
+                    <Route path='/app/device-activity' component={DeviceActivityPage}/>
+                    <Route path='/app/linked-accounts' component={LinkedAccountsPage}/>
+                    <Route path='/app/applications' component={ApplicationsPage}/>
+                    <Route path='/app/my-resources' component={MyResourcesPage}/>
                     {ExtensionPages.Routes}
                 </nav>
                 
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx
index fb8f48846f..846469f8aa 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/account-page/AccountPage.tsx
@@ -97,7 +97,7 @@ export class AccountPage extends React.Component<AccountPageProps, AccountPageSt
         const fields: FormFields = this.state.formFields;
         return (
 <span>
-<div className="page-header">
+<div className="pf-c-content">
     <h1 id="pageTitle"><Msg msgKey="personalInfoHtmlTitle"/></h1>
 </div>
 
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/AuthenticatorPage.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/AuthenticatorPage.tsx
new file mode 100644
index 0000000000..684e069720
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/authenticator-page/AuthenticatorPage.tsx
@@ -0,0 +1,35 @@
+/* 
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates.
+ *
+ * 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 * as React from 'react';
+ 
+export interface AuthenticatorPageProps {
+}
+ 
+export class AuthenticatorPage extends React.Component<AuthenticatorPageProps> {
+    
+    constructor(props: AuthenticatorPageProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+              <h2>Hello Authenticator Page</h2>
+            </div>
+        );
+    }
+};
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/DeviceActivityPage.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/DeviceActivityPage.tsx
new file mode 100644
index 0000000000..53467f92be
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/device-activity-page/DeviceActivityPage.tsx
@@ -0,0 +1,35 @@
+/* 
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates.
+ *
+ * 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 * as React from 'react';
+ 
+export interface DeviceActivityPageProps {
+}
+ 
+export class DeviceActivityPage extends React.Component<DeviceActivityPageProps> {
+    
+    constructor(props: DeviceActivityPageProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+              <h2>Hello Device Activity Page</h2>
+            </div>
+        );
+    }
+};
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/LinkedAccountsPage.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/LinkedAccountsPage.tsx
new file mode 100644
index 0000000000..71b6c1947e
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/LinkedAccountsPage.tsx
@@ -0,0 +1,35 @@
+/* 
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates.
+ *
+ * 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 * as React from 'react';
+ 
+export interface LinkedAccountsPageProps {
+}
+ 
+export class LinkedAccountsPage extends React.Component<LinkedAccountsPageProps> {
+    
+    constructor(props: LinkedAccountsPageProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+              <h2>Hello Linked Accounts Page</h2>
+            </div>
+        );
+    }
+};
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/MyResourcesPage.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/MyResourcesPage.tsx
new file mode 100644
index 0000000000..353fa38e5b
--- /dev/null
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/my-resources-page/MyResourcesPage.tsx
@@ -0,0 +1,35 @@
+/* 
+ * Copyright 2018 Red Hat, Inc. and/or its affiliates.
+ *
+ * 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 * as React from 'react';
+ 
+export interface MyResourcesPageProps {
+}
+ 
+export class MyResourcesPage extends React.Component<MyResourcesPageProps> {
+    
+    constructor(props: MyResourcesPageProps) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div>
+              <h2>Hello My Resources Page</h2>
+            </div>
+        );
+    }
+};
\ No newline at end of file
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/page/Referrer.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/page/Referrer.tsx
index 41c39201d1..d66161197c 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/page/Referrer.tsx
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/page/Referrer.tsx
@@ -18,7 +18,7 @@ import * as React from 'react';
 
 import {Msg} from '../widgets/Msg';
  
-declare const referrer: string;
+declare const referrerName: string;
 declare const referrer_uri: string;
 
 export interface ReferrerProps {
@@ -34,12 +34,12 @@ export class Referrer extends React.Component<ReferrerProps> {
     }
 
     render() {
-        if (typeof referrer === "undefined") return null;
+        if (typeof referrerName === "undefined") return null;
         
         return (
             <a className="nav-item-iconic" href={referrer_uri}>
                <span className="pficon-arrow"></span>
-               <Msg msgKey="backTo" params={[referrer]}/>
+               <Msg msgKey="backTo" params={[referrerName]}/>
             </a>
         );
     }
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Logout.tsx b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Logout.tsx
index 4ccf718827..b952fae3a4 100644
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Logout.tsx
+++ b/themes/src/main/resources/theme/keycloak-preview/account/resources/app/widgets/Logout.tsx
@@ -37,7 +37,7 @@ export class Logout extends React.Component<LogoutProps> {
     
     render() {
         return (
-            <Link to="/" className="btn btn-primary btn-lg btn-sign" type="button" onClick={this.handleLogout}><Msg msgKey="doSignOut"/></Link>
+            <Link to="/" className="pf-c-button pf-m-primary" type="button" onClick={this.handleLogout}><Msg msgKey="doSignOut"/></Link>
         );
     }
 }
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 f7cc76d517..b8b18118d8 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
@@ -4,263 +4,10 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@types/c3": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@types/c3/-/c3-0.6.2.tgz",
-      "integrity": "sha512-l86MGOQLqwMkxU0WzEVGCtsQsGBHSFGMWXSu+cFr+wYcIkUAjQhp5ANluTWgGtltNadaGwyv33Qwwzfq0QKaIg==",
-      "optional": true,
-      "requires": {
-        "@types/d3": "^4"
-      }
-    },
-    "@types/d3": {
-      "version": "4.13.0",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-4.13.0.tgz",
-      "integrity": "sha512-L7C+aOIl+z/e7pPBvRXxA9EZ8a5RIZSq4UnTgdjCnypYV3bPI1wpx81snC8pE1zB4SZQC/WK4noZUHzWAABfBA==",
-      "optional": true,
-      "requires": {
-        "@types/d3-array": "*",
-        "@types/d3-axis": "*",
-        "@types/d3-brush": "*",
-        "@types/d3-chord": "*",
-        "@types/d3-collection": "*",
-        "@types/d3-color": "*",
-        "@types/d3-dispatch": "*",
-        "@types/d3-drag": "*",
-        "@types/d3-dsv": "*",
-        "@types/d3-ease": "*",
-        "@types/d3-force": "*",
-        "@types/d3-format": "*",
-        "@types/d3-geo": "*",
-        "@types/d3-hierarchy": "*",
-        "@types/d3-interpolate": "*",
-        "@types/d3-path": "*",
-        "@types/d3-polygon": "*",
-        "@types/d3-quadtree": "*",
-        "@types/d3-queue": "*",
-        "@types/d3-random": "*",
-        "@types/d3-request": "*",
-        "@types/d3-scale": "^1",
-        "@types/d3-selection": "*",
-        "@types/d3-shape": "*",
-        "@types/d3-time": "*",
-        "@types/d3-time-format": "*",
-        "@types/d3-timer": "*",
-        "@types/d3-transition": "*",
-        "@types/d3-voronoi": "*",
-        "@types/d3-zoom": "*"
-      }
-    },
-    "@types/d3-array": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-1.2.2.tgz",
-      "integrity": "sha512-juoqZ4j/ZPC52AoCjbxiNOGAXudj+69w08ln4cpQIubQfIrHNIptPVYkG6IELEY9Iw/q/PMwKLhk6HYcYk7bOA==",
-      "optional": true
-    },
-    "@types/d3-axis": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-1.0.11.tgz",
-      "integrity": "sha512-cuigApCyCwYJxaQPghj+BqaxzbdRdT/lpZBMtF7EuEIJ61NMQ8yvGnqFvHCIgJEmUu2Wb2wiZqy9kiHi3Ddftg==",
-      "optional": true,
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-brush": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-1.0.9.tgz",
-      "integrity": "sha512-mAx8IVc0luUHfk51pl0UN1vzybnAzLMUsvIwLt3fbsqqPkSXr+Pu1AxOPPeyNc27LhHJnfH/LCV7Jlv+Yzqu1A==",
-      "optional": true,
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-chord": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-1.0.8.tgz",
-      "integrity": "sha512-F0ftYOo7FenAIxsRjXLt8vbij0NLDuVcL+xaGY7R9jUmF2Mrpj1T5XukBI9Cad+Ei7YSxEWREIO+CYcaKCl2qQ==",
-      "optional": true
-    },
-    "@types/d3-collection": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-collection/-/d3-collection-1.0.7.tgz",
-      "integrity": "sha512-vR3BT0GwHc5y93Jv6bxn3zoxP/vGu+GdXu/r1ApjbP9dLk9I2g6NiV7iP/QMQSuFZd0It0n/qWrfXHxCWwHIkg==",
-      "optional": true
-    },
-    "@types/d3-color": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-1.2.1.tgz",
-      "integrity": "sha512-xwb1tqvYNWllbHuhMFhiXk63Imf+QNq/dJdmbXmr2wQVnwGenCuj3/0IWJ9hdIFQIqzvhT7T37cvx93jtAsDbQ=="
-    },
-    "@types/d3-dispatch": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-1.0.6.tgz",
-      "integrity": "sha512-xyWJQMr832vqhu6fD/YqX+MSFBWnkxasNhcStvlhqygXxj0cKqPft0wuGoH5TIq5ADXgP83qeNVa4R7bEYN3uA==",
-      "optional": true
-    },
-    "@types/d3-drag": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-1.2.1.tgz",
-      "integrity": "sha512-J9liJ4NNeV0oN40MzPiqwWjqNi3YHCRtHNfNMZ1d3uL9yh1+vDuo346LBEr8yyBm30WHvrHssAkExVZrGCswtA==",
-      "optional": true,
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-dsv": {
-      "version": "1.0.33",
-      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-1.0.33.tgz",
-      "integrity": "sha512-jx5YvaVC3Wfh6LobaiWTeU1NkvL2wPmmpmajk618bD+xVz98yNWzmZMvmlPHGK0HXbMeHmW/6oVX48V9AH1bRQ=="
-    },
-    "@types/d3-ease": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-1.0.7.tgz",
-      "integrity": "sha1-k6MBhovp4VBh89RDQ7GrP4rLbwk=",
-      "optional": true
-    },
-    "@types/d3-force": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-1.1.1.tgz",
-      "integrity": "sha512-ePkELuaFWY4yOuf+Bvx5Xd+ihFiYG4bdnW0BlvigovIm8Sob2t76e9RGO6lybQbv6AlW9Icn9HuZ9fmdzEoJyg==",
-      "optional": true
-    },
-    "@types/d3-format": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.3.0.tgz",
-      "integrity": "sha512-ZiY4j3iJvAdOwzwW24WjlZbUNvqOsnPAMfPBmdXqxj3uKJbrzBlRrdGl5uC89pZpFs9Dc92E81KcwG2uEgkIZA==",
-      "optional": true
-    },
-    "@types/d3-geo": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-1.10.3.tgz",
-      "integrity": "sha512-hfdaxM2L0wA9mDZrrSf2o+DyhEpnJYCiAN+lHFtpfZOVCQrYBA5g33sGRpUbAvjSMyO5jkHbftMWPEhuCMChSg==",
-      "optional": true,
-      "requires": {
-        "@types/geojson": "*"
-      }
-    },
-    "@types/d3-hierarchy": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-1.1.4.tgz",
-      "integrity": "sha512-+d2VLfLPgW66VB7k56T8tC4LobfS6Rrhm+1pmYPMmlCpO5rccJLuwux7YXl/eGVst3Bhb5PJTN5/oaJERpNw8g==",
-      "optional": true
-    },
-    "@types/d3-interpolate": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-1.3.0.tgz",
-      "integrity": "sha512-Ng4ds7kPSvP/c3W3J5PPUQlgewif1tGBqCeh5lgY+UG82Y7H9zQ8c2gILsEFDLg7wRGOwnuKZ940Q/LSN14w9w==",
-      "requires": {
-        "@types/d3-color": "*"
-      }
-    },
-    "@types/d3-path": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-1.0.7.tgz",
-      "integrity": "sha512-U8dFRG+8WhkLJr2sxZ9Cw/5WeRgBnNqMxGdA1+Z0+ZG6tK0s75OQ4OXnxeyfKuh6E4wQPY8OAKr1+iNDx01BEQ=="
-    },
-    "@types/d3-polygon": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-1.0.6.tgz",
-      "integrity": "sha512-E6Kyodn9JThgLq20nxSbEce9ow5/ePgm9PX2EO6W1INIL4DayM7cFaiG10DStuamjYAd0X4rntW2q+GRjiIktw==",
-      "optional": true
-    },
-    "@types/d3-quadtree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-1.0.6.tgz",
-      "integrity": "sha512-sphVuDdiSIaxLt9kQgebJW98pTktQ/xuN7Ysd8X68Rnjeg/q8+c36/ShlqU52qoKg9nob/JEHH1uQMdxURZidQ==",
-      "optional": true
-    },
-    "@types/d3-queue": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-queue/-/d3-queue-3.0.7.tgz",
-      "integrity": "sha512-nBbDO69wu1TUWqtGYAePw40jSPcQSt5VwAf7403vYopVCs3Rtbt5f47j2wbuMY4Z2x543VbTIlDo5gwdpV5O+Q==",
-      "optional": true
-    },
-    "@types/d3-random": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-1.1.1.tgz",
-      "integrity": "sha512-jUPeBq1XKK9/5XasTvy5QAUwFeMsjma2yt/nP02yC2Tijovx7i/W5776U/HZugxc5SSmtpx4Z3g9KFVon0QrjQ==",
-      "optional": true
-    },
-    "@types/d3-request": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-request/-/d3-request-1.0.3.tgz",
-      "integrity": "sha512-bopZVggPNk7RYeuktk8LA5wmqA+9wDZPA+g4kX79sHScjNR85cSDg9oK26k8QBtbCld+/gMD44aSzRRVWjkxGw==",
-      "optional": true,
-      "requires": {
-        "@types/d3-dsv": "*"
-      }
-    },
-    "@types/d3-scale": {
-      "version": "1.0.14",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-1.0.14.tgz",
-      "integrity": "sha512-dW6Ii8bH+10klJzVVPPeeQvRpCbX3BO3x9cLTngu/+lXNDbk2uC51aFAA/XhocehZroaG5ajwAFelMFsgpClMg==",
-      "optional": true,
-      "requires": {
-        "@types/d3-time": "*"
-      }
-    },
-    "@types/d3-selection": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-1.3.2.tgz",
-      "integrity": "sha512-K23sDOi7yMussv7aiqk097IWWbjFYbJpcDppQAcaf6DfmHxAsjr+6N4HJGokETLDuV7y/qJeeIJINPnkWJM5Hg=="
-    },
-    "@types/d3-shape": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-1.2.4.tgz",
-      "integrity": "sha512-X4Xq2mpChPIMDMAXwLfxHKLbqv+sowkJ94bENeSMqqhQJ5v4oXuoyLo0vnIkydVbuQ52ZwPplk219K0m2HJODg==",
-      "optional": true,
-      "requires": {
-        "@types/d3-path": "*"
-      }
-    },
-    "@types/d3-time": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.0.9.tgz",
-      "integrity": "sha512-m+D4NbQdDlTVaO7QgXAnatR3IDxQYDMBtRhgSCi5rs9R1LPq1y7/2aqa1FJ2IWjFm1mOV63swDxonnCDlHgHMA=="
-    },
-    "@types/d3-time-format": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.1.0.tgz",
-      "integrity": "sha512-/myT3I7EwlukNOX2xVdMzb8FRgNzRMpsZddwst9Ld/VFe6LyJyRp0s32l/V9XoUzk+Gqu56F/oGk6507+8BxrA==",
-      "optional": true
-    },
-    "@types/d3-timer": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-1.0.8.tgz",
-      "integrity": "sha512-AKUgQ/nljUFcUO2P3gK24weVI5XwUTdJvjoh8gJ0yxT4aJ+d7t2Or3TB+k9dEYl14BAjoj32D0ky+YzQSVszfg==",
-      "optional": true
-    },
-    "@types/d3-transition": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-1.1.3.tgz",
-      "integrity": "sha512-1EukXNuVu/z2G1GZpZagzFJnie9C5zze17ox/vhTgGXNy46rYAm4UkhLLlUeeZ1ndq88k95SOeC8898RpKMLOQ==",
-      "optional": true,
-      "requires": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/d3-voronoi": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-voronoi/-/d3-voronoi-1.1.8.tgz",
-      "integrity": "sha512-zqNhW7QsYQGlfOdrwPNPG3Wk64zUa4epKRurkJ/dVc6oeXrB+iTDt8sRZ0KZKOOXvvfa1dcdB0e45TZeLBiodQ==",
-      "optional": true
-    },
-    "@types/d3-zoom": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-1.7.2.tgz",
-      "integrity": "sha512-/ORNUzQ0g7h2f34L/hD1o+IytOjpNLwEf403yKmYAA+z3LC8eCH6xCKaCc0weuCWwiaZ2UqBW41Y6ciqjd+ndQ==",
-      "optional": true,
-      "requires": {
-        "@types/d3-interpolate": "*",
-        "@types/d3-selection": "*"
-      }
-    },
-    "@types/geojson": {
-      "version": "7946.0.4",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.4.tgz",
-      "integrity": "sha512-MHmwBtCb7OCv1DSivz2UNJXPGU/1btAWRKlqJ2saEhVJkpkvqHMMaOpKg0v4sAbDWSQekHGvPVMM8nQ+Jen03Q==",
-      "optional": true
+    "@patternfly/patternfly": {
+      "version": "1.0.196",
+      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-1.0.196.tgz",
+      "integrity": "sha512-fHC+kxw2MPDtvDz+stJGvR+CEqa59fD/gTpavSkjGFVsp5h8kN0WeVPiQK7lx/Rf5IPL0d/szABWg38YDwQzGQ=="
     },
     "@types/history": {
       "version": "4.7.2",
@@ -330,123 +77,12 @@
         "is-buffer": "^1.1.5"
       }
     },
-    "bootstrap": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
-      "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
-    },
-    "bootstrap-datepicker": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-datepicker/-/bootstrap-datepicker-1.8.0.tgz",
-      "integrity": "sha512-213St/G8KT3mjs4qu4qwww74KWysMaIeqgq5OhrboZjIjemIpyuxlSo9FNNI5+KzpkkxkRRba+oewiRGV42B1A==",
-      "optional": true,
-      "requires": {
-        "jquery": ">=1.7.1 <4.0.0"
-      }
-    },
-    "bootstrap-sass": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/bootstrap-sass/-/bootstrap-sass-3.3.7.tgz",
-      "integrity": "sha1-ZZbHq0D2Y3OTMjqwvIDQZPxjBJg=",
-      "optional": true
-    },
-    "bootstrap-select": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/bootstrap-select/-/bootstrap-select-1.12.2.tgz",
-      "integrity": "sha1-WNCVs/1YSzFEOGb745tv3U5OEqQ=",
-      "optional": true,
-      "requires": {
-        "jquery": ">=1.8"
-      }
-    },
-    "bootstrap-slider": {
-      "version": "9.10.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-slider/-/bootstrap-slider-9.10.0.tgz",
-      "integrity": "sha1-EQPWvADPv6jPyaJZmrUYxVZD2j8=",
-      "optional": true
-    },
-    "bootstrap-switch": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/bootstrap-switch/-/bootstrap-switch-3.3.4.tgz",
-      "integrity": "sha1-cOCusqh3wNx2aZHeEI4hcPwpov8=",
-      "optional": true
-    },
-    "bootstrap-touchspin": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/bootstrap-touchspin/-/bootstrap-touchspin-3.1.1.tgz",
-      "integrity": "sha1-l3nerHKq9Xfl52K4USx0fIcdlZc=",
-      "optional": 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.0"
-      }
-    },
     "csstype": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.5.7.tgz",
       "integrity": "sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw==",
       "dev": true
     },
-    "d3": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
-      "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=",
-      "optional": true
-    },
-    "datatables.net": {
-      "version": "1.10.19",
-      "resolved": "https://registry.npmjs.org/datatables.net/-/datatables.net-1.10.19.tgz",
-      "integrity": "sha512-+ljXcI6Pj3PTGy5pesp3E5Dr3x3AV45EZe0o1r0gKENN2gafBKXodVnk2ypKwl2tTmivjxbkiqoWnipTefyBTA==",
-      "requires": {
-        "jquery": ">=1.7"
-      }
-    },
-    "datatables.net-bs": {
-      "version": "1.10.19",
-      "resolved": "https://registry.npmjs.org/datatables.net-bs/-/datatables.net-bs-1.10.19.tgz",
-      "integrity": "sha512-5gxoI2n+duZP06+4xVC2TtH6zcY369/TRKTZ1DdSgDcDUl4OYQsrXCuaLJmbVzna/5Y5lrMmK7CxgvYgIynICA==",
-      "optional": true,
-      "requires": {
-        "datatables.net": "1.10.19",
-        "jquery": ">=1.7"
-      }
-    },
-    "datatables.net-colreorder": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/datatables.net-colreorder/-/datatables.net-colreorder-1.5.1.tgz",
-      "integrity": "sha512-nKV0ZBOdOG+CCrtDZZlTOvhu9NC53pr4rYR8Xhd3KIKipLZohWWdBoOFGMu+VKDvllg2Xj79oS/wicYSiNyteA==",
-      "optional": true,
-      "requires": {
-        "datatables.net": "^1.10.15",
-        "jquery": ">=1.7"
-      }
-    },
-    "datatables.net-colreorder-bs": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/datatables.net-colreorder-bs/-/datatables.net-colreorder-bs-1.3.3.tgz",
-      "integrity": "sha1-Op3LCN7r612FQHlZHgbkk615OlM=",
-      "optional": true,
-      "requires": {
-        "datatables.net-bs": ">=1.10.9",
-        "datatables.net-colreorder": ">=1.2.0",
-        "jquery": ">=1.7"
-      }
-    },
-    "datatables.net-select": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/datatables.net-select/-/datatables.net-select-1.2.7.tgz",
-      "integrity": "sha512-C3XDi7wpruGjDXV36dc9hN/FrAX9GOFvBZ7+KfKJTBNkGFbbhdzHS91SMeGiwRXPYivAyxfPTcVVndVaO83uBQ==",
-      "optional": true,
-      "requires": {
-        "datatables.net": "^1.10.15",
-        "jquery": ">=1.7"
-      }
-    },
     "debug": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -455,35 +91,6 @@
         "ms": "2.0.0"
       }
     },
-    "drmonty-datatables-colvis": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/drmonty-datatables-colvis/-/drmonty-datatables-colvis-1.1.2.tgz",
-      "integrity": "sha1-lque37SGQ8wu3aP4e4iTPN7oEnw=",
-      "optional": true,
-      "requires": {
-        "jquery": ">=1.7.0"
-      }
-    },
-    "eonasdan-bootstrap-datetimepicker": {
-      "version": "4.17.47",
-      "resolved": "https://registry.npmjs.org/eonasdan-bootstrap-datetimepicker/-/eonasdan-bootstrap-datetimepicker-4.17.47.tgz",
-      "integrity": "sha1-ekmXAEQGUnbnll79Fvgic1IZ5zU=",
-      "optional": true,
-      "requires": {
-        "bootstrap": "^3.3",
-        "jquery": "^1.8.3 || ^2.0 || ^3.0",
-        "moment": "^2.10",
-        "moment-timezone": "^0.4.0"
-      },
-      "dependencies": {
-        "bootstrap": {
-          "version": "3.3.7",
-          "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
-          "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E=",
-          "optional": true
-        }
-      }
-    },
     "follow-redirects": {
       "version": "1.5.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz",
@@ -492,23 +99,6 @@
         "debug": "=3.1.0"
       }
     },
-    "font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
-    },
-    "font-awesome-sass": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome-sass/-/font-awesome-sass-4.7.0.tgz",
-      "integrity": "sha1-TtppPpFQCc4Asijglk3F7Km8NOE=",
-      "optional": true
-    },
-    "google-code-prettify": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/google-code-prettify/-/google-code-prettify-1.0.5.tgz",
-      "integrity": "sha1-n0d/Ik2/piNy5e+AOn4VdBBAAIQ=",
-      "optional": true
-    },
     "history": {
       "version": "4.7.2",
       "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
@@ -554,17 +144,6 @@
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
       "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
     },
-    "jquery": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz",
-      "integrity": "sha1-XE2d5lKvbNCncBVKYxu6ErAVx4c="
-    },
-    "jquery-match-height": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/jquery-match-height/-/jquery-match-height-0.7.2.tgz",
-      "integrity": "sha1-+NnzulMU2qsQnPB0CGdL4gS+Xw4=",
-      "optional": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -583,15 +162,6 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
       "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
     },
-    "moment-timezone": {
-      "version": "0.4.1",
-      "resolved": "http://registry.npmjs.org/moment-timezone/-/moment-timezone-0.4.1.tgz",
-      "integrity": "sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=",
-      "optional": true,
-      "requires": {
-        "moment": ">= 2.6.0"
-      }
-    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -610,69 +180,6 @@
         "isarray": "0.0.1"
       }
     },
-    "patternfly": {
-      "version": "3.54.8",
-      "resolved": "https://registry.npmjs.org/patternfly/-/patternfly-3.54.8.tgz",
-      "integrity": "sha512-6pGy2tBZRM7Cnxi3ziLPB4kbYO9mMzT8ZSU8bVZSux2d+j/o08XB50NU2l8djL0sEmsr8s4J06mwB3vTlAuUrg==",
-      "requires": {
-        "@types/c3": "^0.6.0",
-        "bootstrap": "~3.3.7",
-        "bootstrap-datepicker": "^1.7.1",
-        "bootstrap-sass": "^3.3.7",
-        "bootstrap-select": "1.12.2",
-        "bootstrap-slider": "^9.9.0",
-        "bootstrap-switch": "~3.3.4",
-        "bootstrap-touchspin": "~3.1.1",
-        "c3": "~0.4.11",
-        "d3": "~3.5.17",
-        "datatables.net": "^1.10.15",
-        "datatables.net-colreorder": "^1.4.1",
-        "datatables.net-colreorder-bs": "~1.3.2",
-        "datatables.net-select": "~1.2.0",
-        "drmonty-datatables-colvis": "~1.1.2",
-        "eonasdan-bootstrap-datetimepicker": "^4.17.47",
-        "font-awesome": "^4.7.0",
-        "font-awesome-sass": "^4.7.0",
-        "google-code-prettify": "~1.0.5",
-        "jquery": "~3.2.1",
-        "jquery-match-height": "^0.7.2",
-        "moment": "^2.19.1",
-        "moment-timezone": "^0.4.1",
-        "patternfly-bootstrap-combobox": "~1.1.7",
-        "patternfly-bootstrap-treeview": "~2.1.0"
-      },
-      "dependencies": {
-        "bootstrap": {
-          "version": "3.3.7",
-          "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
-          "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E="
-        }
-      }
-    },
-    "patternfly-bootstrap-combobox": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/patternfly-bootstrap-combobox/-/patternfly-bootstrap-combobox-1.1.7.tgz",
-      "integrity": "sha1-al48zRFwwhs8S0qhaKdBPh3btuE=",
-      "optional": true
-    },
-    "patternfly-bootstrap-treeview": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/patternfly-bootstrap-treeview/-/patternfly-bootstrap-treeview-2.1.7.tgz",
-      "integrity": "sha512-wQgM+CvsiEpu9kdyviP+uTHxRT7bceimS0AVoClUaUYYGHbJ604EVt0Lmtwebtw/+ia3DHL99pu7qhGvZR830Q==",
-      "optional": true,
-      "requires": {
-        "bootstrap": "3.3.x",
-        "jquery": ">= 2.1.x"
-      },
-      "dependencies": {
-        "bootstrap": {
-          "version": "3.3.7",
-          "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
-          "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E=",
-          "optional": true
-        }
-      }
-    },
     "prop-types": {
       "version": "15.6.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
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 cd94720644..2ecc4b8b54 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
@@ -10,10 +10,9 @@
   "author": "Stan Silvert",
   "license": "Apache 2.0",
   "dependencies": {
+    "@patternfly/patternfly": "^1.0.196",
     "axios": "^0.18.0",
-    "bootstrap": "^4.1.0",
     "moment": "^2.22.2",
-    "patternfly": "^3.23.2",
     "react": "^16.5.2",
     "react-dom": "^16.5.2",
     "react-router-dom": "^4.3.1",
diff --git a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css b/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
deleted file mode 100644
index 3915d8ca45..0000000000
--- a/themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
+++ /dev/null
@@ -1,657 +0,0 @@
-/* Welcome Page */
-
-body {
-  background: #f5f5f5;
-}
-.layout-pf-alt.layout-pf-alt-fixed body {
-  padding-top: 55px;
-}
-.cards-pf {
-  background: #f5f5f5;
-}
-.card-pf {
-  margin: 0 0 20px;
-}
-.card-pf .row-cards-pf:first-child {
-  padding-top: 0px;
-}
-.cards-pf .row-cards-pf {
-  padding: 0 20px;
-}
-.card-pf-title {
-  margin: 0 0 20px;
-}
-p.description {
-  font-size: 14px;
-  margin: 10px auto 20px;
-  max-width: 60%;
-  padding: 0 10px;
-  text-align: center;
-}
-.card-pf-content-intro {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f5f5f5;
-}
-.card-pf-content h3 {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #f5f5f5;
-}
-.card-pf-content h3:last-child {
-  border-bottom: 0;
-}
-
-.btn-sign {
-  margin-top: 10px;
-}
-
-.layout-pf-alt.layout-pf-alt-fixed .container-pf-alt-nav-pf-vertical-alt {
-    margin-left: 210px;
-}
-
-.nav .nav-item-iconic {
-  color: #d1d1d1;
-}
-
-.content-area {
-  padding: 30px 30px 20px;
-  background: #ffffff;
-  margin-bottom: 10px;
-}
-.row {
-  margin-left: -20px;
-  margin-right: -20px;
-}
-
-/*Responsive Design*/
-@media (max-width: 767px) {
-  .container-fluid {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .cards-pf {
-    background: #ffffff;
-  }
-  .cards-pf .row-cards-pf {
-    padding: 0;
-  }
-
-  .card-pf {
-    margin: 0 0 10px;
-    background: #ffffff !important;
-    box-shadow: 0 0 0;
-    border-bottom: 1px solid #f5f5f5;
-    border-top: 0;
-    padding: 0;
-  }
-  .card-pf-body {
-    padding: 20px 20px 10px;
-    margin-top: 0;
-  }
-  .card-pf-view.card-pf-view-select:hover {
-    box-shadow: 0 0 0;
-  }
-  .cards-pf .row-cards-pf:first-child {
-    padding-top: 0;
-  }
-  .container-cards-pf {
-    margin-top: 0;
-  }
-  .col-xs-12,
-  .col-xs-2,
-  .col-xs-10,
-  .col-sm-12,
-  .col-sm-4,
-  .col-md-4,
-  .col-md-8,
-  .col-lg-3,
-  .container-cards-pf {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  #welcomeScreen .text-center h1,
-  #welcomeScreen .card-pf-body hr{
-    display: none;
-  }
-  .card-pf-view .card-pf-top-element .card-pf-icon-circle {
-    width: 30px;
-    height: 30px;
-    font-size: 16px;
-    line-height: 26px;
-    margin-top: -8px;
-  }
-  .card-pf-content-intro {
-    border-bottom: 0;
-  }
-  .card-pf-content p {
-    padding-bottom: 5px;
-  }
-  .card-pf-content h3 {
-    border-bottom: 0;
-    margin-top: 5px;
-  }
-  .card-pf-content {
-    text-align: left;
-    margin-top: -20px;
-  }
-  .card-pf-content h2 {
-    font-size: 16px;
-    font-weight: bold;
-  }
-  .card-pf-content h3{
-    font-size: 14px;
-    padding-bottom: 0;
-  }
-  .page-header {
-    background: #f5f5f5;
-    margin: 0;
-  }
-  .page-header h1 {
-    margin-top: 0;
-    line-height: 30px;
-    padding-top: 20px;
-    padding-left: 20px;
-    font-size: 18px;
-  }
-  .content-area {
-    padding-top: 20px;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  .list-view-pf-view {
-    margin-top: 0;
-  }
-  .list-view-pf-main-info {
-    padding-bottom: 10px;
-  }
-  .row {
-    margin-left: 0;
-    margin-right: 0;
-  }
-  .pull-right-sm {
-    float: none !important;
-    margin-bottom: 10px;
-  }
-  .p-b {
-    padding-bottom: 20px;
-  }
-
-}
-
-@media (min-width: 768px) {
-  .cards-pf .row-cards-pf {
-    padding: 0;
-  }
-  .container-cards-pf {
-    margin-top: 0;
-  }
-}
-
-/* personal Info Style */
-.subtitle {
-  color: #4d5258;
-  font-size: 12px;
-  margin-bottom: 10px;
-}
-
-.content-area .required{
-  color: #cc0000;
-}
-
-.page-header {
-  border-bottom: 0;
-}
-
-.non-edit {
-  border: 1px solid #bbb;
-  padding: 3px 10px;
-  background-color: #f5f5f5;
-}
-
-/* Introduction Message on the left */
-.introMessage {
-    margin: 10px 20px 20px 0;
-}
-
-/* Device Activity */
-
-.card-title {
-	margin-left: 20px;
-	margin-bottom: 30px;
-}
-.detail-description {
-	margin-top:-10px;
-}
-.list-view-pf-view {
-	margin-top: 0;
-}
-.m-l {
-	margin-left: 20px;
-}
-.block-box {
-  margin-left: 0;
-  display: block;
-}
-.activity-item {
-	padding-left: 60px;
-}
-.activity-item ul {
-	list-style: none;
-}
-.activity-item h3 .fa {
-	margin-left: -30px;
-	margin-right: 5px;
-	font-size: 20px;
-}
-.btn-logout {
-	margin-left: 40px;
-	margin-bottom: 20px;
-	margin-top: 5px;
-}
-.list-view-pf .current-color {
-	font-weight: bold;
-	color: #4F9207!important;
-}
-.list-view-pf .list-group-item.list-view-pf-expand-active,
-.list-view-pf .list-group-item.list-view-pf-expand-active:first-child {
-  border-top-color: #d8d8d8;
-  border: solid 1px #d8d8d8;
-}
-.list-group-item-container {
-  border-top: solid 1px #d8d8d8;
-}
-
-/* Responsive Design for Devices Activiy*/
-@media (max-width: 767px) {
-  .activity-item {
-    padding-left: 0;
-  }
-  .list-group-item-header {
-    padding: 0;
-  }
-  .list-view-pf .list-group-item.list-view-pf-expand-active {
-    margin-left: -21px;
-    margin-right: -21px;
-  }
-  .list-view-pf .list-group-item.list-view-pf-expand-active .list-group-item-header {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  .list-group {
-    margin-bottom: 0;
-  }
-  .list-view-pf .list-group-item:last-child {
-    border-bottom: 0;
-  }
-  .list-group-item-container {
-    padding-left: 5px;
-    padding-right: 25px;
-  }
-}
-
-
-/* Application Style */
-.card-pf-application {
-  padding: 0;
-}
-.card-pf-application .card-pf-body {
-  padding-bottom: 0;
-}
-.card-pf-application .toolbar-pf {
-  margin: 0;
-  border-bottom: 0;
-}
-#toolbar-application-mobile {
-  display: none;
-}
-.card-pf-application .close {
-  position: absolute;
-  right: 10px;
-}
-/* Linked  Style */
-.list-view-pf-additional-info .fa-user {
-  margin-right: 5px;
-}
-.card-linked-account .list-view-pf .list-group-item-heading {
-    flex: 1 0 calc(40% - 20px);
-}
-.card-linked-account .list-view-pf-additional-info {
-    width: 10%；
-}
-.card-linked-account .list-view-pf .list-group-item-text {
-    width: calc(45% - 40px);
-}
-/*resource*/
-.m-t {
-	margin-top: 20px;
-}
-.list-view-pf .list-group-item {
-	border-bottom: 1px solid #ededed;
-}
-.list-view-resources .list-view-pf-additional-info-item .pficon {
-	margin-right: 0;
-	color: #fff;
-	font-size: 12px;
-	margin-left: 5px;
-}
-.list-view-resources .list-view-pf-additional-info-item-lg {
-	width: 45%;
-}
-.pfng-list-heading .list-view-pf-main-info {
-	padding-top: 10px;
-	padding-bottom: 10px;
-	font-weight: 600;
-	font-size: 13px;
-}
-.list-view-resources .list-view-pf-actions {
-	width: 75px;
-	height: 10px;
-}
-.pfng-list-heading .list-view-pf-additional-info {
-	font-size: 12px;
-	font-weight: 600;
-}
-.list-view-resources .list-view-pf-description {
-	width: 35%;
-}
-.list-view-shared .list-view-pf-description {
-	width: 30%;
-}
-.list-view-shared .list-view-pf-actions {
-	width: 20px;
-	height: 10px;
-}
-.list-view-detail .list-view-pf-actions {
-	width: 90px;
-}
-.list-view-detail .list-view-master-actions {
-	width: 105px;
-}
-.list-view-detail .list-view-space {
-  width: 20px;
-}
-.list-view-resources .list-view-pf-status {
-	width: auto;
-}
-.list-view-pf-additional-info-item {
-	text-align: left;
-}
-.list-view-resources .list-view-pf-stacked .list-group-item-heading {
-    font-size: 13px;
-}
-.list-view-resources .content-view-pf-pagination {
-	border: none;
-  background-color: #fff;
-}
-.resources-header {
-	margin-bottom: 20px;
-}
-.resources-header .fa-file {
-	font-size: 60px;
-	float: left;
-	margin-right: 20px;
-}
-.resources-info span {
-	border-right: 1px solid #cccccc;
-	padding-right: 20px;
-	margin-right: 20px;
-}
-.resources-info span:last-child {
-	border-right: 0px solid #cccccc;
-}
-.resources-actions {
-	float: right;
-	margin-top: -35px;
-}
-.resources-actions button {
-	margin-right: 10px;
-}
-.list-view-master-actions {
-	margin-top: 6px;
-}
-.permission-requests-labels ul {
-  margin-bottom: 0;
-}
-.permission-requests-labels li {
-	margin-bottom: 5px;
-	margin-top: 5px;
-}
-.permission-requests-labels .label-info {
-	background-color: #4A90E2;
-	padding-left: 15px;
-	padding-right: 15px;
-	border-radius: 20px;
-}
-.permission-requests-labels .pficon-close {
-  color:#fff;
-}
-.my-requests-labels .label-info {
-	background-color: #15B692;
-}
-.modal-title span {
-	font-weight: normal;
-}
-.resource-share-content {
-	margin-top: 20px;
-}
-.resources-list .nav-tabs {
-  margin-left: 20px;
-}
-.resources-list .content-view-pf-pagination {
-  margin-bottom: -20px;
-}
-.breadcrumb {
-    padding: 20px 15px 20px 0;
-}
-.resource-list-label {
-  display: none;
-}
-.resources-list .card-pf-body {
-  padding: 0;
-}
-@media (max-width: 767px) {
-  .no-paddding-re {
-    padding: 0;
-  }
-  .permission-requests-labels .m-b-s {
-    margin-bottom: 10px;
-  }
-  .no-paddding-re .label-warning {
-    margin-top: 10px;
-  }
-  .resource-list-label {
-    display: inline-block;
-    margin-bottom: 0;
-    margin-right: 5px;
-  }
-  .list-responsive-padding {
-    padding-left: 20px;
-    overflow: auto;
-  }
-  .list-view-pf .list-group-item {
-    padding-bottom: 10px;
-  }
-  .pfng-list-heading.list-group-item {
-    padding-bottom: 0px;
-  }
-  .list-view-resources .list-view-pf-stacked .list-group-item-heading {
-      font-size: 16px;
-      margin-bottom: 10px;
-  }
-  .list-view-pf-stacked .list-group-item-heading {
-    margin-right: 10px;
-  }
-  .resources-info span {
-    border: none;
-    display: block;
-    width: 100%;
-  }
-  .resources-info span label {
-    margin-bottom: 0;
-  }
-  .list-view-pf .list-head-labels {
-    display: none;
-  }
-  .list-head-label{
-    display: none;
-  }
-  .card-pf-application h2 {
-    margin-top: -10px;
-  }
-  .card-linked-account .card-pf-body {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .card-linked-account .list-group-item {
-    padding: 10px 0;
-  }
-  .card-linked-account .list-view-pf-additional-info {
-    margin-top: 20px;
-  }
-  .card-pf-application h2 a {
-    text-decoration: none;
-  }
-  .card-pf-application .list-group-item-container {
-    padding-left: 20px;
-    padding-right: 20px;
-    margin-left: -20px;
-  }
-  .card-pf-application .form-horizontal {
-    margin-bottom: 10px;
-  }
-  #toolbar-application-mobile {
-    display: block;
-  }
-  #toolbar-application {
-    display: none;
-  }
-  .non-display {
-    display: none;
-  }
-  .breadcrumb {
-    padding: 20px 15px 0px 20px;
-  }
-  .resources-header {
-    padding: 20px 20px 0 20px;
-    margin-bottom: 0px;
-  }
-  .resources-header .fa-file {
-    font-size: 50px;
-  }
-  .resources-list .card-pf-body {
-    padding: 0;
-  }
-  .resources-list .nav-tabs {
-    margin-top: 10px;
-  }
-  .margin-bottom-none{
-    padding-bottom: 0;
-  }
-}
-
-/* authenticator style */
-.list-pf {
-    border-bottom: 0;
-}
-.list-authenticator {
-    margin: 0 0 30px 0;
-}
-.list-authenticator-item {
-    border-color: #ededed;
-    border-left-color: #fff;
-    border-right-color: #fff;
-    border-style: solid;
-    border-width: 1px;
-    border-top: none;
-}
-.list-authenticator .list-pf-icon {
-  font-size: 1.8em;
-  height: 20px;
-  line-height: 30px;
-  width: 10px;
-  align-items: normal;
-}
-.list-authenticator .list-pf-title {
-  font-size: 15px;
-  font-weight: 600;
-}
-.top-margin-m {
-    margin-top: 16px;
-}
-.authenticator-entry {
-    font-size: 14px;
-}
-.authenticator-label {
-    font-size: 75%;
-    margin-left: 4px;
-}
-ol.setup-message li {
-  margin: 10px 0;
-}
-ol.setup-message li ul li {
-  margin: 5px 0;
-}
-.qrcode-code {
-  display: none;
-}
-.link-right {
-    text-align: right;
-    margin-top: 6px;
-    margin-bottom: 10px;
-}
-@media (max-width: 767px) {
-  .qrcode-img {
-    display: none;
-  }
-  .qrcode-code {
-    display: block;
-    margin-bottom: 20px;
-  }
-}
-
-
-/* backup codes setup style*/
-.backup-codes-box {
-  background-color: #fdf2e5;
-  border: 1px solid #ccc;
-  border-radius: 1px;
-  padding-top: 16px;
-  padding-bottom: 16px;
-  padding-top: 8px;
-  max-width: 320px;
-}
-
-.backup-codes-box-body {
-  font-size: 14px;
-  margin-left: 24px;
-  margin-top: 12px;
-}
-.backup-codes-list {
-  columns: 2;
-  -webkit-columns: 2;
-  -moz-columns: 2;
-  counter-reset: list;
-  list-style: none;
-  padding-left: 0px;
-}
-.backup-codes-list > li:before {
-  content: counter(list)". ";
-  color: lightgrey;
-  counter-increment: list;
-  display: inline-block;
-  width: 28px;
-  margin-left: -16px;
-  margin-right: 12px;
-  text-align: right;
-}
-.left-padding-m {
-  padding-left: 16px;
-}
-.generate-annotation {
-  max-width: 320px;
-  margin-top: 12px;
-}
-.header-text {
-  margin-left: 24px;
-  margin-bottom: 8px;
-}
-
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 6898f1f705..fcb074646e 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
@@ -18,6 +18,10 @@
       'react-dom': 'npm:react-dom/umd/react-dom.development.js',
       'react-router-dom': 'npm:react-router-dom/umd/react-router-dom.js',
       
+      '@patternfly': 'npm:@patternfly',
+      'react-styles': "react-styles/loader.js",
+      //'patternfly-react-core-button': 'patternflyreactcore:js/components/Button/index.js',
+      
       'moment': 'npm:moment/min/moment-with-locales.min.js',
       
       'axios': 'npm:axios/dist/axios.min.js',
