5.7 KiB
5.7 KiB
Signup Feature - Quick Start Guide
✅ What's Been Added
Backend (Node.js/Express)
- ✅ Public signup endpoint:
POST /api/auth/signup - ✅ Comprehensive validation (mobile, email, password)
- ✅ Automatic password hashing
- ✅ Duplicate user checking
- ✅ JWT token generation on signup
Frontend (Flutter)
- ✅ Beautiful signup screen with modern UI
- ✅ Form validation (client-side)
- ✅ Password confirmation field
- ✅ Optional fields (email, address, emergency contact)
- ✅ Navigation between login and signup screens
- ✅ Automatic login after successful signup
Documentation & Testing
- ✅ Updated API documentation
- ✅ Test script for backend validation
- ✅ Implementation guide
- ✅ Quick start guide (this file)
🚀 Quick Test
Test the Backend (3 minutes)
-
Start the backend server:
cd backend npm start -
Run the test script:
node test-signup.jsThis will automatically:
- Create a new user account
- Test login with the new account
- Retrieve the profile
- Test validation errors
- Show all results in the console
Test the Frontend (5 minutes)
-
Start the Flutter app:
cd luckychit flutter run -
Manual testing:
- On login screen, tap "Sign Up"
- Fill in the form:
- Mobile: Any 10-digit number (e.g.,
9123456789) - Full Name:
Test User - Password:
test123456 - Confirm Password:
test123456
- Mobile: Any 10-digit number (e.g.,
- Tap "Sign Up" button
- You should be logged in automatically!
📱 User Experience Flow
Login Screen
↓ (Tap "Sign Up")
Signup Screen
↓ (Fill form + Submit)
Account Created
↓ (Auto login)
Member Dashboard
🎨 UI Features
Signup Screen Includes:
- 📱 Mobile Number field (required, 10 digits)
- 👤 Full Name field (required)
- 📧 Email field (optional)
- 🏠 Address field (optional, multi-line)
- ☎️ Emergency Contact field (optional, 10 digits)
- 🔒 Password field (required, min 6 chars, with visibility toggle)
- 🔒 Confirm Password field (required, must match)
- ✨ Real-time validation
- 🎯 Loading indicator during submission
- ✅ Success/error messages
🔐 Validation Rules Summary
| Field | Required | Format | Notes |
|---|---|---|---|
| Mobile Number | ✅ Yes | 10 digits | Must be unique |
| Full Name | ✅ Yes | Any text | - |
| Password | ✅ Yes | Min 6 chars | Auto-hashed |
| ❌ No | Valid email | Optional | |
| Address | ❌ No | Any text | Optional |
| Emergency Contact | ❌ No | 10 digits | Optional |
📋 API Endpoint Quick Reference
Signup
POST http://localhost:3000/api/auth/signup
# Minimal request
{
"mobile_number": "9123456789",
"full_name": "John Doe",
"password": "secret123"
}
# Full request with optional fields
{
"mobile_number": "9123456789",
"full_name": "John Doe",
"password": "secret123",
"email": "john@example.com",
"address": "123 Main St",
"emergency_contact": "9876543210"
}
⚡ Common Issues & Solutions
Backend Issues
Issue: "User with this mobile number already exists"
- Solution: Use a different mobile number or login with existing credentials
Issue: "Mobile number must be exactly 10 digits"
- Solution: Ensure mobile number is exactly 10 digits (no spaces, hyphens, or +91)
Issue: "Password must be at least 6 characters long"
- Solution: Use a password with 6 or more characters
Frontend Issues
Issue: "Passwords do not match"
- Solution: Ensure both password fields have the same value
Issue: Cannot navigate to signup screen
- Solution: Ensure you've imported the signup screen in login_screen.dart
Issue: "Please enter a valid email address"
- Solution: Use proper email format (e.g., user@example.com) or leave it empty
🧪 Test Scenarios to Try
✅ Valid Scenarios
- Signup with all fields filled
- Signup with only required fields (mobile, name, password)
- Login after signup
- View profile after signup
❌ Invalid Scenarios (Should show errors)
- Empty mobile number
- Mobile number with less/more than 10 digits
- Empty full name
- Password less than 6 characters
- Mismatched passwords
- Invalid email format
- Duplicate mobile number (signup twice with same number)
📁 Key Files to Review
Backend
backend/src/controllers/authController.js (Line 17-114: signup function)
backend/src/routes/auth.js (Line 7: signup route)
backend/test-signup.js (Complete test suite)
Frontend
luckychit/lib/features/auth/views/signup_screen.dart (Complete signup UI)
luckychit/lib/features/auth/views/login_screen.dart (Line 228: signup link)
luckychit/lib/core/services/auth_service.dart (Line 64-109: signup method)
luckychit/lib/core/services/api_service.dart (Line 58-80: signup API)
🎯 Next Steps
- Test the feature using the quick test guide above
- Review the code in key files listed
- Customize the UI colors or validation rules if needed
- Deploy when ready!
💡 Pro Tips
- The signup automatically logs in the user (returns JWT token)
- New users are always created with
role: 'member' - Managers can still use the existing "Create Member" feature
- All passwords are securely hashed with bcrypt
- Mobile numbers must be unique across the system
- The test script uses random mobile numbers to avoid conflicts
📞 Need Help?
Check these files for detailed information:
- Full implementation details:
SIGNUP_FEATURE_IMPLEMENTATION.md - API documentation:
backend/API_DOCUMENTATION.md - Test script output: Run
node backend/test-signup.js
Happy Testing! 🎉