From 646fa747abadbaff0516027370bbb3328cdac76b Mon Sep 17 00:00:00 2001 From: Ivo Oskamp Date: Thu, 28 May 2026 16:06:33 +0200 Subject: [PATCH] auth: add login page and shared auth.js --- containers/clearview/site/auth.js | 22 +++++++++++++ containers/clearview/site/login.html | 49 ++++++++++++++++++++++++++++ containers/clearview/site/styles.css | 16 +++++++++ 3 files changed, 87 insertions(+) create mode 100644 containers/clearview/site/auth.js create mode 100644 containers/clearview/site/login.html diff --git a/containers/clearview/site/auth.js b/containers/clearview/site/auth.js new file mode 100644 index 0000000..0c9e38e --- /dev/null +++ b/containers/clearview/site/auth.js @@ -0,0 +1,22 @@ +(function (global) { + async function postJson(url, body) { + const r = await fetch(url, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + credentials: 'same-origin', + body: JSON.stringify(body), + }); + let data = null; + try { data = await r.json(); } catch (_) {} + return { ok: r.ok, status: r.status, data }; + } + + async function getJson(url) { + const r = await fetch(url, { credentials: 'same-origin' }); + let data = null; + try { data = await r.json(); } catch (_) {} + return { ok: r.ok, status: r.status, data }; + } + + global.ClearviewAuth = { postJson, getJson }; +})(window); diff --git a/containers/clearview/site/login.html b/containers/clearview/site/login.html new file mode 100644 index 0000000..e40309c --- /dev/null +++ b/containers/clearview/site/login.html @@ -0,0 +1,49 @@ + + + + + Clearview — Sign in + + + +
+

Clearview

+

Sign in to continue

+
+ + + + + +
+
+ + + + diff --git a/containers/clearview/site/styles.css b/containers/clearview/site/styles.css index 44f6172..14da58c 100644 --- a/containers/clearview/site/styles.css +++ b/containers/clearview/site/styles.css @@ -752,3 +752,19 @@ strong { display: none; } } + +/* === Auth (login / setup) pages and header badge ============================== */ +.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f1115; margin: 0; } +.auth-card { width: 360px; max-width: 92vw; padding: 28px; background: #1a1d24; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35); color: #e6e8ee; font-family: system-ui, sans-serif; } +.auth-card h1 { margin: 0 0 4px; font-size: 22px; } +.auth-sub { margin: 0 0 18px; opacity: .75; } +.auth-card form { display: flex; flex-direction: column; gap: 12px; } +.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } +.auth-card input[type=text], .auth-card input[type=password], .auth-card input:not([type]) { padding: 8px 10px; background: #0e1116; border: 1px solid #2a2f3a; border-radius: 6px; color: inherit; } +.auth-card .auth-remember { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; } +.auth-card button { padding: 10px; background: #3b82f6; border: 0; border-radius: 6px; color: #fff; font-weight: 600; cursor: pointer; } +.auth-card button:hover { background: #2563eb; } +.auth-error { background: #3a1f25; color: #fda4af; padding: 8px 10px; border-radius: 6px; font-size: 13px; } +.user-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid #2a2f3a; border-radius: 999px; font-size: 12px; } +.user-badge button { background: transparent; border: 0; color: #93c5fd; cursor: pointer; padding: 0; } +.user-badge button:hover { text-decoration: underline; }