@scalio-cloud/ui 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.4.0
+- New sign-in building blocks in `@scalio-cloud/ui/react`: `AuthLayout` (app brand on a dark grid on the left, form
+  on the right, language and optional theme top right, small brand above the form on phones), `AuthHeader`,
+  `MicrosoftButton`, `AuthDivider` ("oder mit E-Mail"), `AuthMessage`.
+- New `ProfileSection` and `PROFILE_SECTIONS` for the profile page (Konto, Darstellung, Sprache und Region,
+  Sicherheit, Verknüpfungen), title and hint on the left, content in a card on the right.
+- More shared words in `LABELS` (Anmelden, Passwort vergessen?, Passwort ändern, Zwei-Faktor-Anmeldung, ...).
+- New `auth.css` (imported by `index.css`). No visual change for apps that do not use the new components.
+
 ## 0.3.0
 - New `@scalio-cloud/ui/react`: shared app header (`AppHeader` with status, language, theme, support and user menu
   in a fixed order), `UserMenu`, `LanguageToggle`, `ThemeToggle`, `SupportButton`, `PageHeader`, `VersionTag`.

package/README.md

@@ -68,6 +68,40 @@ Texts are built in for `lang` `de` and `en` and can be overridden with `labels`.
 `TEST_IDS`. The components are plain CommonJS with `React.createElement`, so CRA, Vite and Jest need no extra config.
 Icons are inline (Lucide, ISC, see `licenses/`).
 
+## Sign-in page and profile (React)
+
+All sign-in pages use the same frame and order: Microsoft first, then "oder mit E-Mail", the password field with
+"Passwort vergessen?" below it, the submit button. Forgot password, reset, verify email and the two-factor step are
+their own pages in the same frame. Show only what the app can do (register only in Compass, demo accounts only
+in demo mode).
+
+```jsx
+import { AuthLayout, AuthHeader, MicrosoftButton, AuthDivider, AuthMessage, ProfileSection } from "@scalio-cloud/ui/react";
+
+<AuthLayout
+  brand={{ mark: "N", name: "Scalio Nexus", claim: "Alle Konten aus einer Konsole verwalten.",
+           features: ["Onboarding", "Ändern", "Offboarding"] }}
+  lang={lang} onLangChange={setLang}                 // top right
+  theme={theme} onThemeChange={setTheme}             // optional
+  footer={<VersionTag version={v} />}                // optional
+>
+  <AuthHeader eyebrow="Zugang" title="Anmelden" subtitle="..." />
+  <MicrosoftButton href="/api/auth/sso/login" lang={lang} disabled={!ssoReady} hint="..." />
+  <AuthDivider lang={lang} />
+  <form>...</form>
+  <AuthMessage kind="error">{error}</AuthMessage>
+</AuthLayout>
+
+// Profile page: the same sections in every app, leave out what an app does not need.
+<ProfileSection id="account" lang={lang}>...</ProfileSection>      // Konto
+<ProfileSection id="appearance" lang={lang}>...</ProfileSection>   // Darstellung
+<ProfileSection id="language" lang={lang}>...</ProfileSection>     // Sprache und Region
+<ProfileSection id="security" lang={lang}>...</ProfileSection>     // Sicherheit
+<ProfileSection id="connections" lang={lang}>...</ProfileSection>  // Verknüpfungen
+```
+
+Form fields and buttons stay the app's own (shadcn), so they match the rest of the app.
+
 ## Installing
 
 Public on npmjs.com, no token needed: `yarn add @scalio-cloud/ui` (pin the exact version).

package/auth.css

