derpherp

public/app.js

@@ -5,45 +5,40 @@ import { enqueue, flushQueue } from "./lib/offlineQueue.js";
 import { registerPwa, wirePwaInstall, subscribePush } from "./lib/pwa.js";
 import { renderSlots, renderHeatmap, updateStats, showToast, showConfetti, showEasterEgg } from "./lib/ui.js";
 
-let pinBuffer = "";
-
 const STATUS = { upcoming: "Noch nicht", pending: "Jetzt!", overdue: "Überfällig", snoozed: "Snoozed", taken: "Genommen", missed: "Verpasst" };
 
 function showScreen(id) {
   document.querySelectorAll(".screen").forEach((s) => { s.hidden = s.id !== id; });
 }
 
-function wirePinPad() {
-  const pad = document.getElementById("pinPad");
-  const keys = ["1","2","3","4","5","6","7","8","9","⌫","0","✓"];
-  pad.innerHTML = keys.map((k) =>
-    `<button type="button" class="pinKey${k.length > 1 ? " wide" : ""}" data-key="${k}">${k}</button>`
-  ).join("");
+function wirePinForm() {
+  const form = document.getElementById("pinForm");
+  const input = document.getElementById("pinInput");
+  const errEl = document.getElementById("loginError");
 
-  pad.addEventListener("click", async (e) => {
-    const btn = e.target.closest("[data-key]");
-    if (!btn) return;
-    const key = btn.dataset.key;
-    const errEl = document.getElementById("loginError");
+  input.addEventListener("input", () => {
+    const digits = input.value.replace(/\D/g, "").slice(0, 6);
+    if (input.value !== digits) input.value = digits;
     errEl.hidden = true;
+  });
 
-    if (key === "⌫") { pinBuffer = pinBuffer.slice(0, -1); }
-    else if (key === "✓") {
-      if (pinBuffer.length < 4) return;
-      try {
-        const { token } = await api.login(pinBuffer);
-        setToken(token);
-        pinBuffer = "";
-        await initApp();
-      } catch {
-        errEl.textContent = "Falscher PIN. Dein Gehirn auch.";
-        errEl.hidden = false;
-        pinBuffer = "";
-      }
-    } else if (pinBuffer.length < 6) {
-      pinBuffer += key;
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    const pin = input.value.trim();
+    if (pin.length < 4) return;
+
+    errEl.hidden = true;
+    try {
+      const { token } = await api.login(pin);
+      setToken(token);
+      input.value = "";
+      await initApp();
+    } catch {
+      errEl.textContent = "Falscher PIN. Dein Gehirn auch.";
+      errEl.hidden = false;
+      input.value = "";
+      input.focus();
     }
-    document.getElementById("pinDisplay").textContent = "•".repeat(pinBuffer.length) || "••••";
   });
 }
 
@@ -167,7 +162,7 @@ async function boot() {
     try { await initApp(); return; } catch { clearToken(); }
   }
   showScreen("loginScreen");
-  wirePinPad();
+  wirePinForm();
 }
 
 boot();