forked from coolaj86/goldilocks.js
add navigation
This commit is contained in:
AJ ONeal
parent
90f5eb11d5
commit
a4027bcad9
|
|
@ -3,187 +3,371 @@
|
|||
<head>
|
||||
<link type="text/css" rel="stylesheet" href="/assets/com.bootstrapcdn/spacelab/bootstrap.css">
|
||||
</head>
|
||||
<body class="fade" ng-class="[ 'in' ]">
|
||||
<body class="fade" ng-class="[ 'in' ]" ng-controller="LoginController as vm" ng-init="vm.setSimple()">
|
||||
|
||||
<ul>
|
||||
<li>Change API format to verbose arrays and nested objects</li>
|
||||
<li>Set Default Path, Module (dir, api)</li>
|
||||
<li>Set Hostname, Path, Module (dir, api)</li>
|
||||
<li>Show Device Name</li>
|
||||
<li>Login to Daplie</li>
|
||||
<li>Show domains (or ask purchase)</li>
|
||||
<li>Tunnel On</li>
|
||||
<li>Show configured domains</li>
|
||||
</ul>
|
||||
|
||||
<div class="container" ng-controller="LoginController as vm" ng-init="vm.setSimple()">
|
||||
<h1 ng-if="!vm.authnUpdated">Initializing... {{vm.hello}}</h1>
|
||||
<div>
|
||||
Configure Remote Server
|
||||
<label>Configuration Address:</label>
|
||||
<input type="text" placeholder="i.e. 192.168.1.100">
|
||||
<label>Configuration Name:</label>
|
||||
<input type="text" placeholder="i.e. localhost.daplie.invalid">
|
||||
<label>Root Certificate Validation (optional):</label>
|
||||
<textarea class="textarea" placeholder="paste the contents of a root.pem here"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-if="!vm.authnUpdated">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-default"
|
||||
ng-disabled="vm.advanced && !vm.providerUri"
|
||||
ng-click="vm.authenticate()"
|
||||
>Login</button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-link"
|
||||
ng-if="!vm.advanced"
|
||||
ng-click="vm.setAdvanced()"
|
||||
>advanced</button>
|
||||
<div ng-if="vm.advanced">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-link"
|
||||
ng-click="vm.setSimple();"
|
||||
>simple</button>
|
||||
<input
|
||||
type="text"
|
||||
ng-change="vm.checkProviderUri(vm.myProviderUri)"
|
||||
ng-model="vm.myProviderUri">
|
||||
<div class="container">
|
||||
<center>
|
||||
<h1>Welcome to Goldilocks!</h1>
|
||||
<span ng-if="vm.config">
|
||||
Server Name: '<span ng-bind="vm.config.device.hostname"></span>' running from
|
||||
<br/>
|
||||
<code><span ng-bind="vm.config.cwd"></span>/</code>
|
||||
</span>
|
||||
<br/>
|
||||
<small>todo: allow per-device authorization</small>
|
||||
<br/>
|
||||
</center>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<ul class="nav nav-pills nav-stacked" ng-init="vm.admin.page = 'authn'">
|
||||
<li
|
||||
role="presentation"
|
||||
ng-class="{ active: 'authn' === vm.admin.page }"
|
||||
><a
|
||||
href=""
|
||||
ng-click="vm.admin.page = 'authn'"
|
||||
ng-disabled="'authn' === vm.admin.page"
|
||||
>Authenticate</a></li>
|
||||
<li
|
||||
ng-if="vm.config"
|
||||
role="presentation"
|
||||
ng-class="{ active: 'network' === vm.admin.page }"
|
||||
><a
|
||||
href=""
|
||||
ng-click="vm.admin.page = 'network'"
|
||||
ng-disabled="'network' === vm.admin.page"
|
||||
>Network</a></li>
|
||||
<li
|
||||
ng-if="vm.config"
|
||||
role="presentation"
|
||||
ng-class="{ active: 'domains' === vm.admin.page }"
|
||||
><a
|
||||
href=""
|
||||
ng-click="vm.admin.page = 'domains'"
|
||||
ng-disabled="'domains' === vm.admin.page"
|
||||
>Domains</a></li>
|
||||
<li
|
||||
ng-if="vm.config"
|
||||
role="presentation"
|
||||
ng-class="{ active: 'plugins' === vm.admin.page }"
|
||||
><a
|
||||
href=""
|
||||
ng-click="vm.admin.page = 'plugins'"
|
||||
ng-disabled="'plugins' === vm.admin.page"
|
||||
>Plugins</a></li>
|
||||
</ul>
|
||||
|
||||
<div ng-if="vm.config">
|
||||
<ul class="nav nav-tabs">
|
||||
<li
|
||||
role="presentation"
|
||||
ng-class="{ active: !vm.admin.remote }"
|
||||
><a
|
||||
href=""
|
||||
ng-click="vm.admin.remote = false"
|
||||
>Local Server</a></li>
|
||||
<li
|
||||
role="presentation"
|
||||
ng-class="{ active: vm.admin.remote }"
|
||||
><a
|
||||
href=""
|
||||
ng-click="vm.admin.remote = true"
|
||||
>Remote Server</a></li>
|
||||
</ul>
|
||||
|
||||
<div ng-if="!vm.admin.remote">
|
||||
<label>Server Address:</label>
|
||||
<input type="text" disabled value="127.0.0.1">
|
||||
<label>Server Name:</label>
|
||||
<input type="text" disabled value="localhost.admin.daplie.me">
|
||||
</div>
|
||||
|
||||
<div ng-if="vm.admin.remote">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-default"
|
||||
ng-click="vm.remote.scan()">Scan Local Network</button>
|
||||
<br/>
|
||||
<label>Server Address:</label>
|
||||
<input type="text" placeholder="i.e. 192.168.1.100">
|
||||
<br/>
|
||||
<label>Server Name:</label>
|
||||
<input type="text" placeholder="i.e. admin.goldilocks.invalid">
|
||||
<br/>
|
||||
<label>Root Certificate Validation (optional):</label>
|
||||
<br/>
|
||||
<textarea class="textarea" placeholder="paste the contents of a root.pem here"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="vm.config">
|
||||
<div ng-init="siteconf = vm.config.global">
|
||||
<h1>Server Device Name: <span ng-bind="vm.config.device.hostname"></span></h1>
|
||||
<!-- input class="form-control" ng-model="vm.config.device.hostname" / -->
|
||||
<div class="col-md-8">
|
||||
|
||||
<h1>Server Working Directory:</h1>
|
||||
<input class="form-control" ng-model="vm.config.cwd" />
|
||||
<div ng-if="!vm.config || 'authn' === vm.admin.page">
|
||||
<p>In order to administer this server you must authenticate.</p>
|
||||
|
||||
<h1>Addresses:</h1>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>Interface</th>
|
||||
<th>Address</th>
|
||||
<th>Family</th>
|
||||
<th>Scope</th>
|
||||
</tr>
|
||||
<tr ng-repeat="addr in vm.config.addresses">
|
||||
<td ng-bind="addr.iface"></td>
|
||||
<td ng-bind="addr.address"></td>
|
||||
<td ng-bind="addr.family"></td>
|
||||
<td ng-bind="addr.range"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h1>Managed Domains:</h1>
|
||||
|
||||
<div ng-if="!vm.domains.length">
|
||||
You don't have any domains with this account.
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-default"
|
||||
ng-disabled="vm.advanced && !vm.providerUri"
|
||||
ng-click="vm.authenticate()"
|
||||
>Login</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-link"
|
||||
ng-if="!vm.advanced"
|
||||
ng-click="vm.setAdvanced()"
|
||||
>advanced</button>
|
||||
<div ng-if="vm.advanced">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-link"
|
||||
ng-click="vm.setSimple();"
|
||||
>simple</button>
|
||||
<input
|
||||
type="text"
|
||||
ng-change="vm.checkProviderUri(vm.myProviderUri)"
|
||||
ng-model="vm.myProviderUri">
|
||||
<br/>
|
||||
Try a different account?
|
||||
<br/>
|
||||
<input type="url" placeholder="https://daplie.domains">
|
||||
<button type="button"
|
||||
class="btn"
|
||||
disabled
|
||||
>Login</button>
|
||||
<small>todo: allow per-device authorization</small>
|
||||
</div>
|
||||
|
||||
<div ng-if="vm.domains.length">
|
||||
<h2>Enable Tunnel</h2>
|
||||
<input type="radio" ng-model="vm.config.tunnel.enabled" ng-value="true">
|
||||
<input type="radio" ng-model="vm.config.tunnel.enabled" ng-value="false">
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>Sub</th>
|
||||
<th>Devices</th>
|
||||
</tr>
|
||||
<tr ng-repeat="d in vm.dns">
|
||||
<td ng-bind="d.domain"></td>
|
||||
<td ng-bind="d.name"></td>
|
||||
<td>
|
||||
<span ng-if="!d.domain">
|
||||
<div ng-repeat="dev in d.devices">
|
||||
<span ng-bind="dev"
|
||||
></span> <button
|
||||
<button
|
||||
class="btn btn-success"
|
||||
ng-if="vm.config"
|
||||
ng-click="vm.admin.page = 'network'"
|
||||
>Next: Network Settings</button>
|
||||
</div>
|
||||
|
||||
<div ng-if="vm.config">
|
||||
<div ng-init="siteconf = vm.config.global">
|
||||
<div ng-if="'network' === vm.admin.page">
|
||||
<h1>Addresses:</h1>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>Interface</th>
|
||||
<th>Address</th>
|
||||
<th>Family</th>
|
||||
<th>Scope</th>
|
||||
</tr>
|
||||
<tr ng-repeat="addr in vm.config.addresses">
|
||||
<td ng-bind="addr.iface"></td>
|
||||
<td ng-bind="addr.address"></td>
|
||||
<td ng-bind="addr.family"></td>
|
||||
<td ng-if="'unicast' !== addr.range" ng-bind="addr.range"></td>
|
||||
<td ng-if="'unicast' === addr.range"><strong>Internet</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>OAuth3 Tunnel</td>
|
||||
<td>(automatically assigned)</td>
|
||||
<td>IPv4 + IPv6</td>
|
||||
<td><strong>Internet</strong>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-success"
|
||||
ng-if="'oauth3-tunnel' !== vm.admin.network.iface"
|
||||
ng-click="vm.admin.network.iface = 'oauth3-tunnel'"
|
||||
>Enable</button>
|
||||
<div ng-if="'oauth3-tunnel' === vm.admin.network.iface">
|
||||
<button
|
||||
ng-if="!vm.admin.tunnel.advanced"
|
||||
type="button"
|
||||
class="btn btn-danger"
|
||||
ng-click="vm.removeDevice(d, dev)"
|
||||
>x</button>
|
||||
class="btn btn-link"
|
||||
ng-click="vm.admin.tunnel.advanced = true"
|
||||
>Show Advanced Options</button>
|
||||
<button
|
||||
ng-if="vm.admin.tunnel.advanced"
|
||||
type="button"
|
||||
class="btn btn-link"
|
||||
ng-click="vm.admin.tunnel.advanced = false"
|
||||
>Show Advanced Options</button>
|
||||
</div>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<h1>Global Settings:</h1>
|
||||
<br/>
|
||||
<form class="form-inline">
|
||||
<div ng-repeat="path in siteconf.paths">
|
||||
<h2 ng-bind="path.$id"></h2>
|
||||
<div ng-repeat="module in path.modules">
|
||||
<h3>{{module.$id}}</h3>
|
||||
<div ng-repeat="(key, value) in module">
|
||||
<label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
|
||||
<div ng-if="'oauth3-tunnel' === vm.admin.network.iface">
|
||||
<div ng-if="vm.admin.tunnel.advanced">
|
||||
<h2>OAuth3 Tunnel Options</h2>
|
||||
<label>URL</label> <input
|
||||
class"form-input"
|
||||
type="url"
|
||||
value="https://oauth3.org/api/org.oauth3.tunnel"
|
||||
disabled />
|
||||
<br/>
|
||||
<label>Token (Bearer or JWT)</label> <textarea
|
||||
class"form-input"
|
||||
disabled />aaaaaaaaaa.bbbbbbbbbbb.cccccccccccc</textarea>
|
||||
<br/>
|
||||
<label>Shared Secret (Text or JWK)</label> <input
|
||||
class"form-input"
|
||||
type="text"
|
||||
value="xxxx-xxxx-xxx-xxxxx"
|
||||
disabled />
|
||||
<br/>
|
||||
<label>Private Key (PEM or JWK)</label> <textarea
|
||||
class"form-input"
|
||||
disabled /> {
|
||||
kty: "EC",
|
||||
crv: "P-256",
|
||||
x: "zCQ5BPHPCLZYgdpo1n-x_90P2Ij52d53YVwTh3ZdiMo",
|
||||
y: "pDfQTUx0-OiZc5ZuKMcA7v2Q7ZPKsQwzB58bft0JTko",
|
||||
ext: true,
|
||||
}
|
||||
|
||||
-----BEGIN EC PARAMETERS-----
|
||||
BggqhkjOPQMBBw==
|
||||
-----END EC PARAMETERS-----
|
||||
-----BEGIN EC PRIVATE KEY-----
|
||||
MHcCAQEEIDm2RM5oZ8NPkn06MZlpz7yk6X0gJ7TeJGBAA3lJmJ/UoAoGCCqGSM49
|
||||
AwEHoUQDQgAE2aCepzyydsM4oxfGMrtham2Do1U3AZSFNiuTLKMYqXTnp2LqNTVA
|
||||
FdfmISGJve/PV53+MnCzwRcnrwQb1OfRMQ==
|
||||
-----END EC PRIVATE KEY-----</textarea>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div ng-if="'domains' === vm.admin.page">
|
||||
<h1>Managed Domains:</h1>
|
||||
|
||||
<div ng-if="!vm.domains.length">
|
||||
You don't have any domains with this account.
|
||||
<br/>
|
||||
Try a different account?
|
||||
<br/>
|
||||
<input type="url" placeholder="https://daplie.domains">
|
||||
<button type="button"
|
||||
class="btn"
|
||||
disabled
|
||||
>Login</button>
|
||||
</div>
|
||||
|
||||
<div ng-if="vm.domains.length">
|
||||
|
||||
<table class="table">
|
||||
<tr>
|
||||
<td><select
|
||||
ng-if="vm.domains.length"
|
||||
ng-model="vm.domains.add.domain"
|
||||
ng-options="domain.domain as domain.domain for domain in vm.domains"
|
||||
><option
|
||||
style="display:none" value="">-- select domain --</option
|
||||
></select></td>
|
||||
<td><input
|
||||
type="text"
|
||||
placeholder="@"
|
||||
ng-model="vm.domains.add.sub"
|
||||
>.<input
|
||||
type="text"
|
||||
placeholder="example.com"
|
||||
ng-model="vm.domains.add.domain"
|
||||
></td>
|
||||
<td><button
|
||||
type="button"
|
||||
class="btn btn-success"
|
||||
ng-click="vm.domains.add.commit(vm.domain.add.sub, vm.delta.domain)"
|
||||
>Add</button></td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th>Domain</th>
|
||||
<th>Sub</th>
|
||||
<th>Devices</th>
|
||||
</tr>
|
||||
<tr ng-repeat="d in vm.dns">
|
||||
<td ng-bind="d.domain"></td>
|
||||
<td ng-bind="d.name"></td>
|
||||
<td>
|
||||
<span ng-if="!d.domain">
|
||||
<div ng-repeat="dev in d.devices">
|
||||
<span ng-bind="dev"
|
||||
></span> <button
|
||||
type="button"
|
||||
class="btn btn-danger"
|
||||
ng-click="vm.removeDevice(d, dev)"
|
||||
>x</button>
|
||||
</div>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h1>Per-Domain Settings:</h1>
|
||||
<div ng-repeat="siteconf in vm.config.sites">
|
||||
<h2 ng-bind="siteconf.$id"></h2>
|
||||
<div ng-repeat="path in siteconf.paths">
|
||||
<h2 ng-bind="path.$id"></h2>
|
||||
<div ng-repeat="module in path.modules">
|
||||
<h3>{{module.$id}}</h3>
|
||||
<div ng-repeat="(key, value) in module">
|
||||
<label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
|
||||
<div ng-if="'plugins' === vm.admin.page">
|
||||
<h1>Global Settings:</h1>
|
||||
<br/>
|
||||
<form class="form-inline">
|
||||
<div ng-repeat="path in siteconf.paths">
|
||||
<h2 ng-bind="path.$id"></h2>
|
||||
<div ng-repeat="module in path.modules">
|
||||
<h3>{{module.$id}}</h3>
|
||||
<div ng-repeat="(key, value) in module">
|
||||
<label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h1>Per-Domain Settings:</h1>
|
||||
<div ng-repeat="siteconf in vm.config.sites">
|
||||
<h2 ng-bind="siteconf.$id"></h2>
|
||||
<div ng-repeat="path in siteconf.paths">
|
||||
<h2 ng-bind="path.$id"></h2>
|
||||
<div ng-repeat="module in path.modules">
|
||||
<h3>{{module.$id}}</h3>
|
||||
<div ng-repeat="(key, value) in module">
|
||||
<label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-init="defaultsconf = vm.config.defaults">
|
||||
<h1>Fallback Settings:</h1>
|
||||
<br/>
|
||||
<div ng-repeat="path in siteconf.paths">
|
||||
<h2 ng-bind="path.$id"></h2>
|
||||
<div ng-repeat="module in path.modules">
|
||||
<h3>{{module.$id}}</h3>
|
||||
<div ng-repeat="(key, value) in module">
|
||||
<label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="!vm._showvmconfig">
|
||||
<button class="btn-link" ng-click="vm._showvmconfig = true">show config as json</button>
|
||||
</div>
|
||||
<div ng-if="vm._showvmconfig">
|
||||
<button class="btn-link" ng-click="vm._showvmconfig = false">hide config</button>
|
||||
<pre><code ng-bind="vm.config | json">{{vm.config}}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-init="defaultsconf = vm.config.defaults">
|
||||
<h1>Fallback Settings:</h1>
|
||||
<br/>
|
||||
<div ng-repeat="path in siteconf.paths">
|
||||
<h2 ng-bind="path.$id"></h2>
|
||||
<div ng-repeat="module in path.modules">
|
||||
<h3>{{module.$id}}</h3>
|
||||
<div ng-repeat="(key, value) in module">
|
||||
<label>{{key}}</label>: <input class="form-control" ng-model="module[key]" />
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-if="!vm._showvmconfig">
|
||||
<button class="btn-link" ng-click="vm._showvmconfig = true">show config as json</button>
|
||||
</div>
|
||||
<div ng-if="vm._showvmconfig">
|
||||
<button class="btn-link" ng-click="vm._showvmconfig = false">hide config</button>
|
||||
<pre><code ng-bind="vm.config | json">{{vm.config}}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ angular.module('com.daplie.cloud', [ 'org.oauth3' ])
|
|||
vm.viewDomains = function (config, domains, dns) {
|
||||
vm.dns = dns.slice(0);
|
||||
vm.domains = domains.slice(0);
|
||||
vm.domains.sort(vm.sortDnsRecords);
|
||||
vm.dns = vm.dns.filter(function (record) {
|
||||
if (-1 === [ 'A', 'AAAA', 'ANAME' ].indexOf(record.type)) {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit d64699977e883871246d3fc062a384e88a554e2a
|
||||
Subproject commit 64393a540d7cc60821aa1c541ef71101be418008
|
||||
Loading…
Reference in New Issue