Tabs on dashboard.html now fade effect when switching between

First pass at HTML conversion from Master/Slave to Primary/Secondary (TODO: Backend)
Start work on migrating admin_auth_settings to Bootstrap v4
admin_setting_basic -> Change plain text for On/Off to toggles in current state, and changed "Action" column to the opposite toggle of current setting
dashboard_domain -> Reduce deuplicate code for the new dropdown-menu for Actions
register -> Add exclamation icon in front of error text
template_add -> changed box-body to card-body
user_profile -> Fixed tab naviation for Bootstrap v4. Tabs also fade between changes
This commit is contained in:
Tyler Todd 2023-02-14 02:11:13 +00:00
parent 48f80b37ed
commit e0f939813e
11 changed files with 295 additions and 257 deletions

View File

@ -35,7 +35,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card shadow"> <div class="card">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Authentication Settings</h3> <h3 class="card-title">Authentication Settings</h3>
</div> </div>
@ -46,20 +46,36 @@
{{ result['msg'] }} {{ result['msg'] }}
</div> </div>
{% endif %} {% endif %}
<div class="nav-tabs-custom" id="tabs"> <div class="nav-tabs-custom">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#tabs-general" data-toggle="tab">General</a></li> <li class="nav-item">
<li><a href="#tabs-ldap" data-toggle="tab">LDAP</a></li> <a class="nav-link active" href="#tabs-general" data-toggle="pill" role="tab">General</a>
<li><a href="#tabs-google" data-toggle="tab">Google OAuth</a></li> </li>
<li><a href="#tabs-github" data-toggle="tab">Github OAuth</a></li> <li class="nav-item">
<li><a href="#tabs-azure" data-toggle="tab">Microsoft OAuth</a></li> <a class="nav-link" href="#tabs-ldap" data-toggle="pill" role="tab">LDAP</a>
<li><a href="#tabs-oidc" data-toggle="tab">OpenID Connect OAuth</a></li> </li>
<li class="nav-item">
<a class="nav-link" href="#tabs-google" data-toggle="pill" role="tab">Google OAuth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tabs-github" data-toggle="pill" role="tab">Github OAuth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tabs-azure" data-toggle="pill" role="tab">Microsoft OAuth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tabs-oidc" data-toggle="pill" role="tab">OpenID Connect OAuth</a>
</li>
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="tabs-general"> <div class="tab-pane active" id="tabs-general">
<form role="form" method="post"> <form role="form" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
<input type="hidden" value="general" name="config_tab" /> <input type="hidden" value="general" name="config_tab" />
<div class="card-header">
<h3 class="card-title">Basic Settings</h3>
</div>
<div class="card-body">
<div class="form-group"> <div class="form-group">
<input type="checkbox" id="local_db_enabled" name="local_db_enabled" class="checkbox" {% if SETTING.get('local_db_enabled') %}checked{% endif %}> <input type="checkbox" id="local_db_enabled" name="local_db_enabled" class="checkbox" {% if SETTING.get('local_db_enabled') %}checked{% endif %}>
<label for="local_db_enabled">Local DB Authentication</label> <label for="local_db_enabled">Local DB Authentication</label>
@ -68,10 +84,8 @@
<input type="checkbox" id="signup_enabled" name="signup_enabled" class="checkbox" {% if SETTING.get('signup_enabled') %}checked{% endif %}> <input type="checkbox" id="signup_enabled" name="signup_enabled" class="checkbox" {% if SETTING.get('signup_enabled') %}checked{% endif %}>
<label for="signup_enabled">Allow users to sign up</label> <label for="signup_enabled">Allow users to sign up</label>
</div> </div>
<div class="form-group"> <button type="submit" class="btn btn-primary">Save</button>
<button type="submit" class="btn btn-flat btn-primary">Save</button>
</div> </div>
</form> </form>
</div> </div>
<div class="tab-pane" id="tabs-ldap"> <div class="tab-pane" id="tabs-ldap">
@ -332,6 +346,8 @@
<div class="tab-pane" id="tabs-google"> <div class="tab-pane" id="tabs-google">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<div class="card">
<div class="card-body">
<form role="form" method="post" data-toggle="validator"> <form role="form" method="post" data-toggle="validator">
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
<input type="hidden" value="google" name="config_tab" /> <input type="hidden" value="google" name="config_tab" />
@ -375,18 +391,26 @@
<span class="help-block with-errors"></span> <span class="help-block with-errors"></span>
</div> </div>
</fieldset> </fieldset>
<div class="form-group"> <div class="card-footer">
<button type="submit" class="btn btn-flat btn-primary">Save</button> <button type="submit" class="btn btn-primary float-right">Save</button>
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
<div class="col-8"> <div class="col-8">
<legend>Help</legend> <div class="card">
<div class="card-header">
<h3 class="card-title">Help</h3>
</div>
<div class="card-body">
<p>Fill in all the fields in the left form.</p> <p>Fill in all the fields in the left form.</p>
<p>Make sure you add PDA redirection URI (e.g http://localhost:9191/google/authorized) to your Google App Credentials Restriction.</p> <p>Make sure you add PDA redirection URI (e.g http://localhost:9191/google/authorized) to your Google App Credentials Restriction.</p>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="tab-pane" id="tabs-github"> <div class="tab-pane" id="tabs-github">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
@ -1084,16 +1108,13 @@
<p></p> <p></p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-flat btn-default pull-left" id="button_cancel" name="purge" value="OFF" data-dismiss="modal" >Cancel</button> <button type="button" class="btn btn-default pull-left" id="button_cancel" name="purge" value="OFF" data-dismiss="modal" >Cancel</button>
<button type="button" class="btn btn-flat btn-success" id="button_confirm">Confirm</button> <button type="button" class="btn btn-success" id="button_confirm">Confirm</button>
</div> </div>
</div> </div>
<!-- /.modal-content -->
</div> </div>
<!-- /.modal-dialog -->
</div> </div>
<div class="modal fade modal-warning" id="modal_warning" data-keyboard="false" data-backdrop="static"> <div class="modal fade modal-warning" id="modal_warning" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -1107,13 +1128,9 @@
<p></p> <p></p>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-flat btn-success" id="button_warning_confirm">Yes I understand</button> <button type="button" class="btn btn-success" id="button_warning_confirm">Yes I understand</button>
</div> </div>
</div> </div>
<!-- /.modal-content -->
</div> </div>
<!-- /.modal-dialog -->
</div> </div>
{% endblock %} {% endblock %}

View File

@ -52,15 +52,15 @@
{{ setting }} {{ setting }}
</td> </td>
{% if SETTING.get(setting) in [False] %} {% if SETTING.get(setting) in [False] %}
<td>{{ SETTING.get(setting)|display_setting_state }}</td> <td><i class="fas fa-toggle-off"></i>&nbsp;Off</td>
<td width="6%"> <td width="20%">
<button type="button" class="btn btn-success setting-toggle-button" id="{{ setting }}"> <button type="button" class="btn btn-success setting-toggle-button" id="{{ setting }}">
<i class="fas fa-toggle-on"></i>&nbsp;Turn On <i class="fas fa-toggle-on"></i>&nbsp;Turn On
</button> </button>
</td> </td>
{% elif SETTING.get(setting) in [True] %} {% elif SETTING.get(setting) in [True] %}
<td>{{ SETTING.get(setting)|display_setting_state }}</td> <td><i class="fas fa-toggle-on"></i>&nbsp;On</td>
<td width="6%"> <td width="20%">
<button type="button" class="btn btn-danger setting-toggle-button" id="{{ setting }}"> <button type="button" class="btn btn-danger setting-toggle-button" id="{{ setting }}">
<i class="fas fa-toggle-off"></i>&nbsp;Turn Off <i class="fas fa-toggle-off"></i>&nbsp;Turn Off
</button> </button>
@ -69,7 +69,7 @@
<td> <td>
<input name="value" id="value" value="{{ SETTING.get(setting) }}"> <input name="value" id="value" value="{{ SETTING.get(setting) }}">
</td> </td>
<td width="6%"> <td width="20%">
<button type="button" class="btn btn-primary setting-save-button" id="{{ setting }}"> <button type="button" class="btn btn-primary setting-save-button" id="{{ setting }}">
<i class="fas fa-save"></i>&nbsp;Save <i class="fas fa-save"></i>&nbsp;Save
</button> </button>
@ -87,7 +87,7 @@
{% block extrascripts %} {% block extrascripts %}
<script> <script>
// set up history data table // set up settings table
$("#tbl_settings").DataTable({ $("#tbl_settings").DataTable({
"paging": false, "paging": false,
"lengthChange": false, "lengthChange": false,

View File

@ -34,7 +34,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<div class="card shadow"> <div class="card shadow card-outline card-secondary">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">PDNS Settings</h3> <h3 class="card-title">PDNS Settings</h3>
</div> </div>
@ -75,7 +75,7 @@
</div> </div>
</div> </div>
<div class="col-8"> <div class="col-8">
<div class="card shadow"> <div class="card shadow card-outline card-secondary">
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Help</h3> <h3 class="card-title">Help</h3>
</div> </div>
@ -88,7 +88,7 @@
<dt>PowerDNS API Key</dt> <dt>PowerDNS API Key</dt>
<dd>Your PowerDNS API key.</dd> <dd>Your PowerDNS API key.</dd>
<dt>PowerDNS Version</dt> <dt>PowerDNS Version</dt>
<dd>Your PowerDNS version number (eg. 4.1.1).</dd> <dd>Your PowerDNS version number (eg. 4.7.0).</dd>
</dl> </dl>
<p>Find more details at <p>Find more details at
<a href="https://doc.powerdns.com/md/httpapi/README/">https://doc.powerdns.com/md/httpapi/README/</a> <a href="https://doc.powerdns.com/md/httpapi/README/">https://doc.powerdns.com/md/httpapi/README/</a>

View File

@ -170,7 +170,7 @@
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
{% for boxId in custom_boxes.order %} {% for boxId in custom_boxes.order %}
<div class="tab-pane" id='tab_{{boxId}}'> <div class="tab-pane fade show" id='tab_{{boxId}}'>
<div class="card-header"> <div class="card-header">
<h3 class="card-title">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></h3> <h3 class="card-title">Hosted Domains <b>{{custom_boxes.boxes[boxId][0]}}</b></h3>
{% if show_bg_domain_button %} {% if show_bg_domain_button %}

View File

@ -29,47 +29,36 @@
{% endmacro %} {% endmacro %}
{% macro actions(domain) %} {% macro actions(domain) %}
{% if current_user.role.name in ['Administrator', 'Operator'] %}
<td width="6%"> <td width="6%">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Options Options
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu"> <div class="dropdown-menu" aria-labelledby="dropdownMenu">
{% if current_user.role.name in ['Administrator', 'Operator'] %}
<button class="dropdown-item btn-success button_template" id="{{ domain.name }}" type="button"> <button class="dropdown-item btn-success button_template" id="{{ domain.name }}" type="button">
<i class="fa fa-clone"></i>&nbsp;Template <i class="fa fa-clone"></i>&nbsp;Clone to Template
</button> </button>
<button class="dropdown-item btn-success" type="button" onclick="window.location.href='{{ url_for('domain.domain', domain_name=domain.name) }}'"> <button class="dropdown-item btn-success" type="button" onclick="window.location.href='{{ url_for('domain.domain', domain_name=domain.name) }}'">
<i class="fa fa-cog"></i>&nbsp;Manage <i class="fa fa-cog"></i>&nbsp;Manage Domain
</button> </button>
<button class="dropdown-item btn-danger" type="button" onclick="window.location.href='{{ url_for('domain.setting', domain_name=domain.name) }}'"> <button class="dropdown-item btn-danger" type="button" onclick="window.location.href='{{ url_for('domain.setting', domain_name=domain.name) }}'">
<i class="fa fa-cog"></i>&nbsp;Admin <i class="fa fa-cog"></i>&nbsp;Admin Settings
</button> </button>
<button class="dropdown-item btn-primary" type="button" onclick="window.location.href='{{ url_for('domain.changelog', domain_name=domain.name) }}'"> <button class="dropdown-item btn-primary" type="button" onclick="window.location.href='{{ url_for('domain.changelog', domain_name=domain.name) }}'">
<i class="fa fa-history" aria-hidden="true"></i>&nbsp;Changelog <i class="fa fa-history" aria-hidden="true"></i>&nbsp;Domain Changelog
</button> </button>
</div>
</div>
</td>
{% else %} {% else %}
<td width="6%">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Options
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu">
<button class="dropdown-item btn-success" type="button" onclick="window.location.href='{{ url_for('domain.domain', domain_name=domain.name) }}'"> <button class="dropdown-item btn-success" type="button" onclick="window.location.href='{{ url_for('domain.domain', domain_name=domain.name) }}'">
<i class="fa fa-cog"></i>&nbsp;Manage <i class="fa fa-cog"></i>&nbsp;Manage Domain
</button> </button>
{% if allow_user_view_history %} {% if allow_user_view_history %}
<button class="dropdown-item btn-primary" type="button" onclick="window.location.href='{{ url_for('domain.changelog', domain_name=domain.name) }}'"> <button class="dropdown-item btn-primary" type="button" onclick="window.location.href='{{ url_for('domain.changelog', domain_name=domain.name) }}'">
<i class="fa fa-history" aria-hidden="true"></i>&nbsp;Changelog <i class="fa fa-history" aria-hidden="true"></i>&nbsp;Domain Changelog
</button> </button>
{% endif %} {% endif %}
{% endif %}
</div> </div>
</div> </div>
</td> </td>
{% endif %}
{% endmacro %} {% endmacro %}

View File

@ -33,7 +33,7 @@
<div class="col-12"> <div class="col-12">
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
{% if domain.type != 'Slave' %} {% if domain.type != 'Secondary' %}
<button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary pull-left button_add_record" id="{{ domain.name }}"> <button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary pull-left button_add_record" id="{{ domain.name }}">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
&nbsp;Add Record &nbsp;Add Record
@ -43,9 +43,9 @@
&nbsp;Apply Changes &nbsp;Apply Changes
</button> </button>
{% else %} {% else %}
<button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary pull-left button_update_from_master" id="{{ domain.name }}"> <button type="button" style="position: relative; margin-left: 20px" class="btn btn-primary pull-left button_update_from_primary" id="{{ domain.name }}">
<i class="fas fa-download"></i> <i class="fas fa-download"></i>
&nbsp;Update from Master &nbsp;Update from Primary
</button> </button>
{% endif %} {% endif %}
{% if current_user.role.name in ['Administrator', 'Operator'] %} {% if current_user.role.name in ['Administrator', 'Operator'] %}
@ -70,13 +70,16 @@
<th>Status</th> <th>Status</th>
<th>TTL</th> <th>TTL</th>
<th>Data</th> <th>Data</th>
{% if domain.type != 'Secondary' %}
<th>Comment</th> <th>Comment</th>
<th>Edit</th> <th>Edit</th>
<th>Delete</th> <th>Delete</th>
{% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %} {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
<th >Changelog</th> <th >Changelog</th>
{% endif %} {% endif %}
{% else %}
<th>Invisible Sorting Column</th> <th>Invisible Sorting Column</th>
{% endif %}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -87,13 +90,17 @@
<td>{{ record.status }}</td> <td>{{ record.status }}</td>
<td>{{ record.ttl }}</td> <td>{{ record.ttl }}</td>
<td>{{ record.data | pretty_domain_name }}</td> <td>{{ record.data | pretty_domain_name }}</td>
{% if domain.type != 'Secondary' %}
<td>{{ record.comment }}</td> <td>{{ record.comment }}</td>
{% if domain.type != 'Slave' %}
<td width="6%"> <td width="6%">
{% if record.is_allowed_edit() %} {% if record.is_allowed_edit() %}
<button type="button" class="btn btn-warning button_edit"><i class="fa fa-edit"></i></button> <button type="button" class="btn btn-warning button_edit">
<i class="fa fa-edit"></i>
</button>
{% else %} {% else %}
<button type="button" class="btn btn-warning"><i class="fa fa-exclamation-circle"></i></button> <button type="button" class="btn btn-warning">
<i class="fa fa-exclamation-circle"></i>
</button>
{% endif %} {% endif %}
</td> </td>
<td width="6%"> <td width="6%">
@ -101,14 +108,6 @@
<button type="button" class="btn btn-danger button_delete"><i class="fa fa-trash"></i></button> <button type="button" class="btn btn-danger button_delete"><i class="fa fa-trash"></i></button>
{% endif %} {% endif %}
</td> </td>
{% else %}
<td width="6%">
<button type="button" class="btn btn-warning"><i class="fa fa-exclamation-circle"></i></button>
</td>
<td width="6%">
<button type="button" class="btn btn-warning"><i class="fa fa-exclamation-circle"></i></button>
</td>
{% endif %}
{% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %} {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
<td width="6%"> <td width="6%">
<button type="button" onclick="show_record_changelog('{{record.name}}','{{record.type}}',event)" class="btn btn-primary"> <button type="button" onclick="show_record_changelog('{{record.name}}','{{record.type}}',event)" class="btn btn-primary">
@ -116,6 +115,7 @@
</button> </button>
</td> </td>
{% endif %} {% endif %}
{% endif %}
<!-- hidden column that we can sort on --> <!-- hidden column that we can sort on -->
<td>1</td> <td>1</td>
</tr> </tr>
@ -171,22 +171,30 @@
// hidden column so that we can add new records on top // hidden column so that we can add new records on top
// regardless of whatever sorting is done. See orderFixed // regardless of whatever sorting is done. See orderFixed
visible: false, visible: false,
{% if domain.type != 'Secondary' %}
{% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %} {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
targets: [ 9 ] targets: [ 9 ]
{% else %} {% else %}
targets: [ 8 ] targets: [ 8 ]
{% endif %} {% endif %}
{% else %}
targets: [ 5 ]
{% endif %}
}, },
{ {
className: "length-break", className: "length-break",
targets: [ 4, 5 ] targets: [ 4, 5 ]
} }
], ],
{% if domain.type != 'Secondary' %}
{% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %} {% if current_user.role.name in ['Administrator', 'Operator'] or SETTING.get('allow_user_view_history') %}
"orderFixed": [[9, 'asc']] "orderFixed": [[9, 'asc']]
{% else %} {% else %}
"orderFixed": [[8, 'asc']] "orderFixed": [[8, 'asc']]
{% endif %} {% endif %}
{% else %}
"orderFixed": [[5, 'asc']]
{% endif %}
}); });
@ -221,6 +229,7 @@
}); });
}); });
// handle edit button and record click // handle edit button and record click
{% if domain.type != 'Secondary' %}
$(document.body).on("click", ".button_edit{% if quick_edit %}, .row_record{% endif %}", function(e) { $(document.body).on("click", ".button_edit{% if quick_edit %}, .row_record{% endif %}", function(e) {
e.stopPropagation(); e.stopPropagation();
if ($(this).is('tr')) { if ($(this).is('tr')) {
@ -249,6 +258,7 @@
nEditing = nRow; nEditing = nRow;
} }
}); });
{% endif %}
// handle apply changes button // handle apply changes button
$(document.body).on("click",".button_apply_changes", function() { $(document.body).on("click",".button_apply_changes", function() {
@ -319,8 +329,8 @@
nNew = false; nNew = false;
}); });
//handle update_from_master button //handle update_from_primary button
$(document.body).on("click", ".button_update_from_master", function (e) { $(document.body).on("click", ".button_update_from_primary", function (e) {
var domain = $(this).prop('id'); var domain = $(this).prop('id');
applyChanges({'domain': domain, '_csrf_token': '{{ csrf_token() }}'}, $SCRIPT_ROOT + '/domain/' + domain + '/update', true); applyChanges({'domain': domain, '_csrf_token': '{{ csrf_token() }}'}, $SCRIPT_ROOT + '/domain/' + domain + '/update', true);
}); });

