vue refactor (remove interval loading, fix prop definitions and use $ref and $emit event)

[Fluxlicious]

• Refactored the Vue component to load a lot faster (not using intervals anymore)
• Made it possible to bind the response token to a model, the Vue way.
  
• Made all props optional with default values that can be configured on the component

Upgrade warning: this upgrade breaks functionality. Prop changed from elementId to id. Adjust your code accordingly.

Note: when using model binding you need to call execute() after each request to get a new token.
In your template:

 <google-recaptcha-v3 ref="captcha" v-model="grecaptcha"></google-recaptcha-v3>

In your script:

this.form.post('/post-url')
    .then(response => {
        this.$refs.captcha.execute();
    })
    .catch(exception => {
        this.$refs.captcha.execute();    
    });

[RyanDaDeng]

Wowow!!! I was planning to refactor it as well. Wow! I will check it tonight as soon as possible.

[RyanDaDeng]

Hello @Fluxlicious , I have played it a bit around with the proposed approach, I am unable to render multiple recaptcha on the same page e.g. (probably I am doing something wrong)

    <div>
        <form method="POST" action="/verify">
            <div>
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1"
                       aria-describedby="emailHelp"
                       placeholder="Enter email">
            </div>
            <div>
                <label for="exampleInputPassword1">Password</label>
                <input type="password" id="exampleInputPassword1"
                       placeholder="Password">
            </div>
            <div>
                <div id="contact_us_id"></div>
            </div>
            <div>
                <div id="contact_us2_id"></div>
            </div>
            <button type="submit">Submit</button>
        </form>
        <google-re-captcha-v3
                :siteKey="this.siteKey"
                :id="'contact_us_id'"
                :inline="true"
                :action="'contact_us'">

        </google-re-captcha-v3>

        <google-re-captcha-v3
                :siteKey="this.siteKey"
                :id="'contact_us2_id'"
                :inline="true"
                :action="'contact_us'">

        </google-re-captcha-v3>
    </div>

errors:
Uncaught Error: reCAPTCHA has already been rendered in this element at Object.N1 [as render] (VM667 recaptcha__zh_cn.js:532) at VueComponent.render

Yeah, I might need to look into it deeply this weekend and also adding some unit tests later for the vue component later this week.

I really appreciate the work you have done! The proposed approach is good, I need to ensure some edge cases to be verified as well, I will get back to you soon. Will be no later this week :)

[Fluxlicious]

No you're right, didn't check that. Also having multiple recaptcha tried to load the script more than once as while the script wasn't loaded yet. Fixed it in commit f97251d by identifying the presence of the script tag and while the script is still loading push the render callbacks to an array and execute them all once the script is loaded.

[RyanDaDeng]

@Fluxlicious Sorry for the late reply. I am looking into it now.

[RyanDaDeng]

good good, also I learnt some from your approach. 👍

[RyanDaDeng]

I have sent a contributor inv to you, feel free if you want to accept the invitation. 🥇

[xalunda]

Awesome refactoring @Fluxlicious !
I would recommend adding a warning on the release note as it is not backwards compatible:

• >= 2.2.0 => prop changed from elementId to id (much better 👍)