powerdns-admin/powerdnsadmin/templates/base.html
corubba 70450315ba Add general modal functions
The two generic modals are defined in the base template, and are used
in various templates. So provide functions and remove duplicate code.
2022-05-19 00:53:20 +02:00

395 lines
16 KiB
HTML

<!DOCTYPE html>
<html>
<head>
{% block head %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}">
{% block title %}<title>{{ SITE_NAME }}</title>{% endblock %}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/style.css') }}">
<!-- Get Google Fonts we like -->
{% if OFFLINE_MODE %}
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/source_sans_pro.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/roboto_mono.css') }}">
{% else %}
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+Mono:400,300,700">
{% endif %}
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Tell Safari to not recognise telephone numbers -->
<meta name="format-detection" content="telephone=no">
{% assets "css_main" -%}
<link rel="stylesheet" href="{{ ASSET_URL }}">
{%- endassets %}
{% if SETTING.get('custom_css') %}
<link rel="stylesheet" href="/static/custom/{{ SETTING.get('custom_css') }}">
{% endif %}
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
{% endblock %}
</head>
<body class="hold-transition skin-blue sidebar-mini {% if not SETTING.get('fullscreen_layout') %}layout-boxed{% endif %}">
{% if OFFLINE_MODE %}
{% set gravatar_url = url_for('static', filename='img/gravatar.png') %}
{% elif current_user.email is defined %}
{% set gravatar_url = current_user.email|email_to_gravatar_url(size=80) %}
{% endif %}
<div class="wrapper">
{% block pageheader %}
<header class="main-header">
<!-- Logo -->
<a href="{{ url_for('index.index') }}" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>PD</b>A</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>PowerDNS</b>-Admin</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
{% if current_user.id is defined %}
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="{{ gravatar_url }}" class="user-image {{ 'offline' if OFFLINE_MODE }}" alt="User Image"/>
<span class="hidden-xs">
{{ current_user.firstname }}
</span>
</a>
<ul class="dropdown-menu">
<li class="user-header">
<img src="{{ gravatar_url }}" class="img-circle {{ 'offline' if OFFLINE_MODE }}" alt="User Image"/>
<p>
{{ current_user.firstname }} {{ current_user.lastname }}
<small>{{ current_user.role.name }}</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="{{ url_for('user.profile') }}" class="btn btn-flat btn-primary">My Profile</a>
</div>
<div class="pull-right">
<a href="{{ url_for('index.logout') }}" class="btn btn-flat btn-warning">Log out</a>
</div>
</li>
</ul>
</li>
</ul>
{% endif %}
</div>
</nav>
</header>
{% endblock %}
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
{% if current_user.id is defined %}
<div class="user-panel">
<div class="pull-left image">
<img src="{{ gravatar_url }}" class="img-circle" alt="User Image"/>
</div>
<div class="pull-left info">
<p>{{ current_user.firstname }} {{ current_user.lastname }}</p>
<a href="#"><i class="fa fa-circle text-success"></i> Logged In</a>
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">USER ACTIONS</li>
<li class="{{ 'active' if active_page == 'dashboard' else '' }}">
<a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a>
</li>
{% if SETTING.get('allow_user_create_domain') or current_user.role.name in ['Administrator', 'Operator'] %}
<li class="{{ 'active' if active_page == 'new_domain' else '' }}">
<a href="{{ url_for('domain.add') }}"><i class="fa fa-plus"></i> <span>New Domain</span></a>
</li>
{% endif %}
{% if SETTING.get('allow_user_remove_domain') or current_user.role.name in ['Administrator', 'Operator'] %}
<li class="{{ 'active' if active_page == 'remove_domain' else '' }}">
<a href="{{ url_for('domain.remove') }}"><i class="fa fa-trash-o"></i> <span>Remove Domain</span></a>
</li>
{% endif %}
{% if current_user.role.name in ['Administrator', 'Operator'] %}
<li class="header">ADMINISTRATION</li>
<li class="{{ 'active' if active_page == 'admin_console' else '' }}">
<a href="{{ url_for('admin.pdns_stats') }}"><i class="fa fa-info-circle"></i> <span>PDNS</span></a>
</li>
<li class="{{ 'active' if active_page == 'admin_global_search' else '' }}">
<a href="{{ url_for('admin.global_search') }}"><i class="fa fa-search"></i> <span>Global Search</span></a>
</li>
<li class="{{ 'active' if active_page == 'admin_history' else '' }}">
<a href="{{ url_for('admin.history') }}"><i class="fa fa-calendar"></i> <span>History</span></a>
</li>
<li class="{{ 'active' if active_page == 'admin_domain_template' else '' }}">
<a href="{{ url_for('admin.templates') }}"><i class="fa fa-clone"></i> <span>Domain Templates</span></a>
</li>
<li class="{{ 'active' if active_page == 'admin_accounts' else '' }}">
<a href="{{ url_for('admin.manage_account') }}"><i class="fa fa-industry"></i> <span>Accounts</span></a>
</li>
<li class="{{ 'active' if active_page == 'admin_users' else '' }}">
<a href="{{ url_for('admin.manage_user') }}"><i class="fa fa-users"></i> <span>Users</span></a>
</li>
<li class="{{ 'active' if active_page == 'admin_keys' else '' }}">
<a href="{{ url_for('admin.manage_keys') }}"><i class="fa fa-key"></i> <span>API Keys</span></a>
</li>
<li class="{{ 'treeview active' if active_page == 'admin_settings' else 'treeview' }}">
<a href="#">
<i class="fa fa-cog"></i> <span>Settings</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu" {% if active_page == 'admin_settings' %}style="display: block;"{% endif %}>
<li><a href="{{ url_for('admin.setting_basic') }}"><i class="fa fa-circle-o"></i></i> <span>Basic</span></a></li>
<li><a href="{{ url_for('admin.setting_records') }}"><i class="fa fa-circle-o"></i> <span>Records</span></a></li>
{% if current_user.role.name == 'Administrator' %}
<li><a href="{{ url_for('admin.setting_pdns') }}"><i class="fa fa-circle-o"></i> <span>PDNS</a></li>
<li><a href="{{ url_for('admin.setting_authentication') }}"><i class="fa fa-circle-o"></i> <span>Authentication</span></a></li>
{% endif %}
</ul>
</li>
{% elif SETTING.get('allow_user_view_history') %}
<li class="header">ADMINISTRATION</li>
<li class="{{ 'active' if active_page == 'admin_history' else '' }}">
<a href="{{ url_for('admin.history') }}"><i class="fa fa-calendar"></i> <span>History</span></a>
</li>
{% endif %}
</ul>
{% endif %}
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
{% block dashboard_stat %}
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="{{ url_for('dashboard.dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
{% endblock %}
{% block content %}
{% endblock %}
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<strong><a href="https://github.com/PowerDNS-Admin/PowerDNS-Admin">PowerDNS-Admin</a></strong> - A PowerDNS web interface with advanced features.
</footer>
</div>
<!-- ./wrapper -->
<script type="text/javascript">
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
<script type="text/javascript">
var PDNS_VERSION = '{{ pdns_version }}'
</script>
{% block scripts %}
{% assets "js_main" -%}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% if SETTING.get('warn_session_timeout') and current_user.is_authenticated %}
<script>
// close the session warning popup when receive
// a boradcast message
var bc = new BroadcastChannel('powerdnsadmin');
bc.addEventListener('message', function (e) {
if (e.data == 'close_session_timeout_modal'){
$("#modal_session_warning").modal('hide');
}
});
// Stay Signed In button click event
$(document.body).on("click", ".button_stay_signed_in", function (e) {
$.get({
url: $.jTimeout().options.extendUrl,
cache: false,
success: function(){
$.jTimeout().resetExpiration();
}
});
$.jTimeout().options.onClickExtend();
});
// Sign Out button click event
$(document.body).on("click", ".button_sign_out", function (e) {
window.location.replace("{{ url_for('index.logout') }}");
});
// Things happen when session warning popup shown
$(document).on('show.bs.modal','#modal_session_warning', function () {
var secondsLeft = jTimeout.getSecondsTillExpiration();
var t = timer($('#modal-time'), secondsLeft);
$(this).on('hidden.bs.modal', function () {
clearInterval(t);
$('#modal-time').text("");
$(this).off('hidden.bs.modal');
});
});
// jTimeout definition
$(function(){
$.jTimeout({
flashTitle: true,
flashTitleSpeed: 500,
flashingTitleText: '**WARNING**',
originalTitle: document.title,
timeoutAfter: {{ SETTING.get('session_timeout')|int * 60 }},
secondsPrior: 60,
heartbeat: 1,
extendOnMouseMove: true,
mouseDebounce: 30,
extendUrl: '{{ url_for("index.ping") }}',
logoutUrl: '{{ url_for("index.logout") }}',
loginUrl: '{{ url_for("index.login") }}',
onClickExtend: function(){
// broadcast a message to tell other tabes
// close the session warning popup
var bc = new BroadcastChannel('powerdnsadmin');
bc.postMessage('close_session_timeout_modal');
},
onMouseMove: function(){
// if the mouse is moving while popup is present, we
// don't extend the session.
if (!$('#modal_session_warning').hasClass('in')) {
$.get({
url: $.jTimeout().options.extendUrl,
cache: false,
success: function () {
$.jTimeout().resetExpiration();
}
});
}
},
onTimeout: function(jTimeout){
window.location.replace("{{ url_for('index.logout') }}");
},
onPriorCallback: function(jTimeout){
$("#modal_session_warning").modal('show');;
},
onSessionExtended:function(jTimeout){
$("#modal_session_warning").modal('hide');
}
});
});
function showErrorModal(message) {
var modal = $('#modal_error');
modal.find('.modal-body p').text(message);
modal.modal('show');
}
function showSuccessModal(message) {
var modal = $("#modal_success");
modal.find('.modal-body p').text(message);
modal.modal('show');
}
</script>
{% endif %}
{%- endassets %}
{% endblock %}
{% block extrascripts %}
{% endblock %}
{% block defaultmodals %}
<div class="modal fade modal-danger" id="modal_error">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-flat btn-default pull-right"
data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div class="modal fade modal-success" id="modal_success">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title">Success</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-flat btn-default pull-right"
data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- /.session-warning-modal -->
<div class="modal fade modal-warning" data-backdrop="static" id="modal_session_warning">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Session timeout warning</h4>
</div>
<div class="modal-body">
<p>Your session is about to expire. You will be automatically signed out in</p>
<h3><span id="modal-time"></span></h3>
<p>To coninue your ssession, select <strong>Stay Signed In</strong></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-flat btn-danger pull-left button_stay_signed_in"
data-dismiss="modal">Stay Signed In</button>
<button type="button" class="btn btn-flat btn-default pull-right button_sign_out"
data-dismiss="modal">Sign Out</button>
</div>
</div>
<!-- /.session-warning-modal-content -->
</div>
<!-- /.session-warning-modal-dialog -->
</div>
<!-- /.session-warning-modal -->
{% endblock %}
{% block modals %}
{% endblock %}
</body>
</html>