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:
25
app/javascript/controllers/toggle_section_controller.js
Normal file
25
app/javascript/controllers/toggle_section_controller.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Controller } from "@hotwired/stimulus"
|
||||
|
||||
// Connects to data-controller="toggle-section"
|
||||
export default class extends Controller {
|
||||
static targets = ["section", "icon"]
|
||||
|
||||
connect() {
|
||||
// Ensure the section starts hidden
|
||||
this.sectionTarget.classList.add("hidden")
|
||||
}
|
||||
|
||||
toggle() {
|
||||
const isHidden = this.sectionTarget.classList.contains("hidden")
|
||||
|
||||
if (isHidden) {
|
||||
// Show the section
|
||||
this.sectionTarget.classList.remove("hidden")
|
||||
this.iconTarget.classList.add("rotate-180")
|
||||
} else {
|
||||
// Hide the section
|
||||
this.sectionTarget.classList.add("hidden")
|
||||
this.iconTarget.classList.remove("rotate-180")
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user