View File

@ -67,13 +67,13 @@
</div> </div>
<div class="radio"> <div class="radio">
<label> <label>
<input type="radio" name="radio_type" id="radio_type_master" value="master"> <input type="radio" name="radio_type" id="radio_type_primary" value="primary">
Primary Primary
</label> </label>
</div> </div>
<div class="radio"> <div class="radio">
<label> <label>
<input type="radio" name="radio_type" id="radio_type_slave" value="slave"> <input type="radio" name="radio_type" id="radio_type_secondary" value="secondary">
Secondary Secondary
</label> </label>
</div> </div>
@ -87,8 +87,8 @@
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
<div class="form-group" style="display: none;" id="domain_master_address_div"> <div class="form-group" style="display: none;" id="domain_primary_address_div">
<input type="text" class="form-control" name="domain_master_address" id="domain_master_address" placeholder="Enter valid master ip addresses (separated by commas)"> <input type="text" class="form-control" name="domain_primary_address" id="domain_primary_address" placeholder="Enter valid Primary Server IP addresses (separated by commas)">
</div> </div>
<div class="form-group"> <div class="form-group">
<label>SOA-EDIT-API</label> <label>SOA-EDIT-API</label>
@ -193,10 +193,10 @@
<script> <script>
$("input[name=radio_type]").change(function () { $("input[name=radio_type]").change(function () {
var type = $(this).val(); var type = $(this).val();
if (type == "slave") { if (type == "secondary") {
$("#domain_master_address_div").show(); $("#domain_primary_address_div").show();
} else { } else {
$("#domain_master_address_div").hide(); $("#domain_primary_address_div").hide();
} }
}); });
</script> </script>

