Feature request: add support for FriendlyCaptcha

[beeb]

FriendlyCaptcha is a nice and privacy-preserving alternative to hCaptcha that doesn't require tedious actions by the user.

I would love to see this as an option for subscription forms in Keila. What's more, FriendlyCaptcha doesn't set cookies which makes it easier to embed into GDPR-compliant webpages.

[wmnnd]

Hey there, thank you for your suggestion! It sounds like an interesting idea, but it’s not currently a priority to add additional captchas to Keila. Would you be interested in contributing to this feature? I’d be happy to review a PR!

[beeb]

I could try! It's not so different from hcaptcha so I guess I could fight my way through it with copy pasting even though I don't know the language. I'll give it a go when I have some time.

[beeb]

@wmnnd how would you see this being implemented from the user's perspective? Instead of a checkbox, it would be a <select> when creating a form, with two options? What about the database, how is this stored at the moment for each form (I assume a boolean)? What would be required if the database schema changes? I'm not sure how migrations are handled etc.

That's a bit much for me to take on as a first elixir project ever I think.

The other, simpler option would be to detect what kind of site key was provided (hcatpcha vs friendlycaptcha format) and use the appropriate component. The env vars could remain HCAPTCHA_ prefixed for backwards compatibility, while supporting a new CAPTCHA_ prefix that would work for both.

Friendlycaptcha site keys are formatted as 16 capital alphanumeric characters, while hcaptcha uses UUIDs. API keys are also different, FC using 58 capital alphanumeric characters while hcaptcha uses 20 bytes in hex form with 0x prefix.

[wmnnd]

I think the best way to implement this is by making it entirely configurable with environment variables. I don’t think it’s necessary/useful for users to be able to select among multiple captcha providers from the interface. Nothing about the captcha is stored in the database except for the boolean on the form that enables/disables them.

[beeb]

@wmnnd trying to run the current state of main inside the dev container like described in the contribution guide, but mix setup fails with:

== Compilation error in file lib/keila/templates/default_template.ex ==
** (MatchError) no match of right hand side value: {:error, "expected string \"}\"", "\r\n    color: #1d4ed8;\r\n    text-decoration: underline;\r\n}\r\n\r\nh1 {\r\n    margin: 0 0 10px 0;\r\n    color: #4b5563;\r\n    font-family: inherit;\r\n    font-style: normal;\r\n    font-weight: bold;\r\n    text-decoration: none;\r\n    font-size: 30px;\r\n    line-height: 36px\r\n}\r\n\r\nh2 {\r\n    margin: 0 0 15px 0;\r\n    color: #4b5563;\r\n    font-family: inherit;\r\n    font-style: normal;\r\n    font-weight: bold;\r\n    text-decoration: none;\r\n    font-size: 25px;\r\n    line-height: 30px\r\n}\r\n\r\nh3 {\r\n    margin: 0 0 20px 0;\r\n    color: #4b5563;\r\n    font-family: inherit;\r\n    font-style: normal;\r\n    font-weight: bold;\r\n    text-decoration: none;\r\n    font-size: 18px;\r\n    line-height: 22px\r\n}\r\n\r\nul {\r\n    padding: 0;\r\n    margin: 0 0 10px 0;\r\n    list-style-type: disc;\r\n}\r\n\r\nul > li {\r\n    margin: 0 0 10px 30px\r\n}\r\n\r\nh4 {\r\n    margin: 20px 0;\r\n}\r\n\r\nh4 > a, div.keila-button {\r\n    background-color: #1d4ed8;\r\n    display: block;\r\n    cursor: pointer;\r\n    text-align: center;\r\n    border-radius: 5px;\r\n    line-height: 40px;\r\n    margin: 20px 0;\r\n}\r\n\r\nh4 > a, div.keila-button a {\r\n    display: block;\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    padding: 0 10px;\r\n}\r\n\r\ndiv.keila-button {\r\n    mso-line-height-rule: exactly;\r\n    mso-text-raise: 7px;\r\n    mso-padding-alt: 0 10px;\r\n}\r\n\r\nbody, #center-wrapper, #table-wrapper {\r\n    background-color: #f3f4f6;\r\n    font-family: Verdana, sans-serif;\r\n}\r\n\r\n#content {\r\n    font-family: inherit;\r\n    background-color: #ffffff;\r\n    color: #1f2937;\r\n}\r\n\r\n#content img {\r\n    display: inline-block;\r\n    width: 100%;\r\n    max-width: 600px;\r\n}\r\n\r\n#signature td {\r\n    color: #4b5563;\r\n    font-family: inherit;\r\n    font-style: normal;\r\n    font-weight: bold;\r\n    text-decoration: none;\r\n    text-align: left;\r\n}\r\n\r\n#signature td a {\r\n    color: #374151;\r\n    text-decoration: underline;\r\n}\r\n\r\nhr {\r\n    border-width: 1px;\r\n    border-style: solid;\r\n    border-color: inherit;\r\n    opacity: 0.1;\r\n    margin: 30px 0;\r\n}", %{}, {1, 0}, 3}
    lib/keila/templates/css.ex:25: Keila.Templates.Css.parse!/1
    lib/keila/templates/default_template.ex:11: (module)
    (elixir 1.14.4) lib/kernel/parallel_compiler.ex:340: anonymous fn/5 in Kernel.ParallelCompiler.spawn_workers/7

[beeb]

It seems this is due to CRLF line breaks in the CSS files. Is this not a problem for you? Looks like it's my VSCode which modified the line breaks.. hmm

[wmnnd]

The main branch should definitely be working; it’s currently running on keila.io and also worked fine in the CI.

[beeb]

Yep, somehow my VSCode decided to change all the line breaks, but it was easily fixed by discarding all changes.

[beeb]

PR is ready I think!