Spaces:

constantinSch
/

evaluation_summarization

Running

App Files Files Community

constantinSch commited on Apr 16

Commit

b0eb97c

1 Parent(s): f3d9354

Enhance authentication with HMAC tokens and implement login overlay in UI

Browse files

Files changed (2) hide show

app.py +21 -56
index.html +79 -4

app.py CHANGED Viewed

@@ -5,6 +5,8 @@ No accounts required -- annotators identify themselves by name.
 Annotations are persisted in a SQLite database.
 Optional password protection: set APP_PASSWORD as an environment variable.
 """
 import hashlib
@@ -15,8 +17,7 @@ import sqlite3
 from functools import cache
 from pathlib import Path
-from flask import Flask, Response, jsonify, make_response, redirect, request, send_file
-from werkzeug.middleware.proxy_fix import ProxyFix
 DATASET_PATH = Path(os.environ.get("DATASET_PATH", "evaluation_dataset.jsonl"))
 DB_PATH = Path(os.environ.get("DB_PATH", "/data/annotations.db"))
@@ -26,10 +27,9 @@ ANNOTATION_FIELDS = (
 )
 APP_PASSWORD = os.environ.get("APP_PASSWORD", "")
 app = Flask(__name__)
-app.secret_key = os.environ.get("SECRET_KEY", os.urandom(24).hex())
-app.wsgi_app = ProxyFix(app.wsgi_app, x_for=1, x_proto=1, x_host=1)
 # ---------------------------------------------------------------------------
@@ -105,71 +105,36 @@ def merge_items_with_annotations(
 # ---------------------------------------------------------------------------
-# Optional password protection
 # ---------------------------------------------------------------------------
-LOGIN_HTML = """<!DOCTYPE html>
-<html lang="de"><head><meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>Anmeldung</title>
-<style>
-  body { font-family: system-ui, sans-serif; background: #f5f5f5; }
-  .box { max-width: 320px; margin: 120px auto; background: #fff;
-         padding: 32px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1);
-         text-align: center; }
-  h2 { margin-bottom: 16px; font-size: 20px; }
-  input { padding: 10px; width: 100%%; border: 1px solid #ccc; border-radius: 4px;
-          font-size: 15px; margin-bottom: 12px; box-sizing: border-box; }
-  button { padding: 10px 24px; border: none; border-radius: 4px;
-           background: #2563eb; color: #fff; font-size: 15px; cursor: pointer; }
-  button:hover { background: #1d4ed8; }
-  .err { color: #dc2626; font-size: 13px; margin-bottom: 8px; }
-</style></head><body>
-<div class="box">
-  <h2>Zusammenfassungs-Evaluation</h2>
-  %(error)s
-  <form method="post">
-    <input type="password" name="password" placeholder="Passwort" autofocus>
-    <button type="submit">Weiter</button>
-  </form>
-</div></body></html>"""
 def _make_auth_token() -> str:
     """Create an HMAC token derived from the app password and secret key."""
-    return hmac.new(
-        app.secret_key.encode() if isinstance(app.secret_key, str) else app.secret_key,
-        APP_PASSWORD.encode(),
-        hashlib.sha256,
-    ).hexdigest()
-def _is_authenticated() -> bool:
-    return request.cookies.get("auth") == _make_auth_token()
 @app.before_request
 def check_auth():
     if not APP_PASSWORD:
         return None
-    if request.path == "/login":
         return None
-    if _is_authenticated():
         return None
-    if request.path.startswith("/api/"):
-        return jsonify({"error": "unauthorized"}), 401
-    return redirect("/login")
-@app.route("/login", methods=["GET", "POST"])
-def login():
-    if request.method == "POST":
-        if request.form.get("password") == APP_PASSWORD:
-            resp = make_response(redirect("/"))
-            resp.set_cookie("auth", _make_auth_token(), httponly=True, samesite="Lax")
-            return resp
-        return LOGIN_HTML % {"error": '<p class="err">Falsches Passwort.</p>'}, 401
-    return LOGIN_HTML % {"error": ""}
 # ---------------------------------------------------------------------------

 Annotations are persisted in a SQLite database.
 Optional password protection: set APP_PASSWORD as an environment variable.
+Authentication uses HMAC tokens stored in the browser via localStorage,
+avoiding cookies/sessions that can break behind reverse proxies.
 """
 import hashlib
 from functools import cache
 from pathlib import Path
+from flask import Flask, Response, jsonify, request, send_file
 DATASET_PATH = Path(os.environ.get("DATASET_PATH", "evaluation_dataset.jsonl"))
 DB_PATH = Path(os.environ.get("DB_PATH", "/data/annotations.db"))
 )
 APP_PASSWORD = os.environ.get("APP_PASSWORD", "")
+SECRET_KEY = os.environ.get("SECRET_KEY", os.urandom(24).hex())
 app = Flask(__name__)
 # ---------------------------------------------------------------------------
 # ---------------------------------------------------------------------------
+# Optional password protection (token-based, no cookies/sessions)
 # ---------------------------------------------------------------------------
 def _make_auth_token() -> str:
     """Create an HMAC token derived from the app password and secret key."""
+    key = SECRET_KEY.encode() if isinstance(SECRET_KEY, str) else SECRET_KEY
+    return hmac.new(key, APP_PASSWORD.encode(), hashlib.sha256).hexdigest()
 @app.before_request
 def check_auth():
     if not APP_PASSWORD:
         return None
+    if request.path in ("/", "/login"):
+        return None
+    if request.path.startswith("/api/login"):
         return None
+    token = request.headers.get("Authorization", "").removeprefix("Bearer ")
+    if token == _make_auth_token():
         return None
+    return jsonify({"error": "unauthorized"}), 401
+@app.route("/api/login", methods=["POST"])
+def api_login():
+    data = request.get_json()
+    if data and data.get("password") == APP_PASSWORD:
+        return jsonify({"token": _make_auth_token()})
+    return jsonify({"error": "wrong_password"}), 401
 # ---------------------------------------------------------------------------

index.html CHANGED Viewed

@@ -162,6 +162,29 @@
     text-align: center; padding: 60px 20px; color: #666; font-size: 15px;
   }
   .badge-promptd {
     background: #fef3c7; color: #92400e; padding: 3px 10px;
     border-radius: 12px; font-size: 12px; font-weight: 600;
@@ -183,6 +206,17 @@
 </head>
 <body>
 <header>
   <h1>Zusammenfassungs-Evaluation</h1>
   <div class="progress-box">
@@ -361,6 +395,47 @@ let filteredRows = [];
 let currentIdx = 0;
 let dirty = false;
 /* ---------- Silent session ID (one per browser, prevents overwrites) ---------- */
 function getSessionId() {
@@ -376,7 +451,7 @@ const SESSION_ID = getSessionId();
 /* ---------- Data loading ---------- */
 async function loadEntries() {
-  const res = await fetch("/api/entries?annotator=" + encodeURIComponent(SESSION_ID));
   if (!res.ok) { allRows = []; applyFilters(); return; }
   allRows = await res.json();
   applyFilters();
@@ -408,7 +483,7 @@ function applyFilters() {
 }
 async function refreshProgress() {
-  const res = await fetch("/api/progress?annotator=" + encodeURIComponent(SESSION_ID));
   if (!res.ok) return;
   const p = await res.json();
   document.getElementById("progress-text").textContent = p.annotated + " / " + p.total;
@@ -552,7 +627,7 @@ async function saveAnnotation() {
   const res = await fetch("/api/annotate", {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
     body: JSON.stringify(data),
   });
@@ -607,7 +682,7 @@ function toggleOriginal() {
 }
 /* ---------- Init ---------- */
-loadEntries();
 </script>
 </body>
 </html>

     text-align: center; padding: 60px 20px; color: #666; font-size: 15px;
   }
+  /* Login overlay */
+  .login-overlay {
+    position: fixed; inset: 0; background: #f5f5f5; z-index: 100;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .login-overlay.hidden { display: none; }
+  .login-box {
+    max-width: 320px; width: 100%; background: #fff;
+    padding: 32px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1);
+    text-align: center;
+  }
+  .login-box h2 { margin-bottom: 16px; font-size: 20px; }
+  .login-box input {
+    padding: 10px; width: 100%; border: 1px solid #ccc; border-radius: 4px;
+    font-size: 15px; margin-bottom: 12px; box-sizing: border-box;
+  }
+  .login-box button {
+    padding: 10px 24px; border: none; border-radius: 4px;
+    background: #2563eb; color: #fff; font-size: 15px; cursor: pointer;
+  }
+  .login-box button:hover { background: #1d4ed8; }
+  .login-error { color: #dc2626; font-size: 13px; margin-bottom: 8px; }
   .badge-promptd {
     background: #fef3c7; color: #92400e; padding: 3px 10px;
     border-radius: 12px; font-size: 12px; font-weight: 600;
 </head>
 <body>
+<div class="login-overlay" id="login-overlay">
+  <div class="login-box">
+    <h2>Zusammenfassungs-Evaluation</h2>
+    <p class="login-error" id="login-error" style="display:none">Falsches Passwort.</p>
+    <form onsubmit="handleLogin(event)">
+      <input type="password" id="login-password" placeholder="Passwort" autofocus>
+      <button type="submit">Weiter</button>
+    </form>
+  </div>
+</div>
 <header>
   <h1>Zusammenfassungs-Evaluation</h1>
   <div class="progress-box">
 let currentIdx = 0;
 let dirty = false;
+/* ---------- Auth ---------- */
+function getAuthToken() {
+  return localStorage.getItem("auth_token") || "";
+}
+function authHeaders() {
+  const token = getAuthToken();
+  const h = {};
+  if (token) h["Authorization"] = "Bearer " + token;
+  return h;
+}
+async function handleLogin(e) {
+  e.preventDefault();
+  const pw = document.getElementById("login-password").value;
+  const res = await fetch("/api/login", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ password: pw }),
+  });
+  if (res.ok) {
+    const data = await res.json();
+    localStorage.setItem("auth_token", data.token);
+    document.getElementById("login-overlay").classList.add("hidden");
+    loadEntries();
+  } else {
+    document.getElementById("login-error").style.display = "";
+  }
+}
+async function checkAuth() {
+  const res = await fetch("/api/progress?annotator=_ping", { headers: authHeaders() });
+  if (res.status === 401) {
+    document.getElementById("login-overlay").classList.remove("hidden");
+  } else {
+    document.getElementById("login-overlay").classList.add("hidden");
+    loadEntries();
+  }
+}
 /* ---------- Silent session ID (one per browser, prevents overwrites) ---------- */
 function getSessionId() {
 /* ---------- Data loading ---------- */
 async function loadEntries() {
+  const res = await fetch("/api/entries?annotator=" + encodeURIComponent(SESSION_ID), { headers: authHeaders() });
   if (!res.ok) { allRows = []; applyFilters(); return; }
   allRows = await res.json();
   applyFilters();
 }
 async function refreshProgress() {
+  const res = await fetch("/api/progress?annotator=" + encodeURIComponent(SESSION_ID), { headers: authHeaders() });
   if (!res.ok) return;
   const p = await res.json();
   document.getElementById("progress-text").textContent = p.annotated + " / " + p.total;
   const res = await fetch("/api/annotate", {
     method: "POST",
+    headers: { "Content-Type": "application/json", ...authHeaders() },
     body: JSON.stringify(data),
   });
 }
 /* ---------- Init ---------- */
+checkAuth();
 </script>
 </body>
 </html>