feat: Associate an API Key with accounts (#1044)

powerdnsadmin/templates/admin_edit_key.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% set active_page = "admin_keys" %}
+{% if create or (key is not none and key.role.name != "User") %}{% set hide_opts = True %}{%else %}{% set hide_opts = False %}{% endif %}
 {% block title %}
 <title>Edit Key - {{ SITE_NAME }}</title>
 {% endblock %}
@@ -49,10 +50,26 @@
                                 class="glyphicon glyphicon-pencil form-control-feedback"></span>
                         </div>
                     </div>
-                    <div class="box-header with-border">
-                        <h3 class="box-title">Access Control</h3>
+                    <div class="box-header with-border key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
+                      <h3 class="box-title">Accounts Access Control</h3>
                     </div>
-                    <div class="box-body">
+                    <div class="box-body key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
+                      <p>This key will be linked to the accounts on the right,</p>
+                      <p>thus granting access to domains owned by the selected accounts.</p>
+                      <p>Click on accounts to move between the columns.</p>
+                      <div class="form-group col-xs-2">
+                          <select multiple="multiple" class="form-control" id="key_multi_account"
+                              name="key_multi_account">
+                              {% for account in accounts %}
+                                  <option {% if key and account in key.accounts %}selected{% endif %} value="{{ account.name }}">{{ account.name }}</option>
+                              {% endfor %}
+                          </select>
+                      </div>
+                    </div>
+                    <div class="box-header with-border key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
+                        <h3 class="box-title">Domain Access Control</h3>
+                    </div>
+                    <div class="box-body key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
                         <p>This key will have acess to the domains on the right.</p>
                         <p>Click on domains to move between the columns.</p>
                         <div class="form-group col-xs-2">
@@ -66,7 +83,7 @@
                     </div>
                     <div class="box-footer">
                         <button type="submit"
-                            class="btn btn-flat btn-primary">{% if create %}Create{% else %}Update{% endif %}
+                            class="btn btn-flat btn-primary" id="key_submit">{% if create %}Create{% else %}Update{% endif %}
                             Key</button>
                     </div>
                 </form>
@@ -82,7 +99,7 @@
                     <p>Fill in all the fields in the form to the left.</p>
                     <p><strong>Role</strong> The role of the key.</p>
                     <p><strong>Description</strong> The key description.</p>
-                    <p><strong>Access Control</strong> The domains which the key has access to.</p>
+                    <p><strong>Access Control</strong> The domains or accounts which the key has access to.</p>
                 </div>
             </div>
         </div>
@@ -91,6 +108,48 @@
 {% endblock %}
 {% block extrascripts %}
 <script>
+    $('form').submit(function (e) {
+        var selectedRole = $("#key_role").val();
+        var selectedDomains = $("#key_multi_domain option:selected").length;
+        var selectedAccounts = $("#key_multi_account option:selected").length;
+        var warn_modal = $("#modal_warning");
+
+        if (selectedRole != "User" && selectedDomains > 0 && selectedAccounts > 0){
+          var warning = "Administrator and Operators have access to all domains. Your domain an account selection won't be saved.";
+          e.preventDefault(e);
+          warn_modal.modal('show');
+        }
+
+        if (selectedRole == "User" && selectedDomains == 0 && selectedAccounts == 0){
+          var warning = "User role must have at least one account or one domain bound. None selected.";
+          e.preventDefault(e);
+          warn_modal.modal('show');
+        }
+
+        warn_modal.find('.modal-body p').text(warning);
+        warn_modal.find('#button_key_confirm_warn').click(clearModal);
+    });
+    function clearModal(){
+      $("#modal_warning").modal('hide');
+    }
+    $('#key_role').on('change', function (e) {
+        var optionSelected = $("option:selected", this);
+        if (this.value != "User") {
+          // Clear the visible list
+          $('#ms-key_multi_domain .ms-selection li').each(function(){ $(this).css('display', 'none');})
+          $('#ms-key_multi_domain .ms-selectable li').each(function(){ $(this).css('display', '');})
+          $('#ms-key_multi_account .ms-selection li').each(function(){ $(this).css('display', 'none');})
+          $('#ms-key_multi_account .ms-selectable li').each(function(){ $(this).css('display', '');})
+          // Deselect invisible selectbox
+          $('#key_multi_domain option:selected').each(function(){ $(this).prop('selected', false);})
+          $('#key_multi_account option:selected').each(function(){ $(this).prop('selected', false);})
+          // Hide the lists
+          $(".key-opts").hide();
+        }
+        else {
+            $(".key-opts").show();
+        }
+    });
     $("#key_multi_domain").multiSelect({
         selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Domain Name'>",
         selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Domain Name'>",
@@ -126,6 +185,41 @@
             this.qs2.cache();
         }
     });
+    $("#key_multi_account").multiSelect({
+        selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Account Name'>",
+        selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Account Name'>",
+        afterInit: function (ms) {
+            var that = this,
+                $selectableSearch = that.$selectableUl.prev(),
+                $selectionSearch = that.$selectionUl.prev(),
+                selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
+                selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
+
+            that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
+                .on('keydown', function (e) {
+                    if (e.which === 40) {
+                        that.$selectableUl.focus();
+                        return false;
+                    }
+                });
+
+            that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
+                .on('keydown', function (e) {
+                    if (e.which == 40) {
+                        that.$selectionUl.focus();
+                        return false;
+                    }
+                });
+        },
+        afterSelect: function () {
+            this.qs1.cache();
+            this.qs2.cache();
+        },
+        afterDeselect: function () {
+            this.qs1.cache();
+            this.qs2.cache();
+        }
+    });
     {% if plain_key %}
     $(document.body).ready(function () {
         var modal = $("#modal_show_key");
@@ -165,4 +259,25 @@
     </div>
     <!-- /.modal-dialog -->
 </div>
+<div class="modal fade" id="modal_warning">
+  <div class="modal-dialog">
+      <div class="modal-content modal-sm">
+          <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="button_close_warn_modal">
+                  <span aria-hidden="true">&times;</span>
+              </button>
+              <h4 class="modal-title">WARNING</h4>
+          </div>
+          <div class="modal-body">
+              <p></p>
+          </div>
+          <div class="modal-footer">
+              <button type="button" class="btn btn-flat btn-primary center-block" id="button_key_confirm_warn">
+                  OK</button>
+          </div>
+      </div>
+      <!-- /.modal-content -->
+  </div>
+  <!-- /.modal-dialog -->
+</div>
 {% endblock %}

powerdnsadmin/templates/admin_manage_keys.html

@@ -35,6 +35,7 @@
                                 <th>Role</th>
                                 <th>Description</th>
                                 <th>Domains</th>
+                                <th>Accounts</th>
                                 <th>Action</th>
                             </tr>
                         </thead>
@@ -45,6 +46,7 @@
                                 <td>{{ key.role.name }}</td>
                                 <td>{{ key.description }}</td>
                                 <td>{% for domain in key.domains %}{{ domain.name }}{% if not loop.last %}, {% endif %}{% endfor %}</td>
+                                <td>{% for account in key.accounts %}{{ account.name }}{% if not loop.last %}, {% endif %}{% endfor %}</td>
                                 <td width="15%">
                                     <button type="button" class="btn btn-flat btn-success button_edit"
                                         onclick="window.location.href='{{ url_for('admin.edit_key', key_id=key.id) }}'">