add navigation

This commit is contained in:
AJ ONeal 2017-03-16 01:54:18 -06:00
parent 90f5eb11d5
commit a4027bcad9
3 changed files with 347 additions and 162 deletions

View File

@ -3,40 +3,118 @@
<head> <head>
<link type="text/css" rel="stylesheet" href="/assets/com.bootstrapcdn/spacelab/bootstrap.css"> <link type="text/css" rel="stylesheet" href="/assets/com.bootstrapcdn/spacelab/bootstrap.css">
</head> </head>
<body class="fade" ng-class="[ 'in' ]"> <body class="fade" ng-class="[ 'in' ]" ng-controller="LoginController as vm" ng-init="vm.setSimple()">
<ul> <div class="container">
<li>Change API format to verbose arrays and nested objects</li> <center>
<li>Set Default Path, Module (dir, api)</li> <h1>Welcome to Goldilocks!</h1>
<li>Set Hostname, Path, Module (dir, api)</li> <span ng-if="vm.config">
<li>Show Device Name</li> Server Name: '<span ng-bind="vm.config.device.hostname"></span>' running from
<li>Login to Daplie</li> <br/>
<li>Show domains (or ask purchase)</li> <code><span ng-bind="vm.config.cwd"></span>/</code>
<li>Tunnel On</li> </span>
<li>Show configured domains</li> <br/>
<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> </ul>
<div class="container" ng-controller="LoginController as vm" ng-init="vm.setSimple()"> <div ng-if="vm.config">
<h1 ng-if="!vm.authnUpdated">Initializing... {{vm.hello}}</h1> <ul class="nav nav-tabs">
<div> <li
Configure Remote Server role="presentation"
<label>Configuration Address:</label> 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"> <input type="text" placeholder="i.e. 192.168.1.100">
<label>Configuration Name:</label> <br/>
<input type="text" placeholder="i.e. localhost.daplie.invalid"> <label>Server Name:</label>
<input type="text" placeholder="i.e. admin.goldilocks.invalid">
<br/>
<label>Root Certificate Validation (optional):</label> <label>Root Certificate Validation (optional):</label>
<br/>
<textarea class="textarea" placeholder="paste the contents of a root.pem here"></textarea> <textarea class="textarea" placeholder="paste the contents of a root.pem here"></textarea>
</div> </div>
</div>
</div>
<div class="col-md-8">
<div ng-if="!vm.config || 'authn' === vm.admin.page">
<p>In order to administer this server you must authenticate.</p>
<div ng-if="!vm.authnUpdated">
<button <button
type="button" type="button"
class="btn btn-default" class="btn btn-default"
ng-disabled="vm.advanced && !vm.providerUri" ng-disabled="vm.advanced && !vm.providerUri"
ng-click="vm.authenticate()" ng-click="vm.authenticate()"
>Login</button> >Login</button>
</div>
<button <button
type="button" type="button"
class="btn btn-link" class="btn btn-link"
@ -57,14 +135,19 @@
<small>todo: allow per-device authorization</small> <small>todo: allow per-device authorization</small>
</div> </div>
<br/>
<br/>
<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-if="vm.config">
<div ng-init="siteconf = vm.config.global"> <div ng-init="siteconf = vm.config.global">
<h1>Server Device Name: <span ng-bind="vm.config.device.hostname"></span></h1> <div ng-if="'network' === vm.admin.page">
<!-- input class="form-control" ng-model="vm.config.device.hostname" / -->
<h1>Server Working Directory:</h1>
<input class="form-control" ng-model="vm.config.cwd" />
<h1>Addresses:</h1> <h1>Addresses:</h1>
<table class="table"> <table class="table">
<tr> <tr>
@ -77,10 +160,84 @@
<td ng-bind="addr.iface"></td> <td ng-bind="addr.iface"></td>
<td ng-bind="addr.address"></td> <td ng-bind="addr.address"></td>
<td ng-bind="addr.family"></td> <td ng-bind="addr.family"></td>
<td ng-bind="addr.range"></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-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>
</td>
</tr> </tr>
</table> </table>
<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> <h1>Managed Domains:</h1>
<div ng-if="!vm.domains.length"> <div ng-if="!vm.domains.length">
@ -96,10 +253,32 @@
</div> </div>
<div ng-if="vm.domains.length"> <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">
<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"> <table class="table">
<tr> <tr>
<th>Domain</th> <th>Domain</th>
@ -124,7 +303,9 @@
</tr> </tr>
</table> </table>
</div> </div>
</div>
<div ng-if="'plugins' === vm.admin.page">
<h1>Global Settings:</h1> <h1>Global Settings:</h1>
<br/> <br/>
<form class="form-inline"> <form class="form-inline">
@ -141,7 +322,6 @@
<br/> <br/>
</div> </div>
</form> </form>
</div>
<h1>Per-Domain Settings:</h1> <h1>Per-Domain Settings:</h1>
<div ng-repeat="siteconf in vm.config.sites"> <div ng-repeat="siteconf in vm.config.sites">
@ -185,6 +365,10 @@
<pre><code ng-bind="vm.config | json">{{vm.config}}</code></pre> <pre><code ng-bind="vm.config | json">{{vm.config}}</code></pre>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div> </div>

View File

@ -70,6 +70,7 @@ angular.module('com.daplie.cloud', [ 'org.oauth3' ])
vm.viewDomains = function (config, domains, dns) { vm.viewDomains = function (config, domains, dns) {
vm.dns = dns.slice(0); vm.dns = dns.slice(0);
vm.domains = domains.slice(0); vm.domains = domains.slice(0);
vm.domains.sort(vm.sortDnsRecords);
vm.dns = vm.dns.filter(function (record) { vm.dns = vm.dns.filter(function (record) {
if (-1 === [ 'A', 'AAAA', 'ANAME' ].indexOf(record.type)) { if (-1 === [ 'A', 'AAAA', 'ANAME' ].indexOf(record.type)) {
return false; return false;

@ -1 +1 @@
Subproject commit d64699977e883871246d3fc062a384e88a554e2a Subproject commit 64393a540d7cc60821aa1c541ef71101be418008