@@ -0,0 +1,114 @@
+/* Sign-in pages (AuthLayout) and profile sections. Plain CSS on the tokens, classes start with "scalio-".
+ * The brand panel is always dark (like Rosetta), in light and dark mode. */
+.scalio-auth {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+@media (min-width: 1024px) { .scalio-auth { grid-template-columns: 1.2fr 1fr; } }
+
+.scalio-auth-brand {
+  display: none;
+  position: relative;
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 3rem;
+  background: #09090b;
+  color: #f4f4f5;
+}
+@media (min-width: 1024px) { .scalio-auth-brand { display: flex; } }
+.scalio-auth-grid {
+  position: absolute; inset: 0; opacity: 0.07; pointer-events: none;
+  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
+  background-size: 48px 48px;
+}
+.scalio-auth-brand > :not(.scalio-auth-grid) { position: relative; }
+.scalio-auth-eyebrow {
+  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; text-transform: uppercase;
+  letter-spacing: 0.2em; color: #71717a;
+}
+.scalio-auth-mark {
+  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+  background: #002FA7; color: #fff; border-radius: 2px;
+  font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 0.875rem;
+}
+.scalio-auth-mark-lg { width: 3.5rem; height: 3.5rem; font-size: 1.5rem; margin-bottom: 2rem; }
+.scalio-auth-title {
+  margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase;
+  letter-spacing: -0.02em; font-size: 3rem; line-height: 0.95;
+}
+@media (min-width: 1280px) { .scalio-auth-title { font-size: 3.75rem; } }
+.scalio-auth-claim { margin: 1.5rem 0 0; max-width: 28rem; color: #a1a1aa; font-size: 1rem; line-height: 1.6; }
+.scalio-auth-features {
+  list-style: none; margin: 0; padding: 0;
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
+  background: #27272a; border: 1px solid #27272a;
+}
+.scalio-auth-features li {
+  background: #09090b; padding: 0.75rem 1rem; color: #a1a1aa;
+  font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
+}
+
+.scalio-auth-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
+.scalio-auth-top { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem; min-height: 4.25rem; }
+.scalio-auth-body { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 1.5rem 2rem; }
+@media (min-width: 640px) { .scalio-auth-body { padding: 0 3rem 3rem; } }
+.scalio-auth-form { width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: 1.25rem; }
+.scalio-auth-footer {
+  padding: 0.75rem 1rem; text-align: right; color: hsl(var(--muted-foreground));
+  font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
+}
+
+.scalio-auth-mobile-brand { display: flex; align-items: center; gap: 0.75rem; }
+@media (min-width: 1024px) { .scalio-auth-mobile-brand { display: none; } }
+.scalio-auth-mobile-name { font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 0.875rem; }
+
+.scalio-auth-header .scalio-eyebrow { margin-bottom: 0.5rem; }
+.scalio-auth-heading {
+  margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; text-transform: uppercase;
+  letter-spacing: -0.01em; font-size: 1.5rem; line-height: 1.2;
+}
+.scalio-auth-subtitle { margin: 0.5rem 0 0; font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
+
+.scalio-auth-divider {
+  display: flex; align-items: center; gap: 0.75rem; color: hsl(var(--muted-foreground));
+  font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
+}
+.scalio-auth-divider::before, .scalio-auth-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: hsl(var(--border)); }
+
+.scalio-auth-ms {
+  display: flex; width: 100%; height: 2.75rem; align-items: center; justify-content: center; gap: 0.625rem;
+  border: 1px solid hsl(var(--input)); border-radius: 2px; background: hsl(var(--background)); color: hsl(var(--foreground));
+  font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 150ms;
+}
+.scalio-auth-ms:hover { background: hsl(var(--secondary)); }
+.scalio-auth-ms:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 1px; }
+.scalio-auth-ms-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
+.scalio-auth-hint { margin-top: 0.25rem; font-size: 11px; color: hsl(var(--muted-foreground)); }
+
+.scalio-auth-msg { border: 1px solid; border-radius: 2px; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
+.scalio-auth-msg-error { color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.35); background: hsl(var(--destructive) / 0.08); }
+.scalio-auth-msg-info { color: hsl(var(--foreground)); border-color: hsl(var(--border)); background: hsl(var(--muted)); }
+.scalio-auth-msg-success { color: hsl(142 72% 26%); border-color: hsl(142 60% 40% / 0.35); background: hsl(142 60% 40% / 0.08); }
+.dark .scalio-auth-msg-success { color: hsl(142 60% 60%); }
+
+/* Profile: sections one below the other, title left and content right from 768px. */
+.scalio-profile-section {
+  display: grid; grid-template-columns: 1fr; gap: 1rem;
+  padding: 1.5rem 0; border-top: 1px solid hsl(var(--border));
+}
+.scalio-profile-section:first-of-type { border-top: 0; padding-top: 0; }
+@media (min-width: 768px) { .scalio-profile-section { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem; } }
+.scalio-profile-section-title {
+  margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 0.875rem;
+  text-transform: uppercase; letter-spacing: 0.02em;
+}
+.scalio-profile-section-desc { margin: 0.375rem 0 0; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); line-height: 1.5; }
+.scalio-profile-section-body {
+  min-width: 0; padding: 1.25rem; border: 1px solid hsl(var(--border)); border-radius: 2px; background: hsl(var(--card));
+  color: hsl(var(--card-foreground)); display: flex; flex-direction: column; gap: 1rem;
+}

