Implement email verification procedure for the email component

[sergei-maertens]

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 myname@example.com
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

• [x] Add an option to the email component requireVerification (can go in the validation nest obj I suppose)
• [x] Ensure verification button is displayed if a (valid) email is entered and the option is enabled
• [x] 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!)
• [x] Ensure that a verification email is sent (add endpoints, templates, celery task...)
• [ ] Include backend validation of the verification code

[sergei-maertens]

My notes from the estimate:

• uitbreiden email component met optie requireVerification (types, builder) in validatie tab

• backend: add model openforms.formio.models.EmailVerificationCode. Fields:

  • key (component key)
  • submission (FK to submissions.Submission)
  • code (charfield)
  • verified (true/false)
  • email (emailadres, for final validation)

  Generates a 6-char verification code on creation, exclude confusing characters. Doesn't have to be unique.

• backend: add template for sending the verification code

• backend: add endpoint to request verification code

  • input: email address, component key, submission ID
  • after basic validation: create EmailVerificationCode, render template and send email

• backend: add endpoint to verify code

  • input: component key, submission ID, code
  • when valid code provided, set verified flag to True

• SDK: when email component requires verification, add a button "Verify".

• SDK: clicking button open modal to enter code. Upon opening of modal, fire API request for a code verification creation. Show message when that is completed & render text input to enter code

• SDK: submitting code in modal calls endpoint to verify & report feedback (errors, success)

• Backend validation: if verification is required, check that the email is still the same (you can change the input after getting the verification code) & that the email was indeed verified, otherwise return validation error saying that verification is required

[sergei-maertens]

Refinement: transition from formio component/template to React button/modal is going to be a challenge.