From d1cccba421e27ee60b6a4394358ee517565d2b8e Mon Sep 17 00:00:00 2001
From: Jef Roosens <roosensjef@gmail.com>
Date: Wed, 1 Jul 2026 21:42:03 +0200
Subject: [PATCH 1/2] feat(web): add dialog to handle HTTP request errors

---
 otter/src/web/templates/base.html | 35 ++++++++++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)
diff --git a/otter/src/web/templates/base.html b/otter/src/web/templates/base.html
index d9fe084..aeb5718 100644
--- a/otter/src/web/templates/base.html
+++ b/otter/src/web/templates/base.html
@@ -12,7 +12,7 @@ a:hover {
 }
         </style>
     </head>
-    <body>
+    <body hx-on::response-error="showErrorDialog(event)">
         <main>
             <nav>
                 <ul>
@@ -37,5 +37,38 @@ a:hover {
                 {{ inner | safe }}
             </article>
         </main>
+
+        <dialog id="error-dialog">
+            <article>
+                <header>
+                    <button aria-label="Close" rel="prev" onclick="this.closest('dialog').close()"></button>
+                    <h5>Failed web request</h5>
+                </header>
+                <p id="error-message">Failed web request</p>
+            </article>
+        </dialog>
+
+        <script>
+            function showErrorDialog(evt) {
+                // TODO exclude certain error codes, e.g. 400 bad request
+                const xhr = evt.detail.xhr;
+                const errorMessage = document.getElementById('error-message');
+
+                let message = 'An unexpected error occurred.';
+
+                if (xhr.status === 401) {
+                    message = 'You need to log in.';
+                } else if (xhr.status === 403) {
+                    message = 'Access denied.';
+                } else if (xhr.status === 404) {
+                    message = 'Resource not found.';
+                } else if (xhr.status === 500) {
+                    message = 'Server error occurred.';
+                }
+
+                errorMessage.textContent = message;
+                document.getElementById('error-dialog').showModal();
+            }
+        </script>
     </body>
 </html>

From 8d59462f0e6fc16d4b4e64ccf494e16c19900f79 Mon Sep 17 00:00:00 2001
From: Jef Roosens <roosensjef@gmail.com>
Date: Wed, 1 Jul 2026 21:42:38 +0200
Subject: [PATCH 2/2] wip create user dialog

---
 .../templates/views/administration/users.html | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/otter/src/web/templates/views/administration/users.html b/otter/src/web/templates/views/administration/users.html
index dfa90bc..24f1f5e 100644
--- a/otter/src/web/templates/views/administration/users.html
+++ b/otter/src/web/templates/views/administration/users.html
@@ -2,6 +2,10 @@
 {% block inner %}
 <h3>Users</h3>
 
+<button 
+    onclick="document.getElementById('create-user-form').reset(); document.getElementById('create-user-modal').showModal()"
+    id="create-user">Create new user</button>
+
 <input 
     type="text" id="username" name="username"
     hx-get="/administration/users"
@@ -48,4 +52,54 @@
         {% endif %}
     </tbody>
 </table>
+
+<dialog id="create-user-modal">
+  <article>
+    <header>
+      <button 
+        aria-label="Close" 
+        rel="prev" 
+        onclick="document.getElementById('create-user-modal').close()"
+        class="close-button"></button>
+      <h5>Create User</h5>
+    </header>
+    <div class="content">
+        <form id="create-user-form">
+            <fieldset>
+                <label>
+                    Username
+                    <input name="username"
+                           placeholder="Username"
+                           />
+                </label>
+                <label>
+                    Admin
+                    <input name="admin"
+                           type="checkbox"
+                           />
+                </label>
+                <label>
+                    Password
+                    <input type="password"
+                           name="password"
+                           placeholder="Password"
+                           />
+                </label>
+                <label>
+                    Confirm password
+                    <input type="password"
+                           name="password-confirm"
+                           placeholder="Password"
+                           />
+                </label>
+            </fieldset>
+
+            <input type="submit"
+                   value="Create user"
+                   />
+        </form>
+    </div>
+  </article>
+</dialog>
+
 {% endblock %}
