diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html b/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
index 0de7894..a7c9e5d 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/realm-identity-provider.html
@@ -5,7 +5,7 @@
<span class="fa fa-exchange"></span>
</div>
<h1>
- Identity Providers
+ {{:: 'identity-providers' | translate}}
</h1>
<p class="">
Through Identity Brokering it's easy to allow users to authenticate to Keycloak using external Identity Providers or Social Networks.<br> We have built-in support for OpenID Connect and SAML 2.0 as well as a number of social networks such as Google, GitHub, Facebook and Twitter.
diff --git a/themes/src/main/resources/theme/base/admin/resources/partials/user-federation.html b/themes/src/main/resources/theme/base/admin/resources/partials/user-federation.html
index cdf18b8..2b4a94f 100755
--- a/themes/src/main/resources/theme/base/admin/resources/partials/user-federation.html
+++ b/themes/src/main/resources/theme/base/admin/resources/partials/user-federation.html
@@ -3,39 +3,63 @@
<span>{{:: 'user-federation' | translate}}</span>
</h1>
- <table class="table table-striped table-bordered">
- <thead>
- <tr ng-show="providers.length > 0 && access.manageUsers">
- <th colspan="5" class="kc-table-actions">
- <div class="pull-right">
- <div>
- <select class="form-control" ng-model="selectedProvider"
+ <div class="blank-slate-pf" data-ng-hide="instances && instances.length > 0">
+ <div class="blank-slate-pf-icon">
+ <span class="fa fa-database"></span>
+ </div>
+ <h1>
+ {{:: 'user-federation' | translate}}
+ </h1>
+ <p>Keycloak can federate external user databases. Out of the box we have support for LDAP and Active Directory.</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.manageUsers">
+ <div class="col-sm-4 col-sm-offset-4">
+ <div class="form-group">
+ <select class="selectpicker 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>{{:: 'provider-name' | translate}}</th>
- <th>{{:: 'priority' | translate}}</th>
- <th colspan="2">{{:: 'actions' | translate}}</th>
- </tr>
+ </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.manageUsers">
+ <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>{{:: '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>{{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-user-federation-providers-configured' | translate}}</td>
- </tr>
+ <tr ng-repeat="instance in instances">
+ <td><a href="#{{getInstanceLink(instance)}}">{{getInstanceName(instance)}}</a></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-user-federation-providers-configured' | translate}}</td>
+ </tr>
</tbody>
</table>
</div>
