WIP create new zone

lib/public/index.html

@@ -58,10 +58,11 @@
         <input type="text" class="js-record-refresh" placeholder="[retry] 7200 (how often to check for updates)">
         <input type="text" class="js-record-ttl" placeholder="[default record ttl] 86400">
       </form>
+      <span class="js-record-type">Vanity Nameservers:</span>
+      <label><input type="checkbox" class="js-zone-form-vanityns" value=""> use vanity nameservers (requires glue records to be set at your domain reseller/registrar)</label>
       <div class="js-zone-form-vns-tpl">
         <form class="js-zone-form-vns">
           <input type="hidden" class="js-record-id" />
-          <span class="js-record-type">Vanity Nameservers</span>
           <input type="text" class="js-record-host" placeholder="nsx">.<span class="js-record-zone">example.com</span>
           <input type="text" class="js-record-address" placeholder="aname, ipv4, or ipv6 address">
           <input type="text" class="js-record-ttl" placeholder="86400">

lib/public/js/app.js

@@ -105,18 +105,10 @@
       });
     });
   }
-  function fetchZones(auth) {
+  function renderZones() {
-    return window.fetch('/api/zones', {
-      method: 'GET'
-    , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
-    }).then(function (resp) {
-      return resp.json().then(function (data) {
     var tpl = '';
     var el;
-        if (!tpls.zone) {
+    cache.zones.forEach(function (zone) {
-          tpls.zone = $qs('.js-zone-tpl').innerHTML;
-        }
-        data.zones.forEach(function (zone) {
       el = document.createElement('div');
       el.innerHTML = tpls.zone;
       console.log(el);
@@ -130,6 +122,18 @@
     });
     $qs('.js-zone-tpl').innerHTML = tpl;
     console.log($qs('.js-zone-tpl').innerHTML);
+  }
+  function fetchZones(auth) {
+    return window.fetch('/api/zones', {
+      method: 'GET'
+    , headers: new window.Headers({ 'Authorization': 'Bearer ' + auth })
+    }).then(function (resp) {
+      return resp.json().then(function (data) {
+        if (!tpls.zone) {
+          tpls.zone = $qs('.js-zone-tpl').innerHTML;
+        }
+        cache.zones = data.zones;
+        renderZones();
       });
     });
   }
@@ -228,6 +232,16 @@
     return fetchRecords(zone);/*.then(function () {
     });*/
   });
+  function setZoneNs(zone) {
+    cache.peers.forEach(function (p, i) {
+      var $vns = $qsa('.js-zone-form-tpl .js-zone-form-vns')[i];
+      $qs('.js-record-zone', $vns).innerText = zone;
+      if (p.address) {
+        $qs('.js-record-address', $vns).value = p.address;
+      }
+    });
+    $qs('.js-zone-form-tpl .js-recordx-primary').value = 'nsx.' + zone;
+  }
   function openZoneForm() {
     var d = new Date();
     myZone = $qs('.js-zone-form-name').value;
@@ -240,12 +254,14 @@
       var $vns = $qsa('.js-zone-form-tpl .js-zone-form-vns')[i];
       $qs('.js-record-host', $vns).value = 'ns' + (i + 1);
       //$qs('.js-record-name', $vns).value = 'ns' + (i + 1) + '.' + myZone;
-      $qs('.js-record-zone', $vns).value = myZone;
+      $qs('.js-record-zone', $vns).innerText = myZone;
+      if (p.address) {
+        $qs('.js-record-address', $vns).value = p.address;
+      }
       $qs('.js-record-ttl', $vns).value = 7200;
     });
 
     $qs('.js-zone-form-tpl .js-record-name').value = myZone;
-    $qs('.js-zone-form-tpl .js-recordx-primary').value = 'nsx.' + myZone;
     $qs('.js-zone-form-tpl .js-record-admin').value = 'admin.' + myZone;
     $qs('.js-zone-form-tpl .js-record-expiration').value = 2419200; // 4 weeks
     $qs('.js-zone-form-tpl .js-record-minimum').value = 5;
@@ -257,10 +273,21 @@
     $qs('.js-zone-form-tpl .js-record-retry').value = 1800;
     $qs('.js-zone-form-tpl .js-record-refresh').value = 7200;
     $qs('.js-zone-form-tpl .js-record-ttl').value = 300;
+
+    $qs('input.js-zone-form-vanityns').dispatchEvent(new Event('change', { bubbles: true }));
+
     console.log('val:', $qs('.js-zone-form-tpl .js-record-ttl').value);
     console.log('x', $qs('.js-zone-form-tpl'));
     console.log('val:', $qs('.js-zone-form-tpl .js-record-ttl').value);
   }
+  $on('input.js-zone-form-vanityns', 'change', function (ev) {
+    console.log('checked:', ev.target.checked);
+    if (ev.target.checked) {
+      setZoneNs(myZone);
+    } else {
+      setZoneNs(cache.peers[0].name.split('.').slice(1).join('.'));
+    }
+  });
   $on('form.js-zone-form-create', 'submit', function (ev) {
     ev.preventDefault();
     ev.stopPropagation();
@@ -295,7 +322,35 @@
     console.log(zone);
     console.log('nss:');
     console.log(nss);
+
+    if (!$qs('input.js-zone-form-vanityns').checked) {
+      zone.vanityNs = nss;
+    }
     $qs('.js-zone-form-tpl').innerHTML = '';
+
+    return window.fetch(
+      '/api/zones/' //+ zone.name
+    , { method: 'POST'
+      , headers: new window.Headers({
+          'Authorization': 'Bearer ' + auth
+        , 'Content-Type': 'application/json;charset=UTF-8'
+        })
+      , body: JSON.stringify(zone)
+      }
+    ).then(function (resp) {
+      return resp.json().then(function (data) {
+        if (data.error) {
+          console.error(data);
+          window.alert(data.error.message);
+          return;
+        }
+        console.log('result:', data);
+        if (!zone.id) {
+          zone.id = data.id;
+          renderRecords();
+        }
+      });
+    });
   });
 
   $on('select.js-record-form-type', 'change', function (ev) {