keycloak-memoizeit

finished 1st round of refactoring

2/11/2014 2:45:45 PM

Changes

Details

diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/index.html b/admin-ui/src/main/resources/META-INF/resources/admin/index.html
index bbd60a0..c1516d2 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/index.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/index.html
@@ -56,9 +56,20 @@
     <a id="idletimeout-resume" href="#">Click here to continue using this web page</a>.
 </div>
 
-
 <div class="feedback-aligner" data-ng-show="notification" data-ng-click="notification = null">
-    <div class="alert alert-{{notification.type}}"><strong>{{notification.header}}</strong> {{notification.message}}</div>
+    <div class="alert alert-{{notification.type}}">
+        <span class="pficon pficon-ok" ng-show="notification.type == 'success'"></span>
+        <span class="pficon pficon-info" ng-show="notification.type == 'info'"></span>
+        <span class="pficon-layered" ng-show="notification.type == 'danger'">
+            <span class="pficon pficon-error-octagon"></span>
+            <span class="pficon pficon-error-exclamation"></span>
+        </span>
+        <span class="pficon-layered" ng-show="notification.type == 'warning'">
+            <span class="pficon pficon-warning-triangle"></span>
+            <span class="pficon pficon-warning-exclamation"></span>
+        </span>
+        <strong>{{notification.header}}</strong> {{notification.message}}
+    </div>
 </div>
 
 <header class="navbar navbar-default navbar-pf navbar-main header">
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
index 7c675c0..3fac2e4 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
@@ -702,13 +702,19 @@ module.directive('kcSave', function ($compile, Notifications) {
                 $scope.$apply(function() {
                     var form = elem.closest('form');
                     if (form && form.attr('name')) {
+                        var ngValid = form.find('.ng-valid');
                         if ($scope[form.attr('name')].$valid) {
-                            form.find('.ng-valid').removeClass('error');
+                            //ngValid.removeClass('error');
+                            ngValid.parent().removeClass('has-error');
                             $scope['save']();
                         } else {
                             Notifications.error("Missing or invalid field(s). Please verify the fields in red.")
-                            form.find('.ng-invalid').addClass('error');
-                            form.find('.ng-valid').removeClass('error');
+                            //ngValid.removeClass('error');
+                            ngValid.parent().removeClass('has-error');
+
+                            var ngInvalid = form.find('.ng-invalid');
+                            //ngInvalid.addClass('error');
+                            ngInvalid.parent().addClass('has-error');
                         }
                     }
                 });
@@ -763,7 +769,8 @@ module.directive('kcSelect', function ($compile, Notifications) {
         scope: {
             kcOptions: '=',
             kcModel: '=',
-            id: "="
+            id: "=",
+            kcPlaceholder: '@'
         },
         restrict: 'EA',
         replace: true,
@@ -866,92 +873,4 @@ module.filter('capitalize', function() {
     return function(input) {
         return input.substring(0, 1).toUpperCase() + input.substring(1);
     }
-});
-
-
-/*
- *   TODO - create directive for form controlls
- *  Would be used like this:
- *  <kc-form-control kc-changed="changed" kc-create="createRealm" kc-action-cancel="cancel" kc-action-delete="remove"></kc-form-control>
- */
-
-module.directive('kcFormControl', function () {
-    return {
-        scope: {
-            kcCreate: "=",
-            kcChanged: "=",
-            kcActionCancel: "&",
-            kcActionRemove: "&"
-        },
-        restrict: 'E',
-        replace: true,
-        templateUrl: "templates/kc-form-control-buttons.html"
-    }
-});
-
-module.directive('kcButtonSave', function ($compile, Notifications) {
-    return {
-        restrict: 'A',
-        replace: true,
-        link: function ($scope, elem, attr, ctrl) {
-            elem.addClass("btn btn-primary btn-lg");
-            elem.attr("type","submit");
-            elem.bind('click', function() {
-                $scope.$apply(function() {
-                    var form = elem.closest('form');
-                    if (form && form.attr('name')) {
-                        if ($scope[form.attr('name')].$valid) {
-                            form.find('.ng-valid').removeClass('error');
-                            $scope['save']();
-                        } else {
-                            Notifications.error("Missing or invalid field(s). Please verify the fields in red.")
-                            form.find('.ng-invalid').addClass('error');
-                            form.find('.ng-valid').removeClass('error');
-                        }
-                    }
-                });
-            })
-        }
-    }
-});
-
-module.directive('kcButtonDelete', function() {
-    return {
-        restrict: 'A',
-        compile: function(element, attrs){
-            element.addClass("btn btn-danger btn-lg");
-            element.attr("type","submit");
-        }
-    }
-});
-
-module.directive('kcButtonReset', function ($compile, Notifications) {
-    return {
-        restrict: 'A',
-        link: function ($scope, elem, attr, ctrl) {
-            elem.addClass("btn btn-default btn-lg");
-            elem.attr("type","submit");
-            elem.bind('click', function() {
-                $scope.$apply(function() {
-                    var form = elem.closest('form');
-                    if (form && form.attr('name')) {
-                        form.find('.ng-valid').removeClass('error');
-                        form.find('.ng-invalid').removeClass('error');
-                        $scope['reset']();
-                    }
-                })
-            })
-        }
-    }
-});
-
-module.directive('kcButtonCancel', function ($compile, Notifications) {
-    return {
-        restrict: 'A',
-        replace: true,
-        compile: function(element, attrs){
-            element.addClass("btn btn-default btn-lg");
-            element.attr("type","submit");
-        }
-    }
 });
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
index af02eab..aca3e5e 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/realm.js
@@ -3,8 +3,6 @@ module.controller('GlobalCtrl', function($scope, $http, Auth, Current, $location
         Notifications.success("test");
     };
 
-    $scope.vilko = "tralala";
-
     $scope.auth = Auth;
     $http.get('/auth/rest/admin/whoami').success(function(data, status) {
         Auth.user = data;
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/users.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/users.js
index 82556c7..bd0e65e 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/users.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/controllers/users.js
@@ -11,8 +11,6 @@ module.controller('UserRoleMappingCtrl', function($scope, $http, realm, user, ro
     $scope.selectedApplicationMappings = [];
     $scope.applicationMappings = [];
 
-
-
     $scope.realmMappings = RealmRoleMapping.query({realm : realm.realm, userId : user.username}, function(){
         for (var i = 0; i < $scope.realmMappings.length; i++) {
             var role = $scope.realmMappings[i];
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/js/services.js b/admin-ui/src/main/resources/META-INF/resources/admin/js/services.js
index 4bb78fd..ccca980 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/js/services.js
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/js/services.js
@@ -17,11 +17,12 @@ module.service('Dialog', function($dialog) {
             '<span>This action can\'t be undone.</span>';
 		var btns = [ {
 			result : 'cancel',
-			label : 'Cancel'
+			label : 'Cancel',
+            cssClass : 'btn btn-default'
 		}, {
 			result : 'ok',
 			label : 'Delete',
-			cssClass : 'destructive'
+			cssClass : 'btn btn-danger'
 		} ];
 
 		$dialog.messageBox(title, msg, btns).open().then(function(result) {
@@ -37,11 +38,12 @@ module.service('Dialog', function($dialog) {
             '<span>This action can\'t be undone.</span>';
         var btns = [ {
             result : 'cancel',
-            label : 'Cancel'
+            label : 'Cancel',
+            cssClass : 'btn btn-default'
         }, {
             result : 'ok',
             label : 'Generate new keys',
-            cssClass : 'destructive'
+            cssClass : 'btn btn-danger'
         } ];
 
         $dialog.messageBox(title, msg, btns).open().then(function(result) {
@@ -57,11 +59,12 @@ module.service('Dialog', function($dialog) {
             '<span>This action can\'t be undone.</span>';
         var btns = [ {
             result : 'cancel',
-            label : 'Cancel'
+            label : 'Cancel',
+            cssClass : 'btn btn-default'
         }, {
             result : 'ok',
             label : title,
-            cssClass : 'destructive'
+            cssClass : 'btn btn-danger'
         } ];
 
         $dialog.messageBox(title, msg, btns).open().then(function(result) {
@@ -117,11 +120,11 @@ module.factory('Notifications', function($rootScope, $timeout) {
 	};
 
 	notifications.error = function(message) {
-		notifications.message("error", "Error!", message);
+		notifications.message("danger", "Error!", message);
 	};
 
 	notifications.warn = function(message) {
-		notifications.message("warn", "Warning!", message);
+		notifications.message("warning", "Warning!", message);
 	};
 
 	return notifications;
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html
index d511b54..56df162 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-credentials.html
@@ -16,7 +16,7 @@
             <li class="active">Credentials</li>
         </ol>
         <h2 data-ng-hide="create"><span>{{application.name}}</span> Credentials</h2>
-        <form class="form-horizontal" name="credentialForm" novalidate >
+        <form class="form-horizontal" name="credentialForm" novalidate>
             <fieldset data-ng-show="passwordRequired">
                 <legend uncollapsed><span class="text">Change Password</span></legend>
                 <div class="form-group">
@@ -33,11 +33,11 @@
                                required>
                     </div>
                 </div>
-                <div class="form-actions">
-                    <button type="submit" data-ng-click="changePassword()" class="btn btn-primary btn-lg" ng-show="password != null">Save
-                    </button>
-                </div>
             </fieldset>
+            <div class="pull-right form-actions" ng-show="password != null">
+                <button type="submit" data-ng-click="changePassword()" class="btn btn-primary btn-lg">Change Password
+                </button>
+            </div>
             <fieldset data-ng-show="totpRequired">
                 <legend uncollapsed><span class="text">Change TOTP Key</span></legend>
                 <div class="form-group">
@@ -49,12 +49,10 @@
                         </button>
                     </div>
                 </div>
-                <div class="form-actions">
-                    <label class="col-sm-2 control-label"></label>
-                    <button type="submit" data-ng-click="changeTotp()" class="btn btn-primary btn-lg" ng-show="totp != null">Save
-                    </button>
-                </div>
             </fieldset>
+            <div class="pull-right form-actions" ng-show="totp != null">
+                <button type="submit" data-ng-click="changeTotp()" class="btn btn-primary btn-lg">Save</button>
+            </div>
         </form>
     </div>
 </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
index 214f873..be150c2 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-detail.html
@@ -23,7 +23,7 @@
             <li class="active">Settings</li>
         </ol>
         <h2 data-ng-hide="create"><span>{{application.name}}</span> Settings</h2>
-        <form class="form-horizontal" name="applicationForm" novalidate>
+        <form class="form-horizontal" name="applicationForm" novalidate ng-class="{ has-error: applicationForm.$invalid }>
             <fieldset class="border-top">
                 <div class="form-group">
                     <label class="col-sm-2 control-label" for="name">Name <span class="required" data-ng-show="create">*</span></label>
@@ -31,7 +31,6 @@
                         <input class="form-control" type="text" id="name" name="name" data-ng-model="application.name" autofocus required>
                     </div>
                 </div>
-
                 <div class="form-group clearfix block">
                     <label class="col-sm-2 control-label" for="enabled">Enabled</label>
                     <div class="col-sm-4">
@@ -55,44 +54,65 @@
                 <div class="form-group">
                     <label class="col-sm-2 control-label" for="newWebOrigin">Web Origin</label>
                     <div class="col-sm-4">
-                        <div ng-repeat="webOrigin in application.webOrigins" class="item-deletable">
-                            <input class="form-control kc-button-control"
-                                   type="text" data-ng-class="{'input-below':!$first}"
-                                   name="webOrigin" id="webOrigin"
-                                   data-ng-model="webOrigin" readonly/>
-                            <button class="btn btn-danger"
-                                    type="button" data-ng-click="deleteWebOrigin($index)">Delete</button>
+                        <div ng-repeat="webOrigin in application.webOrigins" class="row kc-item-deletable">
+                                <div class="col-sm-9">
+                                    <input class="form-control kc-button-control"
+                                           type="text" data-ng-class="{'input-below':!$first}"
+                                           name="webOrigin" id="webOrigin"
+                                           data-ng-model="webOrigin" readonly/>
+                                </div>
+                                <div class="col-sm-2">
+                                    <button class="btn btn-danger"
+                                            type="button" data-ng-click="deleteWebOrigin($index)">Delete</button>
+                                </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-9">
+                                <input class="form-control kc-button-control"
+                                       type="text" name="newWebOrigin" id="newWebOrigin"
+                                       placeholder="New Web Origin..." data-ng-model="newWebOrigin"
+                                       data-ng-class="{'input-below':application.webOrigins.length}"/>
+                            </div>
+                            <div class="col-sm-2">
+                                <button class="btn btn-primary"
+                                        data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
+                            </div>
                         </div>
-                        <input class="form-control kc-button-control"
-                               type="text" name="newWebOrigin" id="newWebOrigin"
-                               placeholder="New Web Origin..." data-ng-model="newWebOrigin"
-                               data-ng-class="{'input-below':application.webOrigins.length}"/>
-                        <button class="btn btn-primary"
-                                data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
                     </div>
                 </div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label" for="newRedirectUri">Redirect URI</label>
                     <div class="col-sm-4">
-                        <div ng-repeat="redirectUri in application.redirectUris" class="item-deletable">
-                            <input class="form-control" type="text" data-ng-class="{'input-below':!$first}"
-                                   name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
-                            <button type="button" data-ng-click="deleteRedirectUri($index)" class="btn-delete">
-                                Delete</button>
+                        <div ng-repeat="redirectUri in application.redirectUris" class="row kc-item-deletable">
+                            <div class="col-sm-9">
+                                <input class="form-control" type="text" data-ng-class="{'input-below':!$first}"
+                                       name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
+                            </div>
+                            <div class="col-sm-2">
+                                <button class="btn btn-danger" type="button" data-ng-click="deleteRedirectUri($index)">
+                                    Delete</button>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-sm-9">
+                                <input class="form-control" type="text" name="newRedirectUri" id="newRedirectUri"
+                                       placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
+                                       data-ng-class="{'input-below':application.redirectUris.length}" />
+                            </div>
+                            <div class="col-sm-2">
+                                <button class="btn btn-primary" data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
+                            </div>
                         </div>
-                        <input class="form-control" type="text" name="newRedirectUri" id="newRedirectUri"
-                               placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
-                               data-ng-class="{'input-below':application.redirectUris.length}" />
-                        <button class="btn btn-primary" data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
                     </div>
                 </div>
             </fieldset>
 
-            <div class="pull-right form-actions" data-ng-show="createRealm">
+            <div class="pull-right form-actions" data-ng-show="create">
                 <button kc-cancel data-ng-click="cancel()">Cancel</button>
                 <button kc-save data-ng-show="changed">Save</button>
             </div>
-            <div class="pull-right form-actions" data-ng-show="!createRealm">
+            <div class="pull-right form-actions" data-ng-show="!create">
                 <button kc-reset data-ng-show="changed">Clear changes</button>
                 <button kc-save  data-ng-show="changed">Save</button>
                 <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-installation.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-installation.html
index 77d8dcd..60863b2 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-installation.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-installation.html
@@ -16,7 +16,19 @@
         </ul>
     </div>
     <div id="content">
-        <a class="button primary" href="{{download}}" download="keycloak.json" type="submit">Download</a></br>
-        <textarea style="width: 100%;" rows="20" onclick="this.select()">{{installation | json}}</textarea>
+        <h2>Application Installation</h2>
+        <form class="form-horizontal" name="realmForm" novalidate>
+            <fieldset>
+                <div class="form-group">
+                    <div class="col-sm-12">
+                        <textarea class="form-control" rows="20" kc-select-action="click">{{installation | json}}</textarea>
+                    </div>
+                </div>
+            </fieldset>
+        </form>
+
+        <div class="pull-right form-actions">
+            <a class="btn btn-primary btn-lg" href="{{download}}" download="keycloak.json" type="submit">Download</a>
+        </div>
     </div>
 </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html
index 8a7a509..6b313e3 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-list.html
@@ -25,7 +25,7 @@
                         </button>
                     </div>
                     <div class="pull-right">
-                        <a class="kc-button" href="#/create/application/{{realm.realm}}">Add Application</a>
+                        <a class="btn btn-primary" href="#/create/application/{{realm.realm}}">Add Application</a>
                     </div>
                 </th>
             </tr>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html
index e9a7642..2f89039 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-role-detail.html
@@ -35,7 +35,7 @@
                     <label class="col-sm-2 control-label" for="name">Role name <span class="required" data-ng-show="create">*</span></label>
 
                     <div class="col-sm-4">
-                        <input type="text" id="name" name="name" data-ng-model="role.name" autofocus
+                        <input class="form-control" type="text" id="name" name="name" data-ng-model="role.name" autofocus
                                required data-ng-readonly="!create">
                     </div>
                 </div>
@@ -43,7 +43,7 @@
                     <label class="col-sm-2 control-label" for="description">Description </label>
 
                     <div class="col-sm-4">
-                        <textarea rows="5" cols="50" id="description" name="description" data-ng-model="role.description"></textarea>
+                        <textarea  class="form-control" rows="5" cols="50" id="description" name="description" data-ng-model="role.description"></textarea>
                         <!-- Replaced by the textarea above <input type="text" id="description" name="description" data-ng-model="role.description" autofocus
                                                                required> -->
                     </div>
@@ -68,7 +68,7 @@
 
             <fieldset data-ng-show="!create && (compositeSwitch || role.composite)">
                 <legend collapsed><span class="text">Composite Realm Roles</span> </legend>
-                <div class="form-group">
+                <div class="form-group col-sm-10">
                     <div class="controls changing-selectors">
                         <div class="select-title">
                             <label class="control-label" for="available">Available Roles</label>
@@ -101,17 +101,19 @@
             <fieldset ng-show="applications.length > 0 && !create && (compositeSwitch || role.composite)">
                 <legend collapsed><span class="text">Composite Application Roles</span> </legend>
                 <div class="form-group input-select">
-                    <label class="control-label" for="applications">Application</label>
-                    <div class="input-group">
-                        <div class="select-kc">
-                            <select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications">
-                                <option value="" selected> Select an Application...</option>
-                            </select>
+                    <label class="col-sm-2 control-label" for="applications">Application</label>
+                    <div class="col-sm-4">
+                        <div class="input-group">
+                            <div class="select-kc">
+                                <select id="applications" name="applications" ng-change="changeApplication()" ng-model="compositeApp" ng-options="a.name for a in applications">
+                                    <option value="" selected> Select an Application...</option>
+                                </select>
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="form-group" ng-show="compositeApp">
-                    <div class="controls changing-selectors application">
+                    <div class="controls changing-selectors application col-sm-10">
                         <div class="select-title">
                             <label class="control-label" for="available-app">Available Roles</label>
                             <select id="available-app" class="form-control" multiple size="5"
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html
index d70359e..ce17763 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/application-scope-mappings.html
@@ -22,10 +22,10 @@
         <form class="form-horizontal" name="realmForm" novalidate>
             <fieldset>
                 <legend uncollapsed><span class="text">Realm Roles</span></legend>
-                <div class="form-group">
+                <div class="form-group col-sm-10">
                     <div class="controls changing-selectors">
                         <div class="select-title">
-                            <label for="available">Available Roles</label>
+                            <label class="control-label" for="available">Available Roles</label>
                             <select id="available" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedRealmRoles"
@@ -41,7 +41,7 @@
                             </button>
                         </div>
                         <div class="select-title">
-                            <label for="assigned">Assigned Roles</label>
+                            <label class="control-label" for="assigned">Assigned Roles</label>
                             <select id="assigned" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedRealmMappings"
@@ -54,9 +54,9 @@
 
             <fieldset ng-show="applications.length > 0">
                 <legend collapsed><span class="text">Application Roles</span> </legend>
-                <div class="form-group input-select">
-                    <label for="applications">Application</label>
-                    <div class="input-group">
+                <div class="form-group input-select ">
+                    <label class="col-sm-2 control-label" for="applications">Application</label>
+                    <div class="input-group col-sm-4">
                         <div class="select-kc">
                             <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications|remove:application:'id')">
                                 <option value="" selected> Select an Application </option>
@@ -64,10 +64,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group" ng-show="targetApp">
+                <div class="form-group col-sm-10" ng-show="targetApp">
                     <div class="controls changing-selectors application">
                         <div class="select-title">
-                            <label for="app-available">Available Roles</label>
+                            <label class="control-label" for="app-available">Available Roles</label>
                             <select id="app-available" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedApplicationRoles"
@@ -83,7 +83,7 @@
                             </button>
                         </div>
                         <div class="select-title">
-                            <label for="app-assigned">Assigned Roles</label>
+                            <label class="control-label" for="app-assigned">Assigned Roles</label>
                             <select id="app-assigned" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedApplicationMappings"
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html
index 8c2f0bb..ee3d95b 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-credentials.html
@@ -32,11 +32,12 @@
                                required>
                     </div>
                 </div>
-                <div class="form-actions">
-                    <button class="btn btn-primary btn-lg" type="submit" data-ng-click="changePassword()" ng-show="password != null">Save
-                    </button>
-                </div>
             </fieldset>
+
+            <div class="pull-right form-actions" ng-show="password != null">
+                <button class="btn btn-primary btn-lg" type="submit" data-ng-click="changePassword()" ng-show="password != null">Change Password</button>
+            </div>
+
             <fieldset data-ng-show="totpRequired">
                 <legend uncollapsed><span class="text">Change TOTP Key</span></legend>
                 <div class="form-group">
@@ -48,12 +49,11 @@
                         </button>
                     </div>
                 </div>
-                <div class="pull-right form-actions">
-                    <label></label>
-                    <button class="btn btn-primary btn-lg" type="submit" data-ng-click="changeTotp()" ng-show="totp != null">Save
-                    </button>
-                </div>
             </fieldset>
+
+            <div class="pull-right form-actions" ng-show="totp != null">
+                <button class="btn btn-primary btn-lg"  type="submit" data-ng-click="changeTotp()" ng-show="totp != null">Save</button>
+            </div>
         </form>
     </div>
 </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-detail.html
index 838df66..7ac2ed7 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-detail.html
@@ -35,37 +35,57 @@
                 <div class="form-group clearfix block">
                     <label class="col-sm-2 control-label" for="enabled">Enabled</label>
                     <div class="col-sm-4">
-                    <input ng-model="oauth.enabled" name="enabled" id="enabled" onoffswitch />
-                        </div>
+                        <input ng-model="oauth.enabled" name="enabled" id="enabled" onoffswitch />
+                    </div>
                 </div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label" for="newWebOrigin">Web Origin</label>
                     <div class="col-sm-4">
-                        <div ng-repeat="webOrigin in oauth.webOrigins" class="item-deletable">
-                            <input  class="form-control" type="text" data-ng-class="{'input-below':!$first}"
-                                    name="webOrigin" id="webOrigin" data-ng-model="webOrigin" readonly />
-                            <button class="btn btn-danger" type="button" data-ng-click="deleteWebOrigin($index)">
-                                Delete</button>
+                        <div ng-repeat="webOrigin in oauth.webOrigins" class="kc-item-deletable row">
+                            <div class="col-sm-9">
+                                <input  class="form-control" type="text" data-ng-class="{'input-below':!$first}"
+                                        name="webOrigin" id="webOrigin" data-ng-model="webOrigin" readonly />
+                            </div>
+                            <div class="col-sm-2">
+                                <button class="btn btn-danger" type="button" data-ng-click="deleteWebOrigin($index)">
+                                    Delete</button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-9">
+                                <input  class="form-control" type="text" name="newWebOrigin" id="newWebOrigin"
+                                        placeholder="New Web Origin..." data-ng-model="newWebOrigin"
+                                        data-ng-class="{'input-below':oauth.webOrigins.length}" />
+                            </div>
+                            <div class="col-sm-2">
+                                <button  class="btn btn-primary" data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
+                            </div>
                         </div>
-                        <input  class="form-control" type="text" name="newWebOrigin" id="newWebOrigin"
-                               placeholder="New Web Origin..." data-ng-model="newWebOrigin"
-                               data-ng-class="{'input-below':oauth.webOrigins.length}" />
-                        <button  class="btn btn-primary" data-ng-click="addWebOrigin()" ng-show="newWebOrigin.length > 0">Add</button>
                     </div>
                 </div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label" for="newRedirectUri">Redirect URI</label>
                     <div class="col-sm-4">
-                        <div ng-repeat="redirectUri in oauth.redirectUris" class="item-deletable">
-                            <input  class="form-control" type="text" data-ng-class="{'input-below':!$first}"
-                                    name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
-                            <button class="btn btn-danger" type="button" data-ng-click="deleteRedirectUri($index)">
-                                Delete</button>
+                        <div ng-repeat="redirectUri in oauth.redirectUris" class="kc-item-deletable row">
+                            <div class="col-sm-9">
+                                <input  class="form-control" type="text" data-ng-class="{'input-below':!$first}"
+                                        name="redirectUri" id="redirectUri" data-ng-model="redirectUri" readonly />
+                            </div>
+                            <div class="col-sm-2">
+                                <button class="btn btn-danger" type="button" data-ng-click="deleteRedirectUri($index)">
+                                    Delete</button>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-9">
+                                <input  class="form-control" type="text" name="newRedirectUri" id="newRedirectUri"
+                                        placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
+                                        data-ng-class="{'input-below':oauth.redirectUris.length}" />
+                            </div>
+                            <div class="col-sm-2">
+                                <button class="btn btn-primary" data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
+                            </div>
                         </div>
-                        <input  class="form-control" type="text" name="newRedirectUri" id="newRedirectUri"
-                               placeholder="New Redirect URI..." data-ng-model="newRedirectUri"
-                               data-ng-class="{'input-below':oauth.redirectUris.length}" />
-                        <button class="btn btn-primary" data-ng-click="addRedirectUri()" ng-show="newRedirectUri.length > 0">Add</button>
                     </div>
                 </div>
             </fieldset>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-installation.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-installation.html
index d7de9ea..19afcde 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-installation.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-installation.html
@@ -7,7 +7,20 @@
         <li class="active"><a href="#/realms/{{realm.realm}}/oauth-clients/{{oauth.id}}/installation">Installation</a></li>
     </ul>
     <div id="content">
-        <textarea style="width: 100%;" rows="20" onclick="this.select()">{{installation | json}}</textarea>
-        <a class="kc-button primary" href="{{download}}" download="keycloak.json" type="submit">Download</a>
+        <h2>OAuth Client Installation</h2>
+        <form class="form-horizontal" name="realmForm" novalidate>
+            <fieldset>
+                <div class="form-group">
+                    <div class="col-sm-12">
+                        <textarea class="form-control" rows="20" kc-select-action="click">{{installation | json}}</textarea>
+                    </div>
+                </div>
+            </fieldset>
+        </form>
+
+        <div class="pull-right form-actions">
+            <a class="btn btn-primary btn-lg" href="{{download}}" download="keycloak.json" type="submit">Download</a>
+        </div>
+
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-list.html
index 84387a2..cf4240a 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-list.html
@@ -25,7 +25,7 @@
                         </button>
                     </div>
                     <div class="pull-right">
-                        <a class="kc-button" href="#/create/oauth-client/{{realm.realm}}">Add OAuth Client</a>
+                        <a class="btn btn-primary" href="#/create/oauth-client/{{realm.realm}}">Add OAuth Client</a>
                     </div>
                 </th>
             </tr>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-scope-mappings.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-scope-mappings.html
index 74c5787..3b2d835 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-scope-mappings.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/oauth-client-scope-mappings.html
@@ -20,7 +20,7 @@
         <form class="form-horizontal" name="realmForm" novalidate>
             <fieldset>
                 <legend uncollapsed><span class="text">Realm Roles</span></legend>
-                <div class="form-group">
+                <div class="form-group col-sm-10">
                     <div class="controls changing-selectors">
                         <div class="select-title">
                             <label class="control-label" for="available">Available Roles</label>
@@ -30,9 +30,13 @@
                                     ng-options="r.name for r in realmRoles">
                             </select>
                         </div>
-                        <div class="middle-buttons">
-                            <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="kc-icon-arrow-right">Move right</span></button>
-                            <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="kc-icon-arrow-left">Move left</span></button>
+                        <div class="middle-buttons kc-vertical">
+                            <button class="kc-button" type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button" type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
                         </div>
                         <div class="select-title">
                             <label class="control-label" for="assigned">Assigned Roles</label>
@@ -49,8 +53,8 @@
             <fieldset ng-show="applications.length > 0">
                 <legend collapsed><span class="text">Application Roles</span> </legend>
                 <div class="form-group input-select">
-                    <label class="control-label" for="applications">Application</label>
-                    <div class="input-group">
+                    <label class="control-label col-sm-2" for="applications">Application</label>
+                    <div class="form-group col-sm-4">
                         <div class="select-kc">
                             <select id="applications" name="applications" ng-change="changeApplication()" ng-model="targetApp" ng-options="a.name for a in (applications)">
                                 <option value="" selected> Select an Application </option>
@@ -58,7 +62,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group" ng-show="targetApp">
+                <div class="form-group col-sm-10" ng-show="targetApp">
                     <div class="controls changing-selectors application">
                         <div class="select-title">
                             <label class="control-label" for="app-available">Available Roles</label>
@@ -68,9 +72,13 @@
                                     ng-options="r.name for r in applicationRoles">
                             </select>
                         </div>
-                        <div class="middle-buttons">
-                            <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                            <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
+                        <div class="middle-buttons kc-vertical">
+                            <button class="kc-button" type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button" type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
                         </div>
                         <div class="select-title">
                             <label class="control-label" for="app-assigned">Assigned Roles</label>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html
index a5d56b3..b63cc2e 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-credentials.html
@@ -12,21 +12,21 @@
         <form class="form-horizontal" name="realmForm" novalidate>
             <fieldset class="border-top">
                 <legend uncollapsed><span class="text">Realm Credentials Settings</span></legend>
-                <div class="form-group clearfix">
+                <div class="form-group">
                     <label class="col-sm-2 control-label" for="user" class="control-label two-lines">Required User Credentials</label>
 
                     <div class="col-sm-4">
                         <input id="user" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials" placeholder="Type a role and enter">
                     </div>
                 </div>
-                <div class="form-group clearfix">
+                <div class="form-group">
                     <label class="col-sm-2 control-label" for="application" class="control-label two-lines">Required Application Credentials</label>
 
                     <div class="col-sm-4">
                         <input id="application" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials" placeholder="Type a role and enter">
                     </div>
                 </div>
-                <div class="form-group clearfix">
+                <div class="form-group">
                     <label class="col-sm-2 control-label" for="oauth" class="control-label two-lines">Required OAuth Credentials</label>
 
                     <div class="col-sm-4">
@@ -62,23 +62,28 @@
                         <tbody>
                         <tr ng-repeat="p in policy">
                             <td>
-                                <div class="clearfix">
-                                    <input class="input-small disabled" type="text" value="{{p.name|capitalize}}" readonly>
+                                <div class="form-group col-sm-12">
+                                    <input class="form-control disabled" type="text" value="{{p.name|capitalize}}" readonly>
                                 </div>
                             </td>
                             <td>
-                                <input ng-model="p.value" type="number" placeholder="No value assigned" class="input-small" min="1" max="50">
+                                <div class="form-group col-sm-12">
+                                <input class="form-control" ng-model="p.value" type="number" placeholder="No value assigned"  min="1" max="50">
+                                    </div>
                             </td>
-                            <td>
-                                <div class="action-div">
-                                    <i class="kc-icon-question"
-                                       popover="{{policyMessages[name]}}"
-                                       popover-placement="left"
-                                       popover-trigger="mouseenter"></i>
-                                </div>
-                                <div class="action-div">
-                                    <i class="kc-icon-remove"
-                                       ng-click="removePolicy($index)"></i>
+                            <td class="pull-right">
+                                <div class="">
+                                    <button type="button" class="btn btn-default"
+                                            tooltip="{{policyMessages[name]}}"
+                                            tooltip-placement="left">
+                                        <span class="kc-icon-question">Question icon</span>
+                                        Help
+                                    </button>
+                                    <button type="button" class="btn btn-default"
+                                            ng-click="removePolicy($index)">
+                                        <span class="kc-icon-remove">Remove icon</span>
+                                        Remove
+                                    </button>
                                 </div>
                             </td>
                         </tr>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-default-roles.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-default-roles.html
index d3167a2..8b5ad78 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-default-roles.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-default-roles.html
@@ -8,13 +8,13 @@
             <li class="active">Registration</li>
         </ol>
         <h2><span>{{realm.realm}}</span> Registration Settings</h2>
-        <form name="realmForm" novalidate>
+        <form class="form-horizontal" name="realmForm" novalidate>
             <fieldset>
                 <legend uncollapsed><span class="text">Realm Default Roles</span> </legend>
                 <div class="form-group">
-                    <div class="controls changing-selectors">
+                    <div class="controls changing-selectors col-sm-10">
                         <div class="select-title">
-                            <label for="available">Available Roles</label>
+                            <label class="control-label" for="available">Available Roles</label>
                             <select id="available" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedRealmRoles"
@@ -30,7 +30,7 @@
                             </button>
                         </div>
                         <div class="select-title">
-                            <label for="assigned">Realm Default Roles</label>
+                            <label class="control-label" for="assigned">Realm Default Roles</label>
                             <select id="assigned" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedRealmDefRoles"
@@ -44,8 +44,8 @@
             <fieldset ng-show="applications.length > 0">
                 <legend uncollapsed><span class="text">Application Default Roles</span> </legend>
                 <div class="form-group input-select">
-                    <label for="applications">Application</label>
-                    <div class="input-group">
+                    <label class="col-sm-2 control-label" for="applications">Application</label>
+                    <div class="col-sm-4">
                         <div class="select-kc">
                             <select id="applications" name="applications" ng-change="changeApplication()" ng-model="application" ng-options="a.name for a in applications">
                                 <option value="" selected> Select an Application...</option>
@@ -54,9 +54,9 @@
                     </div>
                 </div>
                 <div class="form-group" ng-show="application">
-                    <div class="controls changing-selectors application">
+                    <div class="controls changing-selectors application col-sm-10">
                         <div class="select-title">
-                            <label for="available-app">Available Roles</label>
+                            <label class="control-label" for="available-app">Available Roles</label>
                             <select id="available-app" class="form-control" multiple size="5"
                                     ng-multiple="true"
                                     ng-model="selectedAppRoles"
@@ -72,7 +72,7 @@
                             </button>
                         </div>
                         <div class="select-title">
-                            <label for="assigned-app">Assigned Default Roles</label>
+                            <label class="control-label" for="assigned-app">Assigned Default Roles</label>
                             <select id="assigned-app" class="form-control" multiple size=5
                                     ng-multiple="true"
                                     ng-model="selectedAppDefRoles"
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
index 476049d..94f2f90 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-detail.html
@@ -10,7 +10,6 @@
         <h2 class="pull-left" data-ng-show="createRealm">Add Realm</h2>
         <h2 data-ng-hide="createRealm"><span>{{realm.realm}}</span> General Settings</h2>
         <p class="subtitle" data-ng-show="createRealm"><span class="required">*</span> Required fields</p>
-        <kc-test></kc-test>
         <form class="form-horizontal" name="realmForm" novalidate>
             <fieldset>
                 <legend uncollapsed class="aj-collapse open"><span class="text">Required Settings</span></legend>
@@ -37,7 +36,7 @@
                     </div>
                 </div>
                 <div class="form-group" data-ng-show="realm.social">
-                    <label for="updateProfileOnInitialSocialLogin" class="col-sm-2 control-label">Update profile on first social login</label>
+                    <label class="col-sm-2 control-label" for="updateProfileOnInitialSocialLogin">Update profile on first social login</label>
                     <div class="col-sm-4">
                         <input ng-model="realm.updateProfileOnInitialSocialLogin" name="updateProfileOnInitialSocialLogin" id="updateProfileOnInitialSocialLogin" onoffswitch />
                     </div>
@@ -73,6 +72,7 @@
                     <label class="col-sm-2 control-label" for="loginTheme">Login Theme</label>
                     <div class="col-sm-4">
                         <select kc-select id="loginTheme"
+                                data-kc-placeholder="Select one..."
                                 data-kc-model="realm.loginTheme"
                                 data-kc-options="serverInfo.themes.login">
                         </select>
@@ -82,6 +82,7 @@
                     <label class="col-sm-2 control-label" for="accountTheme">Account Theme</label>
                     <div class="col-sm-4">
                         <select kc-select id="accountTheme"
+                                data-kc-placeholder="Select one..."
                                 data-kc-model="realm.accountTheme"
                                 data-kc-options="serverInfo.themes.account">
                         </select>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-keys.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-keys.html
index c8878e7..0f96867 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-keys.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/realm-keys.html
@@ -13,13 +13,12 @@
                 <div class="form-group">
                     <label class="col-sm-2 control-label" for="publicKey">Public key</label>
 
-                    <div class="form-group">
-                        <textarea type="text" id="publicKey" name="publicKey" class="col-sm-9" rows="5"
+                    <div class="col-sm-10">
+                        <textarea type="text" id="publicKey" name="publicKey" class="form-control" rows="5"
                                   kc-select-action="click" readonly>{{realm.publicKey}}</textarea>
                     </div>
                 </div>
             </fieldset>
-            <br/>
             <div class="pull-right form-actions">
                 <button class="btn btn-primary btn-lg" type="submit" data-ng-click="generate()">Generate new keys</button>
             </div>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html
index 3348250..66c8006 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/role-detail.html
@@ -75,9 +75,13 @@
                                     ng-options="r.name for r in realmRoles">
                             </select>
                         </div>
-                        <div class="middle-buttons">
-                            <button type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                            <button type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
+                        <div class="middle-buttons kc-vertical">
+                            <button class="kc-button" type="submit" ng-click="addRealmRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button" type="submit" ng-click="deleteRealmRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
                         </div>
                         <div class="select-title">
                             <label for="assigned">Assigned Roles</label>
@@ -113,9 +117,13 @@
                                     ng-options="r.name for r in applicationRoles">
                             </select>
                         </div>
-                        <div class="middle-buttons">
-                            <button type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right"><span class="icon-arrow-right">Move right</span></button>
-                            <button type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right"><span class="icon-arrow-left">Move left</span></button>
+                        <div class="middle-buttons kc-vertical">
+                            <button class="kc-button" type="submit" ng-click="addApplicationRole()" tooltip="Move right" tooltip-placement="right">
+                                <span class="kc-icon-arrow-right">Move right</span>
+                            </button>
+                            <button class="kc-button" type="submit" ng-click="deleteApplicationRole()" tooltip="Move left" tooltip-placement="right">
+                                <span class="kc-icon-arrow-left">Move left</span>
+                            </button>
                         </div>
                         <div class="select-title">
                             <label class="control-label" for="assigned-app">Assigned Roles</label>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-credentials.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-credentials.html
index 5bc1f28..7351a98 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-credentials.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-credentials.html
@@ -1,47 +1,46 @@
+<div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
+<div id="content-area" class="col-md-9" role="main">
 
-        <div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
-        <div id="content-area" class="col-md-9" role="main">
+    <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
+        <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
+        <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
+    </ul>
 
-                <ul class="nav nav-tabs nav-tabs-pf"  data-ng-show="!create">
-                    <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
-                    <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
-                </ul>
+    <div id="content">
+        <ol class="breadcrumb">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li class="active">Users</li>
+        </ol>
+        <h2><span>{{user.username}}'s</span> Credentials</h2>
 
-            <div id="content">
-                <ol class="breadcrumb">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li class="active">Users</li>
-                </ol>
-                <h2><span>{{user.username}}'s</span> Credentials</h2>
+        <form class="form-horizontal" name="userForm" novalidate>
+            <fieldset class="border-top">
+                <legend uncollapsed><span class="text">Credential Management</span></legend>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="password">Reset password</label>
+                    <div class="col-sm-4 kc-multiline">
+                        <input class="form-control" type="password" id="password" name="password" data-ng-model="password" placeholder="Temporary password" required>
+                        <input class="form-control" type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword" placeholder="Password confirmation" required>
+                        <button class="btn btn-danger" type="submit" data-ng-click="resetPassword()" data-ng-show="password">Reset Password</button>
+                    </div>
+                </div>
 
-                <form class="form-horizontal" name="userForm" novalidate>
-                    <fieldset class="border-top">
-                        <legend uncollapsed><span class="text">Credential Management</span></legend>
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label" for="password">Reset password</label>
-                            <div class="col-sm-4 kc-multiline">
-                                <input class="form-control" type="password" id="password" name="password" data-ng-model="password" placeholder="Temporary password" required>
-                                <input class="form-control" type="password" id="confirmPassword" name="confirmPassword" data-ng-model="confirmPassword" placeholder="Password confirmation" required>
-                                <button class="btn btn-danger" type="submit" data-ng-click="resetPassword()" data-ng-show="password">Reset Password</button>
-                            </div>
-                        </div>
+                <div class="form-group" data-ng-show="user.email">
+                    <label class="col-sm-2 control-label" for="password">Reset password email</label>
+                    <div class="col-sm-4">
+                        <button class="btn btn-danger" type="submit" data-ng-click="resetPasswordEmail()" >Send Email</button>
+                    </div>
+                </div>
 
-                        <div class="form-group" data-ng-show="user.email">
-                            <label class="col-sm-2 control-label" for="password">Reset password email</label>
-                            <div class="col-sm-4">
-                                <button class="btn btn-danger" type="submit" data-ng-click="resetPasswordEmail()" >Send Email</button>
-                            </div>
-                        </div>
+                <div class="form-group" data-ng-show="user.totp">
+                    <label class="col-sm-2 control-label" for="password">Remove totp</label>
+                    <div class="col-sm-4" data-ng-show="user.totp">
+                        <button class="btn btn-danger"  type="submit" data-ng-click="removeTotp()">Remove TOTP</button>
+                    </div>
+                </div>
+            </fieldset>
+        </form>
 
-                        <div class="form-group" data-ng-show="user.totp">
-                            <label class="col-sm-2 control-label" for="password">Remove totp</label>
-                            <div class="col-sm-4" data-ng-show="user.totp">
-                                <button class="btn btn-danger"  type="submit" data-ng-click="removeTotp()">Remove TOTP</button>
-                            </div>
-                        </div>
-                    </fieldset>
-                </form>
-
-            </div>
-        </div>
\ No newline at end of file
+    </div>
+</div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html
index eceacaa..0eb8bc3 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-detail.html
@@ -1,95 +1,95 @@
-        <div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
-        <div id="content-area" class="col-md-9" role="main">
+<div class="bs-sidebar col-md-3 clearfix" data-ng-include data-src="'partials/realm-menu.html'"></div>
+<div id="content-area" class="col-md-9" role="main">
 
-                <ul class="nav nav-tabs nav-tabs-pf" data-ng-show="!create">
-                    <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
-                </ul>
+    <ul class="nav nav-tabs nav-tabs-pf" data-ng-show="!create">
+        <li class="active"><a href="#/realms/{{realm.realm}}/users/{{user.username}}">Attributes</a></li>
+        <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/user-credentials">Credentials</a></li>
+        <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}/role-mappings">Role Mappings</a></li>
+    </ul>
 
-            <div id="content">
-                <ol class="breadcrumb" data-ng-show="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
-                    <li class="active">Add</li>
-                </ol>
-                <h2 data-ng-show="create">Add User</h2>
-                <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
-                <ol class="breadcrumb" data-ng-hide="create">
-                    <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
-                    <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">{{user.username}}</a></li>
-                    <li class="active">Attributes</li>
-                </ol>
-                <h2 data-ng-hide="create"><span>{{user.username}}'s</span> Attributes</h2>
-                
-                <form class="form-horizontal" name="userForm" novalidate>
-                    <fieldset class="border-top">
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label"for="username">Username <span class="required" data-ng-show="create">*</span></label>
-                            <div class="col-sm-4">
-                                <!-- Characters >,<,/,\ are forbidden in username -->
-                                <input class="form-control" type="text" id="username" name="username" data-ng-model="user.username" autofocus
-                                       required ng-pattern="/^[^\<\>\\\/]*$/" data-ng-readonly="!create">
-                            </div>
-                        </div>
+    <div id="content">
+        <ol class="breadcrumb" data-ng-show="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
+            <li class="active">Add</li>
+        </ol>
+        <h2 data-ng-show="create">Add User</h2>
+        <p class="subtitle" data-ng-show="create"><span class="required">*</span> Required fields</p>
+        <ol class="breadcrumb" data-ng-hide="create">
+            <li><a href="#/realms/{{realm.realm}}">{{realm.realm}}</a></li>
+            <li><a href="#/realms/{{realm.realm}}/users">Users</a></li>
+            <li><a href="#/realms/{{realm.realm}}/users/{{user.username}}">{{user.username}}</a></li>
+            <li class="active">Attributes</li>
+        </ol>
+        <h2 data-ng-hide="create"><span>{{user.username}}'s</span> Attributes</h2>
 
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label" for="email">Email</label>
+        <form class="form-horizontal" name="userForm" novalidate>
+            <fieldset class="border-top">
+                <div class="form-group">
+                    <label class="col-sm-2 control-label"for="username">Username <span class="required" data-ng-show="create">*</span></label>
+                    <div class="col-sm-4">
+                        <!-- Characters >,<,/,\ are forbidden in username -->
+                        <input class="form-control" type="text" id="username" name="username" data-ng-model="user.username" autofocus
+                               required ng-pattern="/^[^\<\>\\\/]*$/" data-ng-readonly="!create">
+                    </div>
+                </div>
 
-                            <div class="col-sm-4">
-                                <input class="form-control" type="email" name="email" id="email"
-                                       data-ng-model="user.email">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label" for="firstName">First Name</label>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="email">Email</label>
 
-                            <div class="col-sm-4">
-                                <input class="form-control" type="text" name="firstName" id="firstName"
-                                       data-ng-model="user.firstName">
-                            </div>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-sm-2 control-label" for="lastName">Last Name</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="email" name="email" id="email"
+                               data-ng-model="user.email">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="firstName">First Name</label>
 
-                            <div class="col-sm-4">
-                                <input class="form-control" type="text" name="lastName" id="lastName"
-                                       data-ng-model="user.lastName">
-                            </div>
-                        </div>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" name="firstName" id="firstName"
+                               data-ng-model="user.firstName">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label class="col-sm-2 control-label" for="lastName">Last Name</label>
 
-                        <div class="form-group clearfix block">
-                            <label class="col-sm-2 control-label" for="userEnabled">User Enabled</label>
-                            <div class="col-sm-4">
-                            <input ng-model="user.enabled" name="userEnabled" id="userEnabled" onoffswitch />
-                                </div>
-                        </div>
-                        <div class="form-group clearfix block">
-                            <label class="col-sm-2 control-label" for="emailVerified">Email verified</label>
-                            <div class="col-sm-4">
-                            <input ng-model="user.emailVerified" name="emailVerified" id="emailVerified" onoffswitch />
-                                </div>
-                        </div>
-                        <div class="form-group clearfix">
-                            <label class="col-sm-2 control-label" for="reqActions">Required User Actions</label>
+                    <div class="col-sm-4">
+                        <input class="form-control" type="text" name="lastName" id="lastName"
+                               data-ng-model="user.lastName">
+                    </div>
+                </div>
 
-                            <div class="col-sm-4">
-                                <input type="text" ui-select2="userReqActionsOptions" ng-model="userActions" id="reqActions"/>
-                            </div>
-                        </div>
-                    </fieldset>
-                    <div class="pull-right form-actions" data-ng-show="create">
-                        <button kc-cancel data-ng-click="cancel()">Cancel</button>
-                        <button kc-save data-ng-show="changed">Save</button>
+                <div class="form-group clearfix block">
+                    <label class="col-sm-2 control-label" for="userEnabled">User Enabled</label>
+                    <div class="col-sm-4">
+                        <input ng-model="user.enabled" name="userEnabled" id="userEnabled" onoffswitch />
                     </div>
+                </div>
+                <div class="form-group clearfix block">
+                    <label class="col-sm-2 control-label" for="emailVerified">Email verified</label>
+                    <div class="col-sm-4">
+                        <input ng-model="user.emailVerified" name="emailVerified" id="emailVerified" onoffswitch />
+                    </div>
+                </div>
+                <div class="form-group clearfix">
+                    <label class="col-sm-2 control-label" for="reqActions">Required User Actions</label>
 
-                    <div class="pull-right form-actions" data-ng-show="!create">
-                        <button kc-reset data-ng-show="changed">Clear changes</button>
-                        <button kc-save  data-ng-show="changed">Save</button>
-                        <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
+                    <div class="col-sm-4">
+                        <input type="text" ui-select2="userReqActionsOptions" ng-model="userActions" id="reqActions"/>
                     </div>
+                </div>
+            </fieldset>
+            <div class="pull-right form-actions" data-ng-show="create">
+                <button kc-cancel data-ng-click="cancel()">Cancel</button>
+                <button kc-save data-ng-show="changed">Save</button>
+            </div>
 
-                </form>
+            <div class="pull-right form-actions" data-ng-show="!create">
+                <button kc-reset data-ng-show="changed">Clear changes</button>
+                <button kc-save  data-ng-show="changed">Save</button>
+                <button kc-delete data-ng-click="remove()" data-ng-hide="changed">Delete</button>
             </div>
-        </div>
\ No newline at end of file
+
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html
index b7ecfa2..9be6e44 100755
--- a/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/partials/user-list.html
@@ -25,7 +25,7 @@
                     </div>
                     <span><span>or</span><button class="kc-link" ng-click="search = null; searchQuery()">View all users</button></span>
                     <div class="pull-right">
-                        <a class="kc-button" href="#/create/user/{{realm.realm}}">Add User</a>
+                        <a class="btn btn-primary" href="#/create/user/{{realm.realm}}">Add User</a>
                     </div>
                 </th>
             </tr>
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-form-control-buttons.html b/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-form-control-buttons.html
index 0024f3a..5cd2f0d 100644
--- a/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-form-control-buttons.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-form-control-buttons.html
@@ -1,11 +1,11 @@
 <div>
     <div class="pull-right form-actions" data-ng-show="kcCreate">
         <button kc-button-cancel data-ng-click="kcActionCancel()">Cancel</button>
-        <button kc-button-save data-ng-show="kcChanged">Save</button>
+        <button kc-button-save   data-ng-show="kcChanged">Save</button>
     </div>
     <div class="pull-right form-actions" data-ng-show="!kcCreate">
-        <button kc-button-reset data-ng-show="kcChanged">Clear changes</button>
-        <button kc-button-save  data-ng-show="kcChanged">Save</button>
+        <button kc-button-reset  ng-show="kcChanged">Clear changes</button>
+        <button kc-button-save   data-ng-show="kcChanged">Save</button>
         <button kc-button-delete data-ng-hide="kcChanged" data-ng-click="kcActionRemove()">Delete</button>
     </div>
 </div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-modal.html b/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-modal.html
new file mode 100644
index 0000000..ad9b6a7
--- /dev/null
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-modal.html
@@ -0,0 +1,14 @@
+<div class="modal-dialog" tabindex="-1" role="dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+                <span class="pficon pficon-close"></span>
+            </button>
+            <h4 class="modal-title" id="myModalLabel">{{ title }}</h4>
+        </div>
+        <div class="modal-body"><p ng-bind-html-unsafe="message"></p></div>
+        <div class="modal-footer">
+            <button ng-repeat="btn in buttons" ng-click="close(btn.result)" class="" ng-class="btn.cssClass">{{ btn.label }}</button>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-select.html b/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-select.html
index 0037076..13874ca 100644
--- a/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-select.html
+++ b/admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-select.html
@@ -1,6 +1,7 @@
 <div class="dropdown">
     <button class="btn btn-default dropdown-toggle" type="button" id="{{id}}" data-toggle="dropdown">
-        {{kcModel}}
+        <span ng-show="kcModel">{{kcModel}}</span>
+        <span ng-hide="kcModel" class="control-label">{{kcPlaceholder}}</span>
         <span class="caret"></span>
     </button>
     <ul class="dropdown-menu" role="menu">
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
index 7138889..a8568ff 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
@@ -2,7 +2,7 @@ body {
     background-color: #F9F9F9;
 }
 
-#content {
+#content, #content-area {
     background-color: #FFFFFF;
 }
 
@@ -444,7 +444,7 @@ legend .kc-icon-collapse {
     color: #333333;
     display: inline-block;
     font-family: "Open Sans",sans-serif;
-    height: 2.6em;
+    height: 2.4em;
     min-width: 75px;
     overflow: hidden;
     padding: 0 0.9em 0 0;
@@ -497,6 +497,10 @@ legend .kc-icon-collapse {
     margin-bottom: .35em;
 }
 
+.kc-item-deletable {
+    margin-bottom: 0.5em;
+}
+
 /* Left-Rigth selector form */
 .changing-selectors.application {
     --padding-left: 12em;
@@ -612,3 +616,49 @@ legend .kc-icon-collapse {
     min-width: 22em;
 }
 
+/* Alerts */
+
+.feedback-aligner {
+    position: fixed;
+    top: 1.5em;
+    text-align: center;
+    width: 100%;
+    height: 0;
+    z-index: 100;
+}
+
+.alert {
+    background-position: 1.27273em center;
+    background-repeat: no-repeat;
+    border-radius: 2px;
+    border-width: 1px;
+    color: #4D5258;
+    display: inline-block;
+    font-size: 1.1em;
+    line-height: 1.4em;
+    margin: 0;
+    padding: 0.909091em 3.63636em;
+    position: relative;
+    text-align: left;
+}
+.alert.alert-success {
+    background-color: #E4F1E1;
+    --background-image: url("img/feedback-success-sign.png");
+    border-color: #4B9E39;
+}
+.alert.alert-danger {
+    background-color: #F8E7E7;
+    --background-image: url("img/feedback-error-sign.png");
+    border-color: #B91415;
+}
+.alert.alert-warning {
+    background-color: #FEF1E9;
+    --background-image: url("img/feedback-warning-sign.png");
+    border-color: #F17528;
+}
+.alert.alert-info {
+    background-color: #E4F3FA;
+    --background-image: url("img/feedback-info-sign.png");
+    border-color: #5994B2;
+}
+
diff --git a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
index d16f9b7..9da6e2b 100644
--- a/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
+++ b/admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/tables.css
@@ -187,3 +187,11 @@ table tfoot tr .table-nav span {
   display: inline-block;
   padding: 0 1.36363636363636em;
 }
+
+.kc-table-actions > * {
+    vertical-align: middle;
+}
+
+td .form-group {
+    margin-bottom: 0;
+}