feat: Implement comprehensive onboarding system for new users

Add complete user onboarding flow that redirects new users to complete their
profile before accessing the application:

- Add onboarding_completed boolean field to users with migration
- Create OnboardingController with form validation and completion logic
- Design professional onboarding UI with progressive disclosure for company info
- Implement Stimulus controller for toggling company information section
- Add application-wide redirect middleware for incomplete users
- Create comprehensive test suite for all onboarding functionality
- Update test fixtures and helpers to support onboarding in existing tests

The onboarding collects required first/last name and optional company information.
Users are redirected to onboarding after login until profile is completed.
Features smooth animations, full-width form button, and clean UX design.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kbe
2025-09-08 11:38:28 +02:00
parent 935974b70a
commit 89bda03f45
16 changed files with 472 additions and 8 deletions

View File

@@ -30,17 +30,19 @@
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<!-- User Dropdown Menu -->
<div data-header-target="userMenu" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
<div class="px-4 py-2 text-sm text-gray-900 border-b border-gray-100">
<div class="font-medium"><%= current_user.first_name || current_user.email %></div>
<div class="text-gray-500"><%= current_user.email %></div>
</div>
<%= link_to "Profile", edit_user_registration_path,
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200" %>
<%= link_to "Reservations", "#",
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200" %>
<div class="border-t border-gray-100">
<%= link_to "Sécurité", edit_user_registration_path,
class: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors duration-200" %>
</div>
<div class="border-t border-gray-100">
<%= link_to "Sign out", destroy_user_session_path,
data: { controller: "logout", action: "click->logout#signOut", logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false },
@@ -86,11 +88,11 @@
</div>
</div>
<div class="px-2 space-y-1">
<%= link_to t("header.profile"), edit_user_registration_path,
<%= link_to "Réservations", "#",
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
<%= link_to t("header.reservations"), "#",
<%= link_to "Sécurité", edit_user_registration_path,
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
<%= link_to t("header.logout"), destroy_user_session_path,
<%= link_to "Déconnexion", destroy_user_session_path,
data: { controller: "logout", action: "click->logout#signOut", logout_url_value: destroy_user_session_path, login_url_value: new_user_session_path, turbo: false },
class: "block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-purple-200 hover:bg-purple-700" %>
</div>