Ensure users have real, valid emails

[taylordowns2000]

Appetite: 3 days

Context:
After a user signs up, we send them an email to verify their account by clicking a link. Clicking this link allows us to verify users and ensure that all users on the platform have signed up with their emails. At the moment, don't check to ensure that every user has confirmed their email, and when they haven't, we can't enforce the user.

Solution:
The goal of this project is to ensure that users confirm their account within 48 hours of signing up to their account. To validate if a user has confirmed their account, we will check the confirmed_at column in the users table to see if it is not null. The default state of the users.confirmed_at is null otherwise, the field will have the timestamp of when the user confirmed their account.

When the user has not confirmed their email within 48 hours of creating an account, we should show them a danger banner at the top of the page. (For the banner, please see OpenFn Spec).

After 48 hours, we will block access to their projects and the user can request that we resend the confirmation email. Here is how we currently send the confirmation email to users. We don't need to change how deliver_user_confirmation_instructions works at the moment, we should ensure that we can call this function when a user requests that we resend the confirmation email.

• The behaviour needs to exist across all routes, note that you're not adding a common.alert to the top of each component
• Note that the banner uses the common component and the action is to request a resend of the confirmation email.
• You are using the same pattern as we do to display the "past your run limit" alert banner which possibly lives in the route template for liveview... it's outside the component. (Might be slot?)

When the user is blocked:
Unless they are viewing the /profile route, the user cannot see anything but the "your account needs verifying" modal. They should ONLY be able to ask that we resend the user confirmation email or navigate to /profile so that they can change their email. As soon as the user is confirmed, they can do as much as they'd love to. When this happens, we need to protect the paths and routes so that the users don't bypass the block screen.

• Confirm that all signup flows have email confirmation set up
• Display an info alert telling the user that confirmation is pending on their account
• Resend the confirmation email when the user clicks the resend button
• Block user's actions if the user has not confirmed their emails after 48hours of signing up.
• Ensure that the user can still navigate to /profile and change their email address.

https://www.figma.com/design/4hGWdO4sajnjcOwE81j8BK/App-(new)?node-id=4692-1206&t=wyW6Zg0T2S9ClNT1-0

Things to be careful of

• The IDE doesn't currently accommodate various screen sizes. There is a risk that when the banner pushes everything down, it won't fill the remaining screen height, instead it will get cut off. Please be careful about this and come up with some not terrible solution.