306 lines
15 KiB
HTML
306 lines
15 KiB
HTML
<!-- Modal sysinfo -->
|
|
<div class="modal fade" id="sysinfoModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">{{ 'network.configureIp.title' | tr }}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form name="sysinfoForm" role="form" novalidate ng-submit="sysinfo.submit()" autocomplete="off">
|
|
<fieldset>
|
|
<div class="form-group">
|
|
<label class="control-label">{{ 'network.ip.provider' | tr }} <sup><a ng-href="https://docs.cloudron.io/networking/#ipv4" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
|
|
<select class="form-control" ng-model="sysinfo.newProvider" ng-options="a.value as a.name for a in sysinfoProvider"></select>
|
|
<p class="has-error" ng-show="sysinfo.error.generic">{{ sysinfo.error.generic }}</p>
|
|
</div>
|
|
|
|
<div ng-show="sysinfo.newProvider === 'generic'">
|
|
{{ 'network.configureIp.providerGenericDescription' | tr }} <sup><a ng-href="https://ipv4.api.cloudron.io/api/v1/helper/public_ip" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
|
|
</div>
|
|
|
|
<!-- Fixed -->
|
|
<div class="form-group" ng-show="sysinfo.newProvider === 'fixed'" ng-class="{ 'has-error': (!sysinfoForm.ipv4.$dirty && sysinfo.error.ipv4) }">
|
|
<label class="control-label">{{ 'network.ipv4.address' | tr }}</label>
|
|
<input type="text" class="form-control" ng-model="sysinfo.newIPv4" name="ipv4" ng-disabled="sysinfo.busy" ng-required="sysinfo.newProvider === 'fixed'">
|
|
<p class="has-error" ng-show="sysinfo.error.ipv4">{{ sysinfo.error.ipv4 }}</p>
|
|
</div>
|
|
|
|
<!-- Network Interface -->
|
|
<div class="form-group" ng-show="sysinfo.newProvider === 'network-interface'" ng-class="{ 'has-error': (!sysinfoForm.ifname.$dirty && sysinfo.error.ifname) }">
|
|
<label class="control-label">{{ 'network.ip.interface' | tr }}</label>
|
|
<p>{{ 'network.ip.interfaceDescription' | tr }} <code>ip -f inet -br addr</code></p>
|
|
<input type="text" class="form-control" ng-model="sysinfo.newIfname" name="ifname" ng-disabled="sysinfo.busy" ng-required="sysinfo.newProvider === 'network-interface'">
|
|
<p class="has-error" ng-show="sysinfo.error.ifname">{{ sysinfo.error.ifname }}</p>
|
|
</div>
|
|
|
|
<input class="ng-hide" type="submit" ng-disabled="sysinfoForm.$invalid || sysinfo.busy"/>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
|
|
<button type="button" class="btn btn-success" ng-click="sysinfo.submit()" ng-disabled="sysinfoForm.$invalid || sysinfo.busy"><i class="fa fa-circle-notch fa-spin" ng-show="sysinfo.busy"></i> {{ 'main.dialog.save' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal block list -->
|
|
<div class="modal fade" id="blocklistModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">{{ 'network.firewall.configure.title' | tr }}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form name="blocklistChangeForm" role="form" novalidate ng-submit="blocklist.submit()" autocomplete="off">
|
|
<div class="form-group">
|
|
<label class="control-label">{{ 'network.firewall.blockedIpRanges' | tr }}</label>
|
|
<p class="small">{{ 'network.firewall.configure.description' | tr }}</p>
|
|
<div class="has-error" ng-show="blocklist.error.blocklist">{{ blocklist.error.blocklist }}</div>
|
|
<textarea ng-model="blocklist.blocklist" placeholder="{{ 'network.firewall.configure.blocklistPlaceholder' | tr }}" name="blocklist" class="form-control" ng-class="{ 'has-error': !blocklistChangeForm.blocklist.$dirty && blocklist.error.blocklist }" rows="4"></textarea>
|
|
</div>
|
|
<input class="ng-hide" type="submit"/>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
|
|
<button type="button" class="btn btn-success" ng-disabled="blocklist.busy" ng-click="blocklist.submit()"><i class="fa fa-circle-notch fa-spin" ng-show="blocklist.busy"></i> {{ 'main.dialog.save' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Trusted IPs -->
|
|
<div class="modal fade" id="trustedIpsModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">{{ 'network.trustedIps.title' | tr }}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form name="trustedIpsChangeForm" role="form" novalidate ng-submit="trustedIps.submit()" autocomplete="off">
|
|
<div class="form-group">
|
|
<label class="control-label">{{ 'network.trustedIpRanges' | tr }}</label>
|
|
<p class="small">{{ 'network.trustedIps.description' | tr }}</p>
|
|
<div class="has-error" ng-show="trustedIps.error.trustedIps">{{ trustedIps.error.trustedIps }}</div>
|
|
<textarea ng-model="trustedIps.trustedIps" placeholder="{{ 'network.firewall.configure.blocklistPlaceholder' | tr }}" name="trustedIps" class="form-control" ng-class="{ 'has-error': !trustedIpsChangeForm.trustedIps.$dirty && trustedIps.error.trustedIps }" rows="4"></textarea>
|
|
</div>
|
|
<input class="ng-hide" type="submit"/>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
|
|
<button type="button" class="btn btn-success" ng-disabled="trustedIps.busy" ng-click="trustedIps.submit()"><i class="fa fa-circle-notch fa-spin" ng-show="trustedIps.busy"></i> {{ 'main.dialog.save' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal IPv6 -->
|
|
<div class="modal fade" id="ipv6ConfigureModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">{{ 'network.configureIpv6.title' | tr }}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form name="ipv6ConfigureForm" role="form" novalidate ng-submit="ipv6Configure.submit()" autocomplete="off">
|
|
<fieldset>
|
|
<div class="form-group">
|
|
<label class="control-label">{{ 'network.ip.provider' | tr }} <sup><a ng-href="https://docs.cloudron.io/networking/#ipv6" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
|
|
<select class="form-control" ng-model="ipv6Configure.newProvider" ng-options="a.value as a.name for a in ipv6ConfigureProvider"></select>
|
|
<p class="has-error" ng-show="ipv6Configure.error.generic">{{ ipv6Configure.error.generic }}</p>
|
|
</div>
|
|
|
|
<div ng-show="ipv6Configure.newProvider === 'generic'">
|
|
{{ 'network.configureIp.providerGenericDescription' | tr }} <sup><a ng-href="https://ipv6.api.cloudron.io/api/v1/helper/public_ip" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup>
|
|
</div>
|
|
|
|
<!-- Fixed -->
|
|
<div class="form-group" ng-show="ipv6Configure.newProvider === 'fixed'" ng-class="{ 'has-error': (!ipv6ConfigureForm.ipv4.$dirty && ipv6Configure.error.ipv6) }">
|
|
<label class="control-label">{{ 'network.ipv6.address' | tr }}</label>
|
|
<input type="text" class="form-control" ng-model="ipv6Configure.newIPv6" name="ipv6" ng-disabled="ipv6Configure.busy" ng-required="ipv6Configure.newProvider === 'fixed'">
|
|
<p class="has-error" ng-show="ipv6Configure.error.ipv6">{{ ipv6Configure.error.ipv6 }}</p>
|
|
</div>
|
|
|
|
<!-- Network Interface -->
|
|
<div class="form-group" ng-show="ipv6Configure.newProvider === 'network-interface'" ng-class="{ 'has-error': (!ipv6ConfigureForm.ifname.$dirty && ipv6Configure.error.ifname) }">
|
|
<label class="control-label">{{ 'network.ip.interface' | tr }}</label>
|
|
<p>{{ 'network.ip.interfaceDescription' | tr }} <code>ip -f inet6 -br addr</code></p>
|
|
<input type="text" class="form-control" ng-model="ipv6Configure.newIfname" name="ifname" ng-disabled="ipv6Configure.busy" ng-required="ipv6Configure.newProvider === 'network-interface'">
|
|
<p class="has-error" ng-show="ipv6Configure.error.ifname">{{ ipv6Configure.error.ifname }}</p>
|
|
</div>
|
|
|
|
<input class="ng-hide" type="submit" ng-disabled="ipv6ConfigureForm.$invalid || ipv6Configure.busy"/>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
|
|
<button type="button" class="btn btn-success" ng-click="ipv6Configure.submit()" ng-disabled="ipv6ConfigureForm.$invalid || ipv6Configure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="ipv6Configure.busy"></i> {{ 'main.dialog.save' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<h1 class="section-header">{{ 'network.title' | tr }}</h1>
|
|
|
|
<!-- IPv4 -->
|
|
<h3 class="section-header">{{ 'network.ip.title' | tr }}</h3>
|
|
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
{{ 'network.ip.description' | tr }}
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
<span class="text-muted">{{ 'network.ip.provider' | tr }}</span>
|
|
</div>
|
|
<div class="col-xs-6 text-right">
|
|
<span>{{ prettyIpProviderName(sysinfo.provider) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" ng-show="sysinfo.provider !== 'noop'">
|
|
<div class="col-xs-6">
|
|
<span class="text-muted">{{ 'network.ip.address' | tr }}</span>
|
|
</div>
|
|
<div class="col-xs-6 text-right">
|
|
<span ng-show="sysinfo.ipv4">{{ sysinfo.ipv4 }}</span>
|
|
<span ng-show="!sysinfo.ipv4">{{ sysinfo.serverIPv4 }} ({{ 'network.ip.detected' | tr }})</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" ng-show="sysinfo.ifname">
|
|
<div class="col-xs-6">
|
|
<span class="text-muted">{{ 'network.ip.interface' | tr }}</span>
|
|
</div>
|
|
<div class="col-xs-6 text-right">
|
|
<span>{{ sysinfo.ifname }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-6 text-right">
|
|
<button class="btn btn-outline btn-primary pull-right" ng-click="sysinfo.show()">{{ 'network.ip.configure' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IPv6 -->
|
|
<h3 class="section-header">{{ 'network.ipv6.title' | tr }}</h3>
|
|
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
{{ 'network.ipv6.description' | tr }}
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
<div class="row">
|
|
<div class="col-xs-2">
|
|
<span class="text-muted">{{ 'network.ip.provider' | tr }}</span>
|
|
</div>
|
|
<div class="col-xs-10 text-right">
|
|
<span>{{ prettyIpProviderName(ipv6Configure.provider) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" ng-show="ipv6Configure.provider !== 'noop'">
|
|
<div class="col-xs-2">
|
|
<span class="text-muted">{{ 'network.ip.address' | tr }}</span>
|
|
</div>
|
|
<div class="col-xs-10 text-right">
|
|
<span ng-show="ipv6Configure.ipv6">{{ ipv6Configure.ipv6 }}</span>
|
|
<span ng-show="!ipv6Configure.ipv6 && ipv6Configure.serverIPv6">{{ ipv6Configure.serverIPv6 }} ({{ 'network.ip.detected' | tr }})</span>
|
|
<span ng-show="ipv6Configure.displayError" class="text-danger">{{ ipv6Configure.displayError }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" ng-show="ipv6Configure.ifname">
|
|
<div class="col-xs-6">
|
|
<span class="text-muted">{{ 'network.ip.interface' | tr }}</span>
|
|
</div>
|
|
<div class="col-xs-6 text-right">
|
|
<span>{{ ipv6Configure.ifname }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<br/>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6 col-md-offset-6 text-right">
|
|
<button class="btn btn-outline btn-primary pull-right" ng-click="ipv6Configure.show()">{{ 'network.ip.configure' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Firewall -->
|
|
<h3 class="section-header">{{ 'network.firewall.title' | tr }}</h3>
|
|
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
<span class="text-muted">{{ 'network.firewall.blockedIpRanges' | tr }}</span>
|
|
</div>
|
|
<div class="col-xs-6 text-right">
|
|
<span>{{ 'network.firewall.blocklist' | tr:{ blockCount: blocklist.currentBlocklistLength } }} <a href="" ng-click="blocklist.show()"><i class="fa fa-edit text-small"></i></a></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xs-6">
|
|
<span class="text-muted">{{ 'network.trustedIpRanges' | tr }}</span>
|
|
</div>
|
|
<div class="col-xs-6 text-right">
|
|
<span>{{ 'network.trustedIps.summary' | tr:{ trustCount: trustedIps.currentTrustedIpsLength } }} <a href="" ng-click="trustedIps.show()"><i class="fa fa-edit text-small"></i></a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dynamic DNS -->
|
|
<h3 class="section-header">
|
|
{{ 'network.dyndns.title' | tr }}
|
|
<div class="btn-group btn-group-sm pull-right">
|
|
<button type="button" class="btn btn-small btn-default dropdown-toggle" ng-show="dyndnsConfigure.tasks.length" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" uib-tooltip="{{ 'network.dyndns.showLogsAction' | tr }}">
|
|
<i class="fas fa-align-left"></i> <span class="caret"></span>
|
|
</button>
|
|
<ul class="dropdown-menu">
|
|
<li ng-repeat="task in dyndnsConfigure.tasks">
|
|
<a ng-href="/logs.html?taskId={{task.id}}" target="_blank" class="text-right">
|
|
{{ task.ts | prettyLongDate }} <i class="fa" style="margin-left: 20px" ng-class="{ 'status-active fa-check-circle': !task.active && task.success, 'fa-circle-notch fa-spin': task.active, 'status-error fa-times-circle': !task.active && !task.success }"></i>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</h3>
|
|
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<p>{{ 'network.dyndns.description' | tr }}</p>
|
|
<p class="text-danger" ng-show="dyndnsConfigure.error"><br/>{{ dyndnsConfigure.error }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-2" style="padding-top: 12px;">
|
|
<i class="fa fa-circle" ng-class="{ 'status-active': dyndnsConfigure.isEnabled, 'status-inactive': !dyndnsConfigure.isEnabled }"></i> {{ dyndnsConfigure.isEnabled ? 'main.statusEnabled' : 'main.statusDisabled' | tr }}
|
|
</div>
|
|
<div class="col-md-10 text-right">
|
|
<button class="btn btn-outline btn-primary" ng-hide="dyndnsConfigure.isEnabled" ng-click="dyndnsConfigure.setEnabled(true)" ng-disabled="dyndnsConfigure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="dyndnsConfigure.busy"></i> {{ 'main.enableAction' | tr }}</button>
|
|
<button class="btn btn-outline btn-danger" ng-show="dyndnsConfigure.isEnabled" ng-click="dyndnsConfigure.setEnabled(false)" ng-disabled="dyndnsConfigure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="dyndnsConfigure.busy"></i> {{ 'main.disableAction' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|