From 164a9591db34bdd86b2bc0ddd79549c69ce4b08d Mon Sep 17 00:00:00 2001
From: Mark Reynolds <mreynolds@redhat.com>
Date: May 23 2018 18:46:14 +0000
Subject: Ticket 49706 - Finish UI patternfly convertions


Description:  A few modals were not converted to PF, and other minor issues
              with JS and updating tables

https://pagure.io/389-ds-base/issue/49706

Reviewed by: ?

---

diff --git a/src/cockpit/389-console/backend.html b/src/cockpit/389-console/backend.html
index 5cff298..91e2784 100644
--- a/src/cockpit/389-console/backend.html
+++ b/src/cockpit/389-console/backend.html
@@ -410,6 +410,21 @@
               "the available memory space for the DN cache. The DN cache is similar to the entry cache for a database, only its table stores only the entry ID and the entry DN (nsslapd-dncachememsize).">
               DN Cache Size (bytes)</label><input class="ds-input" type="text" id="nsslapd-dncachememsize" size="20"/>
           </div>
+
+        </div>
+        <div class="ds-divider"></div>
+        <div class="ds-inline">
+          <div>
+            <input type="checkbox" class="ds-config-checkbox" id="nsslapd-readonly-suffix"><label
+              for="nsslapd-readonly-suffix" class="ds-label" title="Put database in Read-Only mode (nsslapd-readonly)."> Database Read-Only Mode</label>
+          </div>
+          <div>
+            <input type="checkbox" class="ds-config-checkbox" id="nsslapd-require-index" checked><label
+              for="nsslapd-require-index" class="ds-label" title="Block unindexed searches on this suffix (nsslapd-require-index)."> Block Unindexed Searches</label>
+          </div>
+        </div>
+      </div>
+
           <div>
             <hr>
             <table id="referral-table" class="display ds-referral-table" cellspacing="0" width="100%">
@@ -422,29 +437,17 @@
               <tbody id="referral-tbody">
                 <tr>
                   <td>ldaps://localhost.localdomain.lab.testing.domain.com:636</td>
-                  <td><button class="btn btn-default  delete-referral-btn" type="button"><span class="glyphicon glyphicon-trash"></span> Delete</button></td>
+                  <td class='ds-center'><button class="btn btn-default del-ref-btn" type="button"><span class="glyphicon glyphicon-trash"></span> Delete</button></td>
                 </tr>
                 <tr>
                   <td>ldaps://example.fedora.org:636</td>
-                  <td><button class="btn btn-default delete-referral-btn" type="button"><span class="glyphicon glyphicon-trash"></span> Delete</button></td>
+                  <td class='ds-center'><button class="btn btn-default del-ref-btn" type="button"><span class="glyphicon glyphicon-trash"></span> Delete</button></td>
                 </tr>
               </tbody>
             </table>
             <button class="btn btn-default" data-toggle="modal" data-target="#create-ref-form" id="create-ref-btn" type="button">Create Referral</button>
             <p></p>
           </div>
-        </div>
-        <div class="ds-inline">
-          <div>
-            <input type="checkbox" class="ds-config-checkbox" id="nsslapd-readonly-suffix"><label
-              for="nsslapd-readonly-suffix" class="ds-label" title="Put database in Read-Only mode (nsslapd-readonly)."> Database Read-Only Mode</label>
-          </div>
-          <div>
-            <input type="checkbox" class="ds-config-checkbox" id="nsslapd-require-index" checked><label
-              for="nsslapd-require-index" class="ds-label" title="Block unindexed searches on this suffix (nsslapd-require-index)."> Block Unindexed Searches</label>
-          </div>
-        </div>
-      </div>
   
 
       <button class="accordion ds-accordion" id="db-system-index-accordion" type="button">&#9658 Show System Indexes </button>
diff --git a/src/cockpit/389-console/banner.html b/src/cockpit/389-console/banner.html
index 68ae1a9..14d866f 100644
--- a/src/cockpit/389-console/banner.html
+++ b/src/cockpit/389-console/banner.html
@@ -1,5 +1,5 @@
 389 Directory Server Management <div class="dropdown ds-server-action"> <select class="btn btn-default dropdown ds-dropdown-server" id="select-server">
-      </select></div><div class="dropdown ds-float-right"><button class="btn btn-default dropdown-toggle ds-action-btn" 
+      </select></div><div class="dropdown ds-float-right"><button class="btn btn-primary dropdown-toggle ds-action-btn"
        type="button" id="server-list-menu" data-toggle="dropdown">Actions<span class="caret"></span>
       </button><ul class="dropdown-menu pull-right" role="menu">
         <li role=""><a role="menuitem" id="start-server-btn" href="#">Start Instance</a></li>
