https://www.uitzendbureau.nl/js/lib/captcha_manager.js

1/**
2 * https://stackoverflow.com/questions/36488644/how-to-use-jsdoc3-to-document-enum-constants/36501659#36501659
3 * @typedef {string} CaptchaSize
4 * @property {string} NORMAL "normal"
5 * @property {string} COMPACT "compact"
6 */
7
8/**
9 * @enum {CaptchaSize}
10 */
11CaptchaManager.CaptchaSize = {
12  NORMAL: 'normal',
13  COMPACT: 'compact'
14};
15
16/**
17 * Captcha manager constructor.
18 * @param {string} captchaContainer - The HTML element the captcha should be rendered in.
19 * @constructor
20 */
21function CaptchaManager( captchaContainer )
22{
23  'use strict';
24  this.captcha = null;
25  this.captchaContainer = captchaContainer;
26  this.grecaptcha = null;
27  this.size = null;
28}
29
30/**
31 * Renders the captcha using the key.
32 * @param {function} callback The function to call when the captcha completes. You may leave this empty
33 */
34CaptchaManager.prototype.loadCaptcha = function( callback )
35{
36  'use strict';
37  // Set the Google reCaptcha object.
38  this.grecaptcha = window.grecaptcha;
39
40  // jQuery captcha container.
41  var $captchaContainer = jQuery( '#' + this.captchaContainer );
42
43  if( !$captchaContainer.length )
44  {
45    return;
46  }
47
48  this.size = this.calculateCaptchaSize();
49
50  // Only render the captcha when grecaptcha isset and the captcha hasn't yet rendered in the div.
51  if( this.grecaptcha !== null && $captchaContainer.children().length === 0 )
52  {
53    // Renders the captcha using the sitekey.
54    this.captcha = this.grecaptcha.render( this.captchaContainer, {
55      sitekey: '6LcLFwoTAAAAAFaGmTAEhmjVB354VTnWXlu0j7iw',
56      size: this.size,
57      callback: callback
58    } );
59  }
60};
61
62/**
63 * Gets the size for the widget based on the room available in the wrapping form
64 * @return {CaptchaSize} The size to use
65 */
66CaptchaManager.prototype.calculateCaptchaSize = function()
67{
68  'use strict';
69  var $captchaContainer = jQuery( '#' + this.captchaContainer );
70  var $captchaContainerForm = $captchaContainer.closest( 'form' );
71  // Use normal size if the width cannot be determined.
72  if( $captchaContainerForm.width() <= 0 )
73  {
74    return CaptchaManager.CaptchaSize.NORMAL;
75  }
76  return ( ( $captchaContainerForm.width() ) < 350 ) ? CaptchaManager.CaptchaSize.COMPACT : CaptchaManager.CaptchaSize.NORMAL;
77};
78
79/**
80 * Returns the response of the current loaded captcha if there is any.
81 * @param {Object} data The data object, can be empty
82 * @returns {*[]} Array with the initial data including the response from the captcha.
83 */
84CaptchaManager.prototype.getResponse = function( data )
85{
86  'use strict';
87  data = data || {};
88  if( this.captcha !== undefined && this.captcha !== null && this.isVisible() )
89  {
90    data[ 'g-recaptcha-response' ] = this.grecaptcha.getResponse( this.captcha );
91  }
92  return data;
93};
94
95/**
96 * Returns whether the captcha is visible in the DOM.
97 * @returns {boolean}
98 */
99CaptchaManager.prototype.isVisible = function()
100{
101  'use strict';
102  var $captchaContainer = jQuery( '#' + this.captchaContainer );
103  var $captchaContainerParent = $captchaContainer.closest( '.form-group' );
104  return $captchaContainer.length && !$captchaContainer.hasClass( 'hidden' ) && !$captchaContainerParent.hasClass( 'hidden' );
105};
106
107/**
108 * Hides the captcha field.
109 */
110CaptchaManager.prototype.hide = function()
111{
112  'use strict';
113  jQuery( '#' + this.captchaContainer ).addClass( 'hidden' );
114};
115
116/**
117 * Shows the captcha field and the parent form-group
118 */
119CaptchaManager.prototype.show = function()
120{
121  'use strict';
122  var $captchaContainer = jQuery( '#' + this.captchaContainer );
123  var $captchaContainerParent = $captchaContainer.closest( '.form-group' );
124
125  $captchaContainer.removeClass( 'hidden' );
126  $captchaContainerParent.removeClass( 'hidden' );
127};
128
129/**
130 * Resets captcha. Useful when using captcha in combination with AJAX calls.
131 */
132CaptchaManager.prototype.reset = function()
133{
134  'use strict';
135  this.grecaptcha.reset( this.captcha );
136};