Signup page to collect beta customer info.

(imported from commit ce4e860aa6781aa74ca954c79ae133aa50a057f1)

humbug/settings.py

@@ -260,6 +260,10 @@ PIPELINE_JS = {
         'source_filenames': ('js/common.js',),
         'output_filename':  'min/common.js'
     },
+    'landing-page': {
+        'source_filenames': ('js/landing-page.js',),
+        'output_filename':  'min/landing-page.js'
+    },
     'signup': {
         'source_filenames': ('js/signup.js',),
         'output_filename':  'min/signup.js'

humbug/urls.py

@@ -59,13 +59,12 @@ urlpatterns = patterns('',
     url(r'^new-user$', TemplateView.as_view(template_name='zephyr/new-user.html')),
     url(r'^features$', TemplateView.as_view(template_name='zephyr/features.html')),
 
-    # Landing page and signup form
+    # Landing page, signup form, and nice register URL
     url(r'^hello$', TemplateView.as_view(template_name='zephyr/hello.html'),
                                          name='landing-page'),
-    url(r'^signup$', TemplateView.as_view(template_name='zephyr/signup.html'),
+    url(r'^signup/$', TemplateView.as_view(template_name='zephyr/signup.html'),
                                          name='signup'),
-
-
+    url(r'^signup/sign-me-up$', 'zephyr.views.beta_signup_submission', name='beta-signup-submission'),
 
     # API and integrations documentation
     url(r'^api$', TemplateView.as_view(template_name='zephyr/api.html')),

templates/zephyr/signup.html

@@ -1,10 +1,67 @@
 {% extends "zephyr/portico.html" %}
+{% load compressed %}
 
-{% block portico_content %}
+{% block customhead %}
+    {% compressed_css 'portico' %}
+    <script type="text/javascript" src="/static/third/jquery/jquery.form.js"></script>
+    {% compressed_js 'landing-page' %}
+{% endblock %}
 
-<div class="container">
-  <div class="row">
+{% block inner_content %}
+<div class="row-fluid shaded-background landing-page">
+  <div class="span12 main-headline">
+    <h1>Sign up now!</h1>
+    <h4>Humbug is currently in closed beta, but we're constantly
+      adding new beta customer sites.</h4>
   </div>
 </div>
 
+<div class="row-fluid shaded-background landing-page-bottom">
+  <div class="span6 offset3" id="envelope-holder">
+    <div id="success" class="alert alert-success alert-block">
+      <h4>Success!</h4>
+      Thank you for your interest. We'll be in touch soon.
+      While you wait, check out some of our <a href="/features">features</a>!
+    </div>
+
+    <div id="error" class="alert alert-error alert-block">
+      <h4>Ruh-roh!</h4>
+      Hmmm, something went wrong. Please send email to <a href="mailto:support@humbughq.com">support@humbughq.com</a>.
+    </div>
+
+    <div id="error-missing-email" class="alert alert-error alert-block">
+      <h4>Your email is required!</h4>
+      How else would we be able to reach you?
+    </div>
+
+    <div class="postal-envelope">
+      <div class="postal-stripes"></div>
+      <span class="par-avion">PAR COURRIER ELECTRONIQUE</span>
+      <form method="post" class="letter-form" id="beta-user-form" action="{% url 'beta-signup-submission' %}">
+        {% csrf_token %}
+        <p>Hi Humbugs,</p>
+
+        <p>My name is <input class="input-medium" type="text"
+        id="name" name="name" placeholder="Wolfgang A. Mozart" />, and
+        you can email me at <input class="input-large" type="email"
+        id="email" name="email"
+        placeholder="w.a.mozart@magicflute.com" />.
+
+
+        <p>I work at <input class="input-medium" type="text"
+          name="company" id="company" placeholder="Salzburg Court" />,
+          and I was hoping to give Humbug a try! There are
+          about <input class="input-mini" type="text" id="count"
+          name="count" placeholder="10" /> of us, and we currently use
+          <input class="input-small" type="text" id="product"
+          name="product" placeholder="IRC" /> for chat.</p>
+
+        <p>I'm looking forward to it!</p>
+
+        <button type="submit" id="beta-signup" class="btn btn-large btn-info">Sign up</button>
+      </form>
+      <div class="postal-stripes"></div>
+    </div>
+  </div>
+</div>
 {% endblock %}

zephyr/static/js/landing-page.js

@@ -0,0 +1,28 @@
+$(function () {
+    $(".letter-form").ajaxForm({
+        dataType: 'json', // This seems to be ignored. We still get back an xhr.
+        beforeSubmit: function (arr, form, options) {
+            $(".alert").hide();
+            var has_email = false;
+            $.each(arr, function (idx, elt) {
+                if (elt.name === 'email' && elt.value.length) {
+                    has_email = true;
+                }
+            });
+            if (!has_email) {
+                $("#error-missing-email").show();
+                return false;
+            }
+            $("#beta-signup").attr('disabled', 'disabled').text("Sending...");
+        },
+        success: function (resp, statusText, xhr, form) {
+            $("#success").show();
+        },
+        error: function (xhr, error_type, xhn) {
+            $("#error").show();
+        },
+        complete: function (xhr, statusText) {
+            $("#beta-signup").removeAttr('disabled').text("Sign up");
+        }
+    });
+});

zephyr/static/styles/portico.css

@@ -224,3 +224,53 @@ img.screenshot{
     background-color: #474747;
     color: white;
 }
+
+.postal-envelope {
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 5px;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+}
+
+.postal-stripes {
+    padding: 0px;
+    margin: 0px;
+    height: 10px;
+    background-image: repeating-linear-gradient(-60deg, #fff, #fff 10px, #62a0cf 10px, #62a0cf 20px, #fff 20px, #fff 30px, #d66468 30px, #d66468 40px );
+}
+
+.par-avion {
+    font-size: 80%;
+    float: right;
+    margin-right: 1em;
+}
+
+.letter-form {
+    font-size: 110%;
+    padding-top: 2em;
+    padding-left: 4em;
+    padding-right: 4em;
+}
+
+.letter-form input {
+    border: 0px;
+    border-bottom: 1px dashed grey;
+    box-shadow: none;
+    padding-bottom: 0px;
+    transition: border linear 0.2s;
+
+}
+
+@media (max-width: 767px) {
+    /* This is a hack and I'm not 100% sure why it's necessary,
+       but otherwise when we resize the form to be pretty narrow,
+       this gets crushed */
+    #envelope-holder {
+        margin-left: 0px;
+    }
+}
+
+.alert {
+    display: none;
+}

zephyr/views.py

@@ -190,6 +190,21 @@ def rest_dispatch(request, **kwargs):
         return target_function(request, **kwargs)
     return json_method_not_allowed(supported_methods.keys())
 
+@require_post
+@has_request_variables
+def beta_signup_submission(request, name=REQ, email=REQ,
+                           company=REQ, count=REQ, product=REQ):
+    content = """Name: %s
+Email: %s
+Company: %s
+# users: %s
+Currently using: %s""" % (name, email, company, count, product,)
+    subject = "Interest in Humbug: %s" % company
+    from_email = '"%s" via Web <humbug+signups@humbughq.com>' % (name,)
+    to_email = '"Humbug Signups" <humbug+signups@humbughq.com>'
+    send_mail(subject, content, from_email, [to_email])
+    return json_success()
+
 @require_post
 def accounts_register(request):
     key = request.POST['key']