diff --git a/src/cockpit/389-console/css/ds.css b/src/cockpit/389-console/css/ds.css
index fefd565..5717bbe 100644
--- a/src/cockpit/389-console/css/ds.css
+++ b/src/cockpit/389-console/css/ds.css
@@ -165,7 +165,7 @@
 .ds-oc-must-buttons {
   padding 0 !important;
   padding-left: 3px;
-  margin-top: 5px;
+  margin-top: 70px;
   margin-bottom: 75px;
   margin-left: 5px;
   margin-right: 9px;
@@ -204,7 +204,7 @@
   height: 30px;
   width: 250px !important;
   text-align: left;
-  border-radius: 5px;
+  /* border-radius: 5px; */
 }
 
 .ds-passwd-dropdown {
@@ -1036,7 +1036,7 @@ Zbutton:focus {
 
 .ds-may-must-list {
   width: 232px !important;
-  height: 160px !important;
+  height: 150px !important;
   margin: 0 !important;
   padding: 0 !important;
 }
@@ -1110,7 +1110,7 @@ option {
 .ds-action-btn {
   margin-left: 10px;
   margin-right: 0px;
-  border-radius: 5px !important;
+  /* border-radius: 5px !important; */
   padding: 0px 10px 0px 10px !important;
   min-height: 30px !important;
 }
@@ -1350,3 +1350,7 @@ option {
   margin-left: 10px;
   margin-top: -2px;
 }
+
+.ds-suffix-cfg-div {
+  min-width: 500px;
+}
diff --git a/src/cockpit/389-console/fonts/OpenSans-Bold-webfont.woff2 b/src/cockpit/389-console/fonts/OpenSans-Bold-webfont.woff2
new file mode 100644
index 0000000..34aac6f
Binary files /dev/null and b/src/cockpit/389-console/fonts/OpenSans-Bold-webfont.woff2 differ
diff --git a/src/cockpit/389-console/fonts/OpenSans-Italic-webfont.woff2 b/src/cockpit/389-console/fonts/OpenSans-Italic-webfont.woff2
new file mode 100644
index 0000000..9a96c63
Binary files /dev/null and b/src/cockpit/389-console/fonts/OpenSans-Italic-webfont.woff2 differ
diff --git a/src/cockpit/389-console/fonts/PatternFlyIcons-webfont.ttf b/src/cockpit/389-console/fonts/PatternFlyIcons-webfont.ttf
new file mode 100644
index 0000000..1ed274b
Binary files /dev/null and b/src/cockpit/389-console/fonts/PatternFlyIcons-webfont.ttf differ
diff --git a/src/cockpit/389-console/fonts/fontawesome-webfont.woff2 b/src/cockpit/389-console/fonts/fontawesome-webfont.woff2
new file mode 100644
index 0000000..4d13fc6
Binary files /dev/null and b/src/cockpit/389-console/fonts/fontawesome-webfont.woff2 differ
diff --git a/src/cockpit/389-console/fonts/glyphicons-halflings-regular.woff2 b/src/cockpit/389-console/fonts/glyphicons-halflings-regular.woff2
new file mode 100644
index 0000000..64539b5
Binary files /dev/null and b/src/cockpit/389-console/fonts/glyphicons-halflings-regular.woff2 differ
diff --git a/src/cockpit/389-console/index.html b/src/cockpit/389-console/index.html
index 50e3d27..236ccb8 100644
--- a/src/cockpit/389-console/index.html
+++ b/src/cockpit/389-console/index.html
@@ -33,7 +33,7 @@
   <script src="js/ds.js"></script>
 </head>
 
-<body hidden>node_modules/datatables/media/js/jquery.dataTables.min.js
+<body hidden>
   <div class="ds-nav-bar">
     <div class="ds-logo">
       <h2 class="ds-logo-style" id="main-banner"></h2>
@@ -127,8 +127,8 @@
               <b class="caret"></b>
             </a>
             <ul class="dropdown-menu ds-nav-item">
-              <li><a href="#0"class="ds-nav-choice" id="std-schema-btn" parent-id="schema-tab">Standard Schema</a></li>
-              <li><a href="#0"class="ds-nav-choice" id="custom-schema-btn" parent-id="schema-tab">Custom Schema</a></li>
+              <li><a href="#0"class="ds-nav-choice" id="objectclass-btn" parent-id="schema-tab">Objectclasses</a></li>
+              <li><a href="#0"class="ds-nav-choice" id="attribute-btn" parent-id="schema-tab">Attributes</a></li>
               <li><a href="#0" class="ds-nav-choice" id="schema-mr-btn" parent-id="schema-tab">Matching Rules</a></li>
             </ul>
           </li>
diff --git a/src/cockpit/389-console/js/backend.js b/src/cockpit/389-console/js/backend.js
index 5d591c1..66255a0 100644
--- a/src/cockpit/389-console/js/backend.js
+++ b/src/cockpit/389-console/js/backend.js
@@ -1,5 +1,5 @@
 var prev_tree_node = null;
-var ref_del_html = "<button class=\"btn btn-default delete-referral-btn\" type=\"button\">Delete Referral</button>";
+var ref_del_html = "<button class=\"btn btn-default del-ref-btn\" type=\"button\"><span class='glyphicon glyphicon-trash'></span> Delete</button>";
 var attr_encrypt_del_html = "<button class=\"btn btn-default attr-encrypt-delete-btn\" type=\"button\">Remove Attribute</button></td>";
 var index_btn_html = 
   '<div class="dropdown"> ' +
@@ -309,16 +309,19 @@ $(document).ready( function() {
       "language": {
         "emptyTable": "No Referrals"
       },
-      "columnDefs": [ {
-        "targets": 1,
-        "orderable": false
-      } ]
+      "columnDefs": [
+        {
+          "targets": 1,
+          "orderable": false,
+        },
+        {
+           "targets": 1,
+           "className": "ds-center"
+        }
+      ]
     });
 
 
-
-
-
     $('#system-index-table').DataTable( {
       "paging": true,
       "bAutoWidth": false,
@@ -481,6 +484,21 @@ $(document).ready( function() {
       }
     });
 
+    $(document).on('click', '.del-ref-btn', function(e) {
+      e.preventDefault();
+      var data = ref_table.row( $(this).parents('tr') ).data();
+      var del_ref_name = data[0];
+      var ref_row = $(this); // Store element for callback
+      bootpopup.confirm("Are you sure you want to delete referral:  " + del_ref_name, "Confirmation", function (yes) {
+        if (yes) {
+          // TODO Delete mapping from DS
+
+          // Update html table
+          ref_table.row( ref_row.parents('tr') ).remove().draw( false );
+        }
+      });
+    });
+
     $("#backend-config-save-btn").on("click", function () {
       var role = $("input[name=cache-role]:checked").val();
       if (role == "manual-cache") {
@@ -695,7 +713,6 @@ $(document).ready( function() {
       var attr_encrypt_algo = $("#nsencryptionalgorithm").val();
       // TODO - add encrypted attr to DS
 
-console.log("Mark Save encrypted attribute");
       // Update table on success
       attr_encrypt_table.row.add( [
         encrypt_attr_name,
@@ -761,16 +778,16 @@ console.log("Mark Save encrypted attribute");
     });
 
     $("#create-ref-save").on("click", function() {
-      
       var ref = get_encoded_ref();
       // Do the actual save in DS
       // Update html
       var tr_row = ref_table.row.add( [
         ref,
         ref_del_html
-      ] ).draw( false );
+      ] );
       $( tr_row ).addClass('ds-nowrap-td');
-
+      $( tr_row ).find("td:nth-child(1))").addClass('ds-center');
+      tr_row.draw(false);
       $("#create-ref-form").modal('toggle');
     });
 
diff --git a/src/cockpit/389-console/js/replication.js b/src/cockpit/389-console/js/replication.js
index e65d83f..0e2b1dd 100644
--- a/src/cockpit/389-console/js/replication.js
+++ b/src/cockpit/389-console/js/replication.js
@@ -103,13 +103,17 @@ function clear_repl_mgr_form () {
   $("#add-repl-mgr-passwd").hide();
 }
 
-function check_repl_binddn_list () {
-  if( $("#nsds5replicabinddngroup").val() == "" && $("#repl-managers-list").has('option').length < 1) {
-    $("#repl-managers-list").css('border-color', 'red');
-  } else {
-    $("#repl-managers-list").css('border-color', binddn_list_color);
-  }
-}
+
+function add_repl_mgr(dn){
+	$("#repl-mgr-table tbody").append(
+		"<tr>"+
+		"<td class='ds-td'>" + dn +"</td>"+
+    "<td class='ds-center'>"+
+    "<button type='button' class='btn btn-default ds-table-btn del-repl-mgr'>" +
+    "<span class='glyphicon glyphicon-trash'></span> Remove</button></td>" +
+		"</tr>");
+};
+
 
 $(document).ready( function() {
   $("#replication-content").load("replication.html", function () {
@@ -120,8 +124,6 @@ $(document).ready( function() {
 
     // Load existing replication config (if any), set role, etc
 
-    // Check repl managers list and if empty give it a red border
-    check_repl_binddn_list();
     $("#schedule-settings").hide();
 
     $("#repl-config-btn").on("click", function() {
@@ -361,6 +363,17 @@ $(document).ready( function() {
       clear_agmt_wizard();
     });
 
+    $(document).on('click', '.del-repl-mgr', function(e) {
+      e.preventDefault();
+      var row = $(this).parent().parent(); //tr
+      var repl_dn = row.children("td:nth-child(1)");
+      bootpopup.confirm("Are you sure you want to delete replication manager:  " + repl_dn.html(), "Confirmation", function (yes) {
+        if (yes) {
+          row.remove();
+        }
+      });
+    });
+
     // Delete agreement
     $(document).on('click', '.agmt-del-btn', function(e) {
       e.preventDefault();
@@ -378,6 +391,7 @@ $(document).ready( function() {
       });
     });
 
+
     // Edit Agreement
     $(document).on('click', '.agmt-edit-btn', function(e) {
       e.preventDefault();
@@ -732,14 +746,12 @@ $(document).ready( function() {
       // Do the actual save in DS
 
       // Update html
-      $("#add-repl-mgr-form").css('display', 'none');
-      if (repl_dn != '') {
-        if ( $('#repl-managers-list option[value="' + repl_dn + '"]').val() === undefined) {
-          // It's not a duplicate
-          $('#repl-managers-list').append($("<option>").val(repl_dn).text(repl_dn));
-          check_repl_binddn_list();
-        }
-      }
+
+      add_repl_mgr(repl_dn);
+
+
+      $("#add-repl-mgr-form").modal('toggle');
+
     });
 
 
diff --git a/src/cockpit/389-console/js/schema.js b/src/cockpit/389-console/js/schema.js
index 1fd00b8..75b7f04 100644
--- a/src/cockpit/389-console/js/schema.js
+++ b/src/cockpit/389-console/js/schema.js
@@ -1,6 +1,6 @@
 var attr_btn_html = 
   '<div class="dropdown">' +
-    '<button class="btn btn-default dropdown-toggle ds-agmt-dropdown-button" type="button" id="" data-toggle="dropdown">' +
+    '<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">' +
       '  Choose Action...' +
       '<span class="caret"></span>' +
     '</button>' +
@@ -12,11 +12,11 @@ var attr_btn_html =
 
 var oc_btn_html = 
   '<div class="dropdown">' +
-    '<button class="btn btn-default dropdown-toggle ds-agmt-dropdown-button" type="button" id="oc-action-btn" data-toggle="dropdown">' +
+    '<button class="btn btn-default dropdown-toggle" type="button"data-toggle="dropdown">' +
       ' Choose Action...' +
       '<span class="caret"></span>' +
     '</button>' +
-    '<ul class="dropdown-menu ds-agmt-dropdown" role="menu" aria-labelledby="oc-action-btn">' +
+    '<ul class="dropdown-menu ds-agmt-dropdown" role="menu">' +
       '<li role=""><a role="menuitem" tabindex="0" class="oc-edit-btn" href="#">Edit Objectclass</a></li>' +
       '<li role=""><a role="menuitem" tabindex="1" class="oc-del-btn" href="#">Delete Objectclass</a></li>' +
     '</ul>' +
@@ -36,7 +36,6 @@ function clear_oc_form() {
 
 function clear_attr_form() {
   // Clear input fields and reset dropboxes
-  $(".ds-accordion-panel").css('display','none');
   $("#add-edit-attr-header").html('Add Attribute');
   $("#attr-name").attr('disabled', false);
   $("#attr-name").val("");
@@ -57,36 +56,14 @@ $(document).ready( function() {
     // TODO Get attributes, Objectclasses, syntaxes, and matching rules: populate tables and forms
 
     // Setup the tables: standard, custom, and Matching Rules
-    $('#standard-oc-table').DataTable({
-      "paging": true,
-      "bAutoWidth": false,
-      "dom": '<"pull-left"f><"pull-right"l>tip', // Moves the search box to the left
-      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
-      "language": {
-        "emptyTable": "No objectclasses available",
-        "search": "Search Objectclasses"
-      },
-    });
 
-    $('#standard-attr-table').DataTable( {
-      "paging": true,
-      "bAutoWidth": false,
-      "dom": '<"pull-left"f><"pull-right"l>tip', // Moves the search box to the left
-      "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
-      "language": {
-        "emptyTable": "No attributes available",
-        "search": "Search Attributes"
-      },
-    });
-
-
-    var custom_oc_table = $('#custom-oc-table').DataTable ({
+    var oc_table = $('#oc-table').DataTable ({
       "paging": true,
       "bAutoWidth": false,
       "dom": '<"pull-left"f><"pull-right"l>tip',
       "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
       "language": {
-        "emptyTable": "No custom objectclasses defined",
+        "emptyTable": "No objectclasses defined",
         "search": "Search Objectclasses"
       },
       "columnDefs": [ {
@@ -94,13 +71,13 @@ $(document).ready( function() {
         "orderable": false
       } ]
     });
-    var custom_at_table = $('#custom-attr-table').DataTable({
+    var at_table = $('#attr-table').DataTable({
       "paging": true,
       "bAutoWidth": false,
       "dom": '<"pull-left"f><"pull-right"l>tip', // Moves the search box to the left
       "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
       "language": {
-        "emptyTable": "No custom attributes defined",
+        "emptyTable": "No attributes defined",
         "search": "Search Attributes"
       },
       "columnDefs": [ {
@@ -125,15 +102,15 @@ $(document).ready( function() {
     // Sort schema list awhile
     sort_list( $("#schema-list") );
 
-    $("#std-schema-btn").on("click", function() {
+    $("#objectclass-btn").on("click", function() {
       $(".all-pages").hide();
       $("#schema-content").show();
-      $("#std-schema-page").show();
+      $("#objectclass-page").show();
     });
-    $("#custom-schema-btn").on("click", function() {
+    $("#attribute-btn").on("click", function() {
       $(".all-pages").hide();
       $("#schema-content").show();
-      $("#custom-schema-page").show();
+      $("#attribute-page").show();
     });
     $("#schema-mr-btn").on("click", function() {
       $(".all-pages").hide();
@@ -141,21 +118,6 @@ $(document).ready( function() {
       $("#schema-mr").show();
     });
 
-    // Accordions
-    $(".ds-accordion-panel").css('display','none');
-    var attr_opts_acc = document.getElementsByClassName("attr-opts-accordion");
-    for (var i = 0; i < attr_opts_acc.length; i++) {
-      attr_opts_acc[i].onclick = function() {
-        this.classList.toggle("active");
-        var panel = this.nextElementSibling;
-        if (panel.style.display == "block") {
-            panel.style.display = "none";
-        } else {
-            panel.style.display = "block";
-        }
-      }
-    }
-
     //
     // Modals/Forms
     //
@@ -167,24 +129,21 @@ $(document).ready( function() {
      */
     $("#add-oc-button").on("click", function() {
       clear_oc_form();
-      $("#add-edit-oc-form").css('display', 'block');
-    });
-
-    $("#add-edit-oc-close").on("click", function() {
-      $("#add-edit-oc-form").css('display', 'none');
     });
-    $("#add-edit-oc-cancel").on("click", function() {
-      $("#add-edit-oc-form").css('display', 'none');
-    });
-    $("#add-edit-oc-save").on("click", function() {
-      
-      // Do the actual save in DS
 
+    $("#save-oc-button").on("click", function() {
+      var edit = false;
+      var oc_name = $("#oc-name").val();
 
+      if ( $("#add-edit-oc-header").text().indexOf("Edit Objectclass") != -1){
+        edit = true;
+      }
+      // TODO - Do the actual save in DS
 
       // Update html
       // If save successful close down form, otherwise keep form up and return      
-      $("#add-edit-oc-form").css('display', 'none');
+      $("#add-edit-oc-form").modal('toggle');
+
       $("#oc-name").attr('disabled', false);
   
   
@@ -192,9 +151,15 @@ $(document).ready( function() {
       var oc_required_list = $('#oc-required-list option').map(function() { return $(this).val(); }).get().join(', ');
       var oc_allowed_list = $('#oc-allowed-list option').map(function() { return $(this).val(); }).get().join(', ');
 
-      // Update html table
-      var oc_name = $("#oc-name").val();
-      custom_oc_table.row.add( [
+      // Add or edit?
+
+      // Update html table (if edit: delete old then add new)
+      if ( edit ) {
+        var selector = $('tr:contains(' + oc_name + ')');
+        oc_table.row(selector).remove().draw(false);
+      }
+
+      oc_table.row.add( [
         oc_name,
         $("#oc-oid").val(),
         $("#oc-parent").val(),
@@ -261,15 +226,10 @@ $(document).ready( function() {
      */
     $("#create-attr-button").on("click", function() {
       clear_attr_form();
-      $("#add-edit-attr-form").css('display', 'block');
+
     })
-    $("#attr-close").on("click", function() {
-      $("#add-edit-attr-form").css('display', 'none');
-    });
-    $("#attr-cancel").on("click", function() {
-      $("#add-edit-attr-form").css('display', 'none');
-    });
-    $("#attr-save").on("click", function() {
+
+    $("#save-attr-button").on("click", function() {
       var attr_name = $("#attr-name").val();
       var multiple = "no";
       var eq_mr= $('#attr-eq-mr-select').val();
@@ -279,15 +239,25 @@ $(document).ready( function() {
       if ( $("#attr-multivalued").is(":checked") ) {
         multiple = "yes";
       };
+      var edit = false;
+      if ( $("#add-edit-attr-header").text().indexOf("Edit Attribute") != -1){
+        edit = true;
+      }
 
       // Do the actual save in DS
-      
+
       // if save in DS successful close down form, otherwise keep form visible and return ^^^
-      $("#add-edit-attr-form").css('display', 'none');
+      $("#add-edit-attr-form").modal('toggle');
       $("#attr-name").attr('disabled', false);
 
-      // Create attribute row to dataTable with correct edit button id
-      custom_at_table.row.add( [
+      // Update html table (if edit: delete old then add new)
+      if ( edit ) {
+        var selector = $('tr:contains(' + attr_name + ')');
+        at_table.row(selector).remove().draw(false);
+      }
+
+      // Create attribute row to dataTable
+      at_table.row.add( [
             attr_name,
             $("#attr-oid").val(),
             $("#attr-syntax").val(),
@@ -302,7 +272,7 @@ $(document).ready( function() {
     $(document).on('click', '.attr-edit-btn', function(e) {
         e.preventDefault();
         clear_attr_form();
-        var data = custom_at_table.row( $(this).parents('tr') ).data();
+        var data = at_table.row( $(this).parents('tr') ).data();
         var edit_attr_name = data[0];
         var edit_attr_oid = "";
         var edit_attr_desc = "";
@@ -312,13 +282,12 @@ $(document).ready( function() {
         var edit_attr_eq_mr = "";
         var edit_attr_order_mr = "";
         var edit_attr_sub_mr = "";
-        
-        console.log("In edit attr,,,");
+
         $("#add-edit-attr-header").html('Edit Attribute: ' + edit_attr_name);
         $("#attr-name").val(edit_attr_name);
         $("#attr-name").attr('disabled', true);
 
-        $("#add-edit-attr-form").css('display', 'block');
+        $("#add-edit-attr-form").modal('toggle');
         
         // TODO Get fresh copy of attr to fill in edit form
 
@@ -327,7 +296,7 @@ $(document).ready( function() {
 
     $(document).on('click', '.attr-del-btn', function(e) {
       e.preventDefault();
-      var data = custom_at_table.row( $(this).parents('tr') ).data();
+      var data = at_table.row( $(this).parents('tr') ).data();
       var del_attr_name = data[0];
       var at_row = $(this);
       bootpopup.confirm("Are you sure you want to delete attribute: " + del_attr_name, "Confirmation", function (yes) {
@@ -335,7 +304,7 @@ $(document).ready( function() {
           // TODO Delete attr from DS
 
           // Update html table
-          custom_at_table.row( at_row.parents('tr') ).remove().draw( false );
+          at_table.row( at_row.parents('tr') ).remove().draw( false );
         }
       });
     });
@@ -343,7 +312,7 @@ $(document).ready( function() {
     $(document).on('click', '.oc-edit-btn', function(e) {
       e.preventDefault();
       clear_oc_form();
-      var data = custom_oc_table.row( $(this).parents('tr') ).data();
+      var data = oc_table.row( $(this).parents('tr') ).data();
       var edit_oc_name = data[0];
       var edit_oc_oid = "";
       var edit_oc_desc = "";
@@ -358,13 +327,13 @@ $(document).ready( function() {
       // TODO Get fresh copy of objectclass for edit form
 
       // Update modal html header and fields and show()
-      $("#add-edit-oc-form").css('display', 'block');
+      $("#add-edit-oc-form").modal('toggle');
       
-    } );
+    });
 
     $(document).on('click', '.oc-del-btn', function(e) {
       e.preventDefault();
-      var data = custom_oc_table.row( $(this).parents('tr') ).data();
+      var data = oc_table.row( $(this).parents('tr') ).data();
       var del_oc_name = data[0];
       var oc_row = $(this);
 
@@ -373,7 +342,7 @@ $(document).ready( function() {
           // TODO Delete attr from DS
 
           // Update html table
-          custom_oc_table.row( oc_row.parents('tr') ).remove().draw( false );
+          oc_table.row( oc_row.parents('tr') ).remove().draw( false );
         }
       });
 
diff --git a/src/cockpit/389-console/js/servers.js b/src/cockpit/389-console/js/servers.js
index bbeff88..dd2c745 100644
--- a/src/cockpit/389-console/js/servers.js
+++ b/src/cockpit/389-console/js/servers.js
@@ -965,7 +965,7 @@ $(document).ready( function() {
 
 
       // Open form
-      $("#local-pwp-form").css('display', 'block');
+      $("#local-pwp-form").modal('toggle');
     });
 
   });
diff --git a/src/cockpit/389-console/monitor.html b/src/cockpit/389-console/monitor.html
index 69c1806..ccb52fc 100644
--- a/src/cockpit/389-console/monitor.html
+++ b/src/cockpit/389-console/monitor.html
@@ -334,6 +334,7 @@
                   </span>
                 </div>
               </div>
+              <p></p>
               <hr class="ds-hr">
               <div class="ds-inline">
                 <div>
diff --git a/src/cockpit/389-console/replication.html b/src/cockpit/389-console/replication.html
index 992ddb7..e26e59f 100644
--- a/src/cockpit/389-console/replication.html
+++ b/src/cockpit/389-console/replication.html
@@ -26,8 +26,10 @@
         Replica ID</label><input class="ds-input" type="text" id="nsds5replicaid" size="15"/>
     </div>
     <p></p>
+
     <div>
-      <table class="table table-bordered ds-mgr-table" title="Specifies entries that can perform replication updates on this server.  Also known as supplier DN, update DN, or Replication Manager">
+      <table class="table table-bordered ds-mgr-table" id="repl-mgr-table"
+        title="Specifies entries that can perform replication updates on this server.  Also known as supplier DN, update DN, or Replication Manager">
         <thead>
           <tr>
             <th>Replication Managers</th>
@@ -38,7 +40,7 @@
           <tr>
             <td class="ds-td">cn=replication manager,cn=config</td>
             <td class="ds-center">
-             <button type="button" class="btn btn-default ds-table-btn">
+             <button type="button" class="btn btn-default ds-table-btn del-repl-mgr">
                <span class="glyphicon glyphicon-trash"></span> Remove
              </button></td>
           </tr>
diff --git a/src/cockpit/389-console/rhds-banner.html b/src/cockpit/389-console/rhds-banner.html
index c856e4a..5496081 100644
--- a/src/cockpit/389-console/rhds-banner.html
+++ b/src/cockpit/389-console/rhds-banner.html
@@ -1,5 +1,5 @@
 Red Hat Directory Server Management <div class="dropdown ds-server-action"> <select class="btn btn-default dropdown ds-dropdown-server" id="select-server">
-      </select></div><div class="dropdown ds-float-right"><button class="btn btn-default dropdown-toggle ds-action-btn" 
+      </select></div><div class="dropdown ds-float-right"><button class="btn btn-primary dropdown-toggle ds-action-btn"
        type="button" id="server-list-menu" data-toggle="dropdown">Actions<span class="caret"></span>
       </button><ul class="dropdown-menu pull-right" role="menu">
         <li role=""><a role="menuitem" id="start-server-btn" href="#">Start Instance</a></li>
diff --git a/src/cockpit/389-console/schema.html b/src/cockpit/389-console/schema.html
index 192a54f..e810be9 100644
--- a/src/cockpit/389-console/schema.html
+++ b/src/cockpit/389-console/schema.html
@@ -1,82 +1,9 @@
 
 <div id="schema-content">
 
-  <div id="std-schema-page" class="all-pages" hidden>
-    <h3  class="ds-config-header">Standard Objectclasses</h3>
-    <table id="standard-oc-table" class="display ds-table" cellspacing="0" width="100%">
-      <thead>
-        <tr class="ds-table-header">
-          <th>Objectclass Name</th>
-          <th>OID</th>
-          <th>Parent</th>
-          <th>Required Attributes</th>
-          <th>Allowed Attributes</th>
-        </tr>
-      </thead>
-      <tbody id="standard-body">
-        <tr>
-          <td>person</td>
-          <td>1.0.34.54.7.2.3.4.3.2</td>
-          <td>top</td>
-          <td>cn givenname sn</td>
-          <td>description uid</td>
-        </tr>
-        <tr>
-          <td>demoPerson</td>
-          <td>1.0.34.54.7.2.3.4.3.2</td>
-          <td>top</td>
-          <td>cn givenname sn</td>
-          <td>uid</td>
-        </tr>
-        <tr>
-          <td>person</td>
-          <td>1.0.34.54.7.2.3.4.3.2</td>
-          <td>top</td>
-          <td>cn givenname sn uid userpassword mail</td>
-          <td>description homedir memberOf someOtherAttribute longdescprition certificateVocationList</td>
-        </tr>
-      </tbody>
-    </table>
-    <hr>
-    <h3 class="ds-config-header">Standard Attributes</h3>
-    <table id="standard-attr-table" class="display ds-table" cellspacing="0" width="100%">
-      <thead>
-        <tr class="ds-table-header">
-          <th>Attribute Name</th>
-          <th>OID</th>
-          <th>Syntax</th>
-          <th>Multivalued</th>
-          <th title="Equality matching rules">Equality Rules</th>
-          <th title="Ordering matching rules">Ordering Rules</th>
-          <th title="Substring matching rules">Substring  Rules</th>
-        </tr>
-      </thead>
-      <tbody id="standard-attr-body">
-        <tr>
-          <td>ssn</td>
-          <td>1.1.1.1.1.1.1.1</td>
-          <td>DirectoryString</td>
-          <td>no</td>
-          <td></td>
-          <td></td>
-          <td></td>
-        </tr>
-        <tr>
-          <td>ssn</td>
-          <td>1.1.1.1.1.1.1.1</td>
-          <td>DirectoryString</td>
-          <td>no</td>
-          <td></td>
-          <td></td>
-          <td></td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <div id="custom-schema-page" class="all-pages" hidden>
-    <h3 class="ds-config-header">Custom Objectclasses</h3>
-    <table id="custom-oc-table" class="display ds-repl-table" cellspacing="0" width="100%">
+  <div id="objectclass-page" class="all-pages" hidden>
+    <h3 class="ds-config-header">Objectclasses</h3>
+    <table id="oc-table" class="display ds-repl-table" cellspacing="0" width="100%">
       <thead>
         <tr class="ds-table-header">
           <th>Objectclass Name</th>
@@ -87,7 +14,7 @@
           <th>Action</th>
         </tr>
       </thead>
-      <tbody id="custom-body">
+      <tbody>
         <tr>
           <td>uiPerson</td>
           <td>1.1.1.1.1.1.1.1.1.1</td>
@@ -96,11 +23,11 @@
           <td>sn uid givenname description userpassword longDescription certificateRevocationList more</td>
           <td>
             <div class="dropdown">
-              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                 Choose Action...
                 <span class="caret"></span>
               </button>
-              <ul class="dropdown-menu ds-agmt-dropdown" role="menu" aria-labelledby="dropdownMenu1">
+              <ul class="dropdown-menu ds-agmt-dropdown" role="menu">
                 <li role=""><a role="menuitem" tabindex="0" class="oc-edit-btn" href="#">Edit Objectclass</a></li>
                 <li role=""><a role="menuitem" tabindex="1" class="oc-del-btn" href="#">Delete Objectclass</a></li>
               </ul>
@@ -116,11 +43,11 @@
           <td>sn member</td>
           <td>
             <div class="dropdown">
-              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
+              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                 Choose Action...
                 <span class="caret"></span>
               </button>
-              <ul class="dropdown-menu ds-agmt-dropdown" role="menu" aria-labelledby="dropdownMenu2">
+              <ul class="dropdown-menu ds-agmt-dropdown" role="menu">
                 <li role=""><a role="menuitem" tabindex="0" class="oc-edit-btn" href="#">Edit Objectclass</a></li>
                 <li role=""><a role="menuitem" tabindex="1" class="oc-del-btn" href="#">Delete Objectclass</a></li>
               </ul>
@@ -135,7 +62,7 @@
           <td>sn uid description</td>
           <td>
             <div class="dropdown">
-              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
+              <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                 Choose Action...
                 <span class="caret"></span>
               </button>
@@ -148,10 +75,12 @@
         </tr>
       </tbody>
     </table>
-    <button id="add-oc-button" name="create-oc" class="btn btn-primary ds-button">Create Objectclass</button>
-    <hr>
-    <h3 class="ds-config-header">Custom Attributes</h3>
-    <table id="custom-attr-table" class="display ds-repl-table" cellspacing="0" width="100%">
+    <button id="add-oc-button" name="create-oc" data-toggle="modal" data-target="#add-edit-oc-form" class="btn btn-primary ds-button">Create Objectclass</button>
+  </div>
+
+  <div id="attribute-page" class="all-pages" hidden>
+    <h3 class="ds-config-header">Attributes</h3>
+    <table id="attr-table" class="display ds-repl-table" cellspacing="0" width="100%">
       <thead>
         <tr class="ds-table-header">
           <th>Attribute Name</th>
@@ -164,7 +93,7 @@
           <th>Action</th>
         </tr>
       </thead>
-      <tbody id="custom-attr-body">
+      <tbody>
         <td>ssn</td>
         <td>1.1.1.1.1.1.1.2</td>
         <td>DirectoryString</td>
@@ -186,7 +115,7 @@
         </td>
       </tbody>
     </table>
-    <button id="create-attr-button" class="btn btn-primary ds-button">Create Attribute</button>
+    <button id="create-attr-button" data-toggle="modal" data-target="#add-edit-attr-form" class="btn btn-primary ds-button">Create Attribute</button>
   </div>
 
   <div id="schema-mr" class="all-pages" hidden>
@@ -222,167 +151,164 @@
 
   <!-- Modals/Popups/Wizards -->
 
-
-  <!-- Add/Edit Objectclass.  we'll use this for our add and edit - JS will change the header -->
-  <div id="add-edit-oc-form" class="modal">
-    <form class="modal-content animate" action="#schema-tab">
-      <div class="container">
-        <h2><b id="add-edit-oc-header">Add Objectclass</b> <span class="close" id="add-edit-oc-close">&times;</span></h2>
-        <hr class="ds-hr">
-        <p></p>
-        <label for="oc-name" class="ds-label-sm" title="The objectclass name"><b
-          >Objectclass Name</b></label><input class="ds-input-lrg" type="text" id="oc-name" size="40" required />
-        <label for="oc-oid" class="ds-label-sm" title="Objectclass OID (optional)"><b
-          >OID (optional)</b></label><input class="ds-input-lrg" value="" type="text" id="oc-oid" size="40"/>
-        <label for="oc-parent" class="ds-label-sm" title="The parent objectclass"><b>Parent Objectclass</b></label><select
-          class="btn btn-default dropdown ds-oc-dropdown" id="oc-parent">
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startup...</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startup...</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startup...</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startup...</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startupZZZZZZ</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startup...</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startup...</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startup...</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startup...</option>
-            <option>Top</option>
-            <option>Person</option>
-            <option>Organizationalunit</option>
-            <option>Dynamically loaded at startupZZZZZZ</option>
-          </select>
-        <p></p>
-        <p></p>
-        <div class="ds-container">
-          <div name="available-attrs">
-            <label class="ds-config-label" for="schema-list" title="The available attributes to choose from."><b>Available Attributes</b></label>
-            <select id="schema-list" class="ds-oc-form-list" name="availattrs" multiple>
-              <option value="alias">alias</option>
-              <option value="cn">cn</option>
-              <option value="uid">uid</option>
-              <option value="sn">sn</option>
-              <option value="ou">ou</option>
-              <option value="displayName">displayName</option>
-              <option value="legalname">legalname</option>
-            </select>
-          </div>
-
-          <div name="add-remove-buttons">
-            <div name="must buttons" class="btn-group ds-oc-must-buttons">
-              <input type="button" class="ds-oc-add-del-btn" id="oc-must-add-button" value="Add &nbsp; &#9658; &#9658; &#9658; "/>
-              <input type="button" class="ds-oc-add-del-btn" id="oc-must-remove-button" value="&#9668; &#9668; &#9668; &nbsp; Remove"/>
-            </div>
-            <p></p>
-            <div name="may buttons" class="btn-group ds-oc-may-buttons">
-              <input type="button" class="ds-oc-add-del-btn" id="oc-may-add-button" value="Add &nbsp; &#9658; &#9658; &#9658;"/>
-              <input type="button" class="ds-oc-add-del-btn" id="oc-may-remove-button" value="&#9668; &#9668; &#9668; &nbsp; Remove"/>
+  <!-- Add/edit Attribute modal -->
+  <div class="modal fade" id="add-edit-attr-form" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="add-edit-attr-header" aria-hidden="true">
+    <div class="modal-dialog ds-modal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
+            <span class="pficon pficon-close"></span>
+          </button>
+          <h4 class="modal-title" id="add-edit-attr-header">Add Attribute</h4>
+        </div>
+        <div class="modal-body">
+          <form class="form-horizontal">
+            <div class="ds-inline">
+              <div>
+                <label for="attr-name" class="ds-config-label" title="The attribute name"><b
+                  >Attribute Name</b></label><input class="ds-input-lrg" type="text" id="attr-name" size="40" required />
+              </div>
+              <div>
+                <label for="attr-syntax" class="ds-config-label" title="The attribute syntax"><b>Attribute Syntax</b></label><select
+                  class="btn btn-default dropdown ds-oc-dropdown" id="attr-syntax">
+                </select>
+              </div>
+              <div>
+                <input type="checkbox" class="ds-config-checkbox" id="attr-multivalued"><label
+                  for="attr-multivalued" class="ds-label"> Attribute Multi-Valued </label>
+              </div>
+              <div>
+                <label for="attr-desc" class="ds-config-label" title="The attribute description"><b
+                  >Attribute Description</b></label><input class="ds-input-lrg" type="text" id="attr-desc" size="40"/>
+              </div>
+              <div>
+                <label for="attr-oid" class="ds-config-label" title="The attribute name"><b
+                  >Attribute OID</b></label><input class="ds-input-lrg" type="text" id="attr-oid" size="40"/>
+              </div>
+              <div>
+                <label for="attr-alias" class="ds-config-label" title="The attribute alias list separated by commas"><b
+                  >Attribute Alias</b></label><input class="ds-input-lrg" type="text" id="attr-alias" size="40"/>
+              </div>
+              <div>
+                <label for="attr-eq-mr-select" class="ds-config-label"><b>Equality Matching Rule</b></label><select
+                  class="btn btn-default dropdown ds-oc-dropdown" id="attr-eq-mr-select">
+                  </select>
+              </div>
+              <div>
+                <label for="attr-order-mr-select" class="ds-config-label"><b>Ordering Matching Rule</b></label><select
+                  class="btn btn-default dropdown ds-oc-dropdown" id="attr-order-mr-select">
+                  </select>
+              </div>
+              <div>
+                <label for="attr-sub-mr-select" class="ds-config-label"><b>Substring Matching Rule</b></label><select
+                  class="btn btn-default dropdown ds-oc-dropdown" id="attr-sub-mr-select">
+                  </select>
+              </div>
             </div>
-          </div>
-
-          <div name="may-must-lists">
-            <label class="ds-config-label" for="oc-required-list" title=
-              "Attributes required by the objectclass"><b>Required Attributes</b></label>
-            <select id="oc-required-list" class="ds-may-must-list" name="availattrs" multiple>
-              <option value="uid">uid</option>
-              <option value="cn">cn</option>
-            </select>
-            <p></p>
-            <label class="ds-config-label" for="oc-allowed-list" title=
-              "Attributes allowed by the objectclass"><b>Allowed Attributes</b></label>
-            <select id="oc-allowed-list" class="ds-may-must-list" name="availattrs" multiple>
-              <option value="alias">alias</option>
-              <option value="sn">sn</option>
-            </select>
-          </div>
+          </form>
         </div>
-        <p></p>
-        <hr class="ds-hr">
-        <div class="clearfix ds-container">
-          <div class="ds-panel-left">
-            <button type="button" id="add-edit-oc-cancel" class="ds-button-left">Cancel</button>
-          </div>
-          <div class="ds-panel-right">
-            <button type="button" id="add-edit-oc-save" class="ds-button-right">Save</button>
-          </div>
+        <div class="modal-footer ds-modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-primary" id="save-attr-button" data-dismiss="modal">Save</button>
         </div>
       </div>
-    </form>
+    </div>
   </div>
 
-  <div id="add-edit-attr-form" class="modal">
-    <form class="modal-content animate" action="#schema-tab">
-      <div class="container">
-        <h2><b id="add-edit-attr-header">Add Attribute</b> <span class="close" id="attr-close">&times;</span> </h2>
-        <hr class="ds-hr">
-        <p></p>
-        <label for="attr-name" class="ds-config-label" title="The attribute name"><b
-          >Attribute Name</b></label><input class="ds-input-lrg" type="text" id="attr-name" size="40" required />
-        <!-- ldapsearch -b cn=schema objectclass=subschema ldapsyntaxes   TODO LIB389 -->
-        <label for="attr-syntax" class="ds-config-label" title="The attribute syntax"><b>Attribute Syntax</b></label><select
-          class="btn btn-default dropdown ds-oc-dropdown" id="attr-syntax">
-        </select>
-        <input type="checkbox" class="ds-config-checkbox" id="attr-multivalued"><label
-          for="attr-multivalued" class="ds-label"> Attribute Multi-Valued </label>
-        <p></p>
-        <input type="button" class="accordion ds-accordion-spacing ds-agmt-wiz-button attr-opts-accordion" id="attr-opts-accordion" value="Optional Settings &#9660;"/>
-        <div class="ds-accordion-panel">
-          <label for="attr-desc" class="ds-config-label" title="The attribute description"><b
-            >Attribute Description</b></label><input class="ds-input-lrg" type="text" id="attr-desc" size="40"/>
-          <label for="attr-oid" class="ds-config-label" title="The attribute name"><b
-            >Attribute OID</b></label><input class="ds-input-lrg" type="text" id="attr-oid" size="40"/>
-          <label for="attr-alias" class="ds-config-label" title="The attribute alias list separated by commas"><b
-            >Attribute Alias</b></label><input class="ds-input-lrg" type="text" id="attr-alias" size="40"/>
-          
-          <label for="attr-eq-mr-select" class="ds-config-label"><b>Equality Matching Rule</b></label><select
-            class="btn btn-default dropdown ds-oc-dropdown" id="attr-eq-mr-select">
-            </select>
-          <label for="attr-order-mr-select" class="ds-config-label"><b>Ordering Matching Rule</b></label><select
-            class="btn btn-default dropdown ds-oc-dropdown" id="attr-order-mr-select">
-            </select>
-          <label for="attr-sub-mr-select" class="ds-config-label"><b>Substring Matching Rule</b></label><select
-            class="btn btn-default dropdown ds-oc-dropdown" id="attr-sub-mr-select">
-            </select>
+
+  <!-- Add/Edit Objectclass -->
+  <div class="modal fade" id="add-edit-oc-form" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="add-edit-oc-header" aria-hidden="true">
+    <div class="modal-dialog ds-modal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close">
+            <span class="pficon pficon-close"></span>
+          </button>
+          <h4 class="modal-title" id="add-edit-oc-header">Add Objectclass</h4>
         </div>
+        <div class="modal-body">
+          <form class="form-horizontal">
+            <div class="ds-inline">
+              <div>
+                <label for="oc-name" class="ds-label-sm" title="The objectclass name"><b
+                  >Objectclass Name</b></label><input class="ds-input-lrg" type="text" id="oc-name" size="40" required />
+              </div>
+              <div>
+                <label for="oc-oid" class="ds-label-sm" title="Objectclass OID (optional)"><b
+                  >OID (optional)</b></label><input class="ds-input-lrg" value="" type="text" id="oc-oid" size="40"/>
+              </div>
+              <div>
+                <label for="oc-parent" class="ds-label-sm" title="The parent objectclass"><b>Parent Objectclass</b></label><select
+                  class="btn btn-default dropdown ds-oc-dropdown" id="oc-parent">
+                    <option>Top</option>
+                    <option>Person</option>
+                    <option>Organizationalunit</option>
+                    <option>Dynamically loaded at startup...</option>
+                    <option>Top</option>
+                    <option>Person</option>
+                    <option>Organizationalunit</option>
+                    <option>Dynamically loaded at startup...</option>
+                    <option>Top</option>
+                    <option>Person</option>
+                    <option>Organizationalunit</option>
+                    <option>Dynamically loaded at startup...</option>
+                    <option>Top</option>
+                    <option>Person</option>
+                    <option>Organizationalunit</option>
+                  </select>
+              </div>
+              <hr>
+              <div class="ds-container">
+                <div name="available-attrs">
+                  <label class="ds-config-label" for="schema-list" title="The available attributes to choose from."><b>Available Attributes</b></label>
+                  <select id="schema-list" class="ds-oc-form-list" name="availattrs" multiple>
+                    <option value="alias">alias</option>
+                    <option value="cn">cn</option>
+                    <option value="uid">uid</option>
+                    <option value="sn">sn</option>
+                    <option value="ou">ou</option>
+                    <option value="displayName">displayName</option>
+                    <option value="legalname">legalname</option>
+                  </select>
+                </div>
 
-        <p></p>
-        <hr class="ds-hr">
-        <div class="clearfix ds-container">
-          <div class="ds-panel-left">
-            <button type="button" id="attr-cancel" class="ds-button-left">Cancel</button>
-          </div>
-          <div class="ds-panel-right">
-            <button type="button" id="attr-save" class="ds-button-right">Save</button>
-          </div>
+                <div name="add-remove-buttons">
+                  <div name="must buttons" class="btn-group ds-oc-must-buttons">
+                    <input type="button" class="ds-oc-add-del-btn" id="oc-must-add-button" value="Add &nbsp; &#9658; &#9658; &#9658; "/>
+                    <input type="button" class="ds-oc-add-del-btn" id="oc-must-remove-button" value="&#9668; &#9668; &#9668; &nbsp; Remove"/>
+                  </div>
+                  <p></p>
+                  <div name="may buttons" class="btn-group ds-oc-may-buttons">
+                    <input type="button" class="ds-oc-add-del-btn" id="oc-may-add-button" value="Add &nbsp; &#9658; &#9658; &#9658;"/>
+                    <input type="button" class="ds-oc-add-del-btn" id="oc-may-remove-button" value="&#9668; &#9668; &#9668; &nbsp; Remove"/>
+                  </div>
+                </div>
+
+                <div name="may-must-lists">
+                  <label class="ds-config-label" for="oc-required-list" title=
+                    "Attributes required by the objectclass"><b>Required Attributes</b></label>
+                  <select id="oc-required-list" class="ds-may-must-list" name="availattrs" multiple>
+                    <option value="uid">uid</option>
+                    <option value="cn">cn</option>
+                  </select>
+                  <p></p>
+                  <label class="ds-config-label" for="oc-allowed-list" title=
+                    "Attributes allowed by the objectclass"><b>Allowed Attributes</b></label>
+                  <select id="oc-allowed-list" class="ds-may-must-list" name="availattrs" multiple>
+                    <option value="alias">alias</option>
+                    <option value="sn">sn</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="modal-footer ds-modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+          <button type="button" class="btn btn-primary" id="save-oc-button" data-dismiss="modal">Save</button>
         </div>
       </div>
-    </form>
+    </div>
   </div>
 
-
 </div>
diff --git a/src/cockpit/389-console/servers.html b/src/cockpit/389-console/servers.html
index 057f4f3..d86a286 100644
--- a/src/cockpit/389-console/servers.html
+++ b/src/cockpit/389-console/servers.html
@@ -1242,12 +1242,12 @@
               </div>
             </div>
           </form>
-        </div> 
-        <div class="modal-footer ds-modal-footer">
-          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-          <button type="button" class="btn btn-primary" id="local-pwp-save">Save</button>
         </div>
       </div>
+      <div class="modal-footer ds-modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
+        <button type="button" class="btn btn-primary" id="local-pwp-save">Save</button>
+      </div>
     </div>
   </div>