Active-CSS / active-css

The epic event-driven browser language for UI with functionality in one-liner CSS. Over 100 incredible CSS commands for DOM manipulation, ajax, reactive variables, single-page application routing, and lots more. Could CSS be the JavaScript framework of the future?
https://activecss.org
Other
42 stars 7 forks source link

Add csrf option to ajax command + headers option #216

Closed bob2517-whiteline closed 2 years ago

bob2517-whiteline commented 2 years ago

Laravel has the @csrf option in blade templates, but it's also needed for ACSS ajax calls that are post form submits, otherwise the authentication fails.

There will be a header option added at some point, but I've adding a csrf option which adds the header X-CSRF-TOKEN with the content of \.

Adding csrf as an option saves mucking about with headers.

This is done offline.

bob2517 commented 2 years ago

Add headers option to ajax command left to do.

bob2517 commented 2 years ago

Knocking this one out next, as it's quicker to tackle than the component one that I'm about to start and can be finished today.

bob2517 commented 2 years ago

Adjusted syntax will be (this will apply to all ajax-type uses as an option - not just the ajax command - it will work with the ajax loading options in components):

ajax: "myfile" headers(something array-like);

It will work as a real JS array with ACSS variable substitution, which should be flexible enough I think.

bob2517 commented 2 years ago

Gonna do this for now:

header("testheader", "cheese")

Multiple instances of header will add additional headers. It's easier in the core to code it this way and may be a little bit easier to read anyway. Variable substitution will be in there and I can allow JS in there too. I can upgrade it to an array later if it becomes a thing.

bob2517 commented 2 years ago

This is mostly completed. I had to allow for multiple instances of the same option and ran into a bug to do with parentheses, which I fixed. Have done a commit in case it's useful as it is. It works without any variable substitution at the moment, which may not be enough to be useful. It will work with variables and JS substitution next ({= js... =}).

To use, it looks like this:

@component clockComponent
        html(/examples/clock-component.html get
            header("X-BLAHBLAH-1", "value")
            header("X-BLAHBLAH-2", "value2")
            header("X-BLAHBLAH-3", "value3")
        )
        css(/examples/clock-component.css get)
    {
...
}

I may do an array version of it later, but not immediately. It's quite readable as it is at the moment.

It works without the quotes too, but not if commas are needed in the value (or the key for that matter):

@component clockComponent
        html(/examples/clock-component.html get
            header(X-BLAHBLAH-1, value)
            header(X-BLAHBLAH-2, value2)
            header(X-BLAHBLAH-3, value3)
        )
        css(/examples/clock-component.css get)
    {
...
}
bob2517 commented 2 years ago

This issue just needs variable substitution set up and then it can be closed.

Skip any array-type header syntax setup for now - it's got a simple syntax with multiple header options and doesn't need anything more at the moment.

bob2517 commented 2 years ago

Done offline - just needs a bit more testing before commit which I'll do tomorrow.

bob2517 commented 2 years ago

Now allows variables in place of header key and values.