google-recaptcha.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="iron-scroll-fit.html">

<script>
  window.onloadGrecaptchaCallback = function() {
    this.dispatchEvent(new Event('grecaptcha-loaded', {bubbles: true, composed: true}));
    window.fetchingGrecaptchaLibrary = false;
  }
</script>

<!--
`google-recaptcha`

@demo demo/index.html
-->

<dom-module id="google-recaptcha">
  <template>
    <style>
      :host {
        display: block;
      }
      :host([hidden]) {
        display: none !important;
      }
      :host(:not([invisible])) {
        width: 302px;
        height: 78px;
      }
      :host([compact]) {
        width: 164px;
        height: 144px;
      }
      :host([invisible][badge="inline"]) {
        width: 256px;
        height: 60px;
      }
    </style>

    <iron-scroll-fit
      class="recaptcha-container"
      hidden$="[[hidden]]"
      scroll-target="{{scrollTarget}}"
      horizontal-align="left"
      vertical-align="top"
    ></iron-scroll-fit>

  </template>
  <script>

    Polymer({

      is: 'google-recaptcha',

      behaviors: [
        Polymer.IronFormElementBehavior,
        Polymer.IronValidatableBehavior
      ],

      properties: {
        /**
         * Prevents the recaptcha being moved into the body.
         */
        inBodyDisabled: {
          type: Boolean,
          value: false
        },
        /**
         * Prevents the recaptcha being refitted every time the user scroll when
         * the it is in body.
         */
        fitOnScrollDisabled: {
          type: Boolean,
          value: false
        },
        /**
        * Specifies the element that will handle the scroll event
        * on the behalf of the current element. This is typically a reference to an element,
        * but there are a few more posibilities:
        *
        * ### Elements id
        *
        *```html
        * <div id="scrollable-element" style="overflow: auto;">
        *  <google-recaptcha scroll-target="scrollable-element"></google-recaptcha>
        * </div>
        *```
        * In this case, the `scrollTarget` will point to the outer div element.
        *
        * ### Document scrolling
        *
        * For document scrolling, you can use the reserved word `document`:
        *
        *```html
        * <google-recaptcha scroll-target="document"></google-recaptcha>
        *```
        *
        * ### Elements reference
        *
        *```js
        * recaptcha.scrollTarget = document.querySelector('#scrollable-element');
        *```
        *
        * @type {HTMLElement}
        * @default document
        */
        scrollTarget: {
          type: HTMLElement
        },
        /**
         * When true, an invisible recaptcha will be use instead of v2.
         */
        invisible: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },
        /**
        * Prevents the recaptcha being automatically rendered on attach.
        */
        manualRender: {
          type: Boolean,
          value: false
        },
        /**
        * True when the recaptcha is rendered.
        */
        rendered: {
          type: Boolean,
          computed: '_computeRendered(widgetId)',
          notify: true
        },
        /**
         * True when the recaptcha library is loaded.
         */
        libraryLoaded: {
          type: Boolean,
          readOnly: true,
          notify: true,
          value: function() {
            return !!window.grecaptcha
          }
        },
        /**
         * The unique generated id for this recaptcha, if it is rendered.
         */
        widgetId: {
          type: String,
          readOnly: true,
          notify: true
        },
        /**
         * The google recaptcha api key. This value is required for the
         * recaptcha to work. Visit https://www.google.com/recaptcha/admin to
         * get a key and don't forget to configure the allowed domain.
         */
        sitekey: {
          type: String
        },
        /**
         * Not working for now
         */
        loading: {
          type: Boolean,
          value: false
        },
        /**
         * The recaptcha container.
         */
        container: {
          type: HTMLElement
        },
        /**
         * The function called when the user submits a successful CAPTCHA
         * response.
         */
        responseCallback: {
          type: Function,
          value: function() {
            return function(token) {
              this._setValue(token);
              this._setExpired(false);
              this.resolveCompletes(token);
              this.dispatchEvent(new CustomEvent(
                'google-recaptcha-response',
                {detail: token, bubbles: true, composed: true}
              ));
            }.bind(this)
          }
        },
        /**
         * The function called when the recaptcha expires.
         */
        expiredCallback: {
          type: Function,
          value: function() {
            return function() {
              this._setValue('');
              this._setExpired(true);
              this.dispatchEvent(new CustomEvent(
                'google-recaptcha-expired',
                {bubbles: true, composed: true}
              ));
            }.bind(this)
          }
        },
        /**
         * True when the recaptcha has expired and the user needs to solve a
         * new CAPTCHA.
         */
        expired: {
          type: Boolean,
          value: false,
          readOnly: true,
          notify: true
        },
        /**
         * The validated recaptcha token.
         */
        value: {
          type: String,
          readOnly: true,
          notify: true
        },
        /**
         * Use an audio CAPTCHA.
         */
        audio: {
          type: Boolean,
          value: false
        },
        /**
         * Use a compact recaptcha. For v2 only.
         */
        compact: {
          type: Boolean,
          value: false
        },
        /**
         * The recaptcha tabindex
         */
        tabIndex: {
          type: Number,
          value: 0
        },
        /**
         * The recaptcha container z-index when it is in body. Set to `null` to
         * remove the z-index property.
         */
        inBodyZIndex: {
          type: Number
        },
        /**
         * Use the recaptcha dark theme.
         */
        dark: {
          type: Boolean,
          value: false
        },
        /**
         * {bottomright | bottomleft | inline}
         * For invisible only.
         * Reposition the reCAPTCHA badge. 'inline' allows you to control the CSS.
         */
        badge: {
          type: String,
          value: 'bottomright',
          reflectToAttribute: true
        },
        /**
         * A promise that resolves when the grecaptcha response comes back.
         *
         * @type {Promise}
         */
        completes: {
          type: Object,
          readOnly: true,
          notify: true,
          value: function() {
            return new Promise(function (resolve, reject) {
              this.resolveCompletes = resolve;
              this.rejectCompletes = reject;
            }.bind(this));
          }
        },
        /**
         * True when the recaptcha has been moved in body
         */
        inBody: {
          type: Boolean,
          value: false,
          readOnly: true,
          notify: true
        },
        /**
         * Force the recaptcha to be in body, event if it has no shadow root
         */
        forceInBody: {
          type: Boolean,
          value: false
        },
        /**
         * Hide the recaptcha badge. Use this property on your own risk, it may be against google policy.
         */
        hidden: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },
        /**
         * Forces the widget to render in a specific language. Auto-detects the
         * user's language if unspecified.
         * See https://developers.google.com/recaptcha/docs/language for
         * available language code.
         * For now, it is a one time configuration. The first recaptcha find
         * defines the language for all others.
         */
        lang: {
          type: String,
          value: '',
          notify: true
        },
        /**
         * The computed size recaptcha parameter.
         */
        _size: {
          type: String,
          computed: '_compute_size(invisible, compact)'
        },
        /**
        * The computed theme recaptcha parameter.
        */
        _theme: {
          type: String,
          computed: '_compute_theme(dark)'
        },
        /**
        * The computed type recaptcha parameter.
        */
        _type: {
          type: String,
          computed: '_compute_type(audio)'
        },
      },

      /**
       * Fired when a recaptcha response is recieved.
       *
       * @event google-recaptcha-response
       */

      /**
       * Fired when a recaptcha expires.
       *
       * @event google-recaptcha-expired
       */

      observers: [
        '_autoRenderIfNeeded(manualRender, libraryLoaded, container, sitekey)',
        '_updateScrollListener(invisible, badge, fitOnScrollDisabled, container)',
        '_updatePosition(inBodyDisabled, forceInBody, container)',
        '_refitIfNeeded(inBody, fitOnScrollDisabled, hidden, container, rendered)',
        '_updateContainerZIndex(inBody, inBodyZIndex, container)',
        '_fetchLibrary(lang)'
      ],

      _updateContainerZIndex: function(inBody, inBodyZIndex, container) {
        if (!(inBody == undefined || inBodyZIndex == undefined || container == undefined)) {
          container.style.zIndex =
            inBodyZIndex == null || isNaN(inBodyZIndex) || !inBody ?
            null : inBodyZIndex;
        }
      },

      _fetchLibrary: function(lang) {
        if (window.fetchingGrecaptchaLibrary || window.grecaptcha) return;
        var script = document.createElement('script');
        var hl = !!lang ? '&hl=' + lang : '';
        var apiUrl = 'https://www.google.com/recaptcha/api.js?onload=onloadGrecaptchaCallback&render=explicit' + hl;
        script.setAttribute('async', '');
        script.setAttribute('id', 'grecaptchaLibrary');
        script.setAttribute('defer', '');
        script.setAttribute('src', apiUrl);
        script.onerror = function() {
          window.fetchingGrecaptchaLibrary = false;
        };
        window.fetchingGrecaptchaLibrary = true;
        document.head.appendChild(script);
      },

      /**
       * Check if the element is in shadow DOM.
       * @param  {HTMLElement} element The element to check
       * @return {Boolean}         True if the element has a foreign ShadowRoot parent
       */
      _hasShadowParent: function(element) {
        while(element && element.parentNode && (element = element.parentNode)) {
          if(element instanceof ShadowRoot) return true;
        }
        return false;
      },

      attached: function() {
        var container = this.$$('.recaptcha-container');
        container.fitInto = this;
        this.container = container;
        window.addEventListener('grecaptcha-loaded', function() {
          this._setLibraryLoaded(true);
        }.bind(this));
      },

      detached: function() {
        // TODO: remove event listener
      },

      _compute_size: function(invisible, compact) {
        return invisible ? 'invisible' : (compact ? 'compact' : 'normal');
      },

      _compute_theme: function(dark) {
        return dark ? 'dark' : 'light';
      },

      _compute_type: function(audio) {
        return audio ? 'audio' : 'image';
      },

      _computeRendered: function(widgetId) {
        return !isNaN(widgetId);
      },

      _refitIfNeeded(inBody, fitOnScrollDisabled, hidden, container) {
        if (container && inBody && !fitOnScrollDisabled && !hidden) {
          container.refit();
        }
      },

      _updateScrollListener(invisible, badge, fitOnScrollDisabled, container) {
        if (container) {
          container.toggleScrollListener(!fitOnScrollDisabled && !invisible || badge === 'inline');
        }
      },

      _updatePosition(inBodyDisabled, forceInBody, container, rendered) {
        if (!container) return;
        if (!inBodyDisabled) {
          if (!this.inBody && (forceInBody || this._hasShadowParent(this))) {
            // Append to body
            Polymer.dom(document.body).appendChild(container);
            this._setInBody(true);
          }
        } else if (this.inBody) {
          // Remove from body
          Polymer.dom(this.root).appendChild(container);
          container.resetFit();
          this._setInBody(false);
        }
      },

      _autoRenderIfNeeded: function(manualRender, libraryLoaded, container) {
        if(!manualRender && libraryLoaded && container) {
          this.render();
        }
      },

      /**
       * Get the recaptcha response. You can also use `value` property which
       * contains the response when there is one.
       */
      getResponse: function() {
        if (this.rendered) {
          return window.grecaptcha.getResponse(this.widgetId);
        }
      },

      /**
       * Execute the recaptcha - invisible only. This is required before calling
       * the render method.
       * @return {Promise} A Promise that resolves when the recaptcha is ready
       *                   to be rendered.
       */
      execute: function() {
        if (this.rendered && this.invisible) {
          window.grecaptcha.execute(this.widgetId);
          return this.completes;
        }
      },

      reset: function() {
        if (this.rendered) {
          this._setValue('');
          this._setCompletes(new Promise(function (resolve, reject) {
            this.resolveCompletes = resolve;
            this.rejectCompletes = reject;
          }.bind(this)));
          window.grecaptcha.reset(this.widgetId);
        }
      },

      /**
       * Render the recaptcha. For invisible version, you first need to call
       * `execute` method.
       */
      render: function() {
        if (!this.rendered && this.sitekey) {
          this._setWidgetId(window.grecaptcha.render(this.container, {
            'sitekey': this.sitekey,
            'size': this._size,
            'tabindex': this.tabIndex,
            'callback': this.responseCallback.bind(this),
            'expired-callback': this.expiredCallback.bind(this),
            'theme': this._theme,
            'type': this._type,
            'badge': this.badge
          }));
        }
      },

      _getValidity: function() {
        return !!this.value;
      }

    });

  </script>
</dom-module>