From cecd088b0a0cbe984f21962681e22c4fe2caae36 Mon Sep 17 00:00:00 2001
From: Al Beano <albino@autistici.org>
Date: Mon, 17 Jul 2017 13:25:35 +0100
Subject: [PATCH] AJAX Domain availability checker

---
 lib/cyberman.pm           |  1 +
 lib/cyberman/API.pm       | 27 +++++++++++++++++++++++++++
 public/js/domain_check.js | 23 +++++++++++++++++++++++
 views/domains/new.tt      |  7 ++++---
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 lib/cyberman/API.pm
 create mode 100644 public/js/domain_check.js

diff --git a/lib/cyberman.pm b/lib/cyberman.pm
index d70002c..cfd1158 100644
--- a/lib/cyberman.pm
+++ b/lib/cyberman.pm
@@ -6,6 +6,7 @@ use Dancer2::Plugin::Database;
 use cyberman::Domains;
 use cyberman::Auth;
 use cyberman::Helper;
+use cyberman::API;
 
 # Index route, hook and helper functions for authentication
 
diff --git a/lib/cyberman/API.pm b/lib/cyberman/API.pm
new file mode 100644
index 0000000..4391b79
--- /dev/null
+++ b/lib/cyberman/API.pm
@@ -0,0 +1,27 @@
+package cyberman::API;
+use Dancer2 appname => "cyberman";
+use Dancer2::Plugin::Database;
+
+get '/api/check_availability' => sub {
+  # No auth req'd
+  # returns 'y' or 'n'
+
+  if (!param("name")) {
+    return "n";
+  }
+
+  my $result = database->quick_select(
+    "domain",
+    {
+      "name" => param("name"),
+    }
+  );
+
+  if ($result) {
+    return "n";
+  } else {
+    return "y";
+  }
+};
+
+true;
diff --git a/public/js/domain_check.js b/public/js/domain_check.js
new file mode 100644
index 0000000..9903415
--- /dev/null
+++ b/public/js/domain_check.js
@@ -0,0 +1,23 @@
+function updateAvailability() {
+  if (this.responseText === "y") {
+    document.getElementById("avail").innerHTML = "Available!";
+  } else {
+    document.getElementById("avail").innerHTML = "Not available";
+  }
+}
+
+function checkAvailability() {
+  var name = document.getElementById("name").value;
+
+  if (name === "") {
+    document.getElementById("avail").innerHTML = "";
+    return 
+  }
+
+  document.getElementById("avail").innerHTML = "Checking availability...";
+
+  var req = new XMLHttpRequest();
+  req.addEventListener("load", updateAvailability);
+  req.open("GET", "/api/check_availability?name="+encodeURIComponent(name));
+  req.send();
+}
diff --git a/views/domains/new.tt b/views/domains/new.tt
index ec2fd3d..21c8748 100644
--- a/views/domains/new.tt
+++ b/views/domains/new.tt
@@ -21,16 +21,17 @@
 </center>
 <% END %>
 
-<%# TODO: a nice AJAX availability checker %>
-
 <div class="body">
   Please choose a domain to register:
   <br /><br />
 
   <form method="POST" class="login">
-    <input type="text" name="name">.cyb
+    <input type="text" name="name" id="name" onkeyup="checkAvailability()">.cyb
     <button action="submit" style="margin-left:20px">Register domain</button>
   </form>
+  <span id="avail"></span>
   <br />
   <a href="../domains" class="bracketButton">[&nbsp;go&nbsp;back&nbsp;]</a>
 </div>
+
+<script type="text/javascript" src="/js/domain_check.js"></script>