client-ui/source/recaptcha/recaptcha-directive.js

Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront

/* global window grecaptcha config moduleName */
(function () {
    'use strict';
    var recaptchaId = "gRecaptchaId";
    function directive($q, recaptchaService, $window){
        return {
            restrict: 'A',
            template: '<div ng-show="recaptchaLoaded" id="' + recaptchaId + '"></div>',
            link: function(scope, elem, attr) {
                scope.recaptchaLoaded = false;
                function loadWidget() {
                    var widgetId = grecaptcha.render(recaptchaId, {
                        sitekey: config.googleSiteKey
                    });
                    recaptchaService.setWidgetId(widgetId);
                    scope.recaptchaLoaded = true;
                }

                if (!$window.recaptchaLoaded) {
                    $window.recaptchaCallback = loadWidget;
                } else {
                    loadWidget();
                }
            }
        };
    }

    angular.module(moduleName).directive('recaptcha', directive);
    directive.$inject = ["$q", "recaptchaService", "$window"];
})();