jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add network view translation

Browse Source
This commit is contained in:
Johannes Zellner
2020-11-05 14:27:07 +01:00
parent 3bd55bbeba
commit 6298479e17
2 changed files with 58 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/views/network.html
View File

@@ -3,31 +3,31 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Configure IP Provider</h4>
<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">Provider <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<label class="control-label">{{ 'network.ip.provider' | tr }} <sup><a ng-href="https://docs.cloudron.io/networking/#ip-configuration" 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>
</div>
<div ng-show="sysinfo.newProvider === 'generic'">
The Public IP address of the server will be <a href="https://api.cloudron.io/api/v1/helper/public_ip" target="_blank">automatically detected</a>.
{{ 'network.configureIp.providerGenericDescription' | tr }} <sup><a ng-href="https://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.ip.$dirty && sysinfo.error.ip) }">
<label class="control-label">IP Address</label>
<label class="control-label">{{ 'network.ip.address' | tr }}</label>
<input type="text" class="form-control" ng-model="sysinfo.newIp" name="ip" ng-disabled="sysinfo.busy" ng-required="sysinfo.newProvider === 'fixed'">
<p class="has-error" ng-show="sysinfo.error.ip">{{ sysinfo.error.ip }}</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">Interface Name</label>
<p>List available devices on the server with <code>ip -f inet -br addr</code></p>
<label class="control-label">{{ 'network.ip.interface' | tr }}</label>
<p>{{ 'network.op.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>
@@ -37,8 +37,8 @@
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</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> Save</button>
<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>
@@ -49,22 +49,22 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Firewall Configuration</h4>
<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">Blocked IPs and Ranges</label>
<p class="small">Matched addresses will be unable to connect to the server including the mail server, the dashboard and all apps. Be careful not to lock yourself out.</p>
<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="Line separated IP address or Subnet" name="blocklist" class="form-control" ng-class="{ 'has-error': !blocklistChangeForm.blocklist.$dirty && blocklist.error.blocklist }" rows="4"></textarea>
<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">Cancel</button>
<button type="button" class="btn btn-success" ng-click="blocklist.submit()"><i class="fa fa-circle-notch fa-spin" ng-show="blocklist.busy"></i> Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
<button type="button" class="btn btn-success" 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>
@@ -76,20 +76,20 @@
</div>
<div class="text-left">
<h3>IP Address</h3>
<h3>{{ 'network.ip.title' | tr }}</h3>
</div>
<div class="card">
<div class="row">
<div class="col-xs-12">
Cloudron uses this IP address when setting up DNS records.
{{ 'network.ip.description' | tr }}
</div>
</div>
<br/>
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Provider</span>
<span class="text-muted">{{ 'network.ip.provider' | tr }}</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ prettySysinfoProviderName(sysinfo.provider) }}</span>
@@ -98,7 +98,7 @@
<div class="row">
<div class="col-xs-6">
<span class="text-muted">IP Address</span>
<span class="text-muted">{{ 'network.ip.address' | tr }}</span>
</div>
<div class="col-xs-6 text-right">
<span ng-show="sysinfo.ip">{{ sysinfo.ip }}</span>
@@ -108,7 +108,7 @@
<div class="row" ng-show="sysinfo.ifname">
<div class="col-xs-6">
<span class="text-muted">Network Interface Name</span>
<span class="text-muted">{{ 'network.ip.interface' | tr }}</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ sysinfo.ifname }}</span>
@@ -119,41 +119,38 @@
<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()">Configure</button>
<button class="btn btn-outline btn-primary pull-right" ng-click="sysinfo.show()">{{ 'network.ip.configure' | tr }}</button>
</div>
</div>
</div>
<div class="text-left" ng-show="user.role === 'owner'">
<h3>Firewall</h3>
<h3>{{ 'network.firewall.title' | tr }}</h3>
</div>
<div class="card" ng-show="user.role === 'owner'">
<div class="row">
<div class="col-xs-6">
<span class="text-muted">Blocked IPs & Ranges</span>
<span class="text-muted">{{ 'network.firewall.blockedIpRanges' | tr }}</span>
</div>
<div class="col-xs-6 text-right">
<span>{{ blocklist.currentBlocklistLength }} IP(s) blocked <a href="" ng-click="blocklist.show()"><i class="fa fa-edit text-small"></i></a></span>
<span>{{ 'network.firewall.blocklist' | tr:blocklist }} <a href="" ng-click="blocklist.show()"><i class="fa fa-edit text-small"></i></a></span>
</div>
</div>
</div>
<div class="text-left">
<h3>Dynamic DNS</h3>
<h3>{{ 'network.dyndns.title' | tr }}</h3>
</div>
<div class="card">
<div class="row">
<div class="col-md-12">
<p>
Enable this option to keep all your DNS records in sync with a changing IP address.
This is useful when Cloudron runs in a network with a frequently changing public IP address like a home connection.
</p>
<p>{{ 'network.dyndns.description' | tr }}</p>
<p class="text-danger" ng-show="dyndnsConfigure.error"><br/>{{ dyndnsConfigure.error }}</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="dyndnsConfigure.enabled" name="dynamicDns" ng-disabled="dyndnsConfigure.busy"/>&nbsp; Use Dynamic DNS
<input type="checkbox" ng-model="dyndnsConfigure.enabled" name="dynamicDns" ng-disabled="dyndnsConfigure.busy"/>&nbsp; {{ 'network.dyndns.useLabel' | tr }}
</label>
</div>
</div>
@@ -161,11 +158,11 @@
<div class="row">
<div class="col-md-6">
<span class="text-success text-bold" ng-show="dyndnsConfigure.success">Saved</span>
<span class="text-success text-bold" ng-show="dyndnsConfigure.success">{{ 'network.dyndns.saved' | tr }}</span>
</div>
<div class="col-md-6 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="dyndnsConfigure.submit()" ng-disabled="dyndnsConfigure.currentState === dyndnsConfigure.enabled"><i class="fa fa-circle-notch fa-spin" ng-show="dyndnsConfigure.busy"></i> Save</button>
<button class="btn btn-outline btn-primary pull-right" ng-click="dyndnsConfigure.submit()" ng-disabled="dyndnsConfigure.currentState === dyndnsConfigure.enabled"><i class="fa fa-circle-notch fa-spin" ng-show="dyndnsConfigure.busy"></i> {{ 'main.dialog.save' | tr }}</button>
</div>
</div>
</div>