From 7ca31ee604142d8955f16af6801f0b636fb1b522 Mon Sep 17 00:00:00 2001 From: Christian Rute Date: Thu, 14 Nov 2024 17:43:37 +0100 Subject: [PATCH] add Error Alert + design changes --- client/admin.html | 6 +-- client/css/styles.css | 84 +++++++++++++++++++++++++++++++++++ client/index.html | 12 ++++- client/js/auth.js | 24 ++++++++-- client/js/chat.js | 10 ++++- client/js/main.js | 26 ++++++----- client/js/shared_functions.js | 19 ++++++++ client/welcome.html | 13 ++++-- 8 files changed, 171 insertions(+), 23 deletions(-) create mode 100644 client/js/shared_functions.js diff --git a/client/admin.html b/client/admin.html index f033f60..30b61dc 100644 --- a/client/admin.html +++ b/client/admin.html @@ -14,7 +14,7 @@
- +
@@ -23,7 +23,7 @@
- - + + diff --git a/client/css/styles.css b/client/css/styles.css index 5066408..690e554 100644 --- a/client/css/styles.css +++ b/client/css/styles.css @@ -236,6 +236,7 @@ main { /* Kleinere Sendetaste */ .chat-send-button { + margin: 0.5rem; padding: 8px 12px; /* Kleinere Abmessungen */ background-color: #007bff; color: white; @@ -372,3 +373,86 @@ main { } +/* General alert styling */ +/* General alert styling */ +.custom-alert { + display: none; /* Hide by default */ + position: fixed; + top: 20%; + left: 50%; + transform: translateX(-50%); + border-radius: 8px; + padding: 20px; + max-width: 400px; + z-index: 9999; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + font-family: Arial, sans-serif; + font-size: 16px; + animation: slideIn 0.3s ease-out; +} + +/* Success-specific styling (green) */ +.custom-alert.success { + background-color: #d4edda; /* Light green background */ + color: #155724; /* Dark green text */ + border: 1px solid #c3e6cb; /* Border for success message */ +} + +/* Error-specific styling (red) */ +.custom-alert.error { + background-color: #f8d7da; /* Light red background */ + color: #721c24; /* Dark red text */ + border: 1px solid #f5c6cb; /* Border for error message */ +} + +/* Alert content styling */ +.alert-content { + display: flex; + flex-direction: column; + align-items: center; +} + +#alert-message { + margin-bottom: 15px; + text-align: center; +} + +/* Button styling based on alert type */ +.custom-alert.success .close-btn { + background-color: #4CAF50; /* Green button for success */ + color: white; +} + +.custom-alert.error .close-btn { + background-color: #f44336; /* Red button for error */ + color: white; +} + +/* Button common styles */ +.close-btn { + border: none; + padding: 10px 20px; + border-radius: 4px; + cursor: pointer; + font-size: 16px; + transition: background-color 0.3s ease; +} + +/* Hover effect for the button */ +.close-btn:hover { + opacity: 0.8; +} + +/* Slide-in animation */ +@keyframes slideIn { + from { + opacity: 0; + transform: translateX(-50%) translateY(-20px); + } + to { + opacity: 1; + transform: translateX(-50%) translateY(0); + } +} + + diff --git a/client/index.html b/client/index.html index a4de265..06a2498 100644 --- a/client/index.html +++ b/client/index.html @@ -7,6 +7,14 @@ + +
+
+ + +
+
+

Willkommen! Bitte melden Sie sich an oder registrieren Sie sich.

@@ -27,7 +35,7 @@
- - + + diff --git a/client/js/auth.js b/client/js/auth.js index d249032..368d0b8 100644 --- a/client/js/auth.js +++ b/client/js/auth.js @@ -1,3 +1,5 @@ +import { showAlert } from './shared_functions.js'; + // Registrierungs-Event document.getElementById('registerForm').addEventListener('submit', async (event) => { event.preventDefault(); @@ -14,12 +16,18 @@ document.getElementById('registerForm').addEventListener('submit', async (event) const data = await response.json(); if (response.ok) { - alert('Registrierung erfolgreich! Bitte loggen Sie sich ein.'); + showAlert('Registrierung erfolgreich! Bitte loggen Sie sich ein.', 'success'); } else { - alert(data.message || 'Registrierung fehlgeschlagen'); + showAlert(data.message || 'Registrierung fehlgeschlagen'); } } catch (error) { console.error('Fehler bei der Registrierung:', error); + // Check for network error + if (error.message.includes('Failed to fetch') || error.message.includes('ERR_CONNECTION_REFUSED')) { + showAlert('Verbindungsfehler: Die Verbindung zum Server wurde abgelehnt. Bitte überprüfen Sie die Serververbindung.'); + } else { + showAlert('Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.'); + } } }); @@ -41,9 +49,19 @@ document.getElementById('loginForm').addEventListener('submit', async (event) => localStorage.setItem('token', data.token); // Token speichern window.location.href = 'welcome.html'; // Weiterleitung zur Willkommensseite } else { - alert(data.message || 'Login fehlgeschlagen'); + showAlert(data.message || 'Login fehlgeschlagen'); } } catch (error) { console.error('Fehler beim Login:', error); + // Check for network error + if (error.message.includes('Failed to fetch') || error.message.includes('ERR_CONNECTION_REFUSED')) { + showAlert('Verbindungsfehler: Die Verbindung zum Server wurde abgelehnt. Bitte überprüfen Sie die Serververbindung.'); + } else { + showAlert('Ein unerwarteter Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.'); + } } }); + + + + diff --git a/client/js/chat.js b/client/js/chat.js index eae3d04..0089d1c 100644 --- a/client/js/chat.js +++ b/client/js/chat.js @@ -1,3 +1,5 @@ +import { showAlert } from './shared_functions.js'; + let chatCount = 0; // Zähler für Chat-Sessions let currentChatId = null; // Aktuell angezeigte Chat-ID let useMarkdown = true; @@ -220,7 +222,13 @@ async function getModels() { return models.data[0].id } catch (error) { - console.error('Error fetching models:', error); + if (error.message.includes('502')) { + showAlert("Server Error: 502 \nMaybe the LLM is offline?") + console.error('Bad Gateway: The server is acting as a gateway or proxy and received an invalid response from the upstream server.'); + } else { + // Handle other errors here + console.error('Error fetching models:', error); + } } } diff --git a/client/js/main.js b/client/js/main.js index 4e85ab0..f8792aa 100644 --- a/client/js/main.js +++ b/client/js/main.js @@ -1,3 +1,5 @@ +import { showAlert } from './shared_functions.js'; + // IP-Adresse const baseUrl = 'http://localhost:8015'; @@ -5,7 +7,7 @@ const baseUrl = 'http://localhost:8015'; async function loadUserData() { const token = localStorage.getItem('token'); if (!token) { - alert('Nicht autorisiert. Bitte einloggen.'); + showAlert('Nicht autorisiert. Bitte einloggen.'); window.location.href = 'index.html'; return; } @@ -38,7 +40,7 @@ async function loadUserData() { } catch (error) { console.error(error); - alert('Sitzung abgelaufen. Bitte erneut einloggen.'); + showAlert('Sitzung abgelaufen. Bitte erneut einloggen.'); localStorage.removeItem('token'); window.location.href = 'index.html'; } @@ -51,6 +53,8 @@ document.getElementById('logoutBtn').addEventListener('click', () => { }); // Funktion um auf die Willkommensseite zurückzukommen +document.getElementById("welcomeButton").addEventListener("click", toWelcome); + function toWelcome() { location.href = 'welcome.html'; } @@ -58,7 +62,7 @@ function toWelcome() { async function loadAdminData() { const token = localStorage.getItem('token'); if (!token) { - alert('Nicht autorisiert. Bitte einloggen.'); + showAlert('Nicht autorisiert. Bitte einloggen.'); window.location.href = 'index.html'; return; } @@ -73,7 +77,7 @@ async function loadAdminData() { }); if (!response.ok) { - alert('Zugriff verweigert. Sie sind kein Admin.'); + showAlert('Zugriff verweigert. Sie sind kein Admin.'); window.location.href = 'welcome.html'; return; } @@ -82,7 +86,7 @@ async function loadAdminData() { console.log(data.message); // "Willkommen, Admin!" } catch (error) { console.error(error); - alert('Sitzung abgelaufen. Bitte erneut einloggen.'); + showAlert('Sitzung abgelaufen. Bitte erneut einloggen.'); localStorage.removeItem('token'); window.location.href = 'index.html'; } @@ -112,7 +116,7 @@ async function loadUserList() { userList.appendChild(userDiv); }); } else { - alert('Fehler beim Laden der Benutzerliste'); + showAlert('Fehler beim Laden der Benutzerliste'); } } @@ -132,9 +136,9 @@ async function deleteUser(userId) { }); if (response.ok) { - loadUserList(); // Liste aktualisieren + await loadUserList(); // Liste aktualisieren } else { - alert('Fehler beim Löschen des Benutzers'); + showAlert('Fehler beim Löschen des Benutzers'); } } catch (error) { console.error('Fehler beim Löschen des Benutzers:', error); @@ -143,9 +147,9 @@ async function deleteUser(userId) { // Abhängig von der Seite entweder Admin- oder Benutzerdaten laden if (window.location.pathname.includes('admin.html')) { - loadAdminData(); - loadUserList(); + await loadAdminData(); + await loadUserList(); } else if (window.location.pathname.includes('welcome.html')) { - loadUserData(); + await loadUserData(); } diff --git a/client/js/shared_functions.js b/client/js/shared_functions.js new file mode 100644 index 0000000..7056630 --- /dev/null +++ b/client/js/shared_functions.js @@ -0,0 +1,19 @@ +// Alert Box +// Function to show the custom alert with a message and type +export function showAlert(message, type = 'error') { + const alertBox = document.getElementById('custom-alert'); + const alertMessage = document.getElementById('alert-message'); + const closeButton = document.getElementById('close-alert'); + + alertMessage.textContent = message; // Set the message to display + alertBox.style.display = 'block'; // Show the alert box + + // Reset previous styles + alertBox.classList.remove('success', 'error'); + alertBox.classList.add(type); // Add the appropriate class (success/error) + + // Add event listener to close the alert box + closeButton.addEventListener('click', () => { + alertBox.style.display = 'none'; // Hide the alert box when the button is clicked + }); +} \ No newline at end of file diff --git a/client/welcome.html b/client/welcome.html index 3c305a1..0bc923e 100644 --- a/client/welcome.html +++ b/client/welcome.html @@ -7,7 +7,13 @@ - + +
+
+ + +
+

Ein simples Chat-Interface mit Fokus auf die Privatsphäre.

@@ -44,7 +50,8 @@ - - + + +