Merge pull request #494 from gonzalodelgado/back_to_text_recaptcha_fix

Fix recaptcha missing 'back to text' action (bug 589359)

apps/amo/templates/amo/recaptcha.html

@@ -11,9 +11,16 @@
       <strong>separated by a space</strong>.
     </p>
     <p>
-      If this is hard to read, you can
+      <div class="recaptcha_only_if_image">
-      <a href="#" id="recaptcha_different">try different words</a> or
+        If this is hard to read, you can
-      <a href="#" id="recaptcha_audio">listen to something</a> instead.
+        <a href="#" id="recaptcha_different_text">try different words</a> or
+        <a href="#" id="recaptcha_audio">listen to something</a> instead.
+      </div>
+      <div class="recaptcha_only_if_audio">
+        If audio is not clear or hard to understand, you can
+        <a href="#" id="recaptcha_different_audio">try different words</a> or
+        <a href="#" id="recaptcha_text">switch back to text</a>.
+      </div>
     </p>
   {% endtrans %}
   <div id="recaptcha_image"></div>

media/js/mkt/recaptcha.js

@@ -1,15 +1,13 @@
 z.page.on('fragmentloaded', function() {
-    if ($('#recaptcha_div').length) {
+    if ($('#recaptcha_image').length) {
         var recaptcha = $('body').data('recaptcha');
         if (recaptcha) {
-            Recaptcha.create(recaptcha, 'recaptcha_div', {
+            z.page.on('click', '#recaptcha_different_text', _pd(function() {
-                tabindex: 1,
-                theme: 'red',
-                callback: Recaptcha.focus_response_field
-            });
-            var RecaptchaOptions = {theme: 'custom'};
-            z.page.on('click', '#recaptcha_different', _pd(function() {
                 Recaptcha.reload();
+            })).on('click', '#recaptcha_different_audio', _pd(function() {
+                Recaptcha.reload();
+            })).on('click', '#recaptcha_text', _pd(function() {
+                Recaptcha.switch_type('image');
             })).on('click', '#recaptcha_audio', _pd(function() {
                 Recaptcha.switch_type('audio');
             })).on('click', '#recaptcha_help', _pd(function() {

media/js/zamboni/users.js

@@ -5,17 +5,25 @@ $('#admin-login').click(function() {
 
 
 // Recaptcha
-var RecaptchaOptions = { theme : 'custom' };
+function reloadReCaptchaOnClick(e) {
-
-$('#recaptcha_different').click(function(e) {
     e.preventDefault();
     Recaptcha.reload();
-});
+}
 
-$('#recaptcha_audio').click(function(e) {
+function reCaptchaSwitchClosure(type) {
-    e.preventDefault();
+    return function (e) {
-    Recaptcha.switch_type('audio');
+        e.preventDefault();
-});
+        Recaptcha.switch_type(type);
+    }
+}
+
+var RecaptchaOptions = { theme : 'custom' };
+
+$('#recaptcha_different_text').click(reloadReCaptchaOnClick);
+$('#recaptcha_different_audio').click(reloadReCaptchaOnClick);
+
+$('#recaptcha_audio').click(reCaptchaSwitchClosure('audio'));
+$('#recaptcha_text').click(reCaptchaSwitchClosure('image'));
 
 $('#recaptcha_help').click(function(e) {
     e.preventDefault();

mkt/site/templates/site/helpers/recaptcha.html

@@ -1,5 +1,11 @@
 {% if form.has_recaptcha %}
 {% from 'includes/forms.html' import required %}
+  {# Moved from media/js/mkt/recaptcha.js because it must
+  always be before the ReCaptcha fields.
+  https://developers.google.com/recaptcha/docs/customization#Custom_Theming #}
+  <script type="text/javascript">
+    var RecaptchaOptions = {theme: 'custom'};
+  </script>
   <div id="recap-container">
     <label for="recaptcha_response_field">
       {{ _('Are you human?') }}
@@ -12,12 +18,23 @@
           <strong>separated by a space</strong>.
         </p>
         <p>
-          If this is hard to read, you can
+          <div class="recaptcha_only_if_image">
-          <a href="#" id="recaptcha_different">try different words</a> or
+            If this is hard to read, you can
-          <a href="#" id="recaptcha_audio">listen to something</a> instead.
+            <a href="#" id="recaptcha_different_text">try different words</a> or
+            <a href="#" id="recaptcha_audio">listen to something</a> instead.
+          </div>
+          <div class="recaptcha_only_if_audio">
+            If audio is not clear or hard to understand, you can
+            <a href="#" id="recaptcha_different_audio">try different words</a> or
+            <a href="#" id="recaptcha_text">switch back to text</a>.
+          </div>
         </p>
       {% endtrans %}
-      <div id="recaptcha_div"></div>
+      <div id="recaptcha_image"></div>
+      <p>
+              <input type="text" name="recaptcha_response_field"
+                     id="recaptcha_response_field" size="30">
+      </p>
     </div>
   </div>
   {{ form.recaptcha.errors }}