app: Sign in with OTM button on the login page (v0.4.1)

The server fills the OTM link into login.html from OTM_SSO_AUDIENCE (the
route itself has been mounted since 0.4.0); without the env the block stays
hidden and the password form is unchanged.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014LCQmFvKshyAJsE8C3B5ET

app/lib/version.mjs

@@ -1 +1 @@
-export const APP_VERSION = "0.5.0";
+export const APP_VERSION = "0.5.1";

app/public/login.html

@@ -21,6 +21,11 @@
   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; }
+  .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; }
 </style>
 </head>
 <body>
@@ -33,13 +38,22 @@
     <button type="submit">Sign in</button>
     <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>
+  </div>
 </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",
+  const REASONS = { not_enabled: "OTM 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 otm = document.getElementById("otm");
+  if (otm.querySelector("a").getAttribute("href").startsWith("https://")) otm.style.display = "block";
   const reason = new URLSearchParams(location.search).get("reason");
   if (typeof REASONS[reason] === "string") document.getElementById("err").textContent = REASONS[reason];
 

app/server.mjs

@@ -521,6 +521,18 @@ const isOwner = async (session) => session?.operator
 
 const MIME = { ".html": "text/html", ".js": "text/javascript", ".css": "text/css",
   ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".webp": "image/webp", ".heic": "image/heic" };
+// The login page gets its "Sign in with OTM" link filled in here: the page is
+// static HTML, but the audience is per-instance env. No OTM wiring → the
+// placeholder stays empty and the page hides the block.
+function loginPage() {
+  const secret = (process.env.OTM_SSO_SECRET || "").trim();
+  const audience = process.env.OTM_SSO_AUDIENCE || "";
+  const url = secret && audience
+    ? `https://admin.poweredbyotm.com/sso/authorize?aud=${encodeURIComponent(audience)}&next=%2F`
+    : "";
+  return readFileSync(join(ROOT, "public", "login.html"), "utf8").replace("__OTM_SSO_URL__", url);
+}
+
 const PUBLIC_PATHS = new Set(["/api/health", "/api/login", "/login", "/login.html", "/api/auth/operator-magic", "/api/auth/otm-sso"]);
 
 createServer(async (req, res) => {
@@ -534,7 +546,7 @@ createServer(async (req, res) => {
     const isPublic = PUBLIC_PATHS.has(url.pathname);
 
     if (url.pathname === "/login" || url.pathname === "/login.html")
-      return send(200, readFileSync(join(ROOT, "public", "login.html")), "text/html");
+      return send(200, loginPage(), "text/html");
 
     if (!session && !isPublic) {
       if (url.pathname.startsWith("/api/") || url.pathname.startsWith("/photos/") || url.pathname.startsWith("/file/"))