Detect networking problems and server errors, and display error messages to user. Also check size of payload before attempting to send.
This commit is contained in:
parent
3177477267
commit
5762306ea2
39
index.html
39
index.html
@ -84,6 +84,7 @@
|
|||||||
<body>
|
<body>
|
||||||
<div class="card" id="main">
|
<div class="card" id="main">
|
||||||
<div id="input-view">
|
<div id="input-view">
|
||||||
|
<h2 id="send-status" style="margin-bottom: 0"></h2>
|
||||||
<textarea
|
<textarea
|
||||||
id="text"
|
id="text"
|
||||||
placeholder="Type or paste your secret here..."
|
placeholder="Type or paste your secret here..."
|
||||||
@ -151,6 +152,9 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<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
|
// Check for existing link in URL on load
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
if (window.location.hash.includes("id=")) initDecryption();
|
if (window.location.hash.includes("id=")) initDecryption();
|
||||||
@ -177,10 +181,26 @@
|
|||||||
|
|
||||||
// 3. Upload Blob (IV + Ciphertext)
|
// 3. Upload Blob (IV + Ciphertext)
|
||||||
const blob = new Blob([iv, encrypted]);
|
const blob = new Blob([iv, encrypted]);
|
||||||
const res = await fetch("/api/secret", {
|
|
||||||
method: "POST",
|
if (blob.size > MAX_SIZE_BYTES) {
|
||||||
body: blob,
|
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();
|
const { id } = await res.json();
|
||||||
|
|
||||||
// 4. Create Hash-Link (Key stays in hash, never sent to server)
|
// 4. Create Hash-Link (Key stays in hash, never sent to server)
|
||||||
@ -255,15 +275,18 @@
|
|||||||
// Wipe hash from URL immediately for safety
|
// Wipe hash from URL immediately for safety
|
||||||
window.history.replaceState(null, null, " ");
|
window.history.replaceState(null, null, " ");
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
statusEl.innerText = "❌ Error";
|
setErrorMessage("read-status", e.message);
|
||||||
statusEl.style.color = "#ff4444";
|
|
||||||
const content = document.getElementById("content");
|
const content = document.getElementById("content");
|
||||||
contentContainer.classList.remove("hidden");
|
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() {
|
function copyDecryptedText() {
|
||||||
const text = document.getElementById("content").innerText;
|
const text = document.getElementById("content").innerText;
|
||||||
navigator.clipboard.writeText(text);
|
navigator.clipboard.writeText(text);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user