Update Form Data before Sending for recaptcha token

ServiceStack ss-utils.js
1

I am setting up a simple demo app using the bootstrap tempate and am having trouble trying to intercept the bootstrapForm submit in order to handle a recaptcha response.

The code for the recaptcha response is straightforward:

 grecaptcha.ready(function () {
        $("form").submit(function (e) {
            e.preventDefault();
                             grecaptcha.execute('key', { action: 'submit' }).then(
                            function (token) {  
                                     $('form').bootstrapForm();  // <-- this obviously doesn't work
                            });
        });

The bootstrapForm beforeSend parameter can’t handle the promise so I’m trying to figure out the easiest quickest way to handle the submit and validations that work great otherwise but running it after the captcha comes back. Any ideas?

2

This is the implementation of bootstrapForm():

Which you’d override to insert your custom impl, maybe something like:

    $.fn.bootstrapForm = function (orig) { //bootstrap v4
        return this.each(function () {
            var f = $(this);
            if (orig.model) 
                $.ss.populateForm(this,orig.model);
            f.submit(function (e) {
                e.preventDefault();
                orig.type = "bootstrap-v4";
                return grecaptcha.execute('key', { action: 'submit' }).then(
                    function (token) {  
                        return $(f).ajaxSubmit(orig);
                    });
            });
        });
    };
1 Like
3

Thanks, that worked perfectly.

On a similar subject I’d love to see a simple vue or vuetify sample that isn’t using npm compilations and has validations. For prototyping it just is sometimes cumbersome to add all the npm/webpack plumbing when building some simple js vue components works well.

4

The Vue & React Lite projects is exactly this, has full Sign In & Registration with validation

The World Validation Client UIs for Client Vue and Client React tabs shows examples that you’d use in Vue & React Lite projects using built-in validation.

5

I’m aware of the lite templates but I still think there could be some even simpler ones that just have some cdn sourced files, plain javascript/etc. I wasn’t able to easily get them to work when I last looked at it which was just to add a basic form with validation not using typescript and using the ErrorMessaging, etc. I’ll look again when I have some time.

6

The lite templates just requires running the typescript compiler, it can’t get any easier & simpler then that whilst still being able to utilize modern TS/JS. Even publishing apps is the same as normal .NET Core Apps.

The same template/deps is also used in vue-desktop template & ServiceStack Studio.

7

I get what you are saying but should mention that having to run tsc -w is a complexity that could be simplified for a quick prototype project. Just an opinion here and I get your point so not arguing it.

I ended up just reverse engineering some of the code to get what i want without having to compile typescript which was something I didn’t need. I really respect that all these templates exist and show different strategies for working with servicestack.

8

You can’t make use of the ServiceStack’s typed TypeScript DTOs without TypeScript and that complexity of running the single tsc -w command is what saves you from needing to maintain a codebase of bloated ES3/5 JS compatible code.

1 Like
9

Yeah, I am just manually posting the objects to a few endpoints and not using the typescript dto’s. Something like this which again is awesome that all this can work easily without the added complexity. If this was more complicated than a couple pages I wouldn’t do it this way.

   var client = new this.tools.client("/");

                    try {

                        this.responseStatus = null;

                        this.model.captchaResponse = await grecaptcha.execute("[captcha]', { action: 'submit' });

                        await client.postToUrl('/client/request/create', this.model);

                        this.state.isForm = false;

                    }

                    catch (e) {

                        this.responseStatus = e.responseStatus || e;

                    }
10

Yeah you can still call ServiceStack APIs via plain Ajax/JSON since that’s what they are, but our recommended approach isn’t going to be placing the burden on them maintaining their own routes & untyped data structures. In that case you might as well use jQuery and ss-utils.js to send JSON API requests and not the typed JsonServiceClient.

1 Like