2026-08-15 10:32:13 -04:00
|
|
|
import { sql } from '../../../lib/sql.js';
|
🎯 Build Comprehensive User Profile & Settings System
👤 Profile Page Features:
- Complete user profile with avatar, name, username, bio, and email
- Avatar upload with file validation (5MB limit, image types only)
- Avatar generation functionality for custom avatars
- Favorite games selection (MTG, Pokemon, Lorcana)
- Collection statistics display (total cards, collections, decks, value)
- Profile editing with real-time validation
- Member since date and role display
⚙️ Settings Page Features:
- Multi-section tabbed interface (Account, Security, Preferences, Notifications, Display)
- Account settings: email (read-only), collection visibility, preferred currency
- Security settings: password change with validation, 2FA toggle, account deletion
- Preferences: cards per page (25/50/100), default view (grid/list)
- Notifications: email notifications, marketing emails (toggle switches)
- Display settings: theme (light/dark/system), language selection
🗄️ Database Schema Updates:
- Added user profile fields: first_name, last_name, username, bio, avatar_url
- Added preference fields: favorite_games (JSONB), collection_visibility, preferred_currency, cards_per_page, default_view
- Added notification settings: notifications_email, notifications_marketing, two_factor_enabled
- Added display settings: theme, language
- Created user_settings table for complex settings
- Created user_avatars table for avatar management
- Added performance indexes and data validation constraints
📡 API Endpoints Created:
- GET/PUT /api/user/profile - Profile information management
- GET/PUT /api/user/settings - Settings and preferences management
- PUT /api/user/password - Secure password change with bcrypt validation
- GET /api/user/stats - Collection statistics and analytics
🔒 Security & Validation:
- Password change requires current password verification
- Username uniqueness validation
- Input validation for all enum fields (currency, theme, view mode, etc.)
- Proper error handling and user feedback
- Authentication required for all user endpoints
🎨 UI/UX Features:
- Beautiful fire-themed design matching app branding
- Responsive design for mobile and desktop
- Loading states and success/error messages
- Avatar placeholder with user initials
- Tabbed settings interface with icons
- Toggle switches for boolean settings
- Form validation with helpful error messages
✨ Additional Features:
- Collection stats with game/rarity breakdowns
- Recent activity tracking
- Danger zone for account deletion with double confirmation
- Member since display with formatted dates
- Currency formatting for collection values
- Game icons and themed styling throughout
The profile and settings system is now fully functional with comprehensive user management! 👨💻✨
2025-07-26 19:05:55 -04:00
|
|
|
import { getUserFromRequest } from '../../../lib/permission-middleware';
|
|
|
|
|
|
|
|
|
|
export default async function handler(req, res) {
|
|
|
|
|
if (req.method !== 'GET') {
|
|
|
|
|
return res.status(405).json({ error: 'Method not allowed' });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
// Get authenticated user
|
|
|
|
|
const user = await getUserFromRequest(req);
|
|
|
|
|
if (!user) {
|
|
|
|
|
return res.status(401).json({ error: 'Authentication required' });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Get total cards owned by user
|
|
|
|
|
const cardsResult = await sql`
|
|
|
|
|
SELECT COALESCE(SUM(quantity), 0) as total_cards
|
|
|
|
|
FROM user_cards
|
|
|
|
|
WHERE user_id = ${user.userId}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
// Get total collections owned by user
|
|
|
|
|
const collectionsResult = await sql`
|
|
|
|
|
SELECT COUNT(*) as total_collections
|
|
|
|
|
FROM collections
|
|
|
|
|
WHERE user_id = ${user.userId}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
// Get total decks owned by user
|
|
|
|
|
const decksResult = await sql`
|
|
|
|
|
SELECT COUNT(*) as total_decks
|
|
|
|
|
FROM decks
|
|
|
|
|
WHERE user_id = ${user.userId}
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
// Get total value of user's cards
|
|
|
|
|
const valueResult = await sql`
|
|
|
|
|
SELECT COALESCE(SUM(cards.market_price * user_cards.quantity), 0) as total_value
|
|
|
|
|
FROM user_cards
|
|
|
|
|
JOIN cards ON user_cards.card_id = cards.id
|
|
|
|
|
WHERE user_cards.user_id = ${user.userId}
|
|
|
|
|
AND cards.market_price IS NOT NULL
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
// Get game breakdown
|
|
|
|
|
const gameBreakdownResult = await sql`
|
|
|
|
|
SELECT
|
|
|
|
|
cards.game,
|
|
|
|
|
COUNT(DISTINCT cards.id) as unique_cards,
|
|
|
|
|
COALESCE(SUM(user_cards.quantity), 0) as total_quantity,
|
|
|
|
|
COALESCE(SUM(cards.market_price * user_cards.quantity), 0) as total_value
|
|
|
|
|
FROM user_cards
|
|
|
|
|
JOIN cards ON user_cards.card_id = cards.id
|
|
|
|
|
WHERE user_cards.user_id = ${user.userId}
|
|
|
|
|
GROUP BY cards.game
|
|
|
|
|
ORDER BY total_value DESC
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
// Get rarity breakdown
|
|
|
|
|
const rarityBreakdownResult = await sql`
|
|
|
|
|
SELECT
|
|
|
|
|
cards.rarity,
|
|
|
|
|
COUNT(DISTINCT cards.id) as unique_cards,
|
|
|
|
|
COALESCE(SUM(user_cards.quantity), 0) as total_quantity,
|
|
|
|
|
COALESCE(SUM(cards.market_price * user_cards.quantity), 0) as total_value
|
|
|
|
|
FROM user_cards
|
|
|
|
|
JOIN cards ON user_cards.card_id = cards.id
|
|
|
|
|
WHERE user_cards.user_id = ${user.userId}
|
|
|
|
|
GROUP BY cards.rarity
|
|
|
|
|
ORDER BY total_value DESC
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
// Get recent activity (last 10 cards added)
|
|
|
|
|
const recentActivityResult = await sql`
|
|
|
|
|
SELECT
|
|
|
|
|
cards.name,
|
|
|
|
|
cards.game,
|
|
|
|
|
cards.rarity,
|
|
|
|
|
cards.image_url,
|
|
|
|
|
cards.market_price,
|
|
|
|
|
user_cards.quantity,
|
|
|
|
|
user_cards.created_at
|
|
|
|
|
FROM user_cards
|
|
|
|
|
JOIN cards ON user_cards.card_id = cards.id
|
|
|
|
|
WHERE user_cards.user_id = ${user.userId}
|
|
|
|
|
ORDER BY user_cards.created_at DESC
|
|
|
|
|
LIMIT 10
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const stats = {
|
|
|
|
|
totalCards: parseInt(cardsResult.rows[0].total_cards) || 0,
|
|
|
|
|
totalCollections: parseInt(collectionsResult.rows[0].total_collections) || 0,
|
|
|
|
|
totalDecks: parseInt(decksResult.rows[0].total_decks) || 0,
|
|
|
|
|
totalValue: parseFloat(valueResult.rows[0].total_value) || 0,
|
|
|
|
|
gameBreakdown: gameBreakdownResult.rows.map(row => ({
|
|
|
|
|
game: row.game,
|
|
|
|
|
uniqueCards: parseInt(row.unique_cards),
|
|
|
|
|
totalQuantity: parseInt(row.total_quantity),
|
|
|
|
|
totalValue: parseFloat(row.total_value)
|
|
|
|
|
})),
|
|
|
|
|
rarityBreakdown: rarityBreakdownResult.rows.map(row => ({
|
|
|
|
|
rarity: row.rarity,
|
|
|
|
|
uniqueCards: parseInt(row.unique_cards),
|
|
|
|
|
totalQuantity: parseInt(row.total_quantity),
|
|
|
|
|
totalValue: parseFloat(row.total_value)
|
|
|
|
|
})),
|
|
|
|
|
recentActivity: recentActivityResult.rows.map(row => ({
|
|
|
|
|
name: row.name,
|
|
|
|
|
game: row.game,
|
|
|
|
|
rarity: row.rarity,
|
|
|
|
|
imageUrl: row.image_url,
|
|
|
|
|
marketPrice: parseFloat(row.market_price) || 0,
|
|
|
|
|
quantity: parseInt(row.quantity),
|
|
|
|
|
addedAt: row.created_at
|
|
|
|
|
}))
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
res.status(200).json(stats);
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Stats API error:', error);
|
|
|
|
|
res.status(500).json({ error: 'Internal server error' });
|
|
|
|
|
}
|
|
|
|
|
}
|