4255464dca
Created cleaner layout architecture based on user feedback: ✅ Standalone Authentication Pages: - Created AuthLayout component for login/logout pages - Login page now standalone without sidebar/header - Logout page uses clean AuthLayout 🎯 Improved Sidebar Design: - Moved profile, theme toggle, and notifications to sidebar - Added user profile section with avatar and role - Reorganized navigation with main nav + bottom nav - Proper flexbox layout for full-height sidebar 🔍 Dashboard-Specific Search: - Search bar only appears on dashboard (showSearch prop) - Removed cluttered header from other pages - Clean, focused experience per page type 📱 Better Information Architecture: - Profile info moved from header to sidebar - Theme toggle integrated into profile section - Notifications and settings in bottom nav - Consistent sidebar across all authenticated pages 🎨 Visual Improvements: - Proper flexbox layout for sidebar sections - User avatar and role display in profile section - Clean separation between main nav and utility nav - Responsive design maintained Result: Clean login experience + consistent authenticated layout! 🚀
122 lines
3.5 KiB
Markdown
122 lines
3.5 KiB
Markdown
# 🎯 TCG Vault Collaboration Testing Guide
|
|
|
|
## 👥 Test Accounts
|
|
|
|
| User | Email | Password | Role |
|
|
|------|-------|----------|------|
|
|
| Admin | `admin@tcgvault.com` | `admin123` | Admin |
|
|
| Alice | `alice@tcgvault.com` | `alice123` | User |
|
|
| Bob | `bob@tcgvault.com` | `bob123` | User |
|
|
|
|
## 🃏 Sample Cards Available
|
|
|
|
- **Lightning Bolt** (MTG) - $2.50
|
|
- **Black Lotus** (MTG) - $25,000
|
|
- **Pikachu** (Pokemon) - $8.50
|
|
- **Charizard** (Pokemon) - $350
|
|
- **Mickey Mouse** (Lorcana) - $45
|
|
- **Elsa** (Lorcana) - $15.75
|
|
|
|
## 🧪 Testing Workflow
|
|
|
|
### 1. **Login as Alice**
|
|
```
|
|
Email: alice@tcgvault.com
|
|
Password: alice123
|
|
```
|
|
|
|
### 2. **Create a Collection**
|
|
- Go to `/collections`
|
|
- Click "Create Collection"
|
|
- Fill out:
|
|
- Name: "Alice's Pokemon Collection"
|
|
- Description: "My favorite Pokemon cards"
|
|
- Image: (optional) `https://images.unsplash.com/photo-1606092195730-5d7b9af1efc5?w=1200`
|
|
- Show in Community: Toggle ON for public visibility
|
|
|
|
### 3. **Add Cards to Collection**
|
|
- Navigate to the new collection (auto-redirect after creation)
|
|
- Use "Quick Add" search in empty state
|
|
- Search for "Pikachu" and click to add
|
|
- Search for "Charizard" and click to add
|
|
- See real-time collection value updates
|
|
|
|
### 4. **Invite Bob as Collaborator**
|
|
- Click "Invite Collaborator" button
|
|
- Enter: `bob@tcgvault.com`
|
|
- Role: Collaborator (default)
|
|
- Message: "Help me build this Pokemon collection!"
|
|
- Click "Send Invitation"
|
|
|
|
### 5. **Switch to Bob's Account**
|
|
- Logout and login as Bob
|
|
- Email: `bob@tcgvault.com`
|
|
- Password: `bob123`
|
|
|
|
### 6. **Accept Invitation (Simulated)**
|
|
Since we're testing locally, simulate email acceptance:
|
|
- Go to: `/invite/accept?token=MOCK_TOKEN`
|
|
- Or manually add Bob to Alice's collection via database
|
|
|
|
### 7. **Test Collaboration**
|
|
As Bob:
|
|
- Go to `/collections` - should see Alice's collection
|
|
- Open Alice's collection
|
|
- Add more cards using Quick Add
|
|
- See Bob's activity in collaboration panel
|
|
|
|
### 8. **Test Permission Levels**
|
|
- Bob can add/edit cards (Collaborator role)
|
|
- Bob cannot delete collection (only Alice can)
|
|
- Collection shows as "Public" but editing requires invitation
|
|
|
|
## 🔧 Quick Database Commands
|
|
|
|
### Add Bob to Alice's Collection Manually:
|
|
```sql
|
|
-- Get collection ID (usually 1 for first collection)
|
|
SELECT id FROM collections WHERE name LIKE '%Alice%';
|
|
|
|
-- Add Bob as collaborator
|
|
INSERT INTO collection_permissions (collection_id, user_id, role, status)
|
|
VALUES (1, 3, 'editor', 'active');
|
|
```
|
|
|
|
### Check Users:
|
|
```bash
|
|
node scripts/list-users.js
|
|
```
|
|
|
|
## 🎯 What to Test
|
|
|
|
### ✅ Collection Management:
|
|
- [x] Create collection with image and visibility
|
|
- [x] Real-time stats (card count, value)
|
|
- [x] Only see your own collections initially
|
|
|
|
### ✅ Card Management:
|
|
- [x] Search and add cards via Quick Add
|
|
- [x] Real card data with images and prices
|
|
- [x] Collection value updates automatically
|
|
|
|
### ✅ Collaboration:
|
|
- [x] Invite collaborators with email
|
|
- [x] Permission indicators throughout UI
|
|
- [x] Activity logging for all changes
|
|
|
|
### ✅ User Experience:
|
|
- [x] Beautiful empty states with guidance
|
|
- [x] Real-time search with dropdown results
|
|
- [x] Success confirmations and navigation
|
|
- [x] Permission-based UI elements
|
|
|
|
## 🚀 Ready to Test!
|
|
|
|
The system now provides a complete, real-world testing environment with:
|
|
- Real user authentication
|
|
- Database-driven collections and cards
|
|
- Working collaboration system
|
|
- Beautiful UX with proper empty states
|
|
- Permission-based access control
|
|
|
|
Start testing by logging in as Alice and creating your first collection! 🎮
|