View File

@ -170,12 +170,12 @@
PowerDNS server or you handle replication via your backend. PowerDNS server or you handle replication via your backend.
</li> </li>
<li> <li>
Master - This PowerDNS server will serve as the master and will send zone transfers Primary - This PowerDNS server will serve as the primary and will send zone transfers
(AXFRs) to other servers configured as slaves. (AXFRs) to other servers configured as secondaries.
</li> </li>
<li> <li>
Slave - This PowerDNS server will serve as the slave and will request and receive Secondary - This PowerDNS server will serve as the secondaries and will request and receive
zone transfers (AXFRs) from other servers configured as masters. zone transfers (AXFRs) from other servers configured as primaries.
</li> </li>
</ul> </ul>
<b>New Domain Type Setting:</b> <b>New Domain Type Setting:</b>
@ -184,13 +184,13 @@
<select name="domain_type" class="form-control" style="width:15em;"> <select name="domain_type" class="form-control" style="width:15em;">
<option selected value="0">- Unchanged -</option> <option selected value="0">- Unchanged -</option>
<option value="native">Native</option> <option value="native">Native</option>
<option value="master">Master</option> <option value="priamry">Primary</option>
<option value="slave">Slave</option> <option value="secondary">Secondary</option>
</select><br /> </select><br />
<div class="form-group" style="display: none;" id="domain_master_address_div"> <div class="form-group" style="display: none;" id="domain_primary_address_div">
<input type="text" class="form-control" name="domain_master_address" <input type="text" class="form-control" name="domain_primary_address"
id="domain_master_address" id="domain_primary_address"
placeholder="Enter valid master ip addresses (separated by commas)"> placeholder="Enter valid Primary Server IP addresses (separated by commas)">
</div> </div>
<button type="submit" class="btn btn-primary" id="change_type"> <button type="submit" class="btn btn-primary" id="change_type">
<i class="fa fa-check"></i>&nbsp;Change type for {{ domain.name | pretty_domain_name }} <i class="fa fa-check"></i>&nbsp;Change type for {{ domain.name | pretty_domain_name }}
@ -357,13 +357,13 @@
modal.modal('show'); modal.modal('show');
}); });
// domain master address input handeling // domain primary address input handeling
$("select[name=domain_type]").change(function () { $("select[name=domain_type]").change(function () {
var type = $(this).val(); var type = $(this).val();
if (type == "slave") { if (type == "secondary") {
$("#domain_master_address_div").show(); $("#domain_primary_address_div").show();
} else { } else {
$("#domain_master_address_div").hide(); $("#domain_primary_address_div").hide();
} }
}); });

