From 2e758b79a5d155d2cbf1fce5ea32b3df9c61f675 Mon Sep 17 00:00:00 2001
From: Sylvain UTARD <sylvain.utard@gmail.com>
Date: Fri, 18 Dec 2015 14:29:41 +0100
Subject: [PATCH] chore(website): simple join the program form

---
 docs/_layouts/default.html |  2 ++
 docs/css/_home.scss        | 15 ---------------
 docs/index.haml            | 32 ++++++++++++++++++++++++--------
 docs/js/home.js            | 23 +++++++++++++++++++++++
 4 files changed, 49 insertions(+), 23 deletions(-)
 create mode 100644 docs/js/home.js

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index c2467720..a7134b9d 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -22,6 +22,8 @@
 {%if page.noFooter == null %}
     {% include footer.html %}
 {% endif %}
+
+    <script src="//cdn.jsdelivr.net/jquery/2.1/jquery.min.js"></script>
     <script src="{{ "/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
     <script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
     <script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
diff --git a/docs/css/_home.scss b/docs/css/_home.scss
index badf4358..ac163a5b 100644
--- a/docs/css/_home.scss
+++ b/docs/css/_home.scss
@@ -152,21 +152,6 @@ header.site-header nav.navbar .navbar-nav > li > a.navbar-github-link:hover {
     display: block;
     font-weight: normal;
   }
-  input {
-    width: 100%;
-    margin: 0 0 10px;
-    padding: 8px 12px;
-    border-radius: 4px;
-    color: #091724;
-    outline: none;
-    &#form-submit {
-      background: transparent;
-      border: 3px solid #46AEDA;
-      color: #FF2E6C;
-      font-size: 16px;
-      font-weight: bold;
-    }
-  }
   p {
     font-size: 13px;
     color: #C7C4C4;
diff --git a/docs/index.haml b/docs/index.haml
index 517066d8..46e43fcc 100644
--- a/docs/index.haml
+++ b/docs/index.haml
@@ -16,15 +16,27 @@ layout: default
       .jumbotron-left-column
         %p We’ve created the fastest, easiest way to search within documentation.
         %p And best of all? It’s free!
-      #join-form
+      %form#join-form{action: '#', method: 'POST'}
         %h3 Want to try it out?
-        %label Website
-        %input{:type=>"text", :placeholder => "http://docs.mywebsite.com/"}
-        %p We’ll crawl the documentation pages of your website and index them on Algolia.
-        %label Email
-        %input{:type=>"text", :placeholder => "my@email.com"}
-        %p We’ll send you the code you need to integrate the search autocomplete into your documentation.
-        %input{:type=>"submit", :name => "join", :value => "Join the beta!", :id => "form-submit"}
+        .row
+          .col-sm-10.col-sm-offset-1
+            .spacer20
+            .input-group
+              %span.input-group-addon
+                %i.fa.fa-fw.fa-envelope-o
+              %input.form-control{type: 'email', placeholder: 'you@example.org', name: 'email'}
+            .text-sm We'll crawl the documentation pages of your website and index them using Algolia.
+            .spacer20
+            .input-group
+              %span.input-group-addon
+                %i.fa.fa-fw.fa-globe
+              %input.form-control{type: 'text', placeholder: 'https://website.com/doc', name: 'url'}
+            .text-sm We'll send you the code you need to improve the search of your documentation.
+            .spacer20
+            %p.text-center
+              %button.btn.btn-primary{type: 'submit'}
+                Join the DocSearch beta
+                %i.fa.fa-chevron-right
   #section_why.page-section
     .container
       .row
@@ -96,3 +108,7 @@ layout: default
           %h2.page-section-title Get started
           %p Add the url of your documentation site and your email to the form at the top of the page. We’ll get back to you with what you need to integrate your new search into   your website.
           %p Don’t forget, DocSearch is completely free! There’s no need to sign up for Algolia or submit any payment information. Let’s tackle document search together.
+
+{% contentfor site-footer %}
+<script src="{{ "/js/home.js" | prepend: site.baseurl }}"></script>
+{% endcontentfor %}
diff --git a/docs/js/home.js b/docs/js/home.js
new file mode 100644
index 00000000..af8e9fe1
--- /dev/null
+++ b/docs/js/home.js
@@ -0,0 +1,23 @@
+(function($) {
+  $('#join-form').on('submit', function() {
+    var $button = $(this).find('button');
+    var $email = $(this).find('input[name="email"]');
+    var $url = $(this).find('input[name="url"]');
+    $button.attr('disabled', true);
+    $.ajax({
+      url: 'https://www.algolia.com/docsearch/join',
+      type: 'POST',
+      data: {
+        email: $email.val(),
+        url: $url.val()
+      }
+    }).done(function() {
+      $email.val('');
+      $url.val('');
+      $button.text('Thank you!');
+    }).fail(function() {
+      $button.attr('disabled', null);
+    })
+    return false;
+  });
+})(jQuery);