mirror of
https://github.com/cwinfo/powerdns-admin.git
synced 2024-11-12 16:40:26 +00:00
c00ddea2fc
Added server-side logic for register.html validation Keep form firelds on register.html in the event of wrong input fields to save users from retyping info More button rounding
300 lines
13 KiB
HTML
300 lines
13 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% set active_page = "admin_keys" %}
|
|
|
|
{% if (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 %}
|
|
|
|
{% block dashboard_stat %}
|
|
<div class="content-header">
|
|
<div class="container-fluid">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0 text-dark">
|
|
API Keys
|
|
<small>{% if create %}Add API Key{% else %}Edit API Key - {{ key.id }}{% endif %}</small>
|
|
</h1>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="{{ url_for('dashboard.dashboard') }}">Dashboard</a></li>
|
|
<li class="breadcrumb-item"><a href="{{ url_for('admin.manage_keys') }}">API Keys</a></li>
|
|
<li class="breadcrumb-item active">{% if create %}Add API Key{% else %}Edit API Key - {% endif %}{{ key.id }}</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="content">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<div class="card card-primary">
|
|
<div class="card-header with-border">
|
|
<h3 class="card-title">{% if create %}Add{% else %}Edit{% endif %} Key</h3>
|
|
</div>
|
|
<form role="form" method="post"
|
|
action="{% if create %}{{ url_for('admin.edit_key') }}{% else %}{{ url_for('admin.edit_key', key_id=key.id) }}{% endif %}">
|
|
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
|
|
<input type="hidden" name="create" value="{{ create }}">
|
|
<div class="card-body">
|
|
<div class="form-group has-feedback">
|
|
<label class="control-label" for="role">Role</label>
|
|
<select class="key_role form-control" id="key_role" name="key_role">
|
|
{% for role in roles %}
|
|
<option value="{{ role.name }}"
|
|
{% if (key is not none) and (role.id==key.role.id) %}selected{% endif %}
|
|
{% if (key is none) and (role.name=="User") %}selected{% endif %}>
|
|
{{ role.name }}
|
|
</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="form-group has-feedback">
|
|
<label class="control-label" for="description">Description</label>
|
|
<input type="text" class="form-control" placeholder="Description" name="description"
|
|
{% if key is not none %} value="{{ key.description }}" {% endif %}>
|
|
<span class="glyphicon glyphicon-pencil form-control-feedback"></span>
|
|
</div>
|
|
</div>
|
|
<div class="card-header with-border key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
|
|
<h3 class="card-title">Accounts Access Control</h3>
|
|
</div>
|
|
<div class="card-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-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="card-header with-border key-opts"{% if hide_opts %} style="display: none;"{% endif %}>
|
|
<h3 class="card-title">Domain Access Control</h3>
|
|
</div>
|
|
<div class="card-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-2">
|
|
<select multiple="multiple" class="form-control" id="key_multi_domain"
|
|
name="key_multi_domain">
|
|
{% for domain in domains %}
|
|
<option {% if key and domain in key.domains %}selected{% endif %} value="{{ domain.name }}">{{ domain.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button type="submit"
|
|
class="btn btn-flat btn-primary float-right" id="key_submit">{% if create %}Create{% else %}Update{% endif %}
|
|
Key</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="card card-primary">
|
|
<div class="card-header with-border">
|
|
<h3 class="card-title">Help with {% if create %}creating a new{% else%}updating a{% endif %} key
|
|
</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<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 or accounts which the key has access to.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% 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'>",
|
|
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();
|
|
}
|
|
});
|
|
$("#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");
|
|
var info = "{{ plain_key }}";
|
|
modal.find('.modal-body p').text(info);
|
|
modal.find('#button_key_confirm').click(redirect_modal);
|
|
modal.find('#button_close_modal').click(redirect_modal);
|
|
modal.modal('show');
|
|
});
|
|
|
|
function redirect_modal() {
|
|
window.location.href = '{{ url_for('admin.manage_keys') }}';
|
|
modal.modal('hide');
|
|
}
|
|
{% endif %}
|
|
</script>
|
|
{% endblock %}
|
|
{% block modals %}
|
|
<div class="modal fade" id="modal_show_key">
|
|
<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_modal">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 class="modal-title">Your API key</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">
|
|
Confirm</button>
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</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">×</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 %}
|