From 4b44632f2ee2ab0df286e7710efd5ac7e64ba95c Mon Sep 17 00:00:00 2001
From: AJ ONeal <coolaj86@gmail.com>
Date: Thu, 7 Jun 2018 08:06:09 +0000
Subject: [PATCH] add contact form

---
 lib/extensions/admin/index.html | 46 ++++++++++++++++++++++----
 lib/extensions/admin/js/app.js  | 57 +++++++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+), 7 deletions(-)

diff --git a/lib/extensions/admin/index.html b/lib/extensions/admin/index.html
index a307304..d2bfd48 100644
--- a/lib/extensions/admin/index.html
+++ b/lib/extensions/admin/index.html
@@ -67,20 +67,52 @@ TCP
   # Run ssh with (your domain, no port):
   ssh lucky-duck-42.telebit.cloud</code></pre>
 
-    <center>
       <p><footer>
         <h3>
           <li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">Read the Telebit docs</a></li>
           <li><a href="https://git.coolaj86.com/coolaj86/telebitd.js" target="_blank">Host your own Telebit Relay</a></li>
         </h3>
 
-        <li>&copy;2018 AJ ONeal</li>
-        <li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">git</a></li>
-        <li><a href="/legal/" target="_blank">License</a></li>
-        <li><a href="/legal/" target="_blank">Terms</a></li>
-        <li><a href="/legal/" target="_blank">Privacy</a></li>
+
+				<div class="alert alert-info js-list-thanks hidden" hidden>Thanks! We'll be in touch.</div>
+				<div id="next">
+					<br>
+					<br>
+				</div>
+				<form class="js-list-form">
+					<div class="alert alert-info">
+						<h2>Want to follow our progress?</h2>
+						<div class="form-group">
+							<label>Your name</label>
+							<input class="js-list-comment form-control" placeholder="ex: John Doe" />
+              <br>
+							<small class="form-text text-muted">(optional, so we know what to call you other than <em>rubybelle99@gmail.com</em> or whatever...)</small>
+						</div>
+            <br>
+						<div class="form-group">
+							<label>Your email</label>
+							<input class="js-list-address form-control" type="email" placeholder="ex: john@email.com" />
+              <br>
+							<small class="form-text text-muted">(non-optional, otherwise this doesn't even make any sense)</small>
+						</div>
+            <br>
+						<div class="form-group">
+							<button class="js-list-submit btn btn-primary form-control" type="button">Join us!</button>
+						</div>
+					</div>
+				</form>
+
+				<br>
+				<br>
+
+				<center>
+					<li>&copy;2018 AJ ONeal</li>
+					<li><a href="https://git.coolaj86.com/coolaj86/telebit.js" target="_blank">git</a></li>
+					<li><a href="/legal/" target="_blank">License</a></li>
+					<li><a href="/legal/" target="_blank">Terms</a></li>
+					<li><a href="/legal/" target="_blank">Privacy</a></li>
+				</center>
       </footer></p>
-    </center>
 
     </div>
 
diff --git a/lib/extensions/admin/js/app.js b/lib/extensions/admin/js/app.js
index 6d2c296..5783b4a 100644
--- a/lib/extensions/admin/js/app.js
+++ b/lib/extensions/admin/js/app.js
@@ -3,4 +3,61 @@
 
 document.body.hidden = false;
 
+function formSubmit() {
+  var msg = {
+    address: document.querySelector('.js-list-address').value
+  , comment: 'telebit.cloud: ' + (document.querySelector('.js-list-comment').value || '')
+  };
+
+  window.fetch('https://api.ppl.family/api/ppl.family/public/list', {
+    method: 'POST'
+  , cors: true
+  , headers: new Headers({ 'Content-Type': 'application/json' })
+  , body: JSON.stringify(msg)
+  }).then(function (resp) {
+    return resp.json().then(function (data) {
+      if (data.error) {
+        window.alert("Couldn't save your message. Email coolaj86@gmail.com instead.");
+        return;
+      }
+      document.querySelector('.js-list-form').hidden = true;
+      document.querySelector('.js-list-form').className += ' hidden';
+      document.querySelector('.js-list-thanks').hidden = false;
+      document.querySelector('.js-list-thanks').className = document.querySelector('.js-list-thanks').className.replace(/\s*hidden\b/, '');
+    }, function () {
+      window.alert("Couldn't save your message. Email coolaj86@gmail.com instead.");
+    });
+  }, function () {
+    window.alert("Didn't get your message. Bad network connection? Email coolaj86@gmail.com instead.");
+  });
+}
+document.body.addEventListener('submit', function (ev) {
+  if (ev.target.matches('.js-list-form')) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    formSubmit();
+    return;
+  }
+});
+document.body.addEventListener('click', function (ev) {
+  if (ev.target.matches('.js-list-submit')) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    formSubmit();
+    return;
+  }
+  /*
+  if (ev.target.closest('.js-navbar-toggle')) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    if (/show/.test(document.querySelector('.js-navbar-collapse').className)) {
+      document.querySelector('.js-navbar-collapse').className = document.querySelector('.js-navbar-collapse').className.replace(/\s+show\b/, '');
+    } else {
+      document.querySelector('.js-navbar-collapse').className += ' show';
+    }
+    return;
+  }
+  */
+});
+
 }());