Some changes, including DNS support (#57)
* remove CDN
* Add a link to "members" in the network detail page
* Show object values as JSON
* remove TLS options
* Minor style improvements
* Show object values as JSON (member_detail)
* Add missing 'const'
* Navbar height fix
* Merge jQuery ready functions
* Change brand
* Merge network pages (name, members, detail) into single page and...
* Show ZT version on controller index page
* Show count of members
* Use <code> tag to display JSON data
* Fix error in some "error" pages caused by missing "navigate" when
rendering nav items, use pug mixin to render nav items.
* Adjust column widths of network list
* Refactor: move duplicated nav code to `head_layout`
* Remove some debug logging code
* Get network members detail parallelly
* Add missing frontend script for members
* Revert "Change brand"
* Remove "members" and "name" pages which are merged into "detail"
* Add DNS support
* Trivial changes (table width etc.)
* Don't try to read TLS cert files when not using HTTPS
* Validate DNS IP
* Downgrade jquery to 3.4.1 to fix nav bar collapse
* Revert "Navbar height fix"
This reverts commit 8edaa9aa81
, which
break the nav item height on mobile.
* Add missing margin for some buttons
* Display current DNS configuration above inputs
* Change network rename UI/UX
* Includes 'jquery.min.js' in pkg
* Improve JSON value rendering
* Get peer status of network members
* Display members with peer status
* Show controller itself as "CONTROLLER"
* Display peer address
* Improve login redirection
* pr57: Doc updates; version bump
* pr57: Year update
Co-authored-by: Key Networks <34238649+key-networks@users.noreply.github.com>
pull/78/head
parent
ce4b0e6d79
commit
1295dd1d07
@ -1,38 +1,18 @@
|
||||
//-
|
||||
ztncui - ZeroTier network controller UI
|
||||
Copyright (C) 2017-2018 Key Networks (https://key-networks.com)
|
||||
Copyright (C) 2017-2021 Key Networks (https://key-networks.com)
|
||||
Licensed under GPLv3 - see LICENSE for details.
|
||||
|
||||
extends head_layout
|
||||
|
||||
block body_content
|
||||
nav.navbar.navbar-inverse.navbar-fixed-top
|
||||
.container-fluid
|
||||
.navbar-header
|
||||
button.navbar-toggle(type='button' data-toggle='collapse' data-target='#BarNav')
|
||||
span.icon-bar
|
||||
span.icon-bar
|
||||
span.icon-bar
|
||||
a.navbar-brand(href='https://key-networks.com' target='_blank')
|
||||
img(src='/images/key-logo.svg' alt='Key Networks logo' height='25px' width='25px' style='display: inline')
|
||||
| Key Networks
|
||||
.collapse.navbar-collapse(id='BarNav')
|
||||
ul.nav.navbar-nav
|
||||
li(class=(navigate.active === 'controller_home'? 'active' : ''))
|
||||
a(href='/controller') Home
|
||||
li(class=(navigate.active === 'users'? 'active' : ''))
|
||||
a(href='/users') Users
|
||||
li(class=(navigate.active === 'networks'? 'active' : ''))
|
||||
a(href='/controller/networks') Networks
|
||||
li(class=(navigate.active === 'add_network'? 'active' : ''))
|
||||
a(href='/controller/network/create') Add network
|
||||
ul.nav.navbar-nav.navbar-right
|
||||
li
|
||||
a(href='/logout')
|
||||
span.glyphicon.glyphicon-log-out
|
||||
| Logout
|
||||
block nav_items
|
||||
+nav_item('controller_home', 'Home', '/controller')
|
||||
+nav_item('users', 'Users', '/users')
|
||||
+nav_item('networks', 'Networks', '/controller/networks')
|
||||
+nav_item('add_network', 'Add network', '/controller/network/create')
|
||||
|
||||
.container(style='margin-top:50px')
|
||||
block body_content
|
||||
.container(style='margin: 50px auto 20px')
|
||||
.row
|
||||
.col-sm-12
|
||||
block content
|
||||
|
@ -0,0 +1,57 @@
|
||||
//-
|
||||
ztncui - ZeroTier network controller UI
|
||||
Copyright (C) 2017-2021 Key Networks (https://key-networks.com)
|
||||
Licensed under GPLv3 - see LICENSE for details.
|
||||
|
||||
extends network_layout
|
||||
|
||||
block net_content
|
||||
- const dns = network.dns || {};
|
||||
if (!dns.domain && !(dns.servers && dns.servers.length > 0))
|
||||
.row
|
||||
.col-sm-12
|
||||
b No DNS configuration on this network.
|
||||
else
|
||||
.row
|
||||
.col-sm-2
|
||||
b Domain:
|
||||
.col-sm-10
|
||||
p= dns.domain
|
||||
.row
|
||||
.col-sm-2
|
||||
b Servers:
|
||||
.col-sm-10
|
||||
.row
|
||||
each server in dns.servers
|
||||
.col-sm-12= server
|
||||
|
||||
.row
|
||||
.col-sm-12
|
||||
h3 Change DNS configuration:
|
||||
|
||||
form(method='POST' action='')
|
||||
.form-group.row
|
||||
.col-sm-12
|
||||
label(for='domain') Domain:
|
||||
.col-sm-12
|
||||
input#domain.form-control(type='text' name='domain' value=dns.domain)
|
||||
|
||||
.form-group.row
|
||||
.col-sm-12
|
||||
label(for='servers') Servers:
|
||||
.col-sm-12
|
||||
textarea#servers.form-control(type='text' name='servers' placeholder='(one IP address per line)')
|
||||
= !dns.servers ? '' : dns.servers.join('\n')
|
||||
|
||||
.form-group.row
|
||||
.col-sm-12
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
= ' '
|
||||
a.btn.btn-default(href=('/controller/network/' + network.nwid) name='cancel' role='button') Cancel
|
||||
|
||||
if errors
|
||||
.row
|
||||
.col-sm-12
|
||||
ul
|
||||
for err in errors
|
||||
li!= err.msg
|
@ -1,32 +1,20 @@
|
||||
//-
|
||||
ztncui - ZeroTier network controller UI
|
||||
Copyright (C) 2017-2018 Key Networks (https://key-networks.com)
|
||||
Copyright (C) 2017-2021 Key Networks (https://key-networks.com)
|
||||
Licensed under GPLv3 - see LICENSE for details.
|
||||
|
||||
extends network_layout
|
||||
|
||||
block net_content
|
||||
h4 for member #{member.name} (#{member.address})
|
||||
h4
|
||||
| for member #{member.name} (#{member.address}) in network
|
||||
|
||||
each value, key in member
|
||||
.row
|
||||
.col-sm-2
|
||||
a(href= member.address + '/' + key) #{key}:
|
||||
a(href=('/controller/network/' + member.nwid + '/member/' + member.address + '/' + key)) #{key}:
|
||||
.col-sm-10
|
||||
- if ((!!value ) && (value.constructor == Object))
|
||||
p {
|
||||
each v2, k2 in value
|
||||
p #{k2}: #{v2},
|
||||
p }
|
||||
- else if ((!!value ) && (value.constructor == Array))
|
||||
p [
|
||||
each elem in value
|
||||
p {
|
||||
each v2, k2 in elem
|
||||
p #{k2}: #{v2},
|
||||
p }
|
||||
p ]
|
||||
- else
|
||||
| #{value}
|
||||
+json_value(value)
|
||||
|
||||
a.btn.btn-default(href='../members' name='networks' role='button') Members
|
||||
a.btn.btn-default(href=('/controller/network/' + member.nwid + "#members") name='networks' role='button' style='margin-top: 10px;')
|
||||
| Members
|
||||
|
@ -1,76 +0,0 @@
|
||||
//-
|
||||
ztncui - ZeroTier network controller UI
|
||||
Copyright (C) 2017-2018 Key Networks (https://key-networks.com)
|
||||
Licensed under GPLv3 - see LICENSE for details.
|
||||
|
||||
extends network_layout
|
||||
|
||||
block net_content
|
||||
script.
|
||||
$(function() {
|
||||
$('.authCheck').on('click', function() {
|
||||
$.post('', {'id': this.value, 'auth': this.checked});
|
||||
});
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$('.bridgeCheck').on('click', function() {
|
||||
$.post('', {'id': this.value, 'activeBridge': this.checked});
|
||||
});
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$('.text').on('change', function() {
|
||||
$.post('', {'id': this.name, 'name': this.value});
|
||||
});
|
||||
});
|
||||
|
||||
form(method='POST' action='')
|
||||
table.table.table-responsive.table-striped.table-hover
|
||||
tr
|
||||
td(width='3%')
|
||||
= ''
|
||||
td(width='20%')
|
||||
| Member name
|
||||
td(width='10%')
|
||||
| Member ID
|
||||
td(width='10%')
|
||||
| Authorized
|
||||
td(width='10%')
|
||||
| Active bridge
|
||||
td(width='47%')
|
||||
| IP assignment
|
||||
each member in members
|
||||
tr
|
||||
- let url = '/controller/network/' + network.nwid + '/member/' + member.id
|
||||
td
|
||||
a(href=url + '/delete')
|
||||
i.glyphicon.glyphicon-trash
|
||||
td
|
||||
input.form-control.text(type='text' name=member.id value=member.name)
|
||||
td
|
||||
a(href=url) #{member.id}
|
||||
td
|
||||
input.authCheck(type='checkbox' value=member.id checked=(member.authorized? true : false))
|
||||
td
|
||||
input.bridgeCheck(type='checkbox' value=member.id checked=(member.activeBridge? true : false))
|
||||
td
|
||||
each ipAssignment in member.ipAssignments
|
||||
a(href='/controller/network/' + network.nwid + '/member/' + member.id + '/ipAssignments')
|
||||
each digit in ipAssignment
|
||||
= digit
|
||||
= ' '
|
||||
else
|
||||
a(href='/controller/network/' + network.nwid + '/member/' + member.id + '/ipAssignments')
|
||||
| IP assignment
|
||||
|
||||
else
|
||||
.alert.alert-info
|
||||
strong There are no members on this network - invite users to join #{network.nwid}
|
||||
|
||||
a.btn.btn-default(href='' name='refresh' role='button') Refresh
|
||||
|
||||
if errors
|
||||
ul
|
||||
for err in errors
|
||||
li!= err.msg
|
@ -1,28 +0,0 @@
|
||||
//-
|
||||
ztncui - ZeroTier network controller UI
|
||||
Copyright (C) 2017-2018 Key Networks (https://key-networks.com)
|
||||
Licensed under GPLv3 - see LICENSE for details.
|
||||
|
||||
extends network_layout
|
||||
|
||||
block net_content
|
||||
form(method='POST' action='')
|
||||
|
||||
.form-group.row
|
||||
.col-sm-2
|
||||
label(for='name') Network name:
|
||||
.col-sm-10
|
||||
input#name.form-control(type='text' name='name' placeholder='New network name' value=(undefined===network.name? '' : network.name))
|
||||
|
||||
.form-group.row
|
||||
.col-sm-12
|
||||
button.btn.btn-primary(type='submit') Submit
|
||||
= ' '
|
||||
a.btn.btn-default(href='/controller/networks' name='cancel' role='button') Cancel
|
||||
|
||||
if errors
|
||||
.row
|
||||
.col-sm-12
|
||||
ul
|
||||
for err in errors
|
||||
li!= err.msg
|
@ -1,44 +1,159 @@
|
||||
//-
|
||||
ztncui - ZeroTier network controller UI
|
||||
Copyright (C) 2017-2018 Key Networks (https://key-networks.com)
|
||||
Copyright (C) 2017-2021 Key Networks (https://key-networks.com)
|
||||
Licensed under GPLv3 - see LICENSE for details.
|
||||
|
||||
extends network_layout
|
||||
|
||||
//- Don't display that title
|
||||
block title
|
||||
|
||||
//- Replace the network title with the editable one
|
||||
block network_title
|
||||
h2
|
||||
| Network
|
||||
a#change-name(href='#')
|
||||
span#name= network.name
|
||||
i.glyphicon.glyphicon-pencil(style='font-size: 20px;')
|
||||
input#name-input.form-control(type='text' style='width: 200px; display: none;')
|
||||
| (#{network.nwid}):
|
||||
script.
|
||||
$(function() {
|
||||
var nwurl = '/controller/network/#{network.nwid}';
|
||||
var name = !{JSON.stringify(network.name)};
|
||||
|
||||
function toggleNameEditor(show) {
|
||||
$('#change-name').css('display', !show ? '' : 'none');
|
||||
$('#name-input').css('display', show ? 'inline-block' : 'none');
|
||||
}
|
||||
|
||||
function submit() {
|
||||
var newName = $('#name-input').val();
|
||||
if (newName != name) {
|
||||
name = newName;
|
||||
$.post(nwurl + '/name', {'name': name})
|
||||
.done(function () {
|
||||
$('#name').text(newName);
|
||||
});
|
||||
}
|
||||
toggleNameEditor(false);
|
||||
}
|
||||
|
||||
$('#change-name').on('click', function() {
|
||||
toggleNameEditor(true);
|
||||
$('#name-input').val(name);
|
||||
$('#name-input').focus();
|
||||
});
|
||||
$('#name-input').on('focusout', submit);
|
||||
$('#name-input').keypress(function (e) {
|
||||
if (e.which == 13) submit();
|
||||
});
|
||||
});
|
||||
|
||||
block net_content
|
||||
if error
|
||||
b #{error}
|
||||
else
|
||||
- if (members !== undefined)
|
||||
h3 Members
|
||||
each value, key in members
|
||||
.row
|
||||
.col-sm-2
|
||||
a(href= network.nwid + '/member/' + key) #{key}
|
||||
.col-sm-10
|
||||
| revision: #{value}
|
||||
|
||||
h3= title
|
||||
each value, key in network
|
||||
.row
|
||||
.col-sm-2
|
||||
a(href= network.nwid + '/' + key) #{key}:
|
||||
.col-sm-10
|
||||
- if ((!!value ) && (value.constructor == Object))
|
||||
p {
|
||||
each v2, k2 in value
|
||||
p #{k2}: #{v2},
|
||||
p }
|
||||
- else if ((!!value ) && (value.constructor == Array))
|
||||
p [
|
||||
each elem in value
|
||||
p {
|
||||
- if (!!elem)
|
||||
each v2, k2 in elem
|
||||
p #{k2}: #{v2},
|
||||
p },
|
||||
p ]
|
||||
- else
|
||||
| #{value}
|
||||
|
||||
a.btn.btn-default(href='/controller/networks' name='networks' role='button') Networks
|
||||
- const nwurl = '/controller/network/' + network.nwid;
|
||||
|
||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/private') role='button')
|
||||
= network.private ? "Private" : "Public"
|
||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/easy') role='button') Easy setup
|
||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/routes') role='button') Routes
|
||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/ipAssignmentPools') role='button') Assignment Pools
|
||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/v4AssignMode') role='button') IPv4 Assign Mode
|
||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/v6AssignMode') role='button') IPv6 Assign Mode
|
||||
a.btn.btn-primary(style="margin: 5px" href=(nwurl + '/dns') role='button') DNS
|
||||
|
||||
if (members !== undefined)
|
||||
script.
|
||||
$(function() {
|
||||
const url = "#{nwurl}/members";
|
||||
$('.authCheck').on('click', function() {
|
||||
$.post(url, {'id': this.value, 'auth': this.checked});
|
||||
});
|
||||
$('.bridgeCheck').on('click', function() {
|
||||
$.post(url, {'id': this.value, 'activeBridge': this.checked});
|
||||
});
|
||||
$('.text').on('change', function() {
|
||||
$.post(url, {'id': this.name, 'name': this.value});
|
||||
});
|
||||
});
|
||||
h3#members Members (#{members.length})
|
||||
form(method='POST' action='')
|
||||
table.table.table-responsive.table-striped.table-hover
|
||||
tr
|
||||
td(width='3%')
|
||||
= ''
|
||||
td(width='20%')
|
||||
| Member name
|
||||
td(width='10%')
|
||||
| Member ID
|
||||
td(width='10%')
|
||||
| Authorized
|
||||
td(width='10%')
|
||||
| Active bridge
|
||||
td(width='17%')
|
||||
| IP assignment
|
||||
td(width='17%')
|
||||
| Peer status
|
||||
td(width='13%')
|
||||
| Peer address / latency
|
||||
each member in members
|
||||
- const peer = member.peer;
|
||||
tr
|
||||
- const url = nwurl + '/member/' + member.id
|
||||
td
|
||||
a(href=url + '/delete')
|
||||
i.glyphicon.glyphicon-trash
|
||||
td
|
||||
input.form-control.text(type='text' name=member.id value=member.name)
|
||||
td
|
||||
a(href=url) #{member.id}
|
||||
td
|
||||
input.authCheck(type='checkbox' value=member.id checked=(member.authorized? true : false))
|
||||
td
|
||||
input.bridgeCheck(type='checkbox' value=member.id checked=(member.activeBridge? true : false))
|
||||
td
|
||||
each ipAssignment in member.ipAssignments
|
||||
a(href=nwurl + '/member/' + member.id + '/ipAssignments')
|
||||
each digit in ipAssignment
|
||||
= digit
|
||||
= ' '
|
||||
else
|
||||
a(href=nwurl + '/member/' + member.id + '/ipAssignments')
|
||||
| IP assignment
|
||||
td
|
||||
if (peer && peer.latency != -1 && peer.versionMajor != -1)
|
||||
if (peer.latency != -1)
|
||||
span(style='color: green;')
|
||||
| ONLINE (v#{peer.version})
|
||||
else
|
||||
span(style='color: orange;')
|
||||
| RELAY (v#{peer.version})
|
||||
else if (member.id == zt_address)
|
||||
span(style='color: green;') CONTROLLER
|
||||
else
|
||||
span(style='color: red;') OFFLINE
|
||||
td
|
||||
if (peer)
|
||||
each path in peer.paths
|
||||
- const [ip, port] = path.address.split('/');
|
||||
= ip
|
||||
span(style='color: gray;') /#{port}
|
||||
= ' '
|
||||
if (peer.latency != -1)
|
||||
br
|
||||
| (#{peer.latency} ms)
|
||||
else
|
||||
.alert.alert-info
|
||||
strong There are no members on this network - invite users to join #{network.nwid}
|
||||
|
||||
a.btn.btn-default(href='' name='refresh' role='button') Refresh
|
||||
|
||||
h3#detail Detail for network
|
||||
each value, key in network
|
||||
.row(style='margin: 5px 0;')
|
||||
.col-sm-2
|
||||
a(href= network.nwid + '/' + key) #{key}:
|
||||
.col-sm-10
|
||||
+json_value(value)
|
||||
|
||||
a.btn.btn-default(href='/controller/networks' name='networks' role='button' style='margin-top: 10px;') Networks
|
||||
|
Loading…
Reference in new issue