refactor: use pipe

README.md

@@ -1,6 +1,8 @@
 # spasteg
 
-A secure, self-hostable "burn after reading" paste service with ephemeral storage written in [Gleam](https://gleam.run).
+A secure self-hostable burn-after-reading paste service with ephemeral storage written in [Gleam](https://gleam.run).
+
+Have a glimpse of the interface, check out [screenshots](screenshots/)!
 
 ## Features
 
@@ -84,14 +86,14 @@ The key is generated at startup here, and the container exposes port 3000 so fee
 
 ## Usage
 
-1. Visit `http://localhost:3000`
+1. Visit <http://localhost:3000>
 2. Enter your text in the form
 3. Click "Create Paste"
 4. Share the generated URL
 5. The paste auto-destructs after first access
 
-Note: the creator cannot see their post with the copied link (except in private browsing) - it would be burned immediately.
-
 ## License
 
-This project is licensed under the GNU General Public License v3.0 or later (GPLv3+). See the [LICENSE](LICENSE) file for details.
+This project is licensed under the GNU General Public License v3.0 or later (GPLv3+).
+
+See the [LICENSE](LICENSE) file for details.

gleam.toml

@@ -1,9 +1,9 @@
 name = "spasteg"
 version = "1.0.0"
 
-description = "A secure, self-hostable burn-after-reading paste service written in Gleam"
+description = "A secure self-hostable burn-after-reading paste service written in Gleam"
 licences = ["GPL-3.0"]
-repository = { type = "github", user = "Kharec", repo = "spasteg", host = "https://git.kharec.info" }
+repository = { type = "gitea", user = "Kharec", repo = "spasteg", host = "https://git.kharec.info" }
 
 [dependencies]
 gleam_stdlib = ">= 0.44.0 and < 2.0.0"

src/handlers.gleam

@@ -20,12 +20,12 @@ pub fn handle(
   storage: process.Subject(storage.StorageMsg),
   _secret_key_base: String,
 ) -> wisp.Response {
-  let response = case wisp.path_segments(request) {
+  case wisp.path_segments(request) {
     [] -> handle_home(request, storage)
     ["paste", key_param] -> handle_paste(request, storage, key_param)
     _ -> wisp.not_found()
   }
-  add_security_headers(response)
+  |> add_security_headers
 }
 
 fn add_security_headers(response: wisp.Response) -> wisp.Response {
@@ -85,7 +85,10 @@ fn verify_csrf(
   }
 }
 
-fn check_rate_limit(storage, ip: String) -> Result(Nil, wisp.Response) {
+fn check_rate_limit(
+  storage: process.Subject(storage.StorageMsg),
+  ip: String,
+) -> Result(Nil, wisp.Response) {
   let rate_reply = process.new_subject()
   process.send(storage, storage.CheckRateLimit(ip, rate_reply))
 
@@ -99,7 +102,10 @@ fn check_rate_limit(storage, ip: String) -> Result(Nil, wisp.Response) {
   }
 }
 
-fn create_paste(storage, form: wisp.FormData) -> Result(String, wisp.Response) {
+fn create_paste(
+  storage: process.Subject(storage.StorageMsg),
+  form: wisp.FormData,
+) -> Result(String, wisp.Response) {
   let encrypted_content =
     list.key_find(form.values, "encrypted_content")
     |> result.unwrap("")

src/html.gleam

@@ -55,8 +55,8 @@ pub fn created(key: String) -> String {
         text("The server never stores or sees the decryption key."),
       ]),
       html.div([attribute.class("notice")], [
-        html.strong([], [text("Burn after reading")]),
-        text(" — This paste will be deleted after the first view"),
+        html.strong([], [text("Beware")]),
+        text(" — This paste will be burned after the first view!"),
       ]),
       html.div(
         [attribute.attribute("data-paste-id", key), attribute.class("hidden")],
@@ -100,7 +100,7 @@ pub fn not_found() -> String {
       layout.card([
         html.h2([], [text("Paste not found")]),
         html.p([], [
-          text("This paste may have already been viewed and deleted."),
+          text("This content has already been burned 🔥"),
         ]),
         html.a([attribute.href("/"), attribute.class("btn-primary")], [
           text("Create New Paste"),
@@ -121,6 +121,11 @@ fn decrypt_js(encrypted_content: String) -> String {
     content: document.getElementById('content-display')
   };
 
+  if (!els.loading || !els.error || !els.content) {
+    console.error('Required DOM elements not found');
+    return;
+  }
+
   if (!hash) {
     els.loading.classList.add('hidden');
     els.error.classList.remove('hidden');
@@ -128,7 +133,9 @@ fn decrypt_js(encrypted_content: String) -> String {
   }
 
   try {
-    const keyBase64 = hash.replace(/-/g, '+').replace(/_/g, '/');
+    let keyBase64 = hash.replace(/-/g, '+').replace(/_/g, '/');
+    while (keyBase64.length % 4) keyBase64 += '=';
+
     const encryptedBytes = Uint8Array.from(atob(encryptedContent), c => c.charCodeAt(0));
     const keyBytes = Uint8Array.from(atob(keyBase64), c => c.charCodeAt(0));
     const iv = encryptedBytes.slice(0, 12);
@@ -156,11 +163,15 @@ fn escape_js_string(s: String) -> String {
   |> string.replace("\"", "\\\"")
   |> string.replace("\n", "\\n")
   |> string.replace("\r", "\\r")
+  |> string.replace("<", "\\u003c")
+  |> string.replace(">", "\\u003e")
+  |> string.replace("&", "\\u0026")
 }
 
 fn crypto_js() -> String {
   "
 async function encryptContent(content) {
+  try {
     const encoder = new TextEncoder();
     const data = encoder.encode(content);
     const key = await crypto.subtle.generateKey({ name: 'AES-GCM', length: 256 }, true, ['encrypt', 'decrypt']);
@@ -168,36 +179,60 @@ async function encryptContent(content) {
     const encrypted = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, data);
     const keyData = await crypto.subtle.exportKey('raw', key);
     return {
-    encrypted: btoa(String.fromCharCode(...new Uint8Array([...iv, ...new Uint8Array(encrypted)]))),
+      encrypted: btoa(String.fromCharCode(...iv, ...new Uint8Array(encrypted))),
       key: btoa(String.fromCharCode(...new Uint8Array(keyData)))
     };
+  } catch (e) {
+    console.error('Encryption failed:', e);
+    throw new Error('Failed to encrypt content');
+  }
 }
 
 function base64ToUrlSafe(base64) {
-  return base64.replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/, '');
+  return base64.split('+').join('-').split('/').join('_').replace(/=+$/g, '');
 }
 
 function showShareUrl(url) {
   const card = document.querySelector('.card');
+  if (!card) {
+    console.error('Card element not found');
+    return;
+  }
   const div = document.createElement('div');
   div.className = 'share-url';
-  div.innerHTML = '<label>Share this URL</label>';
+  const label = document.createElement('label');
+  label.textContent = 'Share this URL';
+  div.appendChild(label);
   const input = document.createElement('input');
   input.type = 'text';
   input.readOnly = true;
   input.value = url;
-  input.onclick = () => input.select();
+  input.addEventListener('click', () => input.select());
   div.appendChild(input);
   card.insertBefore(div, card.firstChild);
   input.select();
 }
 
-document.getElementById('paste-form').addEventListener('submit', async (e) => {
+document.getElementById('paste-form')?.addEventListener('submit', async (e) => {
   e.preventDefault();
-  const content = document.getElementById('content').value;
+
+  const submitButton = e.target.querySelector('button[type=\"submit\"]');
+  const contentInput = document.getElementById('content');
+  const encryptedInput = document.getElementById('encrypted-content');
+  const csrfInput = document.getElementById('csrf-token');
+
+  if (!contentInput || !encryptedInput || !csrfInput) {
+    console.error('Required form elements not found');
+    return;
+  }
+
+  if (submitButton) submitButton.disabled = true;
+
+  try {
+    const content = contentInput.value;
     const { encrypted, key } = await encryptContent(content);
-  document.getElementById('encrypted-content').value = encrypted;
-  const csrfToken = document.getElementById('csrf-token').value;
+    encryptedInput.value = encrypted;
+    const csrfToken = csrfInput.value;
 
     const res = await fetch('/', {
       method: 'POST',
@@ -208,12 +243,17 @@ document.getElementById('paste-form').addEventListener('submit', async (e) => {
     const html = await res.text();
     const doc = new DOMParser().parseFromString(html, 'text/html');
     const pasteId = doc.querySelector('[data-paste-id]')?.getAttribute('data-paste-id');
-  if (!pasteId) return;
+    if (!pasteId) throw new Error('No paste ID returned');
 
     const pasteUrl = `${location.origin}/paste/${pasteId}#${base64ToUrlSafe(key)}`;
     document.body.replaceChildren(...doc.body.childNodes);
     showShareUrl(pasteUrl);
     history.replaceState({}, '', pasteUrl);
+  } catch (err) {
+    console.error('Form submission failed:', err);
+    alert('Failed to create paste. Please try again.');
+    if (submitButton) submitButton.disabled = false;
+  }
 });
 "
 }

src/key.gleam

@@ -4,6 +4,7 @@ import gleam/crypto
 const key_length_bytes = 12
 
 pub fn generate() -> String {
-  crypto.strong_random_bytes(key_length_bytes)
+  key_length_bytes
+  |> crypto.strong_random_bytes
   |> bit_array.base64_url_encode(False)
 }

src/styles.gleam

@@ -1,7 +1,6 @@
-// this css is IA-generated, sorry, really not a front guy
+// this css is AI-generated, sorry, really not a front guy
 
 pub const shared_css = "
-* { margin: 0; padding: 0; box-sizing: border-box; }
 :root {
   --bg: #0d1117;
   --bg2: #161b22;
@@ -11,47 +10,232 @@ pub const shared_css = "
   --accent: #58a6ff;
   --green: #238636;
   --border: #30363d;
+  --warning: #d29922;
+  --error: #f85149;
   --mono: 'JetBrains Mono', monospace;
 }
-body { font-family: system-ui, sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; line-height: 1.6; }
-.container { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
-header { text-align: center; margin-bottom: 40px; }
-.logo { font-size: 2.5rem; font-weight: 700; color: var(--accent); }
-.tagline { color: var(--dim); margin-top: 8px; }
-.card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 32px; }
-textarea, .paste-content, .share-url input, input[readonly] {
-  width: 100%; background: var(--bg3); border: 1px solid var(--border);
-  border-radius: 6px; padding: 14px; font-family: var(--mono); font-size: 14px; color: var(--fg);
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-textarea { min-height: 300px; resize: vertical; }
-textarea:focus, .share-url input:focus { outline: none; border-color: var(--accent); }
-textarea::placeholder { color: var(--dim); }
-.paste-content pre { font-family: var(--mono); font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; margin: 0; }
-.actions { margin-top: 24px; display: flex; justify-content: flex-end; gap: 12px; }
-.actions.center { justify-content: center; }
-button, .btn-primary {
-  background: var(--green); color: #fff; border: none; padding: 12px 24px;
-  border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block;
+
+body {
+  font-family: system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
+  min-height: 100vh;
+  line-height: 1.6;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-bottom: 16px;
+}
+
+.container {
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 20px;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+.logo {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--accent);
+}
+
+.tagline {
+  color: var(--dim);
+  margin-top: 8px;
+}
+
+.card {
+  background: var(--bg2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 32px;
+}
+
+textarea,
+.paste-content,
+.share-url input,
+input[readonly] {
+  width: 100%;
+  background: var(--bg3);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 14px;
+  font-family: var(--mono);
+  font-size: 14px;
+  color: var(--fg);
+}
+
+textarea {
+  min-height: 300px;
+  resize: vertical;
+}
+
+textarea::placeholder {
+  color: var(--dim);
+}
+
+textarea:focus,
+.share-url input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.share-url {
+  margin-bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.share-url label {
+  color: var(--dim);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.paste-content pre {
+  font-family: var(--mono);
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
+}
+
+.actions {
+  margin-top: 24px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.actions.center {
+  justify-content: center;
+}
+
+button,
+.btn-primary {
+  background: var(--green);
+  color: #fff;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+
+button:hover:not(:disabled),
+.btn-primary:hover {
+  filter: brightness(1.15);
+}
+
+button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.notice {
+  background: rgba(210,153,34,.15);
+  border: 1px solid var(--warning);
+  border-radius: 6px;
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.notice strong {
+  color: var(--warning);
+}
+
+.notice.warning {
+  background: rgba(248,81,73,.15);
+  border-color: var(--error);
+}
+
+.notice.warning strong {
+  color: var(--error);
+}
+
+.error {
+  background: rgba(248,81,73,.15);
+  border: 1px solid var(--error);
+  border-radius: 6px;
+  padding: 16px;
+  color: var(--error);
+}
+
+footer {
+  text-align: center;
+  padding: 20px;
+  color: var(--dim);
+  font-size: 13px;
+  margin-top: 20px;
+}
+
+.centered {
+  text-align: center;
+  padding: 40px;
+}
+
+.centered .logo {
+  margin-bottom: 40px;
+}
+
+.centered .card {
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+.centered p {
+  color: var(--dim);
+  margin-bottom: 24px;
+}
+
+.centered .btn-primary {
+  background: transparent;
+  color: var(--fg);
+  border: 1px solid var(--border);
+  font-weight: 500;
+}
+
+.centered .btn-primary:hover {
+  background: var(--bg3);
+  border-color: var(--accent);
+}
+
+.hidden {
+  display: none;
+}
+
+#loading {
+  text-align: center;
+  padding: 40px;
+  color: var(--dim);
+}
+
+.mascot {
+  display: inline-flex;
+  vertical-align: middle;
+  margin-left: 4px;
+}
+
+.mascot svg {
+  height: 1em;
+  width: auto;
+  display: block;
 }
-button:hover:not(:disabled), .btn-primary:hover { filter: brightness(1.15); }
-button:disabled { opacity: 0.5; cursor: not-allowed; }
-.notice { background: rgba(210,153,34,.15); border: 1px solid #d29922; border-radius: 6px; padding: 16px; margin-bottom: 24px; }
-.notice strong { color: #d29922; }
-.notice.warning { background: rgba(248,81,73,.15); border-color: #f85149; }
-.notice.warning strong { color: #f85149; }
-.error { background: rgba(248,81,73,.15); border: 1px solid #f85149; border-radius: 6px; padding: 16px; color: #f85149; }
-footer { text-align: center; padding: 20px; color: var(--dim); font-size: 13px; margin-top: 20px; }
-.centered { text-align: center; padding: 40px; }
-.centered .logo { margin-bottom: 40px; }
-.centered .card { max-width: 500px; margin: 0 auto; }
-.centered .btn-primary { background: transparent; color: var(--fg); border: 1px solid var(--border); font-weight: 500; }
-.centered .btn-primary:hover { background: var(--bg3); border-color: var(--accent); }
-.centered p { color: var(--dim); margin-bottom: 24px; }
-h2 { font-size: 1.5rem; margin-bottom: 16px; }
-.share-url { margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
-.share-url label { color: var(--dim); font-size: 14px; font-weight: 500; }
-#loading { text-align: center; padding: 40px; color: var(--dim); }
-.hidden { display: none; }
-.mascot { display: inline-flex; vertical-align: middle; margin-left: 4px; }
-.mascot svg { height: 1em; width: auto; display: block; }
 "