search

ElliotForWater / elliotforwater.com

Webapp which run the https://elliotforwater.com/ website
https://elliotforwater.com/
MIT License
15 stars 13 forks source link

Feature: Add re-capture to subscribe and contact form #47

Closed gsambrotta closed 2 years ago

gsambrotta commented 3 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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: image

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 commented 2 years ago

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 commented 2 years ago

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.