Update templates/menu.html

templates/menu.html

@@ -896,7 +896,7 @@
         </div>
     </div>
 
-    <!-- Avatar View Modal -->
+    <!-- Avatar View Modal (Triggered Directly from Avatar Icon) -->
     <div class="modal fade avatar-modal" id="avatarViewModal" tabindex="-1" aria-labelledby="avatarViewModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
@@ -1324,25 +1324,25 @@
                 if (deleteAvatar) deleteAvatar.remove();
             }
 
-            // Avatar click handler (show modal or dropdown)
+            // Avatar click handler (show modal directly from avatar icon)
             avatarIcon.addEventListener('click', function(event) {
                 event.stopPropagation();
                 const avatarImg = this.querySelector('.avatar-image');
                 if (avatarImg) {
-                    avatarModalImage.src = avatarImg.src;
+                    avatarModalImage.src = avatarImg.src || '/static/default-avatar.jpg'; // Fallback image
                     new bootstrap.Modal(document.getElementById('avatarViewModal')).show();
                 } else {
                     dropdownMenu.style.display = dropdownMenu.style.display === 'block' ? 'none' : 'block';
                 }
             });
 
-            // Handle image upload with 5MB limit
+            // Handle image upload with 15MB limit and error handling
             avatarUpload.addEventListener('change', function(event) {
                 const file = event.target.files[0];
                 if (file) {
-                    const maxSize = 5 * 1024 * 1024; // 5MB in bytes
+                    const maxSize = 15 * 1024 * 1024; // 15MB in bytes
                     if (file.size > maxSize) {
-                        alert('Image size must not exceed 5MB.');
+                        alert('Image size must not exceed 15MB.');
                         this.value = '';
                         return;
                     }
@@ -1356,11 +1356,14 @@
                             },
                             body: JSON.stringify({ image: base64Image })
                         })
-                        .then(response => response.json())
+                        .then(response => {
+                            if (!response.ok) throw new Error('Upload failed');
+                            return response.json();
+                        })
                         .then(data => {
                             if (data.success) {
                                 const img = document.createElement('img');
-                                img.src = data.image;
+                                img.src = data.image || '/static/default-avatar.jpg'; // Fallback image
                                 img.alt = 'User Avatar';
                                 img.className = 'avatar-image';
                                 img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
@@ -1377,14 +1380,68 @@
                                 }
                                 dropdownMenu.style.display = 'none';
                             } else {
-                                alert('Failed to upload image: ' + (data.error || 'Unknown error'));
+                                alert('Failed to upload image: ' + (data.error || 'Unknown error. Using default image.'));
+                                const img = document.createElement('img');
+                                img.src = '/static/default-avatar.jpg'; // Fallback image
+                                img.alt = 'User Avatar';
+                                img.className = 'avatar-image';
+                                img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
+                                avatarIcon.innerHTML = '';
+                                avatarIcon.appendChild(img);
+                                saveAvatar('/static/default-avatar.jpg');
+                                if (!deleteAvatar) {
+                                    const deleteItem = document.createElement('div');
+                                    deleteItem.className = 'dropdown-item delete-item';
+                                    deleteItem.id = 'deleteAvatar';
+                                    deleteItem.innerText = 'Delete Image';
+                                    dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                                    addDeleteListener(deleteItem);
+                                }
+                                dropdownMenu.style.display = 'none';
                             }
                         })
                         .catch(error => {
                             console.error('Upload error:', error);
-                            alert('Error uploading image');
+                            alert('Error uploading image. Using default image as fallback.');
+                            const img = document.createElement('img');
+                            img.src = '/static/default-avatar.jpg'; // Fallback image
+                            img.alt = 'User Avatar';
+                            img.className = 'avatar-image';
+                            img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
+                            avatarIcon.innerHTML = '';
+                            avatarIcon.appendChild(img);
+                            saveAvatar('/static/default-avatar.jpg');
+                            if (!deleteAvatar) {
+                                const deleteItem = document.createElement('div');
+                                deleteItem.className = 'dropdown-item delete-item';
+                                deleteItem.id = 'deleteAvatar';
+                                deleteItem.innerText = 'Delete Image';
+                                dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                                addDeleteListener(deleteItem);
+                            }
+                            dropdownMenu.style.display = 'none';
                         });
                     };
+                    reader.onerror = function() {
+                        alert('Error reading the image file. Using default image as fallback.');
+                        const img = document.createElement('img');
+                        img.src = '/static/default-avatar.jpg'; // Fallback image
+                        img.alt = 'User Avatar';
+                        img.className = 'avatar-image';
+                        img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%;';
+                        avatarIcon.innerHTML = '';
+                        avatarIcon.appendChild(img);
+                        saveAvatar('/static/default-avatar.jpg');
+                        if (!deleteAvatar) {
+                            const deleteItem = document.createElement('div');
+                            deleteItem.className = 'dropdown-item delete-item';
+                            deleteItem.id = 'deleteAvatar';
+                            deleteItem.innerText = 'Delete Image';
+                            dropdownMenu.insertBefore(deleteItem, dropdownMenu.querySelector('.dropdown-item:last-child'));
+                            addDeleteListener(deleteItem);
+                        }
+                        dropdownMenu.style.display = 'none';
+                    };
                     reader.readAsDataURL(file);
                 }
             });
@@ -1398,7 +1455,10 @@
                             'Content-Type': 'application/json'
                         }
                     })
-                    .then(response => response.json())
+                    .then(response => {
+                        if (!response.ok) throw new Error('Delete failed');
+                        return response.json();
+                    })
                     .then(data => {
                         if (data.success) {
                             clearAvatar();
@@ -1409,7 +1469,7 @@
                     })
                     .catch(error => {
                         console.error('Delete error:', error);
-                        alert('Error deleting image');
+                        alert('Error deleting image. Please try again.');
                     });
                 });
             }