kuo_ajax_comment

kuopassa · 2015-04-03 19:05:50

An upgrade to Textpattern’s comment system. Allows publishing comments with Ajax (jQuery required). Original comment field is still used, only the preview and submit buttons are removed and replaced with the tag <txp:kuo_ajax_comment />. I’ve not yet coded support the “remember me” checkbox. Before offering this plugin for download, I’d like get some test comments over here to see if the plugin works with real users:

kuopassa.net/kuo_ajax_comment/new

More info about the plugin is in this screenshot. :-)

candyman · 2015-04-03 20:30:38

Very nice! :D

p.s.: why the comment box disappear after someone has published a comment? I was expecting that, after that the first comment was published, the site would have been ready for another one. Is a stylistic choice?

Gocom · 2015-04-03 21:10:17

The code, and the implementation, doesn’t look great and contains security issues as far as I can tell, even just from looking at what printed to the HTML document.

You shouldn’t pass options through HTTP requests; if you do, you need use hash validation. The better option, and what most other plugins do, is to use circular reference where the tag itself does the submission on the data.
Using an external PHP file to handle submissions doesn’t make any sense. Either use a callback handler or do the submission handling within the tag itself.
The JavaScript is not great. It contains many common beginner issues.

The fact that it actually replaces the highly customizable <txp:comments /> tag isn’t the best and appears to be unnecessary, and will create incompatibilities with other plugins that relay on the list.

If I may propose, I would change the plugin so that:

submissions are done in a callback or handled within the tag itself; clean up the output buffer and print out some JSON when the request matches what you expect (e.g. contains kuo_ajax_comment_save parameter).
remove all the listing options; the tag should work as simple button replacement.
add the submitted comment to the standard <txp:comments /> list on save. You can either load the comment from the page itself or simply parse the standard comment form during the save process.
make sure the save function adheres the practices uses by the standard submission process, e.g. calls callbacks.

And then rewrite the JavaScript to something along the lines of:

$(function () {
    var form = $('#txpCommentInputForm'),
        buttons = $('.kuo_ajax_comment_buttons'),
        button = $('<input type="submit" />').attr('value', buttons.attr('data-kuo_ajax_comment_button_label')),
        comments = $(buttons.attr('data-kuo_ajax_comment_comments')),
        breakTag = buttons.attr('data-kuo_ajax_comment_button_break'),
        breakClass = buttons.attr('data-kuo_ajax_comment_button_breakclass');

    // When JavaScript is enabled, replace the standard buttons with singular send button.
    buttons.html(button).append('<input name="kuo_ajax_comment_save" value="1" />');

    form.on('submit.kuo_ajax_comment', function(e) {
        e.preventDefault();

        var errors = $('<ul class="kuo_ajax_comment_errors" />');

        // Indicate activity the way want e.g. disable the button add an class the form.

        button.prop('disabled', true);
        form.addClass('kuo_ajax_comment_busy');

        // Remove existing errors and what not, i.e. reset the form state before submissions.

        form.find('.kuo_ajax_comment_errors').remove();

        // Send the data.

        $.ajax({
            type: 'POST',
            data: form.serialize(),
            dataType: 'json'
        })
            .done(function (data, textStatus, jqXHR) {
                // Response data returned an array errors.

                if (data.errors.length) {
                    $.each(data.errors, function(index, value) {
                        errors.append($('<li />').html(value));
                    });

                    form.prepend(errors);
                }

                // The response contains the new formatted comment, add it the list and reset the form.

                if (data.comment) {
                    if (breakTag) {
                        data.comment = $('<'+breakTag+' />').attr('class', breakClass).html(data.comment);
                    }

                    comments.append(data.comment);
                    form.get(0).reset();
                }
            })
            .fail(function (jqXHR, textStatus, errorThrown) {
                // Request failed; add an error the form.
                errors.append($('<li />').html(buttons.attr('data-kuo_ajax_comment_submission_error')));
                form.prepend(errors);
            })
            .always(function) {
                // Re-enable the button and remove activity indicators.
                button.prop('disabled', false);
                form.removeClass('kuo_ajax_comment_busy');
            });
    });
});

And the tag is used like so:

<txp:kuo_ajax_comment comments="#comments" label="Send" submission_error="Submission failed.">
    <txp:comment_preview />
    <txp:comment_submit />
</txp:kuo_ajax_comment>

And it renders that JavaScript snippet and a host wrapper that has all the options in it:

<div class="kuo_ajax_comment_buttons" data-kuo_ajax_comment_comments="#comments" data-kuo_ajax_comment_button_label="Send" data-kuo_ajax_comment_submission_error="Submission failed.">
    ... contained statement ...
</div>

And comment saving response returns a JSON body of:

{
    "errors": [
        "Textpack localized string number #1",
        "Textpack localized string number #2"
    ],
    "comment": "...the new comment markup..."
}

