google-recaptcha.html

<!--
 Copyright 2015 The Polymer Authors. All rights reserved.
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
-->
<link rel="import" href="../polymer/polymer.html">

<!--
Polymer element for Google reCAPTCHA

See https://developers.google.com/recaptcha

##### Example
  ```html
  <google-recaptcha sitekey="yoursitekey"></google-recaptcha>
  ```

@element google-recaptcha
@blurb Element for Google reCAPTCHA
@status alpha
@homepage https://github.com/googlewebcomponents/re-captcha
@demo demo/index.html
-->
<dom-module id="google-recaptcha">
  <style>
    :host {
      display: block;
    }
  </style>
  <template><content></content></template>
</dom-module>

<script>
  Recaptcha = (function () {
    'use strict';
    var SCRIPT_LOADED=false;
    return Polymer({
      is: 'google-recaptcha',

      _API_URL:'https://www.google.com/recaptcha/api.js',
      _RETRY_DELAY:200,
      _delay:0,
      _containerId:'',
      _captchaId:'',

      properties: {
        /**
         * The total time (in milliseconds) to wait for API loading
         */
        timeout: {
          type: Number,
          value: 3000
        },
        /**
         * Your sitekey
         *
         * (Provided on registration -- see https://developers.google.com/recaptcha/docs/start)
         */
        sitekey: {
          type: String,
          value: ''
        },
        /**
         * The color theme of the widget (`dark` or `light`)
         */
        theme: {
          type: String,
          value: 'light'
        },
        /**
         * The type of reCaptcha to serve (`image` or `audio`)
         */
        type: {
          type: String,
          value: 'image'
        },
        /**
         * The tabindex of the widget and challenge
         *
         * If other elements in your page use tabindex, this should be set to make user navigation easier.
         */
        tabindex: {
          type: Number,
          value: 0
        },

        /**
         * The response from the reCaptcha API
         */
        response: {
          type: String,
          value: '',
          notify: true
        }
      },

      observers: [
        '_validate(theme, type, timeout)'
      ],

      _validate:function () {
        if(this.theme!='dark' && this.theme!='light'){
          this.theme='light';
        }
        if(this.type!='audio' && this.type!='image'){
          this.type='image';
        }
        if(isNaN(this.timeout)){
          this.timeout=3000;
        }
      },
      _resetScriptLoaded: function () {
        SCRIPT_LOADED=false;
      },
      _generateScriptApiTag:function () {
        var head= document.getElementsByTagName('head')[0];
        var script= document.createElement('script');
        script.setAttribute('async','');
        script.setAttribute('defer','');
        script.setAttribute('type','text/javascript');
        script.setAttribute('src',this._API_URL);
        head.appendChild(script);
        SCRIPT_LOADED=true;
      },
      _generateContainer:function () {
        var div = document.createElement('div');
        this._containerId=this._guidGenerator();
        div.setAttribute('id',this._containerId);
        this.appendChild(div);
      },
      _guidGenerator:function () {
        var S4 = function() {
          return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
        };
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
      },
      ready: function () {

      },
      attached: function () {
        if(this.sitekey===''){
          throw new Error("sitekey attribute is mandatory for re-captcha element");
        }
        if(!SCRIPT_LOADED){
          this._generateScriptApiTag();
        }
        this._generateContainer();
        this._renderWhenApiReady();
      },
      _renderWhenApiReady: function () {
        if(!window.grecaptcha){
          // Check if we can try again according to timeout
          if(this._delay < this.timeout){
            setTimeout(function() {
              this._renderWhenApiReady()
            }.bind(this), this._RETRY_DELAY);
            // increment delay to check timeout
            this._delay+=this._RETRY_DELAY;
          }
          else{
            // We reach the timeout value
          }
        }
        else{
          this._render();
        }
      },
      /**
       * The `captcha-rendered` event is fired whenever the captcha widget is rendered.
       *
       * @event captcha-rendered
       */
      /**
       * The `_render` method renders the container as a reCaptcha widget and stores the ID of the newly created widget.
       */
      _render: function () {
        var _this=this;
        //Render call
        this._captchaId=window.grecaptcha.render(this._containerId, {
          sitekey: this.sitekey,
          theme: this.theme,
          type: this.type,
          tabindex: this.tabindex,
          callback: _this._responseHandler.bind(this),
          'expired-callback': _this._expiredHandler.bind(this)
        });
        this.fire('captcha-rendered',null);
      },
      /**
       * The `reset` method resets the reCaptcha widget.
       */
      reset: function () {
        window.grecaptcha.reset(this._captchaId);
      },
      /**
       * The `getResponse` method gets the response for the reCaptcha widget.
       *
       * @return {String} Returns the response.
       */
      getResponse:function(){
        return window.grecaptcha.getResponse(this._captchaId);
      },
      /**
       * The `captcha-response` event is fired whenever we
       * get the response from the reCaptcha API.
       *
       * @event captcha-response
       * @param {Object} detail
       * @param {string} detail.response The response
       */

      /**
       * The `responseHandler` method will store the response and fire the captcha-response. At least
       * it will dispatch a captcha-response event with the response
       *
       *  @method responseHandler
       *  @param {String} response response to store
       */
      _responseHandler: function (response) {
        this.response=response;
        this.fire('captcha-response',{response:response});
      },

      /**
       * The `captcha-expired` event is fired when the recaptcha response expires and the user
       * needs to solve a new CAPTCHA.
       *
       * @event captcha-expired
       */

      /**
       * The `expiredHandler` method fires the captcha-expired event.
       */
      _expiredHandler: function () {
        this.fire('captcha-expired');
      }
    });

  })();
</script>