From b223e1a7afd70cc89a845fef0702199a6f065d59 Mon Sep 17 00:00:00 2001
From: Stian Thorgersen <stianst@gmail.com>
Date: Fri, 4 Sep 2015 08:57:16 +0200
Subject: [PATCH] KEYCLOAK-1794 Admin console issues with kc-provider-config
 directive

---
 .../theme/base/admin/resources/js/app.js      | 46 +++++++-------
 .../partials/modal/role-selector.html         | 63 +++++++++----------
 .../templates/kc-provider-config.html         | 58 +++++++++--------
 3 files changed, 83 insertions(+), 84 deletions(-)

diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js b/forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js
index fe3ce08dde..a30030fde1 100755
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/js/app.js
@@ -1840,7 +1840,6 @@ module.directive('kcTabsUserFederation', function () {
 });
 
 module.controller('RoleSelectorModalCtrl', function($scope, realm, config, configName, RealmRoles, Client, ClientRole, $modalInstance) {
-    console.log('realm: ' + realm.realm);
     $scope.selectedRealmRole = {
         role: undefined
     };
@@ -1888,6 +1887,25 @@ module.controller('RoleSelectorModalCtrl', function($scope, realm, config, confi
     })
 });
 
+module.controller('ProviderConfigCtrl', function ($modal, $scope) {
+    $scope.openRoleSelector = function (configName, config) {
+        $modal.open({
+            templateUrl: resourceUrl + '/partials/modal/role-selector.html',
+            controller: 'RoleSelectorModalCtrl',
+            resolve: {
+                realm: function () {
+                    return $scope.realm;
+                },
+                config: function () {
+                    return config;
+                },
+                configName: function () {
+                    return configName;
+                }
+            }
+        })
+    }
+});
 
 module.directive('kcProviderConfig', function ($modal) {
     return {
@@ -1895,32 +1913,12 @@ module.directive('kcProviderConfig', function ($modal) {
             config: '=',
             properties: '=',
             realm: '=',
-            clients: '='
+            clients: '=',
+            configName: '='
         },
         restrict: 'E',
         replace: true,
-        link: function(scope, element, attrs) {
-            scope.openRoleSelector = function(configName) {
-                $modal.open({
-                    templateUrl: resourceUrl + '/partials/modal/role-selector.html',
-                    controller: 'RoleSelectorModalCtrl',
-                    resolve: {
-                        realm: function () {
-                            return scope.realm;
-                        },
-                        config: function() {
-                            return scope.config;
-                        },
-                        configName: function() {
-
-                            return configName;
-                        }
-                    }
-                })
-
-            };
-
-        },
+        controller: 'ProviderConfigCtrl',
         templateUrl: resourceUrl + '/templates/kc-provider-config.html'
     }
 });
diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/modal/role-selector.html b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/modal/role-selector.html
index 44c60fc7e0..43b165baf9 100755
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/modal/role-selector.html
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/partials/modal/role-selector.html
@@ -4,42 +4,37 @@
     </button>
     <h4 class="modal-title">Role Selector</h4>
 </div>
-<div style="padding: 15px 60px 75px 60px">
+<div style="padding: 0 15px 15px 15px;">
     <form>
-        <div data-ng-show="realmRoles.length > 0">
-        <label class="control-label" for="available">Realm Roles</label>
-        <kc-tooltip>Realm roles that can be selected.</kc-tooltip>
-        <select id="available" class="form-control" size="5"
-                ng-dblclick="selectRealmRole()"
-                ng-model="selectedRealmRole.role"
-                ng-options="r.name for r in realmRoles | orderBy:'toString()'">
-            <option style="display:none" value="">Select a role</option>
-        </select>
-        <button class="btn btn-default" type="submit" ng-click="selectRealmRole()" tooltip-trigger="mouseover mouseout" tooltip="Select realm role" tooltip-placement="right">
-            Select Realm Role</i>
-        </button>
-        </div>
-        <br>
-        <br>
-        <div data-ng-show="clients.length > 0">
-        <label class="control-label">
-            <span>Client Roles</span>
-            <kc-tooltip>Client roles that can be selected.</kc-tooltip>
-            <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="client.selected" ng-options="a.clientId for a in clients" ng-disabled="false">
+        <div data-ng-show="realmRoles.length > 0" style="margin-bottom: 30px;">
+            <label class="control-label" for="available">Realm Roles</label>
+            <kc-tooltip>Realm roles that can be selected.</kc-tooltip>
+            <select id="available" class="form-control" size="5"
+                    ng-dblclick="selectRealmRole()"
+                    ng-model="selectedRealmRole.role"
+                    ng-options="r.name for r in realmRoles | orderBy:'toString()'">
+                <option style="display:none" value="">Select a role</option>
             </select>
-        </label>
-        <select id="available-client" class="form-control" size="5"
-                ng-dblclick="selectClientRole()"
-                ng-model="selectedClientRole.role"
-                ng-options="r.name for r in clientRoles | orderBy:'toString()'">
-            <option style="display:none" value="">Select a role</option>
-        </select>
-        <button class="btn btn-default" type="submit" ng-click="selectClientRole()" tooltip-trigger="mouseover mouseout" tooltip="Select client role" tooltip-placement="right">
-            Select Client Role
-        </button>
+            <button class="btn btn-default" type="submit" ng-click="selectRealmRole()" tooltip-trigger="mouseover mouseout" tooltip="Select realm role" tooltip-placement="right">
+                Select Realm Role</i>
+            </button>
+        </div>
+        <div data-ng-show="clients.length > 0">
+            <label class="control-label">
+                <span>Client Roles</span>
+                <kc-tooltip>Client roles that can be selected.</kc-tooltip>
+                <select class="form-control" id="clients" name="clients" ng-change="changeClient()" ng-model="client.selected" ng-options="a.clientId for a in clients" ng-disabled="false">
+                </select>
+            </label>
+            <select id="available-client" class="form-control" size="5"
+                    ng-dblclick="selectClientRole()"
+                    ng-model="selectedClientRole.role"
+                    ng-options="r.name for r in clientRoles | orderBy:'toString()'">
+                <option style="display:none" value="">Select a role</option>
+            </select>
+            <button class="btn btn-default" type="submit" ng-click="selectClientRole()" tooltip-trigger="mouseover mouseout" tooltip="Select client role" tooltip-placement="right">
+                Select Client Role
+            </button>
         </div>
     </form>
-    <div class="modal-footer">
-        <button type="button" data-ng-class="btns.cancel.cssClass" ng-click="cancel()">Cancel</button>
-    </div>
 </div>
diff --git a/forms/common-themes/src/main/resources/theme/base/admin/resources/templates/kc-provider-config.html b/forms/common-themes/src/main/resources/theme/base/admin/resources/templates/kc-provider-config.html
index cbc560e43f..4fee2af1c8 100755
--- a/forms/common-themes/src/main/resources/theme/base/admin/resources/templates/kc-provider-config.html
+++ b/forms/common-themes/src/main/resources/theme/base/admin/resources/templates/kc-provider-config.html
@@ -1,28 +1,34 @@
-<div data-ng-repeat="option in properties" class="form-group">
-    <label class="col-md-2 control-label">{{option.label}}</label>
+<div>
+    <div data-ng-repeat="option in properties" class="form-group" data-ng-controller="ProviderConfigCtrl">
+        <label class="col-md-2 control-label">{{option.label}}</label>
 
-    <div class="col-sm-6" data-ng-hide="option.type == 'boolean' || option.type == 'List' || option.type == 'Role' || option.type == 'ClientList'">
-        <input class="form-control" type="text" data-ng-model="config[ option.name ]" >
-    </div>
-    <div class="col-sm-6" data-ng-show="option.type == 'boolean'">
-        <input ng-model="config[ option.name ]" value="'true'" name="option.name" id="option.name" onoffswitchmodel />
-    </div>
-    <div class="col-sm-6" data-ng-show="option.type == 'List'">
-        <select ng-model="config[ option.name ]" ng-options="data for data in option.defaultValue">
-            <option value="" selected> Select one... </option>
-        </select>
-    </div>
-    <div class="col-sm-6" data-ng-show="option.type == 'Role'">
-        <input class="form-control" type="text" data-ng-model="config[ option.name ]" >
-    </div>
-    <div class="col-sm-4" data-ng-show="option.type == 'Role'">
-        <button type="submit" data-ng-click="openRoleSelector(option.name)" class="btn btn-default" tooltip-placement="top" tooltip-trigger="mouseover mouseout" tooltip="Enter role in the textbox to the left, or click this button to browse and select the role you want">Select Role</button>
-    </div>
-    <div class="col-sm-4" data-ng-show="option.type == 'ClientList'">
-        <select ng-model="config[ option.name ]" ng-options="client.clientId as client.clientId for client in clients">
-            <option value="" selected> Select one... </option>
-        </select>
-    </div>
+        <div class="col-sm-6" data-ng-hide="option.type == 'boolean' || option.type == 'List' || option.type == 'Role' || option.type == 'ClientList'">
+            <input class="form-control" type="text" data-ng-model="config[ option.name ]" >
+        </div>
+        <div class="col-sm-6" data-ng-show="option.type == 'boolean'">
+            <input ng-model="config[ option.name ]" value="'true'" name="option.name" id="option.name" onoffswitchmodel />
+        </div>
+        <div class="col-sm-6" data-ng-show="option.type == 'List'">
+            <select ng-model="config[ option.name ]" ng-options="data for data in option.defaultValue">
+                <option value="" selected> Select one... </option>
+            </select>
+        </div>
+        <div class="col-sm-6" data-ng-show="option.type == 'Role'">
+            <div class="row">
+                <div class="col-sm-8">
+                    <input class="form-control" type="text" data-ng-model="config[ option.name ]" >
+                </div>
+                <div class="col-sm-2">
+                    <button type="submit" data-ng-click="openRoleSelector(option.name, config)" class="btn btn-default" tooltip-placement="top" tooltip-trigger="mouseover mouseout" tooltip="Enter role in the textbox to the left, or click this button to browse and select the role you want">Select Role</button>
+                </div>
+            </div>
+        </div>
+        <div class="col-sm-4" data-ng-show="option.type == 'ClientList'">
+            <select ng-model="config[ option.name ]" ng-options="client.clientId as client.clientId for client in clients">
+                <option value="" selected> Select one... </option>
+            </select>
+        </div>
 
-    <kc-tooltip>{{option.helpText}}</kc-tooltip>
-</div>
+        <kc-tooltip>{{option.helpText}}</kc-tooltip>
+    </div>
+</div>
\ No newline at end of file