Feature: Add re-capture to subscribe and contact form

[gsambrotta]

As an Elliot For Water User:
When I click the Subscribe Bbutton or Contact Form Send button
Then I should be presented with the "I am not a robot" re-captcha.
https://www.google.com/recaptcha/about/

It maybe also possible to re-implement the Aniti Forgery Token using React and WebApi based on this example;
https://stackoverflow.com/questions/11476883/web-api-and-validateantiforgerytoken

Either approach would be sufficient.
Give priorities to the approach that don't automatically fill in the re-captcha and avoid the user to interact. If possible.

[karlrez]

@ElliotForWater/elliotforwater-team Hi, I've been reading over the project documentation and got the development server running. I would love to help contribute! Can I be assigned to this issue?

[gsambrotta]

@karlrez hi and thank you for your interest in contributing to Elliot For Water. I have assigned the issue to you, feel free to work on it and let me know if you have any further questions or feedbacks.

[karlrez]

@gsambrotta Hi, I just want to give an update on this and have a question about the UI.

I chose to use reCapcha v2, as it requires the user to interact more and it also generates a token which we can send to the backend: https://developers.google.com/recaptcha/intro
And I am implementing this with this react package: https://www.npmjs.com/package/react-google-recaptcha

Are you able to elaborate more on how this should look on the frontend?
Below shows the recapcha added to both subscribe forms:

Would you rather the recapcha to toggle visibility and only show when a user tries to submit their email? Do you have any suggestions on size location of the recapcha? Let me know your thoughts.

[gsambrotta]

Hi @karlrez! Happy to read about your progress. It looks good already :D

I was wondering, why did you choose reCaptchav2 Robot instead invisible one?
Seem to me that the two have the same level of security but with the invisible one the user doesn't have to do any extra action and we have more chance he/she is gonna submit the form.
Also we can hide the element so doesn't visually disturb the user

What do you think?

[karlrez]

I agree! Apologies, I guess I had misread the feature request and thought we wanted the one with more user interaction.
The invisible one is totally doable and shouldn't change the existing UI at all.