Move sysinfo and dyndns settings to new network view

This commit is contained in:
Johannes Zellner
2019-11-07 15:26:18 +01:00
parent 30769b5992
commit ff30d6d23a
6 changed files with 269 additions and 245 deletions

113
src/views/network.html Normal file
View File

@@ -0,0 +1,113 @@
<!-- 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">Configure SysInfo Backend</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">Backend <sup><a href="https://cloudron.io/documentation/domains/#sysinfo" 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>
<!-- 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>
<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>
<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">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>
</div>
</div>
</div>
</div>
<div class="content">
<div class="text-left">
<h1>Network</h1>
</div>
<div class="text-left">
<h3>SysInfo / IP Address</h3>
</div>
<div class="card">
<div class="row">
<div class="col-md-12">
<p>
To automatically setup DNS records, Cloudron needs to know which IP address should be used.
</p>
<table>
<tr>
<td class="text-bold" style="vertical-align: top; width: 200px;">Current Backend</td>
<td class="text-right" style="vertical-align: top;">{{ prettySysinfoProviderName(sysinfo.provider) }}</td>
</tr>
<tr ng-show="sysinfo.ip">
<td class="text-bold" style="vertical-align: top;">IP Address</td>
<td class="text-right" style="vertical-align: top;">{{ sysinfo.ip }}</td>
</tr>
<tr ng-show="sysinfo.ifname">
<td class="text-bold" style="vertical-align: top;">Network Interface Name</td>
<td class="text-right" style="vertical-align: top;">{{ sysinfo.ifname }}</td>
</tr>
</table>
</p>
</div>
</div>
<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()">Change Backend</button>
</div>
</div>
</div>
<div class="text-left" ng-show="config.uiSpec.domains.dynamicDns">
<h3>Dynamic DNS</h3>
</div>
<div class="card" ng-show="config.uiSpec.domains.dynamicDns">
<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 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
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<span class="text-success text-bold" ng-show="dyndnsConfigure.success">Saved</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>
</div>
</div>
</div>
</div>