View File

@ -47,6 +47,7 @@
<input type="text" class="form-control {{ 'is-invalid' if 'firstname' in error_messages else '' }}" placeholder="First Name" name="firstname" id="firstname" value="{{ request.form.firstname }}" required> <input type="text" class="form-control {{ 'is-invalid' if 'firstname' in error_messages else '' }}" placeholder="First Name" name="firstname" id="firstname" value="{{ request.form.firstname }}" required>
{% if 'firstname' in error_messages %} {% if 'firstname' in error_messages %}
<div class="invalid-feedback"> <div class="invalid-feedback">
<i class="fas fa-exclamation-triangle"></i>
{{ error_messages['firstname'] }} {{ error_messages['firstname'] }}
</div> </div>
{% endif %} {% endif %}
@ -63,6 +64,7 @@
<input type="text" class="form-control {{ 'is-invalid' if 'lastname' in error_messages else '' }}" placeholder="Last name" name="lastname" id="lastname" value="{{ request.form.lastname }}" required> <input type="text" class="form-control {{ 'is-invalid' if 'lastname' in error_messages else '' }}" placeholder="Last name" name="lastname" id="lastname" value="{{ request.form.lastname }}" required>
{% if 'lastname' in error_messages %} {% if 'lastname' in error_messages %}
<div class="invalid-feedback"> <div class="invalid-feedback">
<i class="fas fa-exclamation-triangle"></i>
{{ error_messages['lastname'] }} {{ error_messages['lastname'] }}
</div> </div>
{% endif %} {% endif %}
@ -96,8 +98,9 @@
</span> </span>
</div> </div>
<input type="text" class="form-control {{ 'is-invalid' if 'username' in error_messages else '' }}" placeholder="Username" name="username" id="username" value="{{ request.form.username }}" required> <input type="text" class="form-control {{ 'is-invalid' if 'username' in error_messages else '' }}" placeholder="Username" name="username" id="username" value="{{ request.form.username }}" required>
{% if 'email' in error_messages %} {% if 'username' in error_messages %}
<div class="invalid-feedback"> <div class="invalid-feedback">
<i class="fas fa-exclamation-triangle"></i>
{{ error_messages['username'] }} {{ error_messages['username'] }}
</div> </div>
{% endif %} {% endif %}
@ -112,8 +115,9 @@
</span> </span>
</div> </div>
<input type="password" class="form-control {{ 'is-invalid' if 'password' in error_messages else '' }}" placeholder="Password" id="password" name="password" required> <input type="password" class="form-control {{ 'is-invalid' if 'password' in error_messages else '' }}" placeholder="Password" id="password" name="password" required>
{% if 'email' in error_messages %} {% if 'password' in error_messages %}
<div class="invalid-feedback"> <div class="invalid-feedback">
<i class="fas fa-exclamation-triangle"></i>
{{ error_messages['password'] }} {{ error_messages['password'] }}
</div> </div>
{% endif %} {% endif %}
@ -130,6 +134,7 @@
<input type="password" class="form-control {{ 'is-invalid' if 'rpassword' in error_messages else '' }}" placeholder="Retype password" id="rpassword" name="rpassword" required> <input type="password" class="form-control {{ 'is-invalid' if 'rpassword' in error_messages else '' }}" placeholder="Retype password" id="rpassword" name="rpassword" required>
{% if 'rpassword' in error_messages %} {% if 'rpassword' in error_messages %}
<div class="invalid-feedback"> <div class="invalid-feedback">
<i class="fas fa-exclamation-triangle"></i>
{{ error_messages['rpassword'] }} {{ error_messages['rpassword'] }}
</div> </div>
{% endif %} {% endif %}
@ -138,20 +143,28 @@
{% if captcha_enable %} {% if captcha_enable %}
<p class="login-box-msg">Please complete the CAPTCHA below</p> <p class="login-box-msg">Please complete the CAPTCHA below</p>
<div class="form-group has-feedback"> <div class="form-group">
{{ captcha() }} {{ captcha() }}
<input type="text" class="form-control" placeholder="CAPTCHA" name="captcha" <div class="input-group mb-3">
data-error="Please complete the CAPTCHA" required> <div class="input-group-prepend">
<span class="help-block with-errors"></span> <span class="input-group-text">
<i class="fas fa-shield-alt"></i>
</span>
</div>
<input type="text" class="form-control {{ 'is-invalid' if 'captcha_result' in error_messages else '' }}" placeholder="CAPTCHA" id="captcha" name="captcha" required>
{% if 'captcha_result' in error_messages %}
<div class="invalid-feedback">
<i class="fas fa-exclamation-triangle"></i>
{{ error_messages['captcha_result'] }}
</div>
{% endif %}
</div> </div>
{% endif %} {% endif %}
<div class="row"> <div class="row">
<div class="col-6"> <div class="d-flex justify-content-between mx-auto mt-3">
<button type="button" class="btn btn-block" id="button_back">Back</button> <button type="button" class="btn btn-secondary" id="button_back">Back</button>
</div> <button type="submit" class="btn btn-primary mx-3">Register</button>
<div class="col-4">
<button type="submit" class="btn btn-primary btn-block">Register</button>
</div> </div>
</div> </div>
</form> </form>

