ember_grecaptcha_component.js

/* global grecaptcha */
import Ember from 'ember';

const maxAttempts = 20;
const interval = 100;

function verifyCallback(data) {
    Ember.$.ajaxPrefilter(function(options, oriOpt, jqXHR) {
        jqXHR.setRequestHeader("X-Recaptcha-Token", data);
    });
}

export default Ember.Component.extend({
    classNames: ['g-recaptcha'],
    attributeBindings: ['siteKey:data-sitekey', 'data-theme', 'data-size', 'data-callback', 'data-expired-callback', 'data-tabindex'],
    siteKey: '',
    lang: 'sv',
    resetTrigger: false,
    _isSetup: false,
    _attempts: 0,

    setupGrecaptcha() {
        grecaptcha.render(this.$().prop('id'), {
            'sitekey': this.get('siteKey'),
            'callback' : verifyCallback,
        });
        this.set('_isSetup', true);
    },

    resetGrecaptcha: Ember.observer('resetTrigger', function() {
        if (this.get('_isSetup') && this.get('resetTrigger')) {
            grecaptcha.reset(this.$().prop('id'));
            this.set('resetTrigger',false);
        }
    }),

    pollForObject() {
        Ember.Logger.debug("Polling for grecaptcha");
        if (window.grecaptcha !== undefined) {
            this.setupGrecaptcha();
        } else if (this.get('_attempts') < maxAttempts) {
            this.incrementProperty('_attempts');
            Ember.run.later(this, this.pollForObject, interval);
        } else {
            Ember.Logger.error("Failed to get grecapthca script");
        }
    },

    setupScript: Ember.on(function(){
        Ember.$.getScript("https://www.google.com/recaptcha/api.js?&render=explicit&hl=" + self.get('lang'), ( /*data, textStatus, jqxhr*/ ) => {
            self.pollForObject();
        });
    })
});