update displayToast

django/src/ft_auth/templates/authentification.html

@@ -128,7 +128,7 @@ <h1 class="row">Johnny Depp</h1>
 
 		submitForm('register-form', () => {
 			route('/login');
-			displayToast("Account creation successful.");
+			displayToast("Account creation successful.", "bg-success");
 		}, (json) => {
 			document.getElementById('register-error').textContent = json.error;
 			emptyPasswords();
@@ -293,4 +293,4 @@ <h1 class="row">Johnny Depp</h1>
 		overflow-wrap: break-word;
 	}
 </style>
-{% endblock %}
+{% endblock %}

django/src/ft_auth/templates/settings.html

@@ -100,7 +100,7 @@ <h2 class="form-title">Upload New Avatar</h2>
 
 		submitForm('password-form', () => {
 			route('/settings');
-			displayToast("Password changed successfully.");
+			displayToast("Password changed successfully.", "bg-success");
 		}, (json) => {
 			document.getElementById('password-error').textContent = json.error;
 			emptyPasswords();
@@ -144,7 +144,7 @@ <h2 class="form-title">Upload New Avatar</h2>
 						const avatarImg = document.querySelector('.profile-image-container img');
 						avatarImg.src = data.avatar_url;
 						hideModal();
-						displayToast("Avatar updated successfully.");
+						displayToast("Avatar updated successfully.", "bg-success");
 					} else {
 						alert('Error uploading avatar');
 					}

django/src/games/templates/pong_tournament.html

@@ -95,7 +95,7 @@ <h2 class="text-start fs-4 fw-bold mb-3">{% trans "Match history" %}</h2>
 			case "join": handleJoin(data.players); break;
 			case "player_pairs": handlePlayerPairs(data.player_pairs); break;
 			case "next_round_id": route(`/pong/online/${data.id}/{{ name }}/${power}`); break;
-			case "bye": displayToast("You have received a bye for this round. Enjoy the break!"); break;
+			case "bye": displayToast("You have received a bye for this round. Enjoy the break!", "bg-info"); break;
 			case "history": handleHistory(data.history); break;
 			case "end": handleEnd(data.winner); break;
 			default: console.error("Invalid message from server ignored."); break;
@@ -182,7 +182,7 @@ <h2 class="text-start fs-4 fw-bold mb-3">{% trans "Match history" %}</h2>
 		const tableBody = document.querySelector("#players tbody");
 		const rowCount = tableBody.rows.length;
 		if (rowCount < 2) {
-			displayToast("You are alone in the tournament...");
+			displayToast("You are alone in the tournament...", "bg-warning");
 			return;
 		}
 		hideBtn(lockBtn);

nginx/src/index.html

@@ -26,7 +26,7 @@
 	<div id="content"></div>
 
 	<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index: 9001;">
-		<div id="toast" class="toast align-items-center text-white bg-success" role="alert" aria-live="assertive"
+		<div id="toast" class="toast align-items-center text-black" role="alert" aria-live="assertive"
 			aria-atomic="true">
 			<div class="d-flex">
 				<div class="toast-body" id="toast-content">
@@ -46,4 +46,4 @@
 	<script src="/js/sidebar.js"></script>
 </body>
 
-</html>
+</html>

nginx/src/js/core.js

@@ -61,10 +61,13 @@ function logout() {
 		}).catch(error => console.error(error));
 }
 
-function displayToast(message) {
+function displayToast(message, colorClass = "") {
 	const toastContentElement = document.getElementById('toast-content');
 	toastContentElement.textContent = message;
 	const toastElement = document.getElementById('toast');
+	toastElement.classList.remove('bg-success', 'bg-danger', 'bg-warning', 'bg-info', 'bg-primary', 'bg-secondary', 'bg-light', 'bg-dark');
+	if (colorClass !== "")
+		toastElement.classList.add(colorClass);
 	const toast = new bootstrap.Toast(toastElement);
 	toast.show();
 }