View File

@ -61,7 +61,7 @@
</div> </div>
<form role="form" method="post" action="{{ url_for('admin.create_template') }}"> <form role="form" method="post" action="{{ url_for('admin.create_template') }}">
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
<div class="box-body"> <div class="card-body">
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" name="name" id="name" <input type="text" class="form-control" name="name" id="name"
placeholder="Enter a valid template name (required)"> placeholder="Enter a valid template name (required)">
@ -105,10 +105,10 @@
<script> <script>
$("input[name=radio_type]").change(function () { $("input[name=radio_type]").change(function () {
var type = $(this).val(); var type = $(this).val();
if (type == "slave") { if (type == "secondary") {
$("#domain_master_address_div").show(); $("#domain_primary_address_div").show();
} else { } else {
$("#domain_master_address_div").hide(); $("#domain_primary_address_div").hide();
} }
}); });
</script> </script>

View File

@ -34,106 +34,115 @@
<div class="col-12"> <div class="col-12">
<div class="card card-primary"> <div class="card card-primary">
<div class="card-header with-border"> <div class="card-header with-border">
<h3 class="card-title">Edit my profile{% if session['authentication_type'] != 'LOCAL' %} [Disabled - <h3 class="card-title">
Authenticated externally]{% endif %}</h3> Edit my profile {% if session['authentication_type'] != 'LOCAL' %} [Disabled - Authenticated externally]{% endif %}
</h3>
</div> </div>
<div class="card-body"> <div class="card-body">
<!-- Custom Tabs --> <div class="nav-tabs-custom">
<div class="nav-tabs-custom" id="tabs"> <ul class="nav nav-tabs" role="tablist">
<ul class="nav nav-tabs"> <li class="nav-item">
<li class="active"><a href="#tabs-personal" data-toggle="tab">Personal <a class="nav-link active" href="#tabs-personal" data-toggle="tab">Personal Info</a>
Info</a></li> </li>
{% if session['authentication_type'] == 'LOCAL' %} {% if session['authentication_type'] == 'LOCAL' %}
<li><a href="#tabs-password" data-toggle="tab">Change Password</a></li> <li class="nav-item">
<a class="nav-link" href="#tabs-password" data-toggle="tab">Change Password</a>
</li>
{% endif %} {% endif %}
{% if session['authentication_type'] in ['LOCAL', 'LDAP'] %} {% if session['authentication_type'] in ['LOCAL', 'LDAP'] %}
<li><a href="#tabs-authentication" data-toggle="tab">Authentication</a></li> <li class="nav-item">
<a class="nav-link" href="#tabs-authentication" data-toggle="tab">Authentication</a>
</li>
{% endif %} {% endif %}
</ul> </ul>
<div class="tab-content"> <div class="tab-content">
<div class="tab-pane active" id="tabs-personal"> <div class="tab-pane fade show active" id="tabs-personal">
<form role="form" method="post" action="{{ user_profile }}"> <form role="form" method="post" action="{{ user_profile }}">
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
<div class="form-group"> <div class="form-group">
<label for="firstname">First Name</label> <input type="text" <label for="firstname">First Name</label>
class="form-control" name="firstname" id="firstname" <input type="text" class="form-control" name="firstname" id="firstname"
placeholder="{{ current_user.firstname }}" placeholder="{{ current_user.firstname }}"
{% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}> {% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="lastname">Last Name</label> <input type="text" class="form-control" <label for="lastname">Last Name</label>
name="lastname" id="lastname" placeholder="{{ current_user.lastname }}" <input type="text" class="form-control" name="lastname" id="lastname" placeholder="{{ current_user.lastname }}"
{% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}> {% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="email">E-mail</label> <input type="email" class="form-control" <label for="email">E-mail</label> <input type="email" class="form-control" name="email" id="email" placeholder="{{ current_user.email }}"
name="email" id="email" placeholder="{{ current_user.email }}"
{% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}> {% if session['authentication_type'] != 'LOCAL' %}disabled{% endif %}>
</div>{% if session['authentication_type'] == 'LOCAL' %} </div>
{% if session['authentication_type'] == 'LOCAL' %}
<div class="form-group"> <div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</div>{% endif %} </div>
{% endif %}
</form> </form>
</div> </div>
{% if session['authentication_type'] == 'LOCAL' %} {% if session['authentication_type'] == 'LOCAL' %}
<div class="tab-pane" id="tabs-password"> <div class="tab-pane fade" id="tabs-password">
{% if not current_user.password %} {% if not current_user.password %}
Your account password is managed via LDAP which isn't supported to change here. Your account password is managed via LDAP which isn't supported to change here.
{% else %} {% else %}
<form action="{{ user_profile }}" method="post"> <form action="{{ user_profile }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
<div class="form-group"> <div class="form-group">
<label for="password">New Password</label> <input type="password" <label for="password">New Password</label> <input type="password" class="form-control" name="password" id="newpassword">
class="form-control" name="password" id="newpassword" />
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="rpassword">Re-type New Password</label> <input type="password" <label for="rpassword">Re-type New Password</label>
class="form-control" name="rpassword" id="rpassword" /> <input type="password" class="form-control" name="rpassword" id="rpassword">
</div> </div>
<div class="form-group"> <div class="form-group">
<button type="submit" class="btn btn-flat btn-primary">Change Password</button> <button type="submit" class="btn btn-primary">Change Password</button>
</div> </div>
</form> </form>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}
<!-- {% if session['authentication_type'] in ['LOCAL', 'LDAP'] %} --> <div class="tab-pane fade" id="tabs-authentication">
<div class="tab-pane" id="tabs-authentication">
<form action="{{ user_profile }}" method="post"> <form action="{{ user_profile }}" method="post">
<input type="hidden" name="_csrf_token" value="{{ csrf_token() }}"> <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
<div class="form-group"> <div class="form-group">
<input type="checkbox" id="otp_toggle" class="otp_toggle" <input type="checkbox" id="otp_toggle" class="otp_toggle" {% if current_user.otp_secret %}checked{% endif %}>
{% if current_user.otp_secret %}checked{% endif %}>
<label for="otp_toggle">Enable Two Factor Authentication</label> <label for="otp_toggle">Enable Two Factor Authentication</label>
{% if current_user.otp_secret %} {% if current_user.otp_secret %}
<div id="token_information"> <div id="token_information">
<p><img id="qrcode" src="{{ url_for('user.qrcode') }}"></p> <p>
<img id="qrcode" src="{{ url_for('user.qrcode') }}">
</p>
<div style="position: relative; left: 15px"> <div style="position: relative; left: 15px">
Your secret key is: <br /> Your secret key is:
<br />
<form> <form>
<input type=text id="otp_secret" value={{current_user.otp_secret}} readonly> <input type=text id="otp_secret" value={{current_user.otp_secret}} readonly>
<button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()"> <i class="fa fa-clipboard"></i> </button> <button type=button style="position:relative; right:28px" onclick="copy_otp_secret_to_clipboard()"> <i class="fa fa-clipboard"></i> </button>
<br /><font color="red" id="copy_tooltip" style="visibility:collapse">Copied.</font> <br />
<font color="red" id="copy_tooltip" style="visibility:collapse">Copied.</font>
</form> </form>
</div> </div>
You can use Google Authenticator (<a target="_blank" You can use Google Authenticator
href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a> (<a target="_blank" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2">Android</a>
- <a target="_blank" - <a target="_blank" href="https://apps.apple.com/us/app/google-authenticator/id388497605">iOS</a>)
href="https://apps.apple.com/us/app/google-authenticator/id388497605">iOS</a>) or FreeOTP
or FreeOTP (<a target="_blank" (<a target="_blank" href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en">Android</a>
href="https://play.google.com/store/apps/details?id=org.fedorahosted.freeotp&hl=en">Android</a> - <a target="_blank" href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>)
- <a target="_blank"
href="https://itunes.apple.com/en/app/freeotp-authenticator/id872559395?mt=8">iOS</a>)
on your smartphone to scan the QR code. on your smartphone to scan the QR code.
<br /> <br />
<font color="red"><strong><i>Make sure only you can see this QR Code and secret key and <font color="red">
nobody can capture them.</i></strong></font> <strong>
<i>Make sure only you can see this QR Code and secret key and
nobody can capture them.
</i>
</strong>
</font>
</div> </div>
{% endif %} {% endif %}
</div> </div>
</form> </form>
</div> </div>
<!-- {% endif %} -->
</div> </div>
</div> </div>
</div> </div>