[KEYCLOAK-14307] Page for create client registration policy is broken

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

@@ -743,20 +743,29 @@ host-sending-registration-request-must-match.label=Host Sending Client Registrat
 host-sending-registration-request-must-match.tooltip=If on, any request to Client Registration Service is allowed just if it was sent from some trusted host or domain.
 client-uris-must-match.label=Client URIs Must Match
 client-uris-must-match.tooltip=If on, all Client URIs (Redirect URIs and others) are allowed just if they match some trusted host or domain.
-allowed-protocol-mappers.label=Allowed Protocol Mappers
-allowed-protocol-mappers.tooltip=Whitelist of allowed protocol mapper providers. If there is an attempt to register client, which contains some protocol mappers, which were not whitelisted, registration request will be rejected.
 consent-required-for-all-mappers.label=Consent Required For Mappers
 consent-required-for-all-mappers.tooltip=If on, all newly registered protocol mappers will automatically have consentRequired switch on. This means that user will need to approve consent screen. NOTE: Consent screen is shown just if client has consentRequired switch on. So it is usually good to use this switch together with consent-required policy.
 allowed-client-scopes.label=Allowed Client Scopes
 allowed-client-scopes.tooltip=Whitelist of the client scopes, which can be used on a newly registered client. Attempt to register client with some client scope, which is not whitelisted, will be rejected. By default, the whitelist is either empty or contains just realm default client scopes (based on 'Allow Default Scopes' configuration property)
 allow-default-scopes.label=Allow Default Scopes
 allow-default-scopes.tooltip=If on, newly registered clients will be allowed to have client scopes mentioned in realm default client scopes or realm optional client scopes
+
+# Client Registration Policies providers
+allowed-protocol-mappers.label=Allowed Protocol Mappers
+allowed-protocol-mappers.tooltip=Whitelist of allowed protocol mapper providers. If there is an attempt to register client, which contains some protocol mappers, which were not whitelisted, registration request will be rejected.
+
+allowed-client-templates.label=Allowed Client Templates
+client-disabled.label=Client Disabled
+scope.label=Scope
+consent-required.label=Consent Required
+
 max-clients.label=Max Clients Per Realm
 max-clients.tooltip=It will not be allowed to register a new client if count of existing clients in realm is same or bigger than the configured limit.
 
 client-scopes=Client Scopes
 client-scopes.tooltip=Client scopes allow you to define a common set of protocol mappers and roles, which are shared between multiple clients
 
+
 groups=Groups
 
 group.add-selected.tooltip=Realm roles that can be assigned to the group.

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

@@ -2712,13 +2712,13 @@ module.controller('ClientRegPoliciesCtrl', function($scope, realm, clientRegistr
 
 });
 
-module.controller('ClientRegPolicyDetailCtrl', function($scope, realm, clientRegistrationPolicyProviders, instance, Dialog, Notifications, Components, ComponentUtils, $route, $location) {
+module.controller('ClientRegPolicyDetailCtrl', function ($scope, realm, clientRegistrationPolicyProviders, instance, Dialog, Notifications, Components, ComponentUtils, $route, $location, $translate) {
     $scope.realm = realm;
     $scope.instance = instance;
     $scope.providerTypes = clientRegistrationPolicyProviders;
 
-    for (var i=0 ; i<$scope.providerTypes.length ; i++) {
+    for (let i = 0; i < $scope.providerTypes.length; i++) {
-        var providerType = $scope.providerTypes[i];
+        let providerType = $scope.providerTypes[i];
         if (providerType.id === instance.providerId) {
             $scope.providerType = providerType;
             break;
@@ -2743,15 +2743,22 @@ module.controller('ClientRegPolicyDetailCtrl', function($scope, realm, clientReg
         }
     }
 
+    $translate($scope.instance.providerId + ".label")
+        .then((translatedValue) => {
+            $scope.headerTitle = translatedValue;
+        }).catch(() => {
+            $scope.headerTitle = $scope.instance.providerId;
+    });
+
     if ($scope.create) {
-        $scope.instance.name = $scope.instance.providerId;
+        $scope.instance.name = "";
         $scope.instance.parentId = realm.id;
         $scope.instance.config = {};
 
         if ($scope.providerType.properties) {
 
-            for (var i = 0; i < $scope.providerType.properties.length; i++) {
+            for (let i = 0; i < $scope.providerType.properties.length; i++) {
-                var configProperty = $scope.providerType.properties[i];
+                let configProperty = $scope.providerType.properties[i];
                 $scope.instance.config[configProperty.name] = toDefaultValue(configProperty);
             }
         }
@@ -2762,7 +2769,7 @@ module.controller('ClientRegPolicyDetailCtrl', function($scope, realm, clientReg
         ComponentUtils.addMvOptionsToMultivaluedLists($scope.providerType.properties);
     }
 
-    var oldCopy = angular.copy($scope.instance);
+    let oldCopy = angular.copy($scope.instance);
     $scope.changed = false;
 
     $scope.$watch('instance', function() {
@@ -2772,9 +2779,11 @@ module.controller('ClientRegPolicyDetailCtrl', function($scope, realm, clientReg
     }, true);
     
     $scope.reset = function() {
-        $route.reload();
+        $scope.create ? window.history.back() : $route.reload();
     };
 
+    $scope.hasValidValues = () => $scope.changed && $scope.instance.name;
+
     $scope.save = function() {
         $scope.changed = false;
         if ($scope.create) {

themes/src/main/resources/theme/base/admin/resources/partials/client-reg-policy-detail.html

@@ -19,12 +19,12 @@
 
     <ol class="breadcrumb">
         <li><a href="#/realms/{{realm.realm}}/client-registration/client-reg-policies">{{:: 'client-reg-policies' | translate}}</a></li>
-        <li>{{instance.name}}</li>
+        <li>{{instance.name || headerTitle}}</li>
     </ol>
 
     <form class="form-horizontal" name="realmForm" novalidate kc-read-only="!access.manageClients ">
         <fieldset>
-            <legend><span class="text">{{instance.name}}</span></legend><kc-tooltip>{{:: providerType.helpText | translate}}</kc-tooltip>
+            <legend><span class="text">{{headerTitle}}</span></legend><kc-tooltip>{{:: providerType.helpText | translate}}</kc-tooltip>
             <div class="form-group clearfix" data-ng-show="!create">
                 <label class="col-md-2 control-label" for="instanceId">{{:: 'id' | translate}} </label>
                 <div class="col-md-6">
@@ -50,7 +50,7 @@
 
         <div class="form-group" data-ng-show="create && access.manageClients">
             <div class="col-md-10 col-md-offset-2">
-                <button kc-save>{{:: 'save' | translate}}</button>
+                <button kc-save data-ng-disabled="!hasValidValues()">{{:: 'save' | translate}}</button>
                 <button kc-reset>{{:: 'cancel' | translate}}</button>
             </div>
         </div>