Last edited by Gocom (2015-04-03 21:32:40)

kuopassa · 2015-04-05 03:30:57

Thanks, Gocom, for sharing your thoughts and the JS example et cetera! I will check that code sooner than later. :-) But before that:

The code and the implementation does look great, I can tell. Tasks this plugin was built to do are done nicely.
It certainly could have security issues and such things I’ll try to weed out.
Using a PHP file with codes specifically for this plugin does indeed make sense. This is the only way I was able to make things work.

Gocom · 2015-04-05 17:12:15

kuopassa wrote #289755:

The code and the implementation does look great, I can tell […] Using a PHP file with codes specifically for this plugin does indeed make sense. This is the only way I was able to make things work.

Contradictions.

It certainly could have security issues and such things I’ll try to weed out.

It obviously has; you are passing the tag options to the processor through the HTTP request. An attacker could for instance:

look at any article’s (whether it’s visible on the site or not) comments, view the comment list with any options
…and with that for instance poison search indexes by linking to the raw comment HTML page with links enabled
or disable any of the comment publishing setting; for instance I’ve added an comment with single space character in it to your website as an example; it’s below your min length while the request neither triggered the spam blacklist check or the notifications.
also considering it throws an ‘error’ text when some options contain quotes (e.g. limit/offset), I would assume that it has SQL injection vulnerabilities too.

kuopassa · 2015-04-05 19:19:02

candyman wrote #289717:

p.s.: why the comment box disappear after someone has published a comment? I was expecting that, after that the first comment was published, the site would have been ready for another one. Is a stylistic choice?

Sorry for not replying to your comment earlier. :-) The comment box disappears after publishing as I thought it’d have no use after publishing a comment. This could change…

Gocom wrote #289762:

Contradictions.

It obviously has; you are passing the tag options to the processor through the HTTP request. An attacker could for instance […]

Thanks! I hadn’t given much thought on those things. It’s nice to get challenges to try to prevent baddies from breaking things.

Gocom · 2015-04-05 20:34:08

kuopassa wrote #289763:

I hadn’t given much thought on those things. It’s nice to get challenges to try to prevent baddies from breaking things.

You should. I’m not giving you ‘challenges’; I’m quoting the first paragraph of Noob’s guide book to web development. Basic security 101.

I mean, as you’ve removed the preview step and the nonce the form once had, you do realize that there is absolute nothing preventing someone from spamming your comment processor endpoint with requests within the rate limit? Which then will spam rows to the database, eventually causing issues.

kuopassa · 2015-04-11 08:52:06

The plugin has been greatly improved, but looks like the JS at front end got bugged. It’s refusing to send the stuff with Ajax. I’ll try to fix it in near future. :-)

Admin side has now a tag generator to create the <txp:kuo_ajax_comment /> tag with the functionality user wants to have. Here’s a screenshot:

candyman · 2015-05-20 11:21:37

I need that the User check a checkbox stating he has read the terms and conditions of the Site before commenting.
Are you going to add this to your plugin?

Or, alternatively, that function can be added to the standard comment system?

kuopassa · 2015-05-20 18:43:24

Thanks for showing interest towards this project. :-) Perhaps such a checkbox could be added, but I really think user shouldn’t be burdened with extra work when commenting or sending a form in general. Less clicking is better. Maybe you could put at the end of standard comment form something like this:

<p>By submitting a comment you agree to the <a href="#">terms and conditions</a> of the site.</p>

Last edited by kuopassa (2015-05-20 18:43:44)

candyman · 2015-05-20 18:50:48

I agree with you, but the policy of my site needs that the user is informed.
Maybe I could pre-flag the checkbox as default or (even better) the site could remember the user choice.

Last edited by candyman (2015-05-20 18:51:55)

alivato · 2015-10-25 00:05:02

Hi!
Where can I download this plugin?

Textpattern CMS

Textpattern CMS support forum

#1 2015-04-03 19:05:50

kuo_ajax_comment

#2 2015-04-03 20:30:38

Re: kuo_ajax_comment

#3 2015-04-03 21:10:17

Re: kuo_ajax_comment

#4 2015-04-05 03:30:57

Re: kuo_ajax_comment

#5 2015-04-05 17:12:15

Re: kuo_ajax_comment

kuopassa wrote #289755:

#6 2015-04-05 19:19:02

Re: kuo_ajax_comment

candyman wrote #289717:

Gocom wrote #289762:

#7 2015-04-05 20:34:08

Re: kuo_ajax_comment

kuopassa wrote #289763:

#8 2015-04-11 08:52:06

Re: kuo_ajax_comment

#9 2015-05-20 11:21:37

Re: kuo_ajax_comment

#10 2015-05-20 18:43:24

Re: kuo_ajax_comment

#11 2015-05-20 18:50:48

Re: kuo_ajax_comment

#12 2015-10-25 00:05:02

Re: kuo_ajax_comment

Board footer