implement new signup form validation

.gitignore

@@ -30,3 +30,4 @@ files/map.txt
 .sass-cache/*
 files/sslsites.zip
 .tm_properties
+black_box.rb

app.rb

@@ -249,9 +249,19 @@ get '/?' do
     @sites_count = SimpleCache.get :sites_count
   end
 
+  @blackbox_question = BlackBox.generate
+  @question_first_number, @question_last_number = generate_question
+
   erb :index, layout: false
 end
 
+def generate_question
+  question_first_number = rand 5
+  question_last_number = rand 5
+  session[:question_answer] = (question_first_number + question_last_number).to_s
+  [question_first_number, question_last_number]
+end
+
 get '/plan/?' do
   @title = 'Supporter'
   erb :'plan/index'
@@ -487,6 +497,15 @@ get '/new' do
   erb :'new'
 end
 
+post '/create_validate_all' do
+  content_type :json
+  fields = params.select {|p| p.match /username|password|email|new_tags_string/}
+
+  site = Site.new fields
+  return [].to_json if site.valid?
+  site.errors.collect {|e| [e.first, e.last.first]}.to_json
+end
+
 post '/create_validate' do
   content_type :json
 
@@ -519,7 +538,20 @@ post '/create' do
     ip: request.ip
   )
 
-  if !@site.valid?
+  black_box_answered = BlackBox.valid? params[:blackbox_answer], request.ip
+  question_answered_correctly = params[:question_answer] == session[:question_answer]
+
+  if !question_answered_correctly
+    question_first_number, question_last_number = generate_question
+    return {
+      result: 'bad_answer',
+      question_first_number: question_first_number,
+      question_last_number: question_last_number
+    }.to_json
+  end
+
+  if !black_box_answered || !@site.valid?
+    flash[:error] = 'There was an unknown error, please try again.'
     return {result: 'error'}.to_json
   end
 

environment.rb

@@ -126,4 +126,12 @@ if ENV['RACK_ENV'] != 'development'
   Sass::Plugin.options[:style] = :compressed
   Sass::Plugin.options[:never_update] = true
   Sass::Plugin.options[:full_exception] = false
+end
+
+unless ENV['RACK_ENV'] == 'test'
+  if File.exist?('./black_box.rb')
+    require './black_box.rb'
+  else
+    puts "WARNING: Black box was not loaded!"
+  end
 end

models/site.rb

@@ -643,7 +643,7 @@ class Site < Sequel::Model
     super
 
     if !self.class.valid_username?(values[:username])
-      errors.add :username, 'A valid user/site name is required.'
+      errors.add :username, 'Usernames can only contain letters, numbers, underscores and hyphens.'
     end
 
     if new? && !values[:username].nil? && !values[:username].empty?

views/browse.erb

@@ -63,7 +63,7 @@
   <ul class="row website-Gallery content int-Gall">
     <% @sites.each_with_index do |site,i| %>
       <li>
-        <a href="" class="neo-Screen-Shot" target="_blank" title="<%= site.title %>" onclick="surf(<%= i+1 %>); return false">  
+        <a href="" class="neo-Screen-Shot" target="_blank" title="<%= site.title %>" onclick="surf(<%= i+1 %>); return false">
           <span class="img-Holder" style="background:url(<%= site.screenshot_url('index.html', '540x405') %>) no-repeat;">
             <img src="/img/placeholder.png" alt="<%= site.title %>" />
           </span>

views/index.erb

@@ -85,8 +85,7 @@
                 <li>
                   <a href="/signout" class="sign-In">Signout</a>
                 </li>
-              <% end %>
+              <% end %>`
-
             </ul>
           </nav>
 
@@ -154,29 +153,37 @@
             </div>
         </div>
       <% else %>
-        <form id="createSiteForm" action="/new" method="POST" class="signup-Form" onsubmit="createSite(); return false">
+        <form id="createSiteForm" class="signup-Form" onsubmit="return false">
           <input type="hidden" name="csrf_token" value="<%= csrf_token %>">
+          <input type="hidden" name="blackbox_answer" value="">
           <fieldset class="content">
             <h2 class="gamma">Sign up for free</h2>
             <hr />
-            <label for="create-Input">Username</label>
+            <div class="siteCreateInputs">
-            <input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
+              <label for="create-Input">Username</label>
-            <label for="create-Input" id="domain-name">.neocities.org</label>
+              <input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
+              <label for="create-Input" id="domain-name">.neocities.org</label>
 
-            <label for="tags-input">Tags (your interests, site topics)</label>
+              <label for="tags-input">Tags (your interests, site topics)</label>
-            <input type="text" class="input-Area" id="tags-input" name="new_tags_string" placeholder="art, videogames, food, music, programming, gardening, cats" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
+              <input type="text" class="input-Area" id="tags-input" name="new_tags_string" placeholder="art, videogames, food, music, programming, gardening, cats" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
 
-            <div class="col col-50" style="padding-left:0;">
+              <div class="col col-50" style="padding-left:0;">
-            <label for="password-input">Password</label>
+              <label for="password-input">Password</label>
-            <input type="password" class="input-Area" id="password-input" name="password" placeholder="password" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
+              <input type="password" class="input-Area" id="password-input" name="password" placeholder="password" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
+              </div>
+
+              <div class="col col-50">
+              <label for="email-input">Email</label>
+              <input type="text" class="input-Area" id="email-input" name="email" placeholder="me@example.com" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
+              </div>
+
+              <div class="col col-25">
+              <label for="question_answer-input"><%= @question_first_number %> + <%= @question_last_number %> =</label>
+              <input type="text" class="input-Area" name="question_answer" placeholder="" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" maxlength="2" style="width: 50px" />
+              </div>
+
+              <input type="submit" value="Create My Site" class="btn-Action float-Right" />
             </div>
-
-            <div class="col col-50">
-            <label for="email-input">Email</label>
-            <input type="text" class="input-Area" id="email-input" name="email" placeholder="me@example.com" data-placement="left" data-trigger="manual" autocapitalize="off" autocorrect="off" autocomplete="off" />
-            </div>
-
-            <input type="submit" value="Create My Site" class="btn-Action float-Right" />
           </fieldset>
         </form>
 
@@ -337,14 +344,38 @@
     <script src="/js/app.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
     <script>
-      function createSite() {
-        $.post('/create', $('#createSiteForm').serialize(), function(res) {
-          if(res.result == 'ok')
-            location.reload()
-        })
-      }
 
-      $('input[type=text]').on('change focusout', function(obj) {
+      $('#createSiteForm').on('submit', function(obj) {
+        $("input[name=blackbox_answer]").val("<%= @blackbox_question %>")
+        $.post('/create_validate_all', $(obj.target).serialize(), function(errors) {
+          console.log(errors)
+          if(errors.length == 0) {
+            $.post('/create', $('#createSiteForm').serialize(), function(res) {
+              if(res.result == 'ok')
+                location.reload()
+              else if(res.result == 'bad_answer') {
+                $('label[for=question_answer-input]').text(res.question_first_number+' + '+res.question_last_number+' = ')
+                var input = $('input[name=question_answer]')
+                input.attr('data-original-title', 'Please answer the question correctly.')
+                input.tooltip('show')
+              } else {
+                location.reload()
+              }
+            })
+          }
+
+          for(var i=0; i<errors.length;i++) {
+            var ele = $('input[name='+errors[i][0]+']')
+            ele.attr('data-original-title', errors[i][1])
+            ele.tooltip('show')
+          }
+        })
+      })
+
+      $('input[type=text],input[type=password]').on('change focusout', function(obj) {
+        if(obj.target.name == 'question_answer')
+          return
+
         $.post('/create_validate', {field: obj.target.name, value: obj.target.value, csrf_token: '<%= csrf_token %>'}, function(res) {
           if(res.result == 'ok') {
             return $(obj.target).tooltip('hide')