package/index.css

@@ -3,3 +3,4 @@
 @import './tokens.css';
 @import './base.css';
 @import './shell.css';
+@import './auth.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.3.0",
-  "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts and the shared app header",
+  "version": "0.4.0",
+  "description": "Scalio Control Room design tokens, Tailwind preset, self-hosted fonts, the shared app header and sign-in layout",
   "license": "SEE LICENSE IN README.md",
   "private": false,
   "repository": {
@@ -20,7 +20,8 @@
     "./fonts/*": "./fonts/*",
     "./package.json": "./package.json",
     "./react": "./react/index.js",
-    "./shell.css": "./shell.css"
+    "./shell.css": "./shell.css",
+    "./auth.css": "./auth.css"
   },
   "files": [
     "tokens.js",
@@ -30,6 +31,7 @@
     "fonts.css",
     "base.css",
     "shell.css",
+    "auth.css",
     "react/",
     "licenses/",
     "fonts/",

package/react/auth.js

@@ -0,0 +1,158 @@
+"use strict";
+// Sign-in pages and profile sections. Same building blocks in every app:
+// AuthLayout = brand on a dark grid on the left, form on the right, language top right.
+// Order on a sign-in form: AuthHeader, MicrosoftButton, AuthDivider ("or with email"), fields,
+// "Forgot password?" under the password field, submit. Styles: auth.css (in index.css).
+const React = require("react");
+const h = React.createElement;
+const { labelsFor } = require("./labels");
+
+function cx() {
+  return Array.prototype.slice.call(arguments).filter(Boolean).join(" ");
+}
+
+function BrandMark({ brand, className }) {
+  return h(
+    "span",
+    { className: cx("scalio-auth-mark", className), style: brand.color ? { background: brand.color } : undefined, "aria-hidden": "true" },
+    brand.mark
+  );
+}
+
+// brand: { mark: "N", name: "Scalio Nexus", claim, eyebrow, features: [..], color }
+function AuthLayout(props) {
+  const brand = props.brand || {};
+  const L = labelsFor(props.lang, props.labels);
+  const words = String(brand.name || "").split(/\s+/).filter(Boolean);
+  const { LanguageToggle, ThemeToggle } = require("./index");
+  return h(
+    "div",
+    { className: cx("scalio-auth", props.className), "data-testid": props.testId || "auth-layout" },
+    h(
+      "aside",
+      { className: "scalio-auth-brand", "data-testid": "auth-brand" },
+      h("div", { className: "scalio-auth-grid", "aria-hidden": "true" }),
+      h("div", { className: "scalio-auth-eyebrow" }, brand.eyebrow || "Scalio · Control Room"),
+      h(
+        "div",
+        { className: "scalio-auth-hero" },
+        h(BrandMark, { brand, className: "scalio-auth-mark-lg" }),
+        h("h1", { className: "scalio-auth-title" }, words.map((w, i) => h(React.Fragment, { key: i }, i ? h("br") : null, w))),
+        brand.claim ? h("p", { className: "scalio-auth-claim" }, brand.claim) : null
+      ),
+      brand.features && brand.features.length
+        ? h(
+            "ul",
+            { className: "scalio-auth-features" },
+            brand.features.map((f, i) => h("li", { key: i }, f))
+          )
+        : h("div")
+    ),
+    h(
+      "main",
+      { className: "scalio-auth-main" },
+      h(
+        "div",
+        { className: "scalio-auth-top" },
+        h(ThemeToggle, { theme: props.theme, onChange: props.onThemeChange, modes: props.themeModes, lang: props.lang, labels: props.labels, testId: "auth-theme-btn" }),
+        h(LanguageToggle, { lang: props.lang, onChange: props.onLangChange, labels: props.labels, testId: (props.testIds && props.testIds.language) || "auth-language-btn" })
+      ),
+      h(
+        "div",
+        { className: "scalio-auth-body" },
+        h(
+          "div",
+          { className: "scalio-auth-form" },
+          h(
+            "div",
+            { className: "scalio-auth-mobile-brand" },
+            h(BrandMark, { brand }),
+            h("span", { className: "scalio-auth-mobile-name" }, brand.name)
+          ),
+          props.children
+        )
+      ),
+      props.footer ? h("div", { className: "scalio-auth-footer", "aria-label": L.version }, props.footer) : null
+    )
+  );
+}
+
+function AuthHeader({ eyebrow, title, subtitle, testId }) {
+  return h(
+    "div",
+    { className: "scalio-auth-header", "data-testid": testId },
+    eyebrow ? h("div", { className: "scalio-eyebrow" }, eyebrow) : null,
+    h("h2", { className: "scalio-auth-heading" }, title),
+    subtitle ? h("p", { className: "scalio-auth-subtitle" }, subtitle) : null
+  );
+}
+
+function AuthDivider({ label, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  return h(
+    "div",
+    { className: "scalio-auth-divider", role: "separator", "data-testid": testId || "auth-divider" },
+    h("span", null, label || L.orEmail)
+  );
+}
+
+// Microsoft logo: four squares (Microsoft brand guidelines for "Sign in with Microsoft").
+function MicrosoftLogo() {
+  const sq = (x, y, fill) => h("rect", { key: fill, x, y, width: 10, height: 10, fill });
+  return h(
+    "svg",
+    { xmlns: "http://www.w3.org/2000/svg", width: 16, height: 16, viewBox: "0 0 21 21", "aria-hidden": "true" },
+    [sq(0, 0, "#F25022"), sq(11, 0, "#7FBA00"), sq(0, 11, "#00A4EF"), sq(11, 11, "#FFB900")]
+  );
+}
+
+// A link when href is given (server redirect), else a button. disabled shows it greyed with the hint.
+function MicrosoftButton({ href, onClick, disabled, busy, label, hint, lang, labels, testId }) {
+  const L = labelsFor(lang, labels);
+  const id = testId || "login-microsoft-btn";
+  const content = [h(MicrosoftLogo, { key: "l" }), h("span", { key: "t" }, busy ? L.redirecting : label || L.microsoft)];
+  const cls = cx("scalio-auth-ms", (disabled || busy) && "scalio-auth-ms-disabled");
+  const btn = href && !disabled && !busy
+    ? h("a", { className: cls, href, onClick, "data-testid": id }, content)
+    : h("button", { type: "button", className: cls, onClick, disabled: !!(disabled || busy), "aria-disabled": !!(disabled || busy), "data-testid": id }, content);
+  return h(
+    "div",
+    { className: "scalio-auth-ms-wrap" },
+    btn,
+    hint ? h("div", { className: "scalio-auth-hint", "data-testid": `${id}-hint` }, hint) : null
+  );
+}
+
+// kind: error | info | success
+function AuthMessage({ kind, children, testId }) {
+  if (!children) return null;
+  return h(
+    "div",
+    { className: cx("scalio-auth-msg", `scalio-auth-msg-${kind || "info"}`), role: kind === "error" ? "alert" : "status", "data-testid": testId },
+    children
+  );
+}
+
+// One section of the profile page: title and description on the left, content on the right.
+// The same five sections in every app (only those an app needs): account, appearance,
+// language and region, security, connections. PROFILE_SECTIONS holds their ids and order.
+const PROFILE_SECTIONS = ["account", "appearance", "language", "security", "connections"];
+
+function ProfileSection({ id, title, description, lang, labels, children, testId }) {
+  const L = labelsFor(lang, labels);
+  const heading = title || (id && L.sections[id]) || "";
+  const desc = description !== undefined ? description : id && L.sectionHints[id];
+  return h(
+    "section",
+    { className: "scalio-profile-section", id: id ? `profile-${id}` : undefined, "data-testid": testId || (id ? `profile-section-${id}` : undefined) },
+    h(
+      "div",
+      { className: "scalio-profile-section-text" },
+      h("h2", { className: "scalio-profile-section-title" }, heading),
+      desc ? h("p", { className: "scalio-profile-section-desc" }, desc) : null
+    ),
+    h("div", { className: "scalio-profile-section-body" }, children)
+  );
+}
+
+module.exports = { AuthLayout, AuthHeader, AuthDivider, AuthMessage, MicrosoftButton, MicrosoftLogo, ProfileSection, PROFILE_SECTIONS };

package/react/index.js

@@ -340,3 +340,5 @@ module.exports = {
   TEST_IDS,
   initials,
 };
+// After the exports above: auth.js uses LanguageToggle and ThemeToggle from this module.
+Object.assign(module.exports, require("./auth"));

package/react/labels.js

@@ -12,6 +12,37 @@ const LABELS = {
     userMenu: "Benutzermenü",
     menu: "Menü",
     version: "Version",
+    // Sign-in and profile (same words in every app)
+    signIn: "Anmelden",
+    microsoft: "Mit Microsoft anmelden",
+    redirecting: "Weiterleitung …",
+    orEmail: "oder mit E-Mail",
+    email: "E-Mail",
+    password: "Passwort",
+    forgotPassword: "Passwort vergessen?",
+    backToSignIn: "Zurück zur Anmeldung",
+    profile: "Profil",
+    save: "Speichern",
+    changePassword: "Passwort ändern",
+    currentPassword: "Aktuelles Passwort",
+    newPassword: "Neues Passwort",
+    confirmPassword: "Neues Passwort bestätigen",
+    twoFactor: "Zwei-Faktor-Anmeldung",
+    mfaCode: "Code aus der Authenticator-App",
+    sections: {
+      account: "Konto",
+      appearance: "Darstellung",
+      language: "Sprache und Region",
+      security: "Sicherheit",
+      connections: "Verknüpfungen",
+    },
+    sectionHints: {
+      account: "Ihre Angaben. Die E-Mail-Adresse ist Ihr Anmeldename.",
+      appearance: "Hell, dunkel oder wie Ihr System.",
+      language: "Sprache der Oberfläche und Zeitzone für Zeitangaben.",
+      security: "Passwort und Zwei-Faktor-Anmeldung.",
+      connections: "Verbundene Konten für die Anmeldung.",
+    },
   },
   en: {
     language: "Language / Sprache",
@@ -24,11 +55,46 @@ const LABELS = {
     userMenu: "User menu",
     menu: "Menu",
     version: "Version",
+    signIn: "Sign in",
+    microsoft: "Sign in with Microsoft",
+    redirecting: "Redirecting …",
+    orEmail: "or with email",
+    email: "Email",
+    password: "Password",
+    forgotPassword: "Forgot password?",
+    backToSignIn: "Back to sign in",
+    profile: "Profile",
+    save: "Save",
+    changePassword: "Change password",
+    currentPassword: "Current password",
+    newPassword: "New password",
+    confirmPassword: "Confirm new password",
+    twoFactor: "Two-factor sign-in",
+    mfaCode: "Code from the authenticator app",
+    sections: {
+      account: "Account",
+      appearance: "Appearance",
+      language: "Language and region",
+      security: "Security",
+      connections: "Connections",
+    },
+    sectionHints: {
+      account: "Your details. Your email address is your sign-in name.",
+      appearance: "Light, dark or like your system.",
+      language: "Language of the interface and time zone for times.",
+      security: "Password and two-factor sign-in.",
+      connections: "Linked accounts for signing in.",
+    },
   },
 };
 
 function labelsFor(lang, overrides) {
-  return Object.assign({}, LABELS[lang === "en" ? "en" : "de"], overrides || {});
+  const base = LABELS[lang === "en" ? "en" : "de"];
+  const o = overrides || {};
+  return Object.assign({}, base, o, {
+    sections: Object.assign({}, base.sections, o.sections),
+    sectionHints: Object.assign({}, base.sectionHints, o.sectionHints),
+  });
 }
 
 module.exports = { LABELS, labelsFor };