@mobileaction/ui-modules/src/ui-modules/plugins/MaGoogleRecaptcha.js

Mobile Action common modules for Vue projects

import { validateVueInstall } from '../PluginUtils.js';
export function MaGoogleRecaptcha(app, { siteKey: sitekey, h }) {
    if (!validateVueInstall(app, MaGoogleRecaptcha, 'MaGoogleRecaptcha')) {
        return;
    }

    const API_URL = `https://www.google.com/recaptcha/enterprise.js?render=${ sitekey }`;

    app.component('ma-recaptcha', {
        name: 'ma-recaptcha',
        emits: ['response', 'status-updated'],
        render() {
            return h('div', [
                this.$slots.default(),
            ]);
        },
        data() {
            return {
                waitingResponse: false,
            };
        },
        methods: {
            submit() {
                this.waitingResponse = true;
                window.grecaptcha.enterprise.ready(async () => {
                    window.grecaptcha.enterprise.execute(sitekey, { action: 'login' })
                        .then((token) => {
                            return this.$emit('response', token);
                        })
                        .catch((e) => {
                            return Promise.reject(e);
                        })
                        .then(() => {
                            this.waitingResponse = false;
                        });
                });
            },
        },
        mounted() {
            if (Array.from(document.querySelectorAll(`script[src="${ encodeURI(API_URL) }"`)).length) {
                return;
            }

            const s = document.createElement('script');
            s.async = true;
            s.onerror = e => this.$log.error('Failed to load recaptcha', e);
            s.onload = () => this.$log.debug('ReCaptcha loaded');
            s.src = API_URL;
            const container = document.body;
            container.appendChild(s);
        },
        watch: {
            waitingResponse() {
                this.$emit('status-updated', this.waitingResponse);
            },
        },
    });
}

export default MaGoogleRecaptcha;