@celsoft/platform 0.4.0 → 0.5.0

package/dist/runtime/screens.js

@@ -0,0 +1,158 @@
+// Sign-in, sign-up and password screens every app with auth gets. Class names are part of the
+// public interface: an app restyles them with its own stylesheet, loaded after this one.
+export const SCREEN_PATHS = ["/login", "/signup", "/forgot", "/reset", "/recover"];
+const email = { name: "email", label: "Email", type: "email", autocomplete: "email" };
+const password = (autocomplete, label = "Password") => ({ name: "password", label, type: "password", autocomplete });
+const SCREENS = {
+    "/login": {
+        title: "Sign in",
+        fields: [email, password("current-password")],
+        button: "Sign in",
+        links: [["/signup", "Create an account"], ["/forgot", "Forgot your password?"]],
+    },
+    "/signup": {
+        title: "Create an account",
+        fields: [{ name: "name", label: "Name", type: "text", autocomplete: "name" }, email, password("new-password")],
+        button: "Create account",
+        links: [["/login", "Already have an account? Sign in"]],
+    },
+    "/forgot": {
+        title: "Reset your password",
+        intro: "Enter your email and we'll send you a link to choose a new password.",
+        fields: [email],
+        button: "Send reset link",
+        links: [["/login", "Back to sign in"]],
+    },
+    "/reset": {
+        title: "Choose a new password",
+        fields: [password("new-password", "New password")],
+        button: "Change password",
+        links: [["/login", "Back to sign in"]],
+    },
+    "/recover": {
+        title: "Recover the owner account",
+        intro: "Use the recovery code you saved when you first signed in. It works once.",
+        fields: [email, { name: "code", label: "Recovery code", type: "text", autocomplete: "one-time-code" }, password("new-password", "New password")],
+        button: "Reset owner password",
+        links: [["/login", "Back to sign in"]],
+    },
+};
+export function isScreen(pathname) {
+    return SCREEN_PATHS.includes(pathname);
+}
+export function renderScreen(path, appName, stylesheet) {
+    const screen = SCREENS[path];
+    const fields = screen.fields
+        .map((f) => `<label class="platform-field"><span class="platform-label">${f.label}</span>` +
+        `<input class="platform-input" name="${f.name}" type="${f.type}" autocomplete="${f.autocomplete}" required${f.type === "password" ? ' minlength="8"' : ""}></label>`)
+        .join("");
+    const links = screen.links.map(([href, text]) => `<a href="${href}" data-carry>${text}</a>`).join("");
+    const html = `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>${screen.title} · ${escape(appName)}</title>
+<style>${STYLE}</style>${stylesheet ? `<link rel="stylesheet" href="${escape(stylesheet)}">` : ""}
+</head><body class="platform-screen" data-page="${path.slice(1)}">
+<main class="platform-card">
+<p class="platform-app">${escape(appName)}</p>
+<h1 class="platform-title">${screen.title}</h1>
+${screen.intro ? `<p class="platform-intro">${screen.intro}</p>` : ""}
+<form class="platform-form" novalidate>${fields}
+<p class="platform-error" role="alert" hidden></p>
+<button class="platform-button" type="submit">${screen.button}</button></form>
+<div class="platform-message" role="status" hidden></div>
+<nav class="platform-links">${links}</nav>
+</main>
+<script>${SCRIPT}</script>
+</body></html>`;
+    return new Response(html, { headers: { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" } });
+}
+function escape(text) {
+    return text.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+}
+const STYLE = `
+:root{--platform-bg:#f4f6f8;--platform-card:#fff;--platform-fg:#1b2430;--platform-muted:#5d6a78;--platform-line:#d5dce3;--platform-accent:#2554c7;--platform-on-accent:#fff;--platform-error:#b42318;color-scheme:light dark}
+@media (prefers-color-scheme:dark){:root{--platform-bg:#11161c;--platform-card:#19212a;--platform-fg:#e6ebf0;--platform-muted:#9aa7b4;--platform-line:#2c3742;--platform-accent:#7aa2ff;--platform-on-accent:#0b1220;--platform-error:#ff8a80}}
+*{box-sizing:border-box}
+body.platform-screen{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--platform-bg);color:var(--platform-fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
+.platform-card{width:100%;max-width:380px;background:var(--platform-card);border:1px solid var(--platform-line);border-radius:12px;padding:28px 24px;display:flex;flex-direction:column;gap:16px}
+.platform-app{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--platform-muted)}
+.platform-title{margin:0;font-size:24px;line-height:1.2}
+.platform-intro{margin:0;color:var(--platform-muted)}
+.platform-form{display:flex;flex-direction:column;gap:14px}
+.platform-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
+.platform-input{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--platform-line);border-radius:8px;background:var(--platform-bg);color:inherit}
+.platform-input:focus-visible,.platform-button:focus-visible,.platform-links a:focus-visible{outline:2px solid var(--platform-accent);outline-offset:2px}
+.platform-button{font:inherit;font-weight:600;padding:11px 14px;border:0;border-radius:8px;background:var(--platform-accent);color:var(--platform-on-accent);cursor:pointer}
+.platform-button[disabled]{opacity:.6;cursor:progress}
+.platform-error{margin:0;color:var(--platform-error);font-size:14px}
+.platform-message{display:flex;flex-direction:column;gap:12px}
+.platform-message p{margin:0}
+.platform-code{font:600 18px/1.4 ui-monospace,Menlo,monospace;letter-spacing:.04em;padding:12px;border:1px dashed var(--platform-line);border-radius:8px;text-align:center;word-break:break-all;user-select:all}
+.platform-links{display:flex;flex-direction:column;gap:6px;font-size:14px}
+.platform-links a{color:var(--platform-accent)}
+`;
+const SCRIPT = `
+const page = document.body.dataset.page;
+const params = new URLSearchParams(location.search);
+const next = (p => p && p.startsWith("/") && !p.startsWith("//") ? p : "/")(params.get("next"));
+const carried = new URLSearchParams([...params].filter(([k]) => k === "next" || k === "invitation")).toString();
+for (const a of document.querySelectorAll("[data-carry]")) if (carried) a.href += "?" + carried;
+const form = document.querySelector(".platform-form");
+const error = document.querySelector(".platform-error");
+const message = document.querySelector(".platform-message");
+
+async function post(path, body) {
+  const r = await fetch(path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body), credentials: "same-origin" });
+  const data = await r.json().catch(() => ({}));
+  if (!r.ok) throw new Error(r.status === 429 ? "Too many attempts. Wait a minute, then try again." : data.message || "That didn't work. Try again.");
+  return data || {};
+}
+
+function say(...parts) {
+  form.hidden = true;
+  message.replaceChildren(...parts.map(p => typeof p === "string" ? Object.assign(document.createElement("p"), { textContent: p }) : p));
+  message.hidden = false;
+}
+
+async function finish() {
+  const invitation = params.get("invitation");
+  if (invitation) await post("/api/auth/organization/accept-invitation", { invitationId: invitation }).catch(() => {});
+  const { code } = await post("/api/platform/recovery-code", {}).catch(() => ({}));
+  if (!code) return location.assign(next);
+  const box = Object.assign(document.createElement("p"), { className: "platform-code", textContent: code });
+  const go = Object.assign(document.createElement("button"), { className: "platform-button", type: "button", textContent: "I saved it, continue" });
+  go.onclick = () => location.assign(next);
+  say("You're the owner of this app. Save this recovery code somewhere safe: it resets your password if you ever lose access to your email, and it is shown only once.", box, go);
+}
+
+const actions = {
+  login: async v => { await post("/api/auth/sign-in/email", { email: v.email, password: v.password }); await finish(); },
+  signup: async v => {
+    const data = await post("/api/auth/sign-up/email", { name: v.name, email: v.email, password: v.password, callbackURL: "/login" + (carried ? "?" + carried : "") });
+    if (data.token) return finish();
+    say("Check your email for a link to confirm your address. It signs you in.");
+  },
+  forgot: async v => { await post("/api/auth/request-password-reset", { email: v.email, redirectTo: "/reset" }); say("If that address has an account, a reset link is on its way."); },
+  reset: async v => { await post("/api/auth/reset-password", { newPassword: v.password, token: params.get("token") }); say("Your password is changed. Sign in with it now."); },
+  recover: async v => {
+    const { ok } = await post("/api/platform/recover", { email: v.email, code: v.code, password: v.password });
+    if (!ok) throw new Error("That email and recovery code don't match.");
+    say("The owner password is changed and every session is signed out. Sign in with the new password; you'll get a new recovery code.");
+  },
+};
+
+form.addEventListener("submit", async e => {
+  e.preventDefault();
+  error.hidden = true;
+  if (!form.reportValidity()) return;
+  const button = form.querySelector("button");
+  button.disabled = true;
+  try { await actions[page](Object.fromEntries(new FormData(form))); }
+  catch (err) { error.textContent = err.message; error.hidden = false; }
+  finally { button.disabled = false; }
+});
+
+if (page === "reset" && (params.get("error") || !params.get("token"))) say("That reset link has expired or was already used. Ask for a new one from the sign-in page.");
+if (page === "login") fetch("/api/auth/get-session", { credentials: "same-origin" }).then(r => r.json()).then(s => s && s.session && finish()).catch(() => {});
+`;
+//# sourceMappingURL=screens.js.map

package/dist/runtime/screens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screens.js","sourceRoot":"","sources":["../../src/runtime/screens.ts"],"names":[],"mappings":"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"}