bonna61/Bonna-Moon-Studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

app: sign-in page onto the shared OTM standard (v0.5.2)

Browse Source 
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
This commit is contained in:
tonym
2026-10-18 23:34:14 -05:00
co-authored by Claude Fable 5.1
parent 5ffabe1a4d
commit fc5a82c45a
3 changed files with 52 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lib/version.mjs
+1 -1
View File
@@ -1 +1 @@
export const APP_VERSION = "0.5.1"; export const APP_VERSION = "0.5.2";
app/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "bms-backbone", "name": "bms-backbone",
"version": "0.5.1", "version": "0.5.2",
"private": true, "private": true,
"type": "module", "type": "module",
"scripts": { "scripts": {
app/public/login.html
+50 -29
View File
@@ -6,44 +6,56 @@
<title>🌙 Studio Notebook — sign in</title> <title>🌙 Studio Notebook — sign in</title>
<style> <style>
:root { --bg: #fdf7f2; --card: #fff; --ink: #4a3b47; --plum: #8d6b94; --plum-deep: #6e4f78; :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; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Avenir Next", "Nunito", "Trebuchet MS", sans-serif; background: var(--bg); 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; .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); } padding: 34px 36px; 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); label { display: block; font-size: 12px; font-weight: 700; color: var(--blush-deep);
text-transform: uppercase; letter-spacing: 0.08em; margin: 14px 0 5px; } 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; 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; } 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; 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; } 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; } .err { color: #b3556b; font-size: 13.5px; margin-top: 12px; min-height: 18px; }
.otm { display: none; margin-top: 14px; text-align: center; } .helper { color: var(--muted); font-size: 12.5px; text-align: center; margin-top: 14px; }
.otm a { display: block; border: 1.5px solid var(--plum); border-radius: 12px; padding: 12px; .linklike { width: auto; display: block; margin: 16px auto 0; border: none; background: none;
color: var(--plum-deep); font-weight: 700; text-decoration: none; } padding: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: underline;
.otm a:hover { background: var(--bg); } cursor: pointer; font-family: inherit; text-align: center; }
.or { color: #9c8698; font-size: 12px; margin-top: 16px; text-align: center; } #local { display: none; }
</style> </style>
</head> </head>
<body> <body>
<div class="card"> <div class="wrap">
<h1>🌙 Studio Notebook</h1> <div class="brand">
<div class="sub">welcome back to the studio</div> <h1>🌙 Studio Notebook</h1>
<form id="f"> <div class="sub">welcome back to the studio</div>
<label>Email</label><input type="email" id="email" autocomplete="username" required> </div>
<label>Password</label><input type="password" id="password" autocomplete="current-password" required> <div class="card">
<button type="submit">Sign in</button>
<div class="err" id="err"></div> <div class="err" id="err"></div>
</form>
<!-- Sign in with OTM: one OTM account opens every OTM surface. The server <!-- 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 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. --> block stays hidden and the password form shows directly instead. -->
<div class="otm" id="otm"> <div id="otm-step">
<div class="or">or</div> <a class="btn" id="otmLink" href="__OTM_SSO_URL__">Sign in with OTM</a>
<a 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>
</div> </div>
<script> <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", 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", 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" }; server_error: "something went wrong — try again" };
const otm = document.getElementById("otm"); const otmStep = document.getElementById("otm-step");
if (otm.querySelector("a").getAttribute("href").startsWith("https://")) otm.style.display = "block"; 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"); const reason = new URLSearchParams(location.search).get("reason");
if (typeof REASONS[reason] === "string") document.getElementById("err").textContent = REASONS[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(); e.preventDefault();
const r = await fetch("/api/login", { method: "POST", headers: { "content-type": "application/json" }, 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()); body: JSON.stringify({ email: email.value, password: password.value }) }).then((x) => x.json());