KEYCLOAK-3008 Upload Realm Keys doesn't work

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

@@ -1024,19 +1024,50 @@ module.controller('RealmKeysDetailCtrl', function($scope, Realm, realm, $http, $
     $scope.generate = function() {
         Dialog.confirmGenerateKeys($scope.realm.realm, 'realm', function() {
                 Realm.update({ realm: realm.realm, publicKey : 'GENERATE' }, function () {
-                Notifications.success('New keys generated for realm.');
+                    $route.reload();
-                Realm.get({ id : realm.realm }, function(updated) {
+                    Notifications.success('New keys generated for realm.');
-                    $scope.realm = updated;
-                })
             });
         });
     };
 
-    $scope.cancel = function() {
+    $scope.privateKeyUpload = function($files){
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            $scope.$apply(function() {
+                $scope.privateKeyUploadContent = e.target.result;
+            });
+        };
+        reader.readAsText($files[0]);
+        $scope.privateKeyUploadName = $files[0].name;
+    };
+
+    $scope.publicKeyUpload = function($files){
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            $scope.$apply(function() {
+                $scope.publicKeyUploadContent = e.target.result;
+            });
+        };
+        reader.readAsText($files[0]);
+        $scope.publicKeyUploadName = $files[0].name;
+    };
+
+    $scope.certificateUpload = function($files){
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            $scope.$apply(function() {
+                $scope.certificateUploadContent = e.target.result;
+            });
+        };
+        reader.readAsText($files[0]);
+        $scope.certificateUploadName = $files[0].name;
+    };
+
+    $scope.clearImport = function() {
         $route.reload();
     }
 
