chitfund/SIGNUP_QUICK_START.md

234 lines
5.7 KiB
Markdown

# 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)
1. **Start the backend server:**
```bash
cd backend
npm start
```
2. **Run the test script:**
```bash
node test-signup.js
```
This 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)
1. **Start the Flutter app:**
```bash
cd luckychit
flutter run
```
2. **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`
- 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 |
| Email | ❌ No | Valid email | Optional |
| Address | ❌ No | Any text | Optional |
| Emergency Contact | ❌ No | 10 digits | Optional |
---
## 📋 API Endpoint Quick Reference
### Signup
```bash
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
1. Signup with all fields filled
2. Signup with only required fields (mobile, name, password)
3. Login after signup
4. View profile after signup
### ❌ Invalid Scenarios (Should show errors)
1. Empty mobile number
2. Mobile number with less/more than 10 digits
3. Empty full name
4. Password less than 6 characters
5. Mismatched passwords
6. Invalid email format
7. 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
1. **Test the feature** using the quick test guide above
2. **Review the code** in key files listed
3. **Customize** the UI colors or validation rules if needed
4. **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! 🎉**