👤 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! 👨💻✨
75 lines
No EOL
2.2 KiB
JavaScript
75 lines
No EOL
2.2 KiB
JavaScript
import { sql } from '@vercel/postgres';
|
|
import bcrypt from 'bcryptjs';
|
|
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', 'PUT, OPTIONS');
|
|
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
|
|
|
|
// Handle preflight requests
|
|
if (req.method === 'OPTIONS') {
|
|
res.status(200).end();
|
|
return;
|
|
}
|
|
|
|
if (req.method !== 'PUT') {
|
|
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' });
|
|
}
|
|
|
|
const { current_password, new_password } = req.body;
|
|
|
|
// Validate input
|
|
if (!current_password || !new_password) {
|
|
return res.status(400).json({ error: 'Current password and new password are required' });
|
|
}
|
|
|
|
if (new_password.length < 8) {
|
|
return res.status(400).json({ error: 'New password must be at least 8 characters long' });
|
|
}
|
|
|
|
// Get current user password
|
|
const userResult = await sql`
|
|
SELECT password FROM users WHERE id = ${user.userId}
|
|
`;
|
|
|
|
if (userResult.rows.length === 0) {
|
|
return res.status(404).json({ error: 'User not found' });
|
|
}
|
|
|
|
const currentHashedPassword = userResult.rows[0].password;
|
|
|
|
// Verify current password
|
|
const isCurrentPasswordValid = await bcrypt.compare(current_password, currentHashedPassword);
|
|
if (!isCurrentPasswordValid) {
|
|
return res.status(400).json({ error: 'Current password is incorrect' });
|
|
}
|
|
|
|
// Hash new password
|
|
const saltRounds = 12;
|
|
const newHashedPassword = await bcrypt.hash(new_password, saltRounds);
|
|
|
|
// Update password
|
|
await sql`
|
|
UPDATE users
|
|
SET
|
|
password = ${newHashedPassword},
|
|
updated_at = CURRENT_TIMESTAMP
|
|
WHERE id = ${user.userId}
|
|
`;
|
|
|
|
res.status(200).json({ message: 'Password updated successfully' });
|
|
|
|
} catch (error) {
|
|
console.error('Password change error:', error);
|
|
res.status(500).json({ error: 'Internal server error' });
|
|
}
|
|
}
|