-    $scope.save = function() {
+    $scope.import = function() {
         var title = 'Upload keys for realm';
         var msg = 'Are you sure you want to upload keys for ' + $scope.realm.realm + '?';
         var btns = {
@@ -1051,11 +1082,20 @@ module.controller('RealmKeysDetailCtrl', function($scope, Realm, realm, $http, $
         };
 
         Dialog.open(title, msg, btns, function() {
-                Realm.update($scope.realm, function () {
+            var upload = { realm : $scope.realm.realm };
-                Notifications.success('Keys uploaded for realm.');
+
-                Realm.get({ id : realm.realm }, function(updated) {
+            if ($scope.privateKeyUploadContent && $scope.publicKeyUploadContent) {
-                    $scope.realm = updated;
+                upload.privateKey = $scope.privateKeyUploadContent;
-                })
+                upload.publicKey = $scope.publicKeyUploadContent;
+            }
+
+            if ($scope.certificateUploadContent) {
+                upload.certificate = $scope.certificateUploadContent;
+            }
+
+            Realm.update(upload, function () {
+                $route.reload();
+                Notifications.success('Keys imported for realm.');
             });
         });
     };

themes/src/main/resources/theme/base/admin/resources/partials/realm-keys.html

@@ -6,42 +6,83 @@
         <input type="password" readonly value="this is not a login form" style="display: none;">
 
         <fieldset class="border-top">
-            <div class="form-group">
-                <label class="col-md-2 control-label" for="privateKey">{{:: 'privateKey' | translate}}</label>
-
-                <div class="col-md-10">
-                    <textarea type="password" id="privateKey" name="privateKey" class="form-control" rows="{{!realm.privateKey ? 1 : 8}}" data-ng-model="realm.privateKey"></textarea>
-                </div>
-            </div>
             <div class="form-group">
                 <label class="col-md-2 control-label" for="publicKey">{{:: 'publicKey' | translate}}</label>
 
                 <div class="col-md-10">
                     <textarea type="text" id="publicKey" name="publicKey" class="form-control" rows="4"
-                              kc-select-action="click" data-ng-model="realm.publicKey"></textarea>
+                              kc-select-action="click" data-ng-model="realm.publicKey" readonly></textarea>
                 </div>
             </div>
             <div class="form-group">
                 <label class="col-md-2 control-label" for="certificate">{{:: 'certificate' | translate}}</label>
 
                 <div class="col-md-10">
-                    <textarea type="text" id="certificate" name="certificate" class="form-control" rows="8" kc-select-action="click" data-ng-model="realm.certificate"></textarea>
+                    <textarea type="text" id="certificate" name="certificate" class="form-control" rows="8" kc-select-action="click" data-ng-model="realm.certificate" readonly></textarea>
                 </div>
             </div>
         </fieldset>
 
         <div class="form-group" data-ng-show="access.manageRealm">
             <div class="col-md-10 col-md-offset-2">
-                <button class="btn btn-danger" type="button" data-ng-click="generate()" data-ng-disabled="enableUpload">{{:: 'gen-new-keys' | translate}}</button>
+                <button class="btn btn-danger" type="button" data-ng-click="generate()">{{:: 'gen-new-keys' | translate}}</button>
             </div>
         </div>
-        <div class="form-group" data-ng-show="access.manageRealm">
+
-            <div class="col-md-10 col-md-offset-2">
+        <fieldset>
-                <button class="btn btn-danger" type="button" data-ng-click="save()" data-ng-disabled="!enableUpload">{{:: 'upload-keys' | translate}}</button>
+            <legend>Import keys</legend>
-                <button class="btn btn-default" type="button" data-ng-click="cancel()" data-ng-disabled="!enableUpload">{{:: 'cancel' | translate}}</button>
+
+            <div class="form-group">
+                <label class="col-md-2 control-label" for="privateKeyUpload">{{:: 'privateKey' | translate}}</label>
+                <div class="col-md-6">
+                    <div class="controls kc-button-input-file" data-ng-show="!privateKeyUploadContent">
+                        <label for="privateKeyUpload" class="btn btn-default">{{:: 'select-file' | translate}} <i class="pficon pficon-import"></i></label>
+                        <input id="privateKeyUpload" type="file" class="hidden" ng-file-select="privateKeyUpload($files)">
+                    </div>
+                        <span class="kc-uploaded-file">
+                            {{privateKeyUploadName}}
+                        </span>
+                </div>
             </div>
-        </div>
+
+            <div class="form-group">
+                <label class="col-md-2 control-label" for="publicKeyUpload">{{:: 'publicKey' | translate}}</label>
+                <div class="col-md-6">
+                    <div class="controls kc-button-input-file" data-ng-show="!publicKeyUploadContent">
+                        <label for="publicKeyUpload" class="btn btn-default">{{:: 'select-file' | translate}} <i class="pficon pficon-import"></i></label>
+                        <input id="publicKeyUpload" type="file" class="hidden" ng-file-select="publicKeyUpload($files)">
+                    </div>
+                        <span class="kc-uploaded-file">
+                            {{publicKeyUploadName}}
+                        </span>
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label class="col-md-2 control-label" for="certificateUpload">{{:: 'certificate' | translate}}</label>
+                <div class="col-md-6">
+                    <div class="controls kc-button-input-file" data-ng-show="!certificateUploadContent">
+                        <label for="certificateUpload" class="btn btn-default">{{:: 'select-file' | translate}} <i class="pficon pficon-import"></i></label>
+                        <input id="certificateUpload" type="file" class="hidden" ng-file-select="certificateUpload($files)">
+                    </div>
+                        <span class="kc-uploaded-file">
+                            {{certificateUploadName}}
+                        </span>
+                </div>
+            </div>
+
+            <div class="form-group" data-ng-show="access.manageRealm">
+                <div class="col-md-10 col-md-offset-2">
+                    <button class="btn btn-danger" type="button" data-ng-click="import()" data-ng-disabled="!((privateKeyUploadContent && publicKeyUploadContent) || certificateUploadContent)">{{:: 'upload-keys' | translate}}</button>
+                    <button class="btn btn-default" type="button" data-ng-click="clearImport()" data-ng-disabled="!privateKeyUploadContent && !publicKeyUploadContent && !certificateUploadContent">{{:: 'clear' | translate}}</button>
+                </div>
+            </div>
+        </fieldset>
     </form>
+
+
+
+
 </div>