mirror of
https://github.com/opnsense/core.git
synced 2026-05-28 04:34:51 -04:00
ipsec: restyle the connections page for clarity
Co-authored-by: Stephan de Wit <stephan.de.wit@deciso.com>
This commit is contained in:
Franco Fichtner
parent
a8cc73bd93
commit
588a302d14
2 changed files with 157 additions and 154 deletions
|
|
@ -1,4 +1,9 @@
|
|||
<form>
|
||||
<field>
|
||||
<label>General settings</label>
|
||||
<type>header</type>
|
||||
<static>true</static>
|
||||
</field>
|
||||
<field>
|
||||
<id>connection.uuid</id>
|
||||
<label>UUID</label>
|
||||
|
|
@ -248,4 +253,9 @@
|
|||
<label>Description</label>
|
||||
<type>text</type>
|
||||
</field>
|
||||
<field>
|
||||
<type>buttons</type>
|
||||
<parent>ConnectionDialog</parent>
|
||||
<cancel>true</cancel>
|
||||
</field>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{#
|
||||
# Copyright (c) 2022-2024 Deciso B.V.
|
||||
# Copyright (c) 2022-2026 Deciso B.V.
|
||||
# All rights reserved.
|
||||
#
|
||||
# Redistribution and use in source and binary forms, with or without modification,
|
||||
|
|
@ -86,33 +86,48 @@
|
|||
|
||||
$(".hidden_attr").closest('tr').hide();
|
||||
|
||||
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
if ($(e.relatedTarget).attr('href') == '.edit_connection') {
|
||||
$("#connection_details").hide();
|
||||
}
|
||||
});
|
||||
|
||||
$("#ConnectionDialog").click(function(){
|
||||
$("#connection_details").hide();
|
||||
const $tab = $(this);
|
||||
|
||||
$("#grid-locals").bootgrid("clear");
|
||||
$("#grid-remotes").bootgrid("clear");
|
||||
$("#grid-children").bootgrid("clear");
|
||||
|
||||
ajaxGet("/api/ipsec/connections/connection_exists/" + $("#connection\\.uuid").val(), {}, function(data){
|
||||
if (data.exists) {
|
||||
$("#connection_details").show();
|
||||
$("#grid-locals").bootgrid("reload");
|
||||
$("#grid-remotes").bootgrid("reload");
|
||||
$("#grid-children").bootgrid("reload");
|
||||
} else {
|
||||
$("#connection_details").hide();
|
||||
}
|
||||
});
|
||||
$(this).show();
|
||||
|
||||
$tab.show();
|
||||
});
|
||||
|
||||
$("#ConnectionDialog").change(function(){
|
||||
if ($("#connection_details").is(':visible')) {
|
||||
$("#tab_connections").click();
|
||||
$("#ConnectionDialog").hide();
|
||||
} else {
|
||||
$("#ConnectionDialog").click();
|
||||
}
|
||||
$("#ConnectionDialog").change(function() {
|
||||
$("#ConnectionDialog").click();
|
||||
});
|
||||
$("#btn_ConnectionDialog_cancel").click(function () {
|
||||
$("#tab_connections").click();
|
||||
$("#ConnectionDialog").hide();
|
||||
$("#connection_details").hide();
|
||||
});
|
||||
|
||||
$("#connection\\.description").change(function(){
|
||||
if ($(this).val() !== '') {
|
||||
$("#ConnectionDialog").text($(this).val());
|
||||
// XXX wrong on clone
|
||||
$("#ConnectionDialog").text('Connections: ' + $(this).val());
|
||||
} else {
|
||||
$("#ConnectionDialog").text('-');
|
||||
$("#ConnectionDialog").text('Connections: [new]');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -126,6 +141,7 @@
|
|||
ajaxCall('/api/ipsec/connections/toggle/' + enabled, {}, function (data, status) {
|
||||
$("#enable").removeClass("pending");
|
||||
});
|
||||
$(document).trigger("settings-changed");
|
||||
}
|
||||
});
|
||||
ajaxGet('/api/ipsec/connections/is_enabled', {}, function (data, status) {
|
||||
|
|
@ -135,13 +151,8 @@
|
|||
$("#enable").removeClass("pending");
|
||||
});
|
||||
|
||||
/**
|
||||
* reconfigure
|
||||
*/
|
||||
$("#reconfigureAct").SimpleActionButton({
|
||||
onAction: function(data, status){
|
||||
updateServiceControlUI('ipsec');
|
||||
}
|
||||
onAction: function() { $("#btn_ConnectionDialog_cancel").click(); }
|
||||
});
|
||||
|
||||
$(".cipher_tooltip").change(function(){
|
||||
|
|
@ -177,10 +188,7 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
div.section_header > hr {
|
||||
margin: 0px;
|
||||
}
|
||||
div.section_header > h2 {
|
||||
tr > td > h3 {
|
||||
padding-left: 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -188,19 +196,28 @@
|
|||
max-width: 500px;
|
||||
text-align: left;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.left-col {
|
||||
padding-right: 0;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
}
|
||||
.right-col {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<ul class="nav nav-tabs" data-tabs="tabs" id="maintabs">
|
||||
<li class="active"><a data-toggle="tab" id="tab_connections" href="#connections">{{ lang._('Connections') }}</a></li>
|
||||
<li><a data-toggle="tab" href="#edit_connection" id="ConnectionDialog" style="display: none;"> </a></li>
|
||||
<li><a data-toggle="tab" href=".edit_connection" id="ConnectionDialog" style="display: none;"> </a></li>
|
||||
<li><a data-toggle="tab" href="#pools" id="tab_pools"> {{ lang._('Pools') }} </a></li>
|
||||
</ul>
|
||||
<div class="tab-content content-box">
|
||||
<div id="connections" class="tab-pane fade in active">
|
||||
<table id="grid-connections" class="table table-condensed table-hover table-striped" data-editDialog="ConnectionDialog" data-editAlert="ConnectionChangeMessage">
|
||||
<table id="grid-connections" class="table table-condensed table-hover table-striped" data-editDialog="ConnectionDialog">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('UUID') }}</th>
|
||||
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
|
||||
<th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
|
||||
<th data-column-id="local_addrs" data-type="string">{{ lang._('Local') }}</th>
|
||||
|
|
@ -222,143 +239,24 @@
|
|||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="col-md-12">
|
||||
<div id="ConnectionChangeMessage" class="alert alert-info" style="display: none" role="alert">
|
||||
{{ lang._('After changing settings, please remember to apply them with the button below') }}
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="col-md-12 form-inline __mb">
|
||||
<div class="form-group __mr">
|
||||
<button class="btn btn-primary" id="reconfigureAct"
|
||||
data-endpoint="/api/ipsec/service/reconfigure"
|
||||
data-label="{{ lang._('Apply') }}"
|
||||
data-error-title="{{ lang._('Error reconfiguring IPsec') }}"
|
||||
type="button"
|
||||
></button>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="form-group" style="vertical-align: sub">
|
||||
<input name="enable" class="pending" type="checkbox" id="enable"/>
|
||||
<label for="enable"><strong>{{ lang._('Enable IPsec') }}</strong></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="edit_connection" class="tab-pane fade in">
|
||||
<div class="section_header">
|
||||
<h2>{{ lang._('General settings')}}</h2>
|
||||
<hr/>
|
||||
</div>
|
||||
<div class="tab-pane fade in edit_connection">
|
||||
<div>
|
||||
<form id="frm_ConnectionDialog">
|
||||
</form>
|
||||
</div>
|
||||
<div id="connection_details">
|
||||
<div class="row">
|
||||
<hr/>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="section_header">
|
||||
<h2>{{ lang._('Local Authentication')}}</h2>
|
||||
<hr/>
|
||||
</div>
|
||||
<table id="grid-locals" class="table table-condensed table-hover table-striped" data-editDialog="DialogLocal">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
|
||||
<th data-column-id="round" data-type="string">{{ lang._('Round') }}</th>
|
||||
<th data-column-id="auth" data-type="string">{{ lang._('Authentication') }}</th>
|
||||
<th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
|
||||
<th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<button data-action="add" type="button" class="btn btn-xs btn-primary pull-right"><span class="fa fa-fw fa-plus"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="section_header">
|
||||
<h2>{{ lang._('Remote Authentication')}}</h2>
|
||||
<hr/>
|
||||
</div>
|
||||
<table id="grid-remotes" class="table table-condensed table-hover table-striped" data-editDialog="DialogRemote">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
|
||||
<th data-column-id="round" data-type="string">{{ lang._('Round') }}</th>
|
||||
<th data-column-id="auth" data-type="string">{{ lang._('Authentication') }}</th>
|
||||
<th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
|
||||
<th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<button data-action="add" type="button" class="btn btn-xs btn-primary pull-right"><span class="fa fa-fw fa-plus"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="section_header">
|
||||
<h2>{{ lang._('Children')}}</h2>
|
||||
<hr/>
|
||||
</div>
|
||||
<table id="grid-children" class="table table-condensed table-hover table-striped" data-editDialog="DialogChild">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
|
||||
<th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
|
||||
<th data-column-id="local_ts" data-type="string">{{ lang._('Local Nets') }}</th>
|
||||
<th data-column-id="remote_ts" data-type="string">{{ lang._('Remote Nets') }}</th>
|
||||
<th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-fw fa-plus"></span></button>
|
||||
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-trash-o"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div id="ConnectionDialogBtns">
|
||||
<button type="button" class="btn btn-primary" id="btn_ConnectionDialog_save">
|
||||
<strong>{{ lang._('Save')}}</strong>
|
||||
<i id="btn_ConnectionDialog_save_progress" class=""></i>
|
||||
</button>
|
||||
</div>
|
||||
<br/>
|
||||
<form id="frm_ConnectionDialog"></form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pools" class="tab-pane fade in">
|
||||
<table id="grid-pools" class="table table-condensed table-hover table-striped" data-editDialog="DialogPool" data-editAlert="PoolChangeMessage">
|
||||
<table id="grid-pools" class="table table-condensed table-hover table-striped" data-editDialog="DialogPool">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('UUID') }}</th>
|
||||
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
|
||||
<th data-column-id="name" data-type="string">{{ lang._('Name') }}</th>
|
||||
<th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
|
||||
|
|
@ -376,12 +274,106 @@
|
|||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="col-md-12">
|
||||
<div id="PoolChangeMessage" class="alert alert-info" style="display: none" role="alert">
|
||||
{{ lang._('After changing settings, please remember to apply them') }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="connection_details" class="tab-content" style="display: none;">
|
||||
<div class="content-box tab-pane fade in edit_connection __mt">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 table-responsive left-col">
|
||||
<table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
|
||||
<tr><td><h3>{{ lang._('Local Authentication')}}</h3></td>
|
||||
<tr><td>
|
||||
<table id="grid-locals" class="table table-condensed table-hover table-striped" data-editDialog="DialogLocal">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('UUID') }}</th>
|
||||
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
|
||||
<th data-column-id="id" data-type="string">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="round" data-type="string">{{ lang._('Round') }}</th>
|
||||
<th data-column-id="auth" data-type="string">{{ lang._('Authentication') }}</th>
|
||||
<th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
|
||||
<th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<button data-action="add" type="button" class="btn btn-xs btn-primary pull-right"><span class="fa fa-fw fa-plus"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-xs-12 col-md-6 table-responsive right-col">
|
||||
<table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
|
||||
<tr><td><h3>{{ lang._('Remote Authentication')}}</h3></td>
|
||||
<tr><td>
|
||||
<table id="grid-remotes" class="table table-condensed table-hover table-striped" data-editDialog="DialogRemote">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
|
||||
<th data-column-id="id" data-type="string">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="round" data-type="string">{{ lang._('Round') }}</th>
|
||||
<th data-column-id="auth" data-type="string">{{ lang._('Authentication') }}</th>
|
||||
<th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
|
||||
<th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<button data-action="add" type="button" class="btn btn-xs btn-primary pull-right"><span class="fa fa-fw fa-plus"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-box tab-pane fade in edit_connection __mt">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 table-responsive">
|
||||
<table class="table table-striped table-condensed" style="table-layout: fixed; width: 100%;">
|
||||
<tr><td><h3>{{ lang._('Children')}}</h3></td>
|
||||
<tr><td>
|
||||
<table id="grid-children" class="table table-condensed table-hover table-striped" data-editDialog="DialogChild">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-column-id="uuid" data-type="string" data-identifier="true" data-visible="false">{{ lang._('ID') }}</th>
|
||||
<th data-column-id="enabled" data-width="6em" data-type="string" data-formatter="rowtoggle">{{ lang._('Enabled') }}</th>
|
||||
<th data-column-id="description" data-type="string">{{ lang._('Description') }}</th>
|
||||
<th data-column-id="local_ts" data-type="string">{{ lang._('Local Nets') }}</th>
|
||||
<th data-column-id="remote_ts" data-type="string">{{ lang._('Remote Nets') }}</th>
|
||||
<th data-column-id="commands" data-width="7em" data-formatter="commands" data-sortable="false">{{ lang._('Commands') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<button data-action="add" type="button" class="btn btn-xs btn-primary"><span class="fa fa-fw fa-plus"></span></button>
|
||||
<button data-action="deleteSelected" type="button" class="btn btn-xs btn-default"><span class="fa fa-fw fa-trash-o"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -390,3 +382,4 @@
|
|||
{{ partial("layout_partials/base_dialog",['fields':formDialogRemote,'id':'DialogRemote','label':lang._('Edit Remote')])}}
|
||||
{{ partial("layout_partials/base_dialog",['fields':formDialogChild,'id':'DialogChild','label':lang._('Edit Child')])}}
|
||||
{{ partial("layout_partials/base_dialog",['fields':formDialogPool,'id':'DialogPool','label':lang._('Edit Pool')])}}
|
||||
{{ partial('layout_partials/base_apply_button', {'data_endpoint': '/api/ipsec/service/reconfigure', 'data_service_widget': 'ipsec'})}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue