| 1 | // Handcraft Marketplace - Main JavaScript
|
|---|
| 2 |
|
|---|
| 3 | // Utility Functions
|
|---|
| 4 | function showMessage(message, type = 'info') {
|
|---|
| 5 | const messageDiv = document.createElement('div');
|
|---|
| 6 | messageDiv.className = `message message-${type}`;
|
|---|
| 7 | messageDiv.textContent = message;
|
|---|
| 8 | messageDiv.style.cssText = `
|
|---|
| 9 | position: fixed;
|
|---|
| 10 | top: 20px;
|
|---|
| 11 | right: 20px;
|
|---|
| 12 | padding: 1rem;
|
|---|
| 13 | background: ${type === 'success' ? 'var(--success)' : type === 'error' ? 'var(--danger)' : 'var(--info)'};
|
|---|
| 14 | color: white;
|
|---|
| 15 | border-radius: 5px;
|
|---|
| 16 | z-index: 2000;
|
|---|
| 17 | animation: slideIn 0.3s ease;
|
|---|
| 18 | `;
|
|---|
| 19 | document.body.appendChild(messageDiv);
|
|---|
| 20 | setTimeout(() => {
|
|---|
| 21 | messageDiv.remove();
|
|---|
| 22 | }, 3000);
|
|---|
| 23 | }
|
|---|
| 24 |
|
|---|
| 25 | function formatDate(dateString) {
|
|---|
| 26 | const date = new Date(dateString);
|
|---|
| 27 | return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
|
|---|
| 28 | }
|
|---|
| 29 |
|
|---|
| 30 | function formatCurrency(amount) {
|
|---|
| 31 | return '$' + parseFloat(amount).toFixed(2);
|
|---|
| 32 | }
|
|---|
| 33 |
|
|---|
| 34 | // Check authentication status
|
|---|
| 35 | async function checkAuth() {
|
|---|
| 36 | try {
|
|---|
| 37 | const response = await fetch('/api/user');
|
|---|
| 38 | const data = await response.json();
|
|---|
| 39 | return data;
|
|---|
| 40 | } catch (error) {
|
|---|
| 41 | console.error('Auth check failed:', error);
|
|---|
| 42 | return { success: false };
|
|---|
| 43 | }
|
|---|
| 44 | }
|
|---|
| 45 |
|
|---|
| 46 | // Logout function
|
|---|
| 47 | async function logout() {
|
|---|
| 48 | try {
|
|---|
| 49 | const response = await fetch('/api/logout', {
|
|---|
| 50 | method: 'POST'
|
|---|
| 51 | });
|
|---|
| 52 | const data = await response.json();
|
|---|
| 53 | if (data.success) {
|
|---|
| 54 | window.location.href = 'index.html';
|
|---|
| 55 | }
|
|---|
| 56 | } catch (error) {
|
|---|
| 57 | console.error('Logout failed:', error);
|
|---|
| 58 | }
|
|---|
| 59 | }
|
|---|
| 60 |
|
|---|
| 61 | // Load user data for dashboard
|
|---|
| 62 | async function loadUserData() {
|
|---|
| 63 | const auth = await checkAuth();
|
|---|
| 64 | if (!auth.success) {
|
|---|
| 65 | window.location.href = 'login.html';
|
|---|
| 66 | return null;
|
|---|
| 67 | }
|
|---|
| 68 | return auth.user;
|
|---|
| 69 | }
|
|---|
| 70 |
|
|---|
| 71 | // Initialize page based on user type
|
|---|
| 72 | document.addEventListener('DOMContentLoaded', async () => {
|
|---|
| 73 | // Check if we're on a protected page
|
|---|
| 74 | const protectedPages = ['dashboard.html', 'admin.html', 'store-owner.html', 'store-employee.html', 'client-dashboard.html'];
|
|---|
| 75 | const currentPage = window.location.pathname.split('/').pop();
|
|---|
| 76 |
|
|---|
| 77 | if (protectedPages.includes(currentPage)) {
|
|---|
| 78 | const user = await loadUserData();
|
|---|
| 79 | if (user) {
|
|---|
| 80 | // Verify user has access to this page
|
|---|
| 81 | if (currentPage === 'admin.html' && user.userType !== 'admin') {
|
|---|
| 82 | window.location.href = 'index.html';
|
|---|
| 83 | } else if (currentPage === 'store-owner.html' && user.userType !== 'store_owner') {
|
|---|
| 84 | window.location.href = 'index.html';
|
|---|
| 85 | } else if (currentPage === 'store-employee.html' && user.userType !== 'store_employee') {
|
|---|
| 86 | window.location.href = 'index.html';
|
|---|
| 87 | } else if (currentPage === 'client-dashboard.html' && user.userType !== 'client') {
|
|---|
| 88 | window.location.href = 'index.html';
|
|---|
| 89 | }
|
|---|
| 90 | }
|
|---|
| 91 | }
|
|---|
| 92 |
|
|---|
| 93 | // Add logout button to header if logged in
|
|---|
| 94 | const auth = await checkAuth();
|
|---|
| 95 | if (auth.success) {
|
|---|
| 96 | const nav = document.querySelector('nav ul');
|
|---|
| 97 | if (nav && !document.getElementById('logout-btn')) {
|
|---|
| 98 | const logoutLi = document.createElement('li');
|
|---|
| 99 | logoutLi.innerHTML = '<a href="#" id="logout-btn" style="color: var(--danger);">Logout</a>';
|
|---|
| 100 | nav.appendChild(logoutLi);
|
|---|
| 101 |
|
|---|
| 102 | document.getElementById('logout-btn').addEventListener('click', (e) => {
|
|---|
| 103 | e.preventDefault();
|
|---|
| 104 | logout();
|
|---|
| 105 | });
|
|---|
| 106 | }
|
|---|
| 107 | }
|
|---|
| 108 | });
|
|---|
| 109 |
|
|---|
| 110 | // Add animation styles
|
|---|
| 111 | const style = document.createElement('style');
|
|---|
| 112 | style.textContent = `
|
|---|
| 113 | @keyframes slideIn {
|
|---|
| 114 | from {
|
|---|
| 115 | transform: translateX(100%);
|
|---|
| 116 | opacity: 0;
|
|---|
| 117 | }
|
|---|
| 118 | to {
|
|---|
| 119 | transform: translateX(0);
|
|---|
| 120 | opacity: 1;
|
|---|
| 121 | }
|
|---|
| 122 | }
|
|---|
| 123 |
|
|---|
| 124 | .message {
|
|---|
| 125 | box-shadow: 0 3px 10px rgba(0,0,0,0.2);
|
|---|
| 126 | }
|
|---|
| 127 |
|
|---|
| 128 | .message-success {
|
|---|
| 129 | background: linear-gradient(135deg, var(--success) 0%, #34CE57 100%);
|
|---|
| 130 | }
|
|---|
| 131 |
|
|---|
| 132 | .message-error {
|
|---|
| 133 | background: linear-gradient(135deg, var(--danger) 0%, #FF6B6B 100%);
|
|---|
| 134 | }
|
|---|
| 135 |
|
|---|
| 136 | .message-info {
|
|---|
| 137 | background: linear-gradient(135deg, var(--light-blue) 0%, var(--pink) 100%);
|
|---|
| 138 | }
|
|---|
| 139 | `;
|
|---|
| 140 | document.head.appendChild(style); |
|---|