StudSec / pwncrates

A CTF framework with a focus on educational benefit.
https://ctf.studsec.nl
GNU General Public License v3.0
4 stars 8 forks source link

Reworked challenge category scripts & styling #28

Closed me-julian closed 1 year ago

me-julian commented 1 year ago

Challenges are now shown and hidden by applying/removing utility CSS classes.

Fixed the links in the challenge accordion headers so you don't need to mess with mouse events to toggle their activation. Also tried to make it more obvious they're links.

Changed styling on challenge accordion items with accordion-flush. They're now square instead of rounded, but it fixes some of the borders being absent when some items of a multi-item accordion are hidden due to difficulty filtering. There isn't a better way I can think of to fix this unless you want to reimplement a more custom solution, it's just how Boostrap handles accordions. If you did I'd start with Bootstrap collapses.

Added a back button to return to the challenge overview page from challenge categories.

Changed scripts on /challenges/:category pages to be called with HTML attributes (onChange, onSubmit, etc.). I wasn't able to test the challenge submission forms or anything while being logged in, so it's possible that's slightly broken.

Aidan-Stephenson commented 1 year ago

Looks good!

Regarding the accordion, I see the issue and I think this is a good fix given the mentioned constraints. One (slightly hacky) approach we could do is destroying/rebuilding the accordion on each filter change to only include the relevant challenges but this would both be more computationally intensive (Javascript DOM manipulation as opposed to CSS style updates) and, more importantly, require us to switch the accordion construction from Jinja2 to Javascript.

We want to (eventually) transition all Javascsript elements to the script.js file and prevent HTML attributes that invoke CSS or JS. This is done to allow for a strict CSP, limiting script/style execution to static files. But this is still a ways away and shouldn't be too hard to switch when the time comes.

As a general side note, the scripts directory contains a script to add test users, should you want to develop/test authenticated behavior.

I will probably modify it a bit after merging, the back button is a nice feature but feels redundant (to me at least) given the nav bar right next to it.