carbon-tokenization

Running

tfrere HF Staff commited on Apr 30

Commit

d8c3c68

1 Parent(s): d63dcfe

feat(login-page): align with app design tokens, bigger outlined HF button

- Extract a single renderLoginPage() helper used by both the editor login
gate and the published-article fallback (no more duplicated inline HTML)
- Use the app's primary color (OKLCH) and Source Sans Pro font, with proper
light/dark via prefers-color-scheme so the page no longer looks like an
unrelated dark stub
- Replace the small filled button with a bigger outlined CTA (14×22 px
padding, 1.5px primary border, color-mix hover)
- Inline the official Hugging Face brand logo SVG (no external network
dependency, no emoji fallback)
- Escape user-controlled hint substitutions through a dedicated escapeHtml()

Made-with: Cursor

Files changed (1) hide show

backend/src/create-app.ts +157 -29

backend/src/create-app.ts CHANGED Viewed

@@ -20,34 +20,166 @@ export { debouncedSave, resetSaveTimers, resetPublishedRestored } from "./persis
 const DEFAULT_DOC_NAME = "default";
-function sendLoginPage(res: express.Response) {
-  res.status(200).send(`<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Research Article Template Editor</title>
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { display: flex; align-items: center; justify-content: center; height: 100vh;
-           font-family: system-ui, -apple-system, sans-serif; background: #0a0a0a; color: #aaa; }
-    .card { text-align: center; max-width: 420px; padding: 2rem; }
-    h1 { color: #fff; font-size: 1.5rem; margin-bottom: 0.5rem; }
-    p { margin-bottom: 1.5rem; line-height: 1.5; }
-    a.btn { display: inline-block; padding: 0.6rem 1.5rem; border-radius: 8px;
-            background: #958DF1; color: #fff; text-decoration: none; font-weight: 500;
-            transition: opacity 0.15s; }
-    a.btn:hover { opacity: 0.85; }
   </style>
 </head>
 <body>
-  <div class="card">
-    <h1>This article is not yet published</h1>
-    <p>Log in with your Hugging Face account to access the editor.</p>
-    <a class="btn" href="/oauth/authorize" target="_blank">Sign in with Hugging Face</a>
-  </div>
 </body>
-</html>`);
 }
 export function createApp() {
@@ -178,17 +310,13 @@ export function createApp() {
         const user = await resolveUser(token);
         if (!user || !user.canEdit) {
-          res.status(200).send(`<!DOCTYPE html>
-<html lang="en">
-<head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
-<title>Sign in required</title>
-<style>*{margin:0;padding:0;box-sizing:border-box}body{display:flex;align-items:center;justify-content:center;height:100vh;font-family:system-ui,-apple-system,sans-serif;background:#0a0a0a;color:#aaa}.card{text-align:center;max-width:420px;padding:2rem}h1{color:#fff;font-size:1.5rem;margin-bottom:.5rem}p{margin-bottom:1.5rem;line-height:1.5}a.btn{display:inline-block;padding:.6rem 1.5rem;border-radius:8px;background:#958DF1;color:#fff;text-decoration:none;font-weight:500;transition:opacity .15s}a.btn:hover{opacity:.85}</style></head>
-<body><div class="card">
-<h1>Editor access</h1>
-<p>Sign in with your Hugging Face account to start editing.</p>
-<a class="btn" href="/oauth/authorize" target="_blank">Sign in with Hugging Face</a>
-<p style="margin-top:1rem;font-size:.85rem;color:#666">After signing in, come back and <a href="/editor" style="color:#958DF1">refresh this page</a>.</p>
-</div></body></html>`);
           return;
         }
       }

 const DEFAULT_DOC_NAME = "default";
+/**
+ * Inline SVG of the official Hugging Face brand logo (the smiling face).
+ * Source: https://huggingface.co/front/assets/huggingface_logo-noborder.svg
+ */
+const HF_LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 88" width="28" height="26" aria-hidden="true" focusable="false">
+  <path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z"/>
+  <path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"/>
+  <path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/>
+  <path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/>
+  <path fill="#3A3B45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clip-rule="evenodd"/>
+  <path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5Z"/>
+</svg>`;
+interface LoginPageOptions {
+  title: string;
+  description: string;
+  /** Optional secondary line shown below the button (e.g. "after signing in, refresh"). */
+  hint?: string;
+}
+function renderLoginPage({ title, description, hint }: LoginPageOptions): string {
+  const safeTitle = escapeHtml(title);
+  const safeDescription = escapeHtml(description);
+  const hintHtml = hint
+    ? `<p class="login__hint">${escapeHtml(hint).replace(
+        /\{refresh\}/g,
+        `<a class="login__hint-link" href="/editor">refresh this page</a>`,
+      )}</p>`
+    : "";
+  return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>${safeTitle} - Research Article Template Editor</title>
   <style>
+    :root {
+      --primary-color: oklch(0.75 0.12 47);
+      --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
+      --page-bg: #ffffff;
+      --text-color: rgba(0, 0, 0, .85);
+      --muted-color: rgba(0, 0, 0, .6);
+      --border-color: rgba(0, 0, 0, .15);
+      --button-radius: 6px;
+      --font-stack: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --page-bg: #0f1115;
+        --text-color: rgba(255, 255, 255, .9);
+        --muted-color: rgba(255, 255, 255, .65);
+        --border-color: rgba(255, 255, 255, .18);
+      }
+    }
     * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { height: 100%; }
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 24px;
+      font-family: var(--font-stack);
+      background: var(--page-bg);
+      color: var(--text-color);
+      -webkit-font-smoothing: antialiased;
+    }
+    .login {
+      text-align: center;
+      max-width: 460px;
+      width: 100%;
+    }
+    .login__title {
+      font-size: 1.625rem;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+      margin-bottom: 0.5rem;
+    }
+    .login__description {
+      font-size: 1rem;
+      line-height: 1.55;
+      color: var(--muted-color);
+      margin-bottom: 2rem;
+    }
+    .login__btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 22px;
+      font-family: inherit;
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-color);
+      background: transparent;
+      border: 1.5px solid var(--primary-color);
+      border-radius: var(--button-radius);
+      text-decoration: none;
+      cursor: pointer;
+      transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
+    }
+    .login__btn:hover {
+      background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+      border-color: var(--primary-color-hover);
+    }
+    .login__btn:active {
+      transform: translateY(1px);
+    }
+    .login__btn:focus-visible {
+      outline: 2px solid var(--primary-color);
+      outline-offset: 3px;
+    }
+    .login__btn svg {
+      flex-shrink: 0;
+      display: block;
+    }
+    .login__hint {
+      margin-top: 1.25rem;
+      font-size: 0.9rem;
+      color: var(--muted-color);
+    }
+    .login__hint-link {
+      color: var(--primary-color);
+      text-decoration: none;
+      border-bottom: 1px dashed color-mix(in srgb, var(--primary-color) 50%, transparent);
+    }
+    .login__hint-link:hover {
+      border-bottom-style: solid;
+    }
   </style>
 </head>
 <body>
+  <main class="login">
+    <h1 class="login__title">${safeTitle}</h1>
+    <p class="login__description">${safeDescription}</p>
+    <a class="login__btn" href="/oauth/authorize" target="_blank" rel="noopener">
+      ${HF_LOGO_SVG}
+      <span>Sign in with Hugging Face</span>
+    </a>
+    ${hintHtml}
+  </main>
 </body>
+</html>`;
+}
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+function sendLoginPage(res: express.Response) {
+  res.status(200).send(
+    renderLoginPage({
+      title: "This article is not yet published",
+      description: "Log in with your Hugging Face account to access the editor.",
+    }),
+  );
 }
 export function createApp() {
         const user = await resolveUser(token);
         if (!user || !user.canEdit) {
+          res.status(200).send(
+            renderLoginPage({
+              title: "Editor access",
+              description: "Sign in with your Hugging Face account to start editing.",
+              hint: "After signing in, come back and {refresh}.",
+            }),
+          );
           return;
         }
       }