id-python · iromli · Aug 24, 2014 · Aug 24, 2014 · Aug 24, 2014
diff --git a/requirements.txt b/requirements.txt
@@ -16,6 +16,7 @@ flask-appconfig==0.9.1
 itsdangerous==0.24
 nose==1.3.3
 pydns==2.3.6
+recaptcha-client==1.0.6
 six==1.7.3
 validate-email==1.1
 wsgiref==0.1.2
diff --git a/users/default_config.py b/users/default_config.py
@@ -56,3 +56,6 @@
 # http://docs.sqlalchemy.org/en/rel_0_9/core/engines.html
 # for details.
 SQLALCHEMY_DATABASE_URI = "postgresql://scott:tiger@localhost:5432/mydatabase"
+
+RECAPTCHA_PUBLIC_KEY = ""
+RECAPTCHA_PRIVATE_KEY = ""
diff --git a/users/static/css/user-map.css b/users/static/css/user-map.css
@@ -61,3 +61,7 @@ html, body, #map {
   line-height: 18px;
   color: #555;
 }
+
+#recaptcha_image img {
+    width: 280px;
+}
diff --git a/users/static/js/user-map-component.js b/users/static/js/user-map-component.js
@@ -213,6 +213,12 @@ function onMapClick(e) {
   };
   var popup = getUserFormPopup(user, ADD_USER_MODE);
   marker_new_user.bindPopup(popup).openPopup()
+
+  // activate captcha
+  var captcha_element = document.getElementById("recaptcha-container");
+  if (captcha_element !== null) {
+    showCaptcha(captcha_element);
+  }
 }
 
 /**

diff --git a/users/static/js/user-map.js b/users/static/js/user-map.js
@@ -96,6 +96,9 @@ function addUser() {
 
   var twitter = $("#twitter").val();
 
+  var recaptcha_response_field = $("#recaptcha_response_field").val();
+  var recaptcha_challenge_field = $("#recaptcha_challenge_field").val();
+
   var is_client_side_valid = validate_user_form(name, email, website);
   if (is_client_side_valid) {
     $.ajax({
@@ -108,18 +111,28 @@ function addUser() {
         email_updates: email_updates,
         latitude: latitude,
         longitude: longitude,
-        twitter: twitter
+        twitter: twitter,
+        recaptcha_response_field: recaptcha_response_field,
+        recaptcha_challenge_field: recaptcha_challenge_field
       },
       success: function (response) {
         if (response.type.toString() == 'Error') {
           if (typeof response.name != 'undefined') {
             $name_input.parent().addClass('has-error');
-            $name_input.attr('placeholder', response.name.toString());
+            var $name_err = $("#name-error");
+            $name_err.text(response.name.toString());
 
           }
           if (typeof response.email != 'undefined') {
             $email_input.parent().addClass('has-error');
-            $email_input.attr('placeholder', response.email.toString());
+            var $email_err = $("#email-error");
+            $email_err.text(response.email.toString());
+          }
+          if (typeof response.recaptcha_response_field != 'undefined') {
+            var $captha_input = $("#recaptcha_response_field");
+            $captha_input.parent().addClass('has-error');
+            var $captcha_err = $("#captcha-error");
+            $captcha_err.text(response.recaptcha_response_field.toString());
           }
         } else {
           //Clear marker

diff --git a/users/templates/html/base.html b/users/templates/html/base.html
@@ -25,6 +25,19 @@
         <script language="javascript" type="text/javascript" src="{{ url_for('static', filename='js/user-map-state.js') }}"></script>
         <script language="javascript" type="text/javascript" src="{{ url_for('static', filename='js/user-map-utilities.js') }}"></script>
         <script language="javascript" type="text/javascript" src="{{ url_for('static', filename='js/validate.js') }}"></script>
+        <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
+        <script>
+            function showCaptcha(element) {
+                Recaptcha.create(
+                    "{{ config['RECAPTCHA_PUBLIC_KEY'] }}",
+                    element,
+                    {
+                        theme: "custom",
+                        custom_theme_widget: "recaptcha-widget"
+                    }
+                );
+            }
+        </script>
     {% endblock head_resources %}
 </head>
 <body>

diff --git a/users/templates/html/user_form.html b/users/templates/html/user_form.html
@@ -61,6 +61,29 @@ <h3 class="panel-title">User Data</h3>
                  value=""/>
         </div>
 
+        {% if not user %}
+        <div class="form-group">
+            <div id="recaptcha-container">
+                <div id="recaptcha-widget">
+                    <div id="recaptcha_image"></div>
+                    <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>
+
+                    <span class="recaptcha_only_if_image">Enter the words above:</span>
+                    <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>
+
+                    <input class="form-control" type="text" id="recaptcha_response_field" name="recaptcha_response_field" placeholder="Required" />
+                    <span class="help-inline" id="captcha-error"></span>
+
+                    <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
+                    <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
+                    <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>
+
+                    <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+
         <div class="form-group">
           <div>
             <button type="button" id="submit_form" class="btn btn-primary">

diff --git a/users/views.py b/users/views.py
@@ -7,6 +7,7 @@
 
 from flask import render_template, Response, request, current_app
 from werkzeug.exceptions import default_exceptions
+from recaptcha.client import captcha
 
 # App declared directly in __init__ as per
 # http://flask.pocoo.org/docs/patterns/packages/#larger-applications
@@ -123,6 +124,17 @@ def add_user_view():
     if user is not None:
         message['email'] = 'Email has been registered by other user.'
 
+    if not current_app.testing:
+        captcha_resp = captcha.submit(
+            request.form.get("recaptcha_challenge_field", ""),
+            request.form.get("recaptcha_response_field", ""),
+            current_app.config["RECAPTCHA_PRIVATE_KEY"],
+            request.remote_addr,
+        )
+
+        if not captcha_resp.is_valid:
+            message["recaptcha_response_field"] = "Captcha is not valid"
+
     # Process data
     if len(message) != 0:
         message['type'] = 'Error'
@@ -195,7 +207,7 @@ def edit_user_view(guid):
     #noinspection PyUnresolvedReferences
     data_privacy_content = render_template('html/data_privacy.html')
     #noinspection PyUnresolvedReferences
-    user_form_template = render_template('html/user_form.html')
+    user_form_template = render_template('html/user_form.html', user=user)
     user_menu = dict(
         edit_user=True,
         delete_user=True,