From 925bb3f6566e15fc926befe79082caeb2483832c Mon Sep 17 00:00:00 2001
From: Alexander Preibisch <alexpreib@outlook.com>
Date: Tue, 3 Dec 2024 19:34:58 +0100
Subject: [PATCH] Redesign Blazor reconnect dialog #250

---
 OpenBudgeteer.Blazor/App.razor            | 21 +++++++++++++++
 OpenBudgeteer.Blazor/wwwroot/css/site.css | 32 +++++++++++++++++++++++
 2 files changed, 53 insertions(+)

diff --git a/OpenBudgeteer.Blazor/App.razor b/OpenBudgeteer.Blazor/App.razor
index ed8cf14..378525f 100644
--- a/OpenBudgeteer.Blazor/App.razor
+++ b/OpenBudgeteer.Blazor/App.razor
@@ -48,6 +48,27 @@
         <a href="" class="reload">Reload</a>
     </div>
 
+    <div id="components-reconnect-modal" class="toast mt-3 start-50 translate-middle-x" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+            <strong class="me-auto">Notification</strong>
+        </div>
+        <div class="toast-body reconnect">
+            <div>
+                Connection lost.<br>Attempting to reconnect to server:
+                <span id="components-reconnect-current-attempt"></span> /
+                <span id="components-reconnect-max-retries"></span>
+                <div class="spinner-border spinner-border-sm" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
+        </div>
+        <div class="toast-body reconnect-failed">
+            <div>
+                Unable to restore connection.<br>Try reloading the page.
+            </div>
+        </div>
+    </div>
+
     <script src="_framework/blazor.web.js"></script>
     <script src="js/bootstrap/bootstrap.bundle.min.js"></script>
     <script src="js/custom.js"></script>
diff --git a/OpenBudgeteer.Blazor/wwwroot/css/site.css b/OpenBudgeteer.Blazor/wwwroot/css/site.css
index 26fd1d4..8df5452 100644
--- a/OpenBudgeteer.Blazor/wwwroot/css/site.css
+++ b/OpenBudgeteer.Blazor/wwwroot/css/site.css
@@ -24,6 +24,38 @@ a, .btn-link {
     top: 0.5rem;
 }
 
+#components-reconnect-modal {
+    display: none;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    z-index: 10001;
+}
+
+#components-reconnect-modal.components-reconnect-show {
+    display: block;
+}
+#components-reconnect-modal.components-reconnect-show div.reconnect {
+    display: block;
+}
+div.reconnect {
+    display: none;
+}
+
+#components-reconnect-modal.components-reconnect-failed,
+#components-reconnect-modal.components-reconnect-rejected {
+    display: block;
+}
+#components-reconnect-modal.components-reconnect-failed div.reconnect-failed {
+    display: block;
+}
+#components-reconnect-modal.components-reconnect-rejected div.reconnect-failed {
+    display: block;
+}
+div.reconnect-failed {
+    display: none;
+}
+
 /* App specific styles
 -------------------------------------------------- */
 .app-header {