Files
Bonna-Moon-Studio/app/public/login.html
tonym 9e21895232 app: OTM integrations — operator-magic + account SSO + suggestion jots + self-update (v0.4.0)
Three new doors, all wire-contract ports of the shared @otm/account-panel
factories (this backbone is plain Node — the Next factories can't mount):

- GET /api/auth/operator-magic — OTM 'Log in as admin'. HS256 verify against
  OPERATOR_SHARED_SECRET (alg allowlist, constant-time, action-claim rejected
  for flow separation), single-use jti via OperatorMagicConsumed (+ who/when
  audit), 1-HOUR session with cookie Max-Age derived from the payload, 🔑
  support-session banner in the app, every failure a 302 reason redirect.
- GET /api/auth/otm-sso — the OTM /account tile. Stricter sso-ticket verify
  (exp mandatory, audience compared), email-then-role actor mapping, safeNext.
- 💡 suggestion jot chip — files a Gitea issue (shared attribution footer,
  8k cap, 10s timeout); on any failure the jot is kept as a note instead.
  Success also leaves a '#N — …' note so she has her own record.
- Footer version chip + one-tap self-update (HMAC-signed OTM proxy with
  explicit field picking — foreign JSON can never reach the _setSession/_redirect
  control keys), owner-gated, 10-min sessionStorage cache on the check.

Hardening that rode along: session key now derived from OPERATOR_SHARED_SECRET
(managed boot REFUSES the old derivable DATABASE_URL fallback), 1MB JSON body
cap, login.html prototype-lookup fix. NOTE: server.mjs previously contained a
literal NUL byte that made git treat it as binary — this commit re-encodes it
as an escape (behavior identical) and adds .gitattributes so source diffs can
never go blind again.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SmybqyQmZWfcqA1vMP4jbQ
2026-08-09 22:31:34 -05:00

56 lines
3.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>🌙 Studio Notebook — sign in</title>
<style>
:root { --bg: #fdf7f2; --card: #fff; --ink: #4a3b47; --plum: #8d6b94; --plum-deep: #6e4f78;
--blush-deep: #c98da8; --line: #eddfe3; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Avenir Next", "Nunito", "Trebuchet MS", sans-serif; background: var(--bg);
color: var(--ink); min-height: 100vh; display: grid; place-items: center; }
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 20px;
padding: 34px 36px; width: min(92vw, 380px); box-shadow: 0 4px 16px rgba(141,107,148,0.1); }
h1 { font-family: Georgia, serif; font-size: 24px; color: var(--plum-deep); margin-bottom: 4px; }
.sub { color: #9c8698; font-size: 14px; font-style: italic; font-family: Georgia, serif; margin-bottom: 22px; }
label { display: block; font-size: 12px; font-weight: 700; color: var(--blush-deep);
text-transform: uppercase; letter-spacing: 0.08em; margin: 14px 0 5px; }
input { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 15px;
font-size: 15px; background: var(--bg); color: var(--ink); font-family: inherit; }
button { width: 100%; margin-top: 22px; border: none; border-radius: 12px; padding: 13px;
font-size: 15px; font-weight: 700; cursor: pointer; background: var(--plum); color: #fff; font-family: inherit; }
.err { color: #b3556b; font-size: 13.5px; margin-top: 12px; min-height: 18px; }
</style>
</head>
<body>
<div class="card">
<h1>🌙 Studio Notebook</h1>
<div class="sub">welcome back to the studio</div>
<form id="f">
<label>Email</label><input type="email" id="email" autocomplete="username" required>
<label>Password</label><input type="password" id="password" autocomplete="current-password" required>
<button type="submit">Sign in</button>
<div class="err" id="err"></div>
</form>
</div>
<script>
// ?reason=… arrives when an OTM "Log in as admin" link didn't take
const REASONS = { not_enabled: "admin sign-in isn't set up for this studio yet",
invalid_token: "that sign-in link isn't valid", link_already_used: "that sign-in link was already used — ask for a fresh one",
no_admin: "there's no owner account here to sign in as", no_account: "no studio account matches your OTM account yet",
server_error: "something went wrong — try again" };
const reason = new URLSearchParams(location.search).get("reason");
if (typeof REASONS[reason] === "string") document.getElementById("err").textContent = REASONS[reason];
document.getElementById("f").addEventListener("submit", async (e) => {
e.preventDefault();
const r = await fetch("/api/login", { method: "POST", headers: { "content-type": "application/json" },
body: JSON.stringify({ email: email.value, password: password.value }) }).then((x) => x.json());
if (r.ok) location.href = "/";
else document.getElementById("err").textContent = r.error || "sign-in failed";
});
</script>
</body>
</html>