[REG-101] Registration Flow for CraftMerge Platform

[mehalyna]

🎯 Story Overview

As a
New user (representing a company or startup seeking investment),

I want to
register on the CraftMerge platform by completing a form with validation and confirmation steps,

So that I can
create an account to access services tailored to my business profile and investment needs.

---

✅ Acceptance Criteria

#	Criteria
1	All required fields must be clearly marked with an asterisk *.
2	The form should include the following fields: - Company Name - Email - Password + Confirm Password - Last Name - First Name - Representative Type - Business Entity Type
3	Submission must be blocked until all required fields are completed.
4	Password must contain uppercase, lowercase, numbers, and meet length rules.
5	Inline error messages must be displayed for each invalid or empty field.
6	Duplicate email should trigger: Ця електронна пошта вже зареєстрована.
7	Password mismatch should show: Паролі не співпадають.
8	Invalid format password should show: Пароль не відповідає вимогам.
9	After successful submission, show: Реєстрація майже завершена with email confirmation instructions.
10	Allow resending of activation email with valid email entry.
11	Зареєструватися button must remain disabled until validations pass.
12	Увійти button must redirect to the login screen.

---

🖌️ UI/UX Notes

• Real-time form validation with red border and message for invalid inputs.
• User cannot proceed without selecting at least one option in Who are you representing and Type of entity.
• Final confirmation screen is clean and minimal, focusing user attention on email confirmation.
• A fallback screen allows resending the confirmation email.

---

🔗 Dependencies

• Email uniqueness check API
• Password policy/strength validator
• Email delivery system for sending confirmation emails
• Frontend validation library (if used)

---

📎 Example Screens from UI Mockups

Step	Description
✅ Registration Form	User enters details, required field marked
❌ Validation Errors	Fields turn red with error messages if invalid
❌ Email Exists	Warning if email already in use
❌ Password Mismatch	User gets immediate feedback
❌ Password Policy	Message shown if password doesn't meet criteria
⏳ Confirmation Sent	Message prompting user to check email
🔁 Resend Email	Fallback in case user did not receive email

---

🧭 Navigation

• Зареєструватися → Validates form → Triggers email confirmation flow
• Увійти → Redirects to login page
• Повернутись до входу → Returns user to main login screen
• Activation fallback screen accessible if user didn’t receive email

---

📌 Notes

• Form is multilingual ready (currently in Ukrainian).
• Aligns with security best practices (no weak passwords, avoids email enumeration beyond messaging).
• UX designed for accessibility on mobile and desktop devices.

🔧 Sub-tasks for REG-101: User Registration Flow

🛠 Frontend Implementation

• REG-101-1: Design and implement registration form layout (responsive, mobile-first)
• REG-101-2: Create input fields for:
  • Company Name
  • Email
  • Password
  • Confirm Password
  • First Name
  • Last Name
  • Representative Type (radio buttons or dropdown)
  • Business Entity Type (radio buttons or dropdown)
• REG-101-3: Add visual indicators for required fields (*)
• REG-101-4: Add client-side validation logic:
  • Required fields
  • Password rules
  • Password confirmation
• REG-101-5: Display inline error messages dynamically based on input state
• REG-101-6: Disable “Зареєструватися” button until all validations pass
• REG-101-7: Implement redirect from “Увійти” to login screen

---

🧪 Backend Integration

• REG-101-8: Create API endpoint for user registration
• REG-101-9: Implement server-side email uniqueness check with response handling
• REG-101-10: Enforce password policy server-side and return structured error if invalid
• REG-101-11: Generate activation token and send email upon registration
• REG-101-12: Create endpoint to resend activation email by email input

---

✅ Confirmation & Fallback Screens

• REG-101-13: Implement confirmation screen: Реєстрація майже завершена
• REG-101-14: Build fallback screen to resend confirmation email
• REG-101-15: Add success and error handling for resend request

---

🧪 QA & Testing

• REG-101-16: Write unit tests for frontend form validation logic
• REG-101-17: Write integration tests for registration endpoint
• REG-101-18: Perform cross-browser and mobile responsiveness testing
• REG-101-19: Verify email delivery and activation flow

---

📄 Documentation

• REG-101-20: Document API endpoints for registration and resend activation
• REG-101-21: Update user onboarding documentation in the product wiki