KEYCLOAK-6622

themes/src/main/resources/theme/base/admin/messages/admin-messages_en.properties

@@ -744,6 +744,12 @@ configure=Configure
 select-realm=Select realm
 add=Add
 
+client-storage=Client Storage
+no-client-storage-providers-configured=No client storage providers configured
+client-stores.tooltip=Keycloak can retrieve clients and their details from external stores.
+
+
+
 client-template.name.tooltip=Name of the client template. Must be unique in the realm
 client-template.description.tooltip=Description of the client template
 client-template.protocol.tooltip=Which SSO protocol configuration is being supplied by this client template
@@ -1335,7 +1341,7 @@ userStorage.cachePolicy.option.EVICT_WEEKLY=EVICT_WEEKLY
 userStorage.cachePolicy.option.EVICT_DAILY=EVICT_DAILY
 userStorage.cachePolicy.option.MAX_LIFESPAN=MAX_LIFESPAN
 userStorage.cachePolicy.option.NO_CACHE=NO_CACHE
-userStorage.cachePolicy.tooltip=Cache Policy for this storage provider.  'DEFAULT' is whatever the default settings are for the global user cache.  'EVICT_DAILY' is a time of day every day that the user cache will be invalidated.  'EVICT_WEEKLY' is a day of the week and time the cache will be invalidated.  'MAX-LIFESPAN' is the time in milliseconds that will be the lifespan of a cache entry.
+userStorage.cachePolicy.tooltip=Cache Policy for this storage provider.  'DEFAULT' is whatever the default settings are for the global cache.  'EVICT_DAILY' is a time of day every day that the cache will be invalidated.  'EVICT_WEEKLY' is a day of the week and time the cache will be invalidated.  'MAX-LIFESPAN' is the time in milliseconds that will be the lifespan of a cache entry.
 userStorage.cachePolicy.evictionDay=Eviction Day
 userStorage.cachePolicy.evictionDay.tooltip=Day of the week the entry will become invalid on
 userStorage.cachePolicy.evictionHour=Eviction Hour
@@ -1343,13 +1349,31 @@ userStorage.cachePolicy.evictionHour.tooltip=Hour of day the entry will become i
 userStorage.cachePolicy.evictionMinute=Eviction Minute
 userStorage.cachePolicy.evictionMinute.tooltip=Minute of day the entry will become invalid on.
 userStorage.cachePolicy.maxLifespan=Max Lifespan
-userStorage.cachePolicy.maxLifespan.tooltip=Max lifespan of a user cache entry in milliseconds.
+userStorage.cachePolicy.maxLifespan.tooltip=Max lifespan of cache entry in milliseconds.
 user-origin-link=Storage Origin
 user-origin.tooltip=UserStorageProvider the user was loaded from
 user-link.tooltip=UserStorageProvider this locally stored user was imported from.
 client-origin-link=Storage Origin
 client-origin.tooltip=Provider the client was loaded from
 
+client-storage-cache-policy=Cache Settings
+clientStorage.cachePolicy=Cache Policy
+clientStorage.cachePolicy.option.DEFAULT=DEFAULT
+clientStorage.cachePolicy.option.EVICT_WEEKLY=EVICT_WEEKLY
+clientStorage.cachePolicy.option.EVICT_DAILY=EVICT_DAILY
+clientStorage.cachePolicy.option.MAX_LIFESPAN=MAX_LIFESPAN
+clientStorage.cachePolicy.option.NO_CACHE=NO_CACHE
+clientStorage.cachePolicy.tooltip=Cache Policy for this storage provider.  'DEFAULT' is whatever the default settings are for the global cache.  'EVICT_DAILY' is a time of day every day that the cache will be invalidated.  'EVICT_WEEKLY' is a day of the week and time the cache will be invalidated.  'MAX-LIFESPAN' is the time in milliseconds that will be the lifespan of a cache entry.
+clientStorage.cachePolicy.evictionDay=Eviction Day
+clientStorage.cachePolicy.evictionDay.tooltip=Day of the week the entry will become invalid on
+clientStorage.cachePolicy.evictionHour=Eviction Hour
+clientStorage.cachePolicy.evictionHour.tooltip=Hour of day the entry will become invalid on.
+clientStorage.cachePolicy.evictionMinute=Eviction Minute
+clientStorage.cachePolicy.evictionMinute.tooltip=Minute of day the entry will become invalid on.
+clientStorage.cachePolicy.maxLifespan=Max Lifespan
+clientStorage.cachePolicy.maxLifespan.tooltip=Max lifespan of cache entry in milliseconds.
+
+
 disable=Disable
 disableable-credential-types=Disableable Types
 credentials.disableable.tooltip=List of credential types that you can disable

themes/src/main/resources/theme/base/admin/resources/js/app.js

@@ -1451,7 +1451,57 @@ module.config([ '$routeProvider', function($routeProvider) {
             },
             controller : 'ClientImportCtrl'
         })
-        .when('/', {
+       .when('/realms/:realm/client-stores', {
+            templateUrl : resourceUrl + '/partials/client-storage-list.html',
+            resolve : {
+                realm : function(RealmLoader) {
+                    return RealmLoader();
+                },
+                serverInfo : function(ServerInfoLoader) {
+                    return ServerInfoLoader();
+                }
+            },
+            controller : 'ClientStoresCtrl'
+        })
+        .when('/realms/:realm/client-storage/providers/:provider/:componentId', {
+            templateUrl : resourceUrl + '/partials/client-storage-generic.html',
+            resolve : {
+                realm : function(RealmLoader) {
+                    return RealmLoader();
+                },
+                instance : function(ComponentLoader) {
+                    return ComponentLoader();
+                },
+                providerId : function($route) {
+                    return $route.current.params.provider;
+                },
+                serverInfo : function(ServerInfoLoader) {
+                    return ServerInfoLoader();
+                }
+            },
+            controller : 'GenericClientStorageCtrl'
+        })
+        .when('/create/client-storage/:realm/providers/:provider', {
+             templateUrl : resourceUrl + '/partials/client-storage-generic.html',
+             resolve : {
+                 realm : function(RealmLoader) {
+                     return RealmLoader();
+                 },
+                 instance : function() {
+                     return {
+
+                     };
+                 },
+                 providerId : function($route) {
+                     return $route.current.params.provider;
+                 },
+                 serverInfo : function(ServerInfoLoader) {
+                     return ServerInfoLoader();
+                 }
+             },
+             controller : 'GenericClientStorageCtrl'
+         })
+       .when('/', {
             templateUrl : resourceUrl + '/partials/home.html',
             controller : 'HomeCtrl'
         })
@@ -2409,6 +2459,15 @@ module.directive('kcTabsUsers', function () {
     }
 });
 
+module.directive('kcTabsClients', function () {
+    return {
+        scope: true,
+        restrict: 'E',
+        replace: true,
+        templateUrl: resourceUrl + '/templates/kc-tabs-clients.html'
+    }
+});
+
 module.directive('kcTabsGroup', function () {
     return {
         scope: true,

themes/src/main/resources/theme/base/admin/resources/js/controllers/clients.js

@@ -2388,3 +2388,210 @@ module.controller('ClientTemplateScopeMappingCtrl', function($scope, $http, real
 
     updateTemplateRealmRoles();
 });
+
+module.controller('ClientStoresCtrl', function($scope, $location, $route, realm, serverInfo, Components, Notifications, Dialog) {
+    console.log('ClientStoresCtrl ++++****');
+    $scope.realm = realm;
+    $scope.providers = serverInfo.componentTypes['org.keycloak.storage.client.ClientStorageProvider'];
+    $scope.instancesLoaded = false;
+
+    if (!$scope.providers) $scope.providers = [];
+
+    $scope.addProvider = function(provider) {
+        console.log('Add provider: ' + provider.id);
+        $location.url("/create/client-storage/" + realm.realm + "/providers/" + provider.id);
+    };
+
+    $scope.getInstanceLink = function(instance) {
+        return "/realms/" + realm.realm + "/client-storage/providers/" + instance.providerId + "/" + instance.id;
+    }
+
+    $scope.getInstanceName = function(instance) {
+        return instance.name;
+    }
+    $scope.getInstanceProvider = function(instance) {
+        return instance.providerId;
+    }
+
+    $scope.isProviderEnabled = function(instance) {
+        return !instance.config['enabled'] || instance.config['enabled'][0] == 'true';
+    }
+
+    $scope.getInstancePriority = function(instance) {
+        if (!instance.config['priority']) {
+            return "0";
+        }
+        return instance.config['priority'][0];
+    }
+
+    Components.query({realm: realm.realm,
+        parent: realm.id,
+        type: 'org.keycloak.storage.client.ClientStorageProvider'
+    }, function(data) {
+        $scope.instances = data;
+        $scope.instancesLoaded = true;
+    });
+
+    $scope.removeInstance = function(instance) {
+        Dialog.confirmDelete(instance.name, 'client storage provider', function() {
+            Components.remove({
+                realm : realm.realm,
+                componentId : instance.id
+            }, function() {
+                $route.reload();
+                Notifications.success("The provider has been deleted.");
+            });
+        });
+    };
+});
+
+module.controller('GenericClientStorageCtrl', function($scope, $location, Notifications, $route, Dialog, realm,
+                                                     serverInfo, instance, providerId, Components) {
+    console.log('GenericClientStorageCtrl');
+    console.log('providerId: ' + providerId);
+    $scope.create = !instance.providerId;
+    console.log('create: ' + $scope.create);
+    var providers = serverInfo.componentTypes['org.keycloak.storage.client.ClientStorageProvider'];
+    console.log('providers length ' + providers.length);
+    var providerFactory = null;
+    for (var i = 0; i < providers.length; i++) {
+        var p = providers[i];
+        console.log('provider: ' + p.id);
+        if (p.id == providerId) {
+            $scope.providerFactory = p;
+            providerFactory = p;
+            break;
+        }
+
+    }
+    $scope.changed = false;
+
+    console.log("providerFactory: " + providerFactory.id);
+
+    function initClientStorageSettings() {
+        if ($scope.create) {
+            $scope.changed = true;
+            instance.name = providerFactory.id;
+            instance.providerId = providerFactory.id;
+            instance.providerType = 'org.keycloak.storage.client.ClientStorageProvider';
+            instance.parentId = realm.id;
+            instance.config = {
+
+            };
+            instance.config['priority'] = ["0"];
+            instance.config['enabled'] = ["true"];
+
+            $scope.fullSyncEnabled = false;
+            $scope.changedSyncEnabled = false;
+            instance.config['cachePolicy'] = ['DEFAULT'];
+            instance.config['evictionDay'] = [''];
+            instance.config['evictionHour'] = [''];
+            instance.config['evictionMinute'] = [''];
+            instance.config['maxLifespan'] = [''];
+            if (providerFactory.properties) {
+
+                for (var i = 0; i < providerFactory.properties.length; i++) {
+                    var configProperty = providerFactory.properties[i];
+                    if (configProperty.defaultValue) {
+                        instance.config[configProperty.name] = [configProperty.defaultValue];
+                    } else {
+                        instance.config[configProperty.name] = [''];
+                    }
+
+                }
+            }
+
+        } else {
+            $scope.changed = false;
+             if (!instance.config['enabled']) {
+                instance.config['enabled'] = ['true'];
+            }
+            if (!instance.config['cachePolicy']) {
+                instance.config['cachePolicy'] = ['DEFAULT'];
+
+            }
+            if (!instance.config['evictionDay']) {
+                instance.config['evictionDay'] = [''];
+
+            }
+            if (!instance.config['evictionHour']) {
+                instance.config['evictionHour'] = [''];
+
+            }
+            if (!instance.config['evictionMinute']) {
+                instance.config['evictionMinute'] = [''];
+
+            }
+            if (!instance.config['maxLifespan']) {
+                instance.config['maxLifespan'] = [''];
+
+            }
+            if (!instance.config['priority']) {
+                instance.config['priority'] = ['0'];
+            }
+
+            if (providerFactory.properties) {
+                for (var i = 0; i < providerFactory.properties.length; i++) {
+                    var configProperty = providerFactory.properties[i];
+                    if (!instance.config[configProperty.name]) {
+                        instance.config[configProperty.name] = [''];
+                    }
+                }
+            }
+
+        }
+    }
+
+    initClientStorageSettings();
+    $scope.instance = angular.copy(instance);
+    $scope.realm = realm;
+
+     $scope.$watch('instance', function() {
+        if (!angular.equals($scope.instance, instance)) {
+            $scope.changed = true;
+        }
+
+    }, true);
+
+    $scope.save = function() {
+        console.log('save provider');
+        $scope.changed = false;
+        if ($scope.create) {
+            console.log('saving new provider');
+            Components.save({realm: realm.realm}, $scope.instance,  function (data, headers) {
+                var l = headers().location;
+                var id = l.substring(l.lastIndexOf("/") + 1);
+
+                $location.url("/realms/" + realm.realm + "/client-storage/providers/" + $scope.instance.providerId + "/" + id);
+                Notifications.success("The provider has been created.");
+            });
+        } else {
+            console.log('update existing provider');
+            Components.update({realm: realm.realm,
+                    componentId: instance.id
+                },
+                $scope.instance,  function () {
+                    $route.reload();
+                    Notifications.success("The provider has been updated.");
+                });
+        }
+    };
+
+    $scope.reset = function() {
+        $route.reload();
+    };
+
+    $scope.cancel = function() {
+        console.log('cancel');
+        if ($scope.create) {
+            $location.url("/realms/" + realm.realm + "/client-stores");
+        } else {
+            $route.reload();
+        }
+    };
+
+
+
+});
+
+

themes/src/main/resources/theme/base/admin/resources/partials/client-list.html

@@ -1,8 +1,5 @@
 <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
-    <h1>
-        <span>{{:: 'clients' | translate}}</span>
-        <kc-tooltip>{{:: 'clients.tooltip' | translate}}</kc-tooltip>
-    </h1>
+    <kc-tabs-clients></kc-tabs-clients>
 
     <table class="datatable table table-striped table-bordered dataTable no-footer">
         <thead>

themes/src/main/resources/theme/base/admin/resources/partials/client-storage-generic.html

@@ -0,0 +1,207 @@
+<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
+    <ol class="breadcrumb">
+        <li><a href="#/realms/{{realm.realm}}/client-stores">{{:: 'client-storage' | translate}}</a></li>
+        <li data-ng-hide="create">{{instance.name|capitalize}}</li>
+        <li data-ng-show="create">{{:: 'add-client-storage-provider' | translate}}</li>
+    </ol>
+    
+    <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageRealm">
+        <fieldset>
+            <legend><span class="text">{{:: 'required-settings' | translate}}</span></legend>
+            <div class="form-group clearfix" data-ng-show="!create">
+                <label class="col-md-2 control-label" for="providerId">{{:: 'provider-id' | translate}} </label>
+                <div class="col-md-6">
+                    <input class="form-control" id="providerId" type="text" ng-model="instance.id" readonly>
+                </div>
+            </div>
+            <div class="form-group clearfix block">
+                <label class="col-md-2 control-label" for="enabled">{{:: 'enabled' | translate}}</label>
+                <div class="col-md-6">
+                    <input ng-model="instance.config['enabled'][0]" name="enabled" id="enabled" onoffswitchvalue on-text="{{:: 'onText' | translate}}" off-text="{{:: 'offText' | translate}}" />
+                </div>
+                <kc-tooltip>{{:: 'client-storage.enabled.tooltip' | translate}}</kc-tooltip>
+            </div>
+            <div class="form-group clearfix">
+                <label class="col-md-2 control-label" for="consoleDisplayName">{{:: 'console-display-name' | translate}} </label>
+                <div class="col-md-6">
+                    <input class="form-control" id="consoleDisplayName" type="text" ng-model="instance.name" placeholder="{{:: 'defaults-to-id' | translate}}">
+                </div>
+                <kc-tooltip>{{:: 'console-display-name.tooltip' | translate}}</kc-tooltip>
+            </div>
+            <div class="form-group clearfix">
+                <label class="col-md-2 control-label" for="priority">{{:: 'priority' | translate}} </label>
+                <div class="col-md-6">
+                    <input class="form-control" id="priority" type="text" ng-model="instance.config['priority'][0]">
+                </div>
+                <kc-tooltip>{{:: 'priority.tooltip' | translate}}</kc-tooltip>
+            </div>
+
+            <kc-component-config realm="realm" config="instance.config" properties="providerFactory.properties"></kc-component-config>
+
+        </fieldset>
+
+        <fieldset>
+            <legend><span class="text">{{:: 'client-storage-cache-policy' | translate}}</span></legend>
+            <div class="form-group">
+                <label for="cachePolicy" class="col-md-2 control-label">{{:: 'clientStorage.cachePolicy' | translate}}</label>
+                <div class="col-md-2">
+                    <div>
+                        <select id="cachePolicy" ng-model="instance.config['cachePolicy'][0]" class="form-control">
+                            <option value="DEFAULT">{{:: 'clientStorage.cachePolicy.option.DEFAULT' | translate}}</option>
+                            <option value="EVICT_DAILY">{{:: 'clientStorage.cachePolicy.option.EVICT_DAILY' | translate}}</option>
+                            <option value="EVICT_WEEKLY">{{:: 'clientStorage.cachePolicy.option.EVICT_WEEKLY' | translate}}</option>
+                            <option value="MAX_LIFESPAN">{{:: 'clientStorage.cachePolicy.option.MAX_LIFESPAN' | translate}}</option>
+                            <option value="NO_CACHE">{{:: 'clientStorage.cachePolicy.option.NO_CACHE' | translate}}</option>
+                        </select>
+                    </div>
+                </div>
+                <kc-tooltip>{{:: 'clientStorage.cachePolicy.tooltip' | translate}}</kc-tooltip>
+            </div>
+            <div class="form-group" data-ng-show="instance.config['cachePolicy'][0] == 'EVICT_WEEKLY'">
+                <label for="evictionDay" class="col-md-2 control-label">{{:: 'clientStorage.cachePolicy.evictionDay' | translate}}</label>
+                <div class="col-md-2">
+                    <div>
+                        <select id="evictionDay" ng-model="instance.config['evictionDay'][0]" class="form-control">
+                            <option value="1">{{:: 'Sunday' | translate}}</option>
+                            <option value="2">{{:: 'Monday' | translate}}</option>
+                            <option value="3">{{:: 'Tuesday' | translate}}</option>
+                            <option value="4">{{:: 'Wednesday' | translate}}</option>
+                            <option value="5">{{:: 'Thursday' | translate}}</option>
+                            <option value="6">{{:: 'Friday' | translate}}</option>
+                            <option value="7">{{:: 'Saturday' | translate}}</option>
+                        </select>
+                    </div>
+                </div>
+                <kc-tooltip>{{:: 'clientStorage.cachePolicy.evictionDay.tooltip' | translate}}</kc-tooltip>
+            </div>
+            <div class="form-group clearfix" data-ng-show="instance.config['cachePolicy'][0] == 'EVICT_WEEKLY' || instance.config['cachePolicy'][0] == 'EVICT_DAILY'">
+                <label class="col-md-2 control-label" for="evictionHour">{{:: 'clientStorage.cachePolicy.evictionHour' | translate}}</label>
+                <div class="col-md-2">
+                    <div>
+                        <select id="evictionHour" ng-model="instance.config['evictionHour'][0]" class="form-control">
+                            <option value="0">00</option>
+                            <option value="1">01</option>
+                            <option value="2">02</option>
+                            <option value="3">03</option>
+                            <option value="4">04</option>
+                            <option value="5">05</option>
+                            <option value="6">06</option>
+                            <option value="7">07</option>
+                            <option value="8">08</option>
+                            <option value="9">09</option>
+                            <option value="10">10</option>
+                            <option value="11">11</option>
+                            <option value="12">12</option>
+                            <option value="13">13</option>
+                            <option value="14">14</option>
+                            <option value="15">15</option>
+                            <option value="16">16</option>
+                            <option value="17">17</option>
+                            <option value="18">18</option>
+                            <option value="19">19</option>
+                            <option value="20">20</option>
+                            <option value="21">21</option>
+                            <option value="22">22</option>
+                            <option value="23">23</option>
+                        </select>
+                    </div>
+                </div>
+                <kc-tooltip>{{:: 'clientStorage.cachePolicy.evictionHour.tooltip' | translate}}</kc-tooltip>
+            </div>
+            <div class="form-group clearfix" data-ng-show="instance.config['cachePolicy'][0] == 'EVICT_WEEKLY' || instance.config['cachePolicy'][0] == 'EVICT_DAILY'">
+                <label class="col-md-2 control-label" for="evictionMinute">{{:: 'clientStorage.cachePolicy.evictionMinute' | translate}}</label>
+                <div class="col-md-2">
+                    <div>
+                        <select id="evictionMinute" ng-model="instance.config['evictionMinute'][0]" class="form-control">
+                            <option value="0">00</option>
+                            <option value="1">01</option>
+                            <option value="2">02</option>
+                            <option value="3">03</option>
+                            <option value="4">04</option>
+                            <option value="5">05</option>
+                            <option value="6">06</option>
+                            <option value="7">07</option>
+                            <option value="8">08</option>
+                            <option value="9">09</option>
+                            <option value="10">10</option>
+                            <option value="11">11</option>
+                            <option value="12">12</option>
+                            <option value="13">13</option>
+                            <option value="14">14</option>
+                            <option value="15">15</option>
+                            <option value="16">16</option>
+                            <option value="17">17</option>
+                            <option value="18">18</option>
+                            <option value="19">19</option>
+                            <option value="20">20</option>
+                            <option value="21">21</option>
+                            <option value="22">22</option>
+                            <option value="23">23</option>
+                            <option value="24">24</option>
+                            <option value="25">25</option>
+                            <option value="26">26</option>
+                            <option value="27">27</option>
+                            <option value="28">28</option>
+                            <option value="29">29</option>
+                            <option value="30">30</option>
+                            <option value="31">31</option>
+                            <option value="32">32</option>
+                            <option value="33">33</option>
+                            <option value="34">34</option>
+                            <option value="35">35</option>
+                            <option value="36">36</option>
+                            <option value="37">37</option>
+                            <option value="38">38</option>
+                            <option value="39">39</option>
+                            <option value="40">40</option>
+                            <option value="41">41</option>
+                            <option value="42">42</option>
+                            <option value="43">43</option>
+                            <option value="44">44</option>
+                            <option value="45">45</option>
+                            <option value="46">46</option>
+                            <option value="47">47</option>
+                            <option value="48">48</option>
+                            <option value="49">49</option>
+                            <option value="50">50</option>
+                            <option value="51">51</option>
+                            <option value="52">52</option>
+                            <option value="53">53</option>
+                            <option value="54">54</option>
+                            <option value="55">55</option>
+                            <option value="56">56</option>
+                            <option value="57">57</option>
+                            <option value="58">58</option>
+                            <option value="59">59</option>
+                        </select>
+                    </div>
+                    </div>
+                    <kc-tooltip>{{:: 'clientStorage.cachePolicy.evictionMinute.tooltip' | translate}}</kc-tooltip>
+            </div>
+            <div class="form-group clearfix" data-ng-show="instance.config['cachePolicy'][0] == 'MAX_LIFESPAN'">
+                <label class="col-md-2 control-label" for="maxLifespan">{{:: 'clientStorage.cachePolicy.maxLifespan' | translate}}</label>
+                <div class="col-md-6">
+                    <input class="form-control" type="text"  ng-model="instance.config['maxLifespan'][0]" id="maxLifespan" />
+                </div>
+                <kc-tooltip>{{:: 'clientStorage.cachePolicy.maxLifespan.tooltip' | translate}}</kc-tooltip>
+            </div>
+        </fieldset>
+
+
+        <div class="form-group">
+            <div class="col-md-10 col-md-offset-2" data-ng-show="create && access.manageRealm">
+                <button kc-save>{{:: 'save' | translate}}</button>
+                <button kc-cancel data-ng-click="cancel()">{{:: 'cancel' | translate}}</button>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <div class="col-md-10 col-md-offset-2" data-ng-show="!create && access.manageRealm">
+                <button kc-save  data-ng-disabled="!changed">{{:: 'save' | translate}}</button>
+                <button kc-reset data-ng-disabled="!changed">{{:: 'cancel' | translate}}</button>
+            </div>
+        </div>
+    </form>
+</div>
+
+<kc-menu></kc-menu>

themes/src/main/resources/theme/base/admin/resources/partials/client-storage-list.html

@@ -0,0 +1,68 @@
+<div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
+
+    <kc-tabs-clients></kc-tabs-clients>
+
+    <div class="blank-slate-pf" data-ng-hide="!instancesLoaded || (instances && instances.length > 0)">
+        <div class="blank-slate-pf-icon">
+            <span class="fa fa-database"></span>
+        </div>
+        <h1>
+            {{:: 'client-storage' | translate}}
+        </h1>
+        <p>Keycloak can federate external client databases. Out of the box we have support for Openshift OAuth clients and service accounts.</p>
+        <p>To get started select a provider from the dropdown below:</p>
+        <div class="blank-slate-pf-main-action">
+            <div class="row" data-ng-show="access.manageRealm">
+                <div class="col-sm-4 col-sm-offset-4">
+                    <div class="form-group">
+                        <select class="form-control" ng-model="selectedProvider"
+                                ng-options="p.id for p in providers"
+                                data-ng-change="addProvider(selectedProvider); selectedProvider = null">
+                            <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <table class="table table-striped table-bordered" data-ng-show="instances && instances.length > 0">
+        <thead>
+            <tr ng-show="providers.length > 0 && access.manageRealm">
+                <th colspan="5" class="kc-table-actions">
+                    <div class="pull-right">
+                        <div>
+                            <select class="form-control" ng-model="selectedProvider"
+                                    ng-options="p.id for p in providers"
+                                    data-ng-change="addProvider(selectedProvider); selectedProvider = null">
+                                <option value="" disabled selected>{{:: 'add-provider.placeholder' | translate}}</option>
+                            </select>
+                        </div>
+                    </div>
+                </th>
+            </tr>
+            <tr data-ng-show="instances && instances.length > 0">
+                <th>{{:: 'id' | translate}}</th>
+                <th>{{:: 'enabled' | translate}}</th>
+                <th>{{:: 'provider-name' | translate}}</th>
+                <th>{{:: 'priority' | translate}}</th>
+                <th colspan="2">{{:: 'actions' | translate}}</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr ng-repeat="instance in instances">
+                <td><a href="#{{getInstanceLink(instance)}}">{{getInstanceName(instance)}}</a></td>
+                <td>{{isProviderEnabled(instance)}}</td>
+                <td>{{getInstanceProvider(instance) | capitalize}}</td>
+                <td>{{getInstancePriority(instance)}}</td>
+                <td class="kc-action-cell" kc-open="{{getInstanceLink(instance)}}">{{:: 'edit' | translate}}</td>
+                <td class="kc-action-cell" data-ng-click="removeInstance(instance)">{{:: 'delete' | translate}}</td>
+            </tr>
+            <tr data-ng-show="!instances || instances.length == 0">
+                <td class="text-muted">{{:: 'no-client-storage-providers-configured' | translate}}</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+<kc-menu></kc-menu>

themes/src/main/resources/theme/base/admin/resources/templates/kc-tabs-clients.html

@@ -0,0 +1,16 @@
+<div >
+    <h1>
+        <span>{{:: 'clients' | translate}}</span>
+    </h1>
+
+    <ul class="nav nav-tabs">
+        <li ng-class="{active: path[2] == 'clients'}">
+            <a href="#/realms/{{realm.realm}}/clients">{{:: 'lookup' | translate}}</a>
+            <kc-tooltip>{{:: 'clients.tooltip' | translate}}</kc-tooltip>
+        </li>
+        <li ng-class="{active: path[2] == 'client-stores'}">
+            <a href="#/realms/{{realm.realm}}/client-stores">{{:: 'client-storage' | translate}}</a>
+            <kc-tooltip>{{:: 'client-stores.tooltip' | translate}}</kc-tooltip>
+        </li>
+    </ul>
+</div>