open-forms icon indicating copy to clipboard operation
open-forms copied to clipboard

Implement email verification procedure for the email component

Open sergei-maertens opened this issue 7 months ago • 2 comments

Taiga DH 684, business case "WMV", needs to be added to intranet still

To address mistakes in provided email addresses, we need to add an (optional) email verification flow for forms where the email address is crucial. The goals are:

  • ensure that the user filling out the form does not enter wrong data and actually has access to the email account
  • prevent forms from being submitted if the email is not verified

The verification process happens during the form filling, not after the form is submitted (different from typical user signup flows).

User interaction

  1. User encounters an email account that requires verification, they enter [email protected]
  2. They click the button "send verification code" next to the email input field
  3. a modal opens with a text input to enter the verification code + a descriptive text "that an email is being sent and it can take a couple of seconds for it to arrive. Please make sure to check your spam box yada yada..."
  4. User enters verification code - we keep track of it in the submission in the SDK and send it in with the form step submit
  5. if the code is wrong or not provided (modal dismissed), then we show a validation error with the email component that verification is required

Imlementation

  • [ ] Add an option to the email component requireVerification (can go in the validation nest obj I suppose)
  • [ ] Ensure verification button is displayed if a (valid) email is entered and the option is enabled
  • [ ] When verification is triggered, generate a code in the backend and save it along with the value of the email address, linked to the submission (note: we verify a particular email, not a component, consider changing the email value after verifying it!)
  • [ ] Ensure that a verification email is sent (add endpoints, templates, celery task...)
  • [ ] Save the verification code on submission
  • [ ] Include backend validation of the verification code

sergei-maertens avatar Jul 22 '24 07:07 sergei-maertens