Merge pull request #239 from michaelkaesdorf/fix-display-idp-detail

fix(Admin.UI): fix display of idp properties

Author: skoruba

src/Skoruba.Duende.IdentityServer.Admin.UI/Areas/AdminUI/Views/IdentityProvider/IdentityProvider.cshtml

@@ -95,6 +95,22 @@
                     </div>
                     <div class="row">
                         <div class="col" id="property-list">
+                            @foreach (var property in Model.Properties)
+                            {
+                                <div class="property row mt-1 mb-1">
+                                    <div class="col-sm">
+                                        <input type="text" required value="@property.Value.Name" class="form-control" id="[email protected]" name="Properties[@property.Key].Name" />
+                                        <span class="text-danger field-validation-error" data-valmsg-for="Properties[@property.Key].Name" data-valmsg-replace="true"></span>
+                                    </div>
+                                    <div class="col-sm">
+                                        <input type="text" required value="@property.Value.Value" class="form-control" id="[email protected]" name="Properties[@property.Key].Value" />
+                                        <span class="text-danger field-validation-error" data-valmsg-for="Properties[@property.Key].Value" data-valmsg-replace="true"></span>
+                                    </div>
+                                    <div class="col-sm-1 col-xs-1">
+                                        <span class="remove-property oi oi-trash btn btn-danger"></span>
+                                    </div>
+                                </div>
+                            }
                         </div>
                     </div>
                     <div class="row">
@@ -123,8 +139,8 @@
 </form>
 
 @section scripts
-	{
-<script>
-    IdentityProviders.init(@Model.Properties.Count, @Html.Raw(Json.Serialize(Model.Properties)));
-</script>
+{
+    <script>
+            IdentityProviders.init();
+    </script>
 }

src/Skoruba.Duende.IdentityServer.Admin.UI/Scripts/App/pages/IdentityProviders.js

@@ -1,33 +1,22 @@
 var IdentityProviders = {
-
-    propertyCount: 0,
-    properties: null,
-
-    init: function (propertyCount, properties) {
-
-        IdentityProviders.propertyCount = propertyCount;
-        IdentityProviders.properties = properties;
-
-        IdentityProviders.loadProperties();
+    init: function () {
         IdentityProviders.eventHandlers();
     },
 
-    loadProperties: function () {
-        Object.keys(IdentityProviders.properties).forEach(function (key) {
-            $("#property-list").append(IdentityProviders.propertyTemplate(key, IdentityProviders.properties[key].name, IdentityProviders.properties[key].value));
-        });
-    },
-
     eventHandlers: function () {
-
         FormMvc.disableEnter($('#identity-provider-form'));
 
         $("body").on("click", ".add-property", function (e) {
             e.preventDefault();
-            var currentPropertyCount = IdentityProviders.propertyCount;
 
-            $("#property-list").append(IdentityProviders.propertyTemplate(currentPropertyCount, "", ""));
-            IdentityProviders.propertyCount++;
+            // Determine the current property index based on the number of existing properties
+            var currentPropertyCount = $("#property-list .property").length;
+
+            // Append new property input fields using the updated count
+            var resultingProperty = IdentityProviders.propertyTemplate(currentPropertyCount);
+
+            $("#property-list").append(resultingProperty);
+
         });
 
         $("body").on("click", ".remove-property", function (e) {
@@ -36,18 +25,19 @@
         });
     },
 
-    propertyTemplate: function (propertyIndex, key, value) {
-        return '<div class="property row mt-1 mb-1">' +
-            '    <div class="col-sm">' +
-            '        <input type="text" required value="' + key + '" class="form-control" id="Properties_' + propertyIndex + '__Name" name="Properties[' + propertyIndex + '].Name" />' +
-            '        <span class="text-danger field-validation-error" data-valmsg-for="Properties[' + propertyIndex + '].Name" data-valmsg-replace="true"></span>' +
-            '    </div>' +
-            '    <div class="col-sm">' +
-            '        <input type="text" required  value="' + value + '" class="form-control" id="Properties_' + propertyIndex + '__Value" name="Properties[' + propertyIndex + '].Value" />' +
-            '        <span class="text-danger field-validation-error" data-valmsg-for="Properties[' + propertyIndex + '].Value" data-valmsg-replace="true"></span>' +
-            '    </div>' +
-            '    <div class="col-sm-1 col-xs-1"><span class="remove-property oi oi-trash btn btn-danger"></span></div>' +
+    propertyTemplate: function (propertyIndex) {
+        return '<div class="property row mt-1 mb-1">'+
+                '<div class="col-sm">'+
+                    '<input type="text" required value="" class="form-control" id="Properties_'+propertyIndex+'__Name" name="Properties['+propertyIndex+'].Name" />'+
+                    '<span class="text-danger field-validation-error" data-valmsg-for="Properties['+propertyIndex+'.Name" data-valmsg-replace="true"></span>'+
+                '</div>'+
+                '<div class="col-sm">'+
+                    '<input type="text" required value="" class="form-control" id="Properties_'+propertyIndex+'__Value" name="Properties['+propertyIndex+'].Value" />'+
+                    '<span class="text-danger field-validation-error" data-valmsg-for="Properties['+propertyIndex+'.Value" data-valmsg-replace="true"></span>'+
+                '</div>'+
+                '<div class="col-sm-1 col-xs-1">'+
+                    '<span class="remove-property oi oi-trash btn btn-danger"></span>'+
+                '</div>'+
             '</div>';
     }
-
 };