bootstrap toasts

src/main/resources/web/auth.js

@@ -7,7 +7,7 @@ window.location.hash.substr(1).split("?").map(it => new URLSearchParams(it).forE
 var mcIdUsername = urlParams.get("username");
 var mcauth_code = urlParams.get("mcauth_code");
 if (urlParams.get("mcauth_success") == "false") {
-    alert("Couldn't authenticate with Minecraft.ID: " + urlParams.get("mcauth_msg"));
+    addToast("Couldn't authenticate with Minecraft.ID", urlParams.get("mcauth_msg"));
 }
 
 // WS url
@@ -123,7 +123,7 @@ function loginMc(user, pass) {
     .then(r => r.json())
     .then(data => {
         storeMcAccount(data.accessToken, data.clientToken, data.selectedProfile.name, data.selectedProfile.id);
-    }).catch(e => alert("Failed to login: " + e));
+    }).catch(e => addToast("Failed to login", e));
     $("#form_add_mc input").val("");
 }
 function logoutMojang(id) {
@@ -173,7 +173,7 @@ function getMcUserToken(account) {
             }
         }
         return account;
-    }).catch(e => alert("failed to refresh token! " + e));
+    }).catch(e => addToast("Failed to refresh token!", e));
 }
 function validateToken(account) {
     return fetch(getCorsProxy() + "https://authserver.mojang.com/validate", {method: "post",
@@ -276,6 +276,26 @@ function addListeningList(user) {
     msg.innerText = "Listening to login: " + user;
     listening.appendChild(msg);
 }
+function addToast(title, msg) {
+    let toast = document.createElement("div");
+    document.getElementById("toasts").prepend(toast);
+    $(toast)
+        .attr("class", "toast")
+        .attr("role", "alert")
+        .attr("aria-live", "assertive")
+        .attr("aria-atomic", "true") // todo sanitize date \/
+        .html(`
+<div class="toast-header">
+  <strong class="me-auto toast_title_msg"></strong>
+  <small class="text-muted">${new Date().toLocaleString()}</small>
+  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+</div>
+<div class="toast-body"></div>
+        `);
+    $(toast).find(".toast_title_msg").text(title);
+    $(toast).find(".toast-body").text(msg);
+    new bootstrap.Toast(toast).show();
+}
 function resetHtml() {
     listening.innerHTML = "";
     listenVisible = false;
@@ -337,10 +357,10 @@ function handleJoinRequest(parsed) {
             })
             .then(checkFetchSuccess("code"))
             .finally(() => confirmJoin(parsed.session_hash))
-            .catch((e) => alert("Couldn't contact session server for " + parsed.user + " account in browser. error: " + e));
+            .catch((e) => addToast("Couldn't contact session server", "error: " + e));
         } else {
             confirmJoin(parsed.session_hash);
-            alert("Couldn't find " + parsed.user + " account in browser.");
+            addToast("Couldn't find account", parsed.user);
         }
     }, () => confirmJoin(parsed.session_hash));
 }
@@ -351,7 +371,7 @@ function onSocketMsg(event) {
         renderActions();
     } else if (parsed.action == "login_result") {
         if (!parsed.success) {
-            alert("VIAaaS instance couldn't verify Minecraft account");
+            addToast("Couldn't verify Minecraft account", "VIAaaS returned failed response");
         } else {
             listen(parsed.token);
             saveToken(parsed.token);

src/main/resources/web/auth_ms.js

@@ -27,7 +27,7 @@ function loginMs() {
 
 $(() => myMSALObj.handleRedirectPromise().then((resp) => {
     if (resp) {
-        refreshTokenMs(resp.account.username).catch(e => alert("failed to get mc token: " + e));
+        refreshTokenMs(resp.account.username).catch(e => addToast("Failed to get token", e));
         refreshAccountList();
     }
 }));

src/main/resources/web/index.html

@@ -58,7 +58,7 @@
   </div>
 </nav>
 <div class="container tab-content" id="content">
-    <div id="home" class="tab-pane fade show active" role="tabpanel" aria-labelledby="home-tab">
+    <div id="home" class="tab-pane fade show active" aria-labelledby="home-tab">
 	<p>WebSocket connection status: <span id="connection_status" class="text-white bg-dark">?</span></p>
         <p>CORS Proxy status: <span id="cors_status" class="text-white bg-dark">?</span></p>
 	<hr>
@@ -67,7 +67,7 @@
 	<p><span id="listening"></span></p>
     </div>
 
-    <div id="settings" class="tab-pane fade" role="tabpanel" aria-labelledby="settings-tab">
+    <div id="settings" class="tab-pane fade" aria-labelledby="settings-tab">
         <div class="mb-3">
           <label for="cors-proxy" class="form-label">CORS Proxy URL Prefix</label>
           <p>See <a href="https://github.com/ViaVersion/VIAaaS#cors-proxy">README</a>
@@ -82,7 +82,7 @@
         </div>
     </div>
 
-    <div id="accounts" class="tab-pane fade" role="tabpanel" aria-labelledby="accounts-tab">
+    <div id="accounts" class="tab-pane fade" aria-labelledby="accounts-tab">
 	<div>
           <p>Browser Minecraft accounts:</p>
           <div id="accounts-list"></div>
@@ -112,6 +112,8 @@
         </div>
     </div>
 </div>
+<div class="toast-container position-absolute top-0 end-0 p-3" id="toasts"></div>
+
 <script src="auth_ms.js"></script>
 <script src="auth.js"></script>
 </body>