diff --git a/apps/amo/templates/amo/recaptcha.html b/apps/amo/templates/amo/recaptcha.html index 4941bef525..ebbd285cbc 100644 --- a/apps/amo/templates/amo/recaptcha.html +++ b/apps/amo/templates/amo/recaptcha.html @@ -11,9 +11,16 @@ separated by a space.

- If this is hard to read, you can - try different words or - listen to something instead. +

+ If this is hard to read, you can + try different words or + listen to something instead. +
+
+ If audio is not clear or hard to understand, you can + try different words or + switch back to text. +

{% endtrans %}
diff --git a/media/js/mkt/recaptcha.js b/media/js/mkt/recaptcha.js index 4c814f2ad8..fb3b99c306 100644 --- a/media/js/mkt/recaptcha.js +++ b/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', { - tabindex: 1, - theme: 'red', - callback: Recaptcha.focus_response_field - }); - var RecaptchaOptions = {theme: 'custom'}; - z.page.on('click', '#recaptcha_different', _pd(function() { + z.page.on('click', '#recaptcha_different_text', _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() { diff --git a/media/js/zamboni/users.js b/media/js/zamboni/users.js index 060b5df29c..6f15388790 100644 --- a/media/js/zamboni/users.js +++ b/media/js/zamboni/users.js @@ -5,17 +5,25 @@ $('#admin-login').click(function() { // Recaptcha -var RecaptchaOptions = { theme : 'custom' }; - -$('#recaptcha_different').click(function(e) { +function reloadReCaptchaOnClick(e) { e.preventDefault(); Recaptcha.reload(); -}); +} -$('#recaptcha_audio').click(function(e) { - e.preventDefault(); - Recaptcha.switch_type('audio'); -}); +function reCaptchaSwitchClosure(type) { + return function (e) { + 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(); diff --git a/mkt/site/templates/site/helpers/recaptcha.html b/mkt/site/templates/site/helpers/recaptcha.html index aa0b9fb702..03d31447de 100644 --- a/mkt/site/templates/site/helpers/recaptcha.html +++ b/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 #} +
{{ form.recaptcha.errors }}