Create account

[vanderburgt]

As a Bron user,
I want a simple and intuitive onboarding process to create an account on Bron,
so that I can quickly start using the platform without confusion or delays.

Acceptance Criteria:

1. Step 1: Enter email (Screen 1)

   • Users are prompted to enter their work email address to create an account.
   • The email input field must validate the format of the email (e.g., [email protected]) and display an error if the format is incorrect.
   • If the user enters an invalid email, an error message appears below the field, e.g., "Dit is geen geldig e-mailadres."
   • Once a valid email is entered, the user can click the “Maak account aan” button to proceed.
   • A link to log in is provided below for users who already have an account, redirecting them to the login page.

2. Step 2: Email verification (Screen 2)

   • After submitting the email, users see a confirmation message stating that a verification email has been sent.
   • The message includes instructions to check their inbox and click the link in the email to activate the account.
   • If the user doesn’t receive the email, instructions to "Resend verification email" are available, with a visible link/button to trigger a resend.
   • The system should only send a new verification email after a reasonable delay (e.g., 30 seconds) to avoid abuse.

3. Step 3: Set password (Screen 3)

   • After email verification, users are directed to a screen where they can create a password for their account.
   • The password strength is calculated with every value change of the field and the password strength bar is updated accordingly (<30% red, 30-60% orange, >60% green). When password strength is >60% a green checkmark appears in the first password input field.
   • Users must confirm their password by re-entering it in a second field. If the passwords match, a green checkmark appears in the second password input field.
   • If the passwords do not match, a validation message will appear under the second field, e.g., "De wachtwoorden zijn niet gelijk."
   • Once both fields are correctly filled and match, the user can click “Afronden” to complete the onboarding process.

4. Completion & Redirection:

   • Upon successful password creation, the user is automatically redirected to the homepage (Home page #190).
   • The system logs the user in and provides access to the full functionality of the platform, including their personalized homepage.

Error Handling & Security:

• Throttling or CAPTCHA should be used if multiple invalid attempts are made during email validation or password creation to prevent brute-force attacks.
• Inform users of any time-limited activation links in the email (e.g., "This link will expire in 24 hours").

Additional information

• Figma design: https://www.figma.com/design/DGmaMIpN4QJd0nhp4oir1g/Bron-Wireframing?node-id=135-420&t=ap9BNAJ25KUpHuci-4
• Screenshot: