deckhearth/pages/api/user/profile.js
Randall Stillwell afec905856 🎯 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 18:05:55 -05:00

124 lines
No EOL
3.8 KiB
JavaScript

import { sql } from '@vercel/postgres';
import { getUserFromRequest } from '../../../lib/permission-middleware';
export default async function handler(req, res) {
// Set CORS headers
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, PUT, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
// Handle preflight requests
if (req.method === 'OPTIONS') {
res.status(200).end();
return;
}
try {
// Get authenticated user
const user = await getUserFromRequest(req);
if (!user) {
return res.status(401).json({ error: 'Authentication required' });
}
if (req.method === 'GET') {
// Get user profile
const result = await sql`
SELECT
id, email, role, first_name, last_name, username, bio, avatar_url,
favorite_games, collection_visibility, preferred_currency,
cards_per_page, default_view, notifications_email,
notifications_marketing, two_factor_enabled, theme, language,
created_at, updated_at
FROM users
WHERE id = ${user.userId}
`;
if (result.rows.length === 0) {
return res.status(404).json({ error: 'User not found' });
}
const userProfile = result.rows[0];
// Parse JSON fields
if (userProfile.favorite_games && typeof userProfile.favorite_games === 'string') {
try {
userProfile.favorite_games = JSON.parse(userProfile.favorite_games);
} catch (e) {
userProfile.favorite_games = ['MTG'];
}
}
res.status(200).json(userProfile);
} else if (req.method === 'PUT') {
// Update user profile
const {
first_name,
last_name,
username,
bio,
favorite_games
} = req.body;
// Validate username uniqueness if provided
if (username) {
const existingUser = await sql`
SELECT id FROM users
WHERE username = ${username} AND id != ${user.userId}
`;
if (existingUser.rows.length > 0) {
return res.status(400).json({ error: 'Username already taken' });
}
}
// Validate favorite_games format
if (favorite_games && !Array.isArray(favorite_games)) {
return res.status(400).json({ error: 'favorite_games must be an array' });
}
// Update user profile
const result = await sql`
UPDATE users
SET
first_name = ${first_name || null},
last_name = ${last_name || null},
username = ${username || null},
bio = ${bio || null},
favorite_games = ${favorite_games ? JSON.stringify(favorite_games) : null},
updated_at = CURRENT_TIMESTAMP
WHERE id = ${user.userId}
RETURNING
id, email, role, first_name, last_name, username, bio, avatar_url,
favorite_games, collection_visibility, preferred_currency,
cards_per_page, default_view, notifications_email,
notifications_marketing, two_factor_enabled, theme, language,
created_at, updated_at
`;
if (result.rows.length === 0) {
return res.status(404).json({ error: 'User not found' });
}
const updatedProfile = result.rows[0];
// Parse JSON fields
if (updatedProfile.favorite_games && typeof updatedProfile.favorite_games === 'string') {
try {
updatedProfile.favorite_games = JSON.parse(updatedProfile.favorite_games);
} catch (e) {
updatedProfile.favorite_games = ['MTG'];
}
}
res.status(200).json(updatedProfile);
} else {
res.status(405).json({ error: 'Method not allowed' });
}
} catch (error) {
console.error('Profile API error:', error);
res.status(500).json({ error: 'Internal server error' });
}
}