AJAX Domain availability checker

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
 

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;

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();
+}

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>