From fc5a82c45a5f2be8415d81a4e1c53e7d6fb7d156 Mon Sep 17 00:00:00 2001
From: tonym <anthonymoon61@gmail.com>
Date: Sun, 18 Oct 2026 23:34:14 -0500
Subject: [PATCH] app: sign-in page onto the shared OTM standard (v0.5.2)

Restyle login.html to the platform standard: brand (name + tagline)
above one centered card, "Sign in with OTM" as the full-width primary
button with a muted Face ID/Touch ID/passkey helper line under it,
and a small "Other ways to sign in" link that swaps in the
email/password form (which ends with its own small "Sign in with
OTM" link back). When OTM isn't wired (empty __OTM_SSO_URL__), the
password form shows directly, as before.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014LCQmFvKshyAJsE8C3B5ET
---
 app/lib/version.mjs   |  2 +-
 app/package.json      |  2 +-
 app/public/login.html | 79 +++++++++++++++++++++++++++----------------
 3 files changed, 52 insertions(+), 31 deletions(-)

diff --git a/app/lib/version.mjs b/app/lib/version.mjs
index 419a018..76abbf1 100644
--- a/app/lib/version.mjs
+++ b/app/lib/version.mjs
@@ -1 +1 @@
-export const APP_VERSION = "0.5.1";
+export const APP_VERSION = "0.5.2";
diff --git a/app/package.json b/app/package.json
index 67e8b1a..c80dc56 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bms-backbone",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/app/public/login.html b/app/public/login.html
index 3815cbc..03594f9 100644
--- a/app/public/login.html
+++ b/app/public/login.html
@@ -6,44 +6,56 @@
 <title>🌙 Studio Notebook — sign in</title>
 <style>
   :root { --bg: #fdf7f2; --card: #fff; --ink: #4a3b47; --plum: #8d6b94; --plum-deep: #6e4f78;
-    --blush-deep: #c98da8; --line: #eddfe3; }
+    --blush-deep: #c98da8; --line: #eddfe3; --muted: #9c8698; }
   * { 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; }
+    color: var(--ink); min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
+  .wrap { width: min(92vw, 380px); }
+  .brand { text-align: center; margin-bottom: 22px; }
+  .brand h1 { font-family: Georgia, serif; font-size: 26px; color: var(--plum-deep); margin-bottom: 4px; }
+  .brand .sub { color: var(--muted); font-size: 14px; font-style: italic; font-family: Georgia, serif; }
   .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; }
+    padding: 34px 36px; box-shadow: 0 4px 16px rgba(141,107,148,0.1); }
   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; }
+  button, a.btn { width: 100%; display: block; 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;
+    text-align: center; text-decoration: none; }
+  button:hover, a.btn:hover { background: var(--plum-deep); }
   .err { color: #b3556b; font-size: 13.5px; margin-top: 12px; min-height: 18px; }
-  .otm { display: none; margin-top: 14px; text-align: center; }
-  .otm a { display: block; border: 1.5px solid var(--plum); border-radius: 12px; padding: 12px;
-    color: var(--plum-deep); font-weight: 700; text-decoration: none; }
-  .otm a:hover { background: var(--bg); }
-  .or { color: #9c8698; font-size: 12px; margin-top: 16px; text-align: center; }
+  .helper { color: var(--muted); font-size: 12.5px; text-align: center; margin-top: 14px; }
+  .linklike { width: auto; display: block; margin: 16px auto 0; border: none; background: none;
+    padding: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: underline;
+    cursor: pointer; font-family: inherit; text-align: center; }
+  #local { display: none; }
 </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="wrap">
+  <div class="brand">
+    <h1>🌙 Studio Notebook</h1>
+    <div class="sub">welcome back to the studio</div>
+  </div>
+  <div class="card">
     <div class="err" id="err"></div>
-  </form>
-  <!-- Sign in with OTM: one OTM account opens every OTM surface. The server
-       fills in the link (it knows this studio's audience); left empty, the
-       block stays hidden and the password form is the only way in. -->
-  <div class="otm" id="otm">
-    <div class="or">or</div>
-    <a href="__OTM_SSO_URL__">Sign in with OTM</a>
+
+    <!-- Sign in with OTM: one OTM account opens every OTM surface. The server
+         fills in the link (it knows this studio's audience); left empty, the
+         block stays hidden and the password form shows directly instead. -->
+    <div id="otm-step">
+      <a class="btn" id="otmLink" href="__OTM_SSO_URL__">Sign in with OTM</a>
+      <div class="helper">Your OTM account — Face ID, Touch ID or a passkey works there.</div>
+      <button type="button" class="linklike" id="showOther">Other ways to sign in</button>
+    </div>
+
+    <form id="local">
+      <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>
+      <button type="button" class="linklike" id="showOtm">Sign in with OTM</button>
+    </form>
   </div>
 </div>
 <script>
@@ -52,12 +64,21 @@
     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 otm = document.getElementById("otm");
-  if (otm.querySelector("a").getAttribute("href").startsWith("https://")) otm.style.display = "block";
+  const otmStep = document.getElementById("otm-step");
+  const localForm = document.getElementById("local");
+  const configured = document.getElementById("otmLink").getAttribute("href").startsWith("https://");
+  if (configured) { otmStep.style.display = "block"; localForm.style.display = "none"; }
+  else { otmStep.style.display = "none"; localForm.style.display = "block"; }
+  document.getElementById("showOther").addEventListener("click", () => {
+    otmStep.style.display = "none"; localForm.style.display = "block";
+  });
+  document.getElementById("showOtm").addEventListener("click", (e) => {
+    e.preventDefault(); otmStep.style.display = "block"; localForm.style.display = "none";
+  });
   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) => {
+  document.getElementById("local").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());