My Profile - CustomVinylzz

✓ Success! Your profile has been updated.

✗ Error! Something went wrong. Please try again.

Basic Information

First Name

Last Name

Email Address

Phone Number

Company (Optional)

Default Shipping Address

Street Address

Apartment, Suite, etc. (Optional)

City

State

ZIP Code

Country

Notifications

Email Notifications

Receive updates about your orders via email

Order Updates

Get notified when your order status changes

Marketing Emails

Receive special offers and promotions

Design Inspiration

Weekly newsletter with design tips and trends

Display Preferences

Auto-save Designs

Automatically save your work in the design lab

High Quality Preview

Use high-resolution 3D previews (may be slower)

Two-Factor Authentication

Add an extra layer of security to your account

Danger Zone

Once you delete your account, there is no going back. Please be certain.

// API Configuration const AUTH_API = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' ? 'http://localhost:3001' : 'https://customvinylzz.com/api'; // Load user data async function loadUserData() { const authToken = localStorage.getItem('authToken'); if (!authToken) { window.location.href = '../auth.html'; return; } try { // Fetch profile const profileResponse = await fetch(`${AUTH_API}/user/profile`, { headers: { 'Authorization': `Bearer ${authToken}` } }); if (profileResponse.ok) { const data = await profileResponse.json(); const user = data.user; // Update profile display const firstName = user.firstName || 'User'; const lastName = user.lastName || ''; const email = user.email || ''; document.getElementById('profileName').textContent = `${firstName} ${lastName}`; document.getElementById('profileEmail').textContent = email; // Set initials const initials = `${firstName.charAt(0)}${lastName.charAt(0) || ''}`.toUpperCase(); document.getElementById('avatarInitials').textContent = initials; // Populate form fields document.getElementById('firstName').value = firstName; document.getElementById('lastName').value = lastName; document.getElementById('email').value = email; // Note: Phone and Company are currently not stored in backend profile // We check if we have them in local storage for continuity const localUser = JSON.parse(localStorage.getItem('user') || '{}'); if (localUser.phone) document.getElementById('phone').value = localUser.phone; if (localUser.company) document.getElementById('company').value = localUser.company; // Store updated user in local storage for other pages localStorage.setItem('user', JSON.stringify({ ...localUser, ...user })); } // Fetch Stats (Orders) const ordersResponse = await fetch(`${AUTH_API}/user/orders?limit=1`, { headers: { 'Authorization': `Bearer ${authToken}` } }); if (ordersResponse.ok) { const ordersData = await ordersResponse.json(); // If the API returns a total count header or property, use it. // Otherwise this might just be 50 recent orders. // For now, let's assume if array length is 50, there might be more, but we can only show what we have // Or ideally the API should return { orders: [], total: X } // Our current implementation returns { orders: [...] } // We'll just count what we get for now or fetch all IDs if possible document.getElementById('totalOrders').textContent = ordersData.orders ? ordersData.orders.length : 0; } // Fetch Stats (Designs) const designsResponse = await fetch(`${AUTH_API}/user/designs`, { headers: { 'Authorization': `Bearer ${authToken}` } }); if (designsResponse.ok) { const designsData = await designsResponse.json(); document.getElementById('totalDesigns').textContent = designsData.designs ? designsData.designs.length : 0; } } catch (error) { console.error('Error loading profile:', error); } } function switchTab(tabName) { // Update buttons document.querySelectorAll('.nav-tab').forEach(btn => btn.classList.remove('active')); event.target.classList.add('active'); // Update content document.querySelectorAll('.tab-content').forEach(content => { content.classList.remove('active'); }); document.getElementById(tabName + 'Tab').classList.add('active'); } async function savePersonalInfo(event) { event.preventDefault(); const authToken = localStorage.getItem('authToken'); const firstName = document.getElementById('firstName').value; const lastName = document.getElementById('lastName').value; const phone = document.getElementById('phone').value; const company = document.getElementById('company').value; try { const response = await fetch(`${AUTH_API}/user/profile`, { method: 'PUT', headers: { 'Authorization': `Bearer ${authToken}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ firstName, lastName }) }); if (response.ok) { const data = await response.json(); // Update local storage for non-synced fields (phone/company) const localUser = JSON.parse(localStorage.getItem('user') || '{}'); localStorage.setItem('user', JSON.stringify({ ...localUser, ...data.user, phone, company })); loadUserData(); // Refresh display showMessage('success'); } else { const error = await response.json(); alert(`Failed to update profile: ${error.error}`); showMessage('error'); } } catch (error) { console.error('Error updating profile:', error); showMessage('error'); } } function saveShipping(event) { event.preventDefault(); const shippingData = { address1: document.getElementById('address1').value, address2: document.getElementById('address2').value, city: document.getElementById('city').value, state: document.getElementById('state').value, zip: document.getElementById('zip').value, country: document.getElementById('country').value }; localStorage.setItem('shippingAddress', JSON.stringify(shippingData)); showMessage('success'); } async function changePassword(event) { event.preventDefault(); const currentPassword = document.getElementById('currentPassword').value; const newPassword = document.getElementById('newPassword').value; const confirmPassword = document.getElementById('confirmPassword').value; const authToken = localStorage.getItem('authToken'); if (newPassword !== confirmPassword) { alert('Passwords do not match!'); return; } try { const response = await fetch(`${AUTH_API}/user/password`, { method: 'PUT', headers: { 'Authorization': `Bearer ${authToken}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ currentPassword, newPassword }) }); if (response.ok) { showMessage('success'); document.getElementById('passwordForm').reset(); } else { const error = await response.json(); alert(`Failed to change password: ${error.error}`); showMessage('error'); } } catch (error) { console.error('Error changing password:', error); showMessage('error'); } } function savePreference(key, value) { const preferences = JSON.parse(localStorage.getItem('preferences') || '{}'); preferences[key] = value; localStorage.setItem('preferences', JSON.stringify(preferences)); console.log(`Preference saved: ${key} = ${value}`); } function resetForm(formId) { document.getElementById(formId).reset(); loadUserData(); } function showMessage(type) { const successMsg = document.getElementById('successMessage'); const errorMsg = document.getElementById('errorMessage'); if (type === 'success') { successMsg.classList.add('show'); setTimeout(() => successMsg.classList.remove('show'), 3000); } else { errorMsg.classList.add('show'); setTimeout(() => errorMsg.classList.remove('show'), 3000); } } function handleAvatarUpload(event) { const file = event.target.files[0]; if (file) { // In production, upload to server console.log('Avatar uploaded:', file.name); alert('Avatar upload functionality would be implemented here!'); } } function enable2FA() { alert('Two-Factor Authentication setup would be implemented here!\n\nThis would typically involve:\n1. Scanning a QR code\n2. Entering a verification code\n3. Saving backup codes'); } async function deleteAccount() { if (confirm('Are you absolutely sure you want to delete your account?\n\nThis action cannot be undone and all your data will be permanently deleted.')) { // Prompt for password const password = prompt("Please enter your password to confirm account deletion:"); if (password === null) return; // Users cancelled try { const authToken = localStorage.getItem('authToken'); const response = await fetch(`${AUTH_API}/user/account`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${authToken}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ password }) }); if (response.ok) { alert('Your account has been deleted.'); localStorage.clear(); window.location.href = '../index.html'; } else { const error = await response.json(); alert(`Failed to delete account: ${error.error}`); } } catch (error) { console.error('Delete account error:', error); alert('Failed to delete account. Please try again.'); } } } // Initialize window.addEventListener('DOMContentLoaded', loadUserData);