From 5762306ea26320f657bbf19cc8131f4239706a2f Mon Sep 17 00:00:00 2001
From: Marsell Kukuljevic <mk@spearhead.systems>
Date: Fri, 16 Jan 2026 10:27:38 +0000
Subject: [PATCH] Detect networking problems and server errors, and display
 error messages to user. Also check size of payload before attempting to send.

---
 index.html | 39 +++++++++++++++++++++++++++++++--------
 1 file changed, 31 insertions(+), 8 deletions(-)
diff --git a/index.html b/index.html
index 1be1f7b..053477b 100644
--- a/index.html
+++ b/index.html
@@ -84,6 +84,7 @@
     <body>
         <div class="card" id="main">
             <div id="input-view">
+                <h2 id="send-status" style="margin-bottom: 0"></h2>
                 <textarea
                     id="text"
                     placeholder="Type or paste your secret here..."
@@ -151,6 +152,9 @@
         </div>
 
         <script>
+            // Make sure this matches MAX_SIZE_BYTES in server.js
+            const MAX_SIZE_BYTES = 10 * 1024 * 1024; // 10MB
+
             // Check for existing link in URL on load
             window.onload = () => {
                 if (window.location.hash.includes("id=")) initDecryption();
@@ -177,10 +181,26 @@
 
                 // 3. Upload Blob (IV + Ciphertext)
                 const blob = new Blob([iv, encrypted]);
-                const res = await fetch("/api/secret", {
-                    method: "POST",
-                    body: blob,
-                });
+
+                if (blob.size > MAX_SIZE_BYTES) {
+                    setErrorMessage("send-status", "message too large");
+                    return;
+                }
+
+                let res;
+                try {
+                    res = await fetch("/api/secret", {
+                        method: "POST",
+                        body: blob,
+                    });
+                    if (!res.ok) throw new Error(res.statusText);
+                // We need this catch since res.ok only works with some errors
+                } catch (e) {
+                    let msg = e.message.replace("NetworkError", "networking problem");
+                    setErrorMessage("send-status", msg);
+                    return;
+                }
+
                 const { id } = await res.json();
 
                 // 4. Create Hash-Link (Key stays in hash, never sent to server)
@@ -255,15 +275,18 @@
                     // Wipe hash from URL immediately for safety
                     window.history.replaceState(null, null, " ");
                 } catch (e) {
-                    statusEl.innerText = "❌ Error";
-                    statusEl.style.color = "#ff4444";
+                    setErrorMessage("read-status", e.message);
                     const content = document.getElementById("content");
                     contentContainer.classList.remove("hidden");
-                    content.innerText = e.message;
-                    content.style.color = "#ff8888";
                 }
             }
 
+            function setErrorMessage(id, msg) {
+                const statusEl = document.getElementById(id);
+                statusEl.innerText = `❌ Error: ${msg}`;
+                statusEl.style.color = "#ff4444";
+            }
+
             function copyDecryptedText() {
                 const text = document.getElementById("content").innerText;
                 navigator.clipboard.writeText(text);
