+
Create your vault
+ Zero-knowledge password manager
⚠️ Your master password is the only key. We can't recover it. If you
forget it, your vault is permanently inaccessible.
diff --git a/packages/web/public/branding.example.json b/packages/web/public/branding.example.json
new file mode 100644
index 0000000..4590961
--- /dev/null
+++ b/packages/web/public/branding.example.json
@@ -0,0 +1,9 @@
+{
+ "appName": "Acme Vault",
+ "tagline": "Your team's credentials, safely off the cloud.",
+ "logoUrl": "/branding/logo.svg",
+ "brandColor": "#0a66c2",
+ "brandColorDark": "#084d92",
+ "supportEmail": "vault-support@acme.example",
+ "footerText": "© Acme Corp · Internal use only"
+}
diff --git a/packages/web/public/branding.json b/packages/web/public/branding.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/packages/web/public/branding.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/web/public/branding/logo.example.svg b/packages/web/public/branding/logo.example.svg
new file mode 100644
index 0000000..38719df
--- /dev/null
+++ b/packages/web/public/branding/logo.example.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/web/src/branding/BrandingProvider.tsx b/packages/web/src/branding/BrandingProvider.tsx
new file mode 100644
index 0000000..b1c6379
--- /dev/null
+++ b/packages/web/src/branding/BrandingProvider.tsx
@@ -0,0 +1,44 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+import { DEFAULT_BRANDING } from "./defaults.js";
+import { applyBranding, loadBranding } from "./load.js";
+import type { Branding } from "./types.js";
+
+const BrandingContext = createContext(DEFAULT_BRANDING);
+
+interface Props {
+ children: React.ReactNode;
+}
+
+/**
+ * Fetches `/branding.json` once, applies the resulting brand to the
+ * document (page title + CSS variables), and exposes the merged branding
+ * via React context. Components read it with `useBranding()`.
+ *
+ * The first paint uses defaults — overrides take effect on the second
+ * render once the fetch resolves. We deliberately do NOT block render
+ * on the fetch: the app should boot even if branding.json is unreachable.
+ */
+export function BrandingProvider({ children }: Props) {
+ const [brand, setBrand] = useState(DEFAULT_BRANDING);
+
+ useEffect(() => {
+ let cancelled = false;
+ void loadBranding().then((b) => {
+ if (cancelled) return;
+ setBrand(b);
+ applyBranding(b);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ return (
+ {children}
+ );
+}
+
+export function useBranding(): Branding {
+ return useContext(BrandingContext);
+}
diff --git a/packages/web/src/branding/defaults.ts b/packages/web/src/branding/defaults.ts
new file mode 100644
index 0000000..ec9a457
--- /dev/null
+++ b/packages/web/src/branding/defaults.ts
@@ -0,0 +1,21 @@
+import type { Branding } from "./types.js";
+
+/**
+ * Default brand identity. These are the values an unbranded `passman` ships
+ * with and the fallback when `branding.json` is missing, malformed, or fails
+ * to fetch. Anything left out of an operator's `branding.json` falls through
+ * to these.
+ *
+ * Hex colour values mirror the design tokens in `styles.css`. Keep them in
+ * sync — the loader writes the `--brand` / `--brand-2` CSS variables at
+ * runtime, but the rest of the design system is defined in CSS.
+ */
+export const DEFAULT_BRANDING: Branding = Object.freeze({
+ appName: "Passman",
+ tagline: "Zero-knowledge password manager",
+ logoUrl: "",
+ brandColor: "#3ECF8E",
+ brandColorDark: "#14B884",
+ supportEmail: "",
+ footerText: "",
+});
diff --git a/packages/web/src/branding/index.ts b/packages/web/src/branding/index.ts
new file mode 100644
index 0000000..3e39141
--- /dev/null
+++ b/packages/web/src/branding/index.ts
@@ -0,0 +1,4 @@
+export { BrandingProvider, useBranding } from "./BrandingProvider.js";
+export { DEFAULT_BRANDING } from "./defaults.js";
+export { applyBranding, loadBranding, mergeBranding } from "./load.js";
+export type { Branding, BrandingOverride } from "./types.js";
diff --git a/packages/web/src/branding/load.ts b/packages/web/src/branding/load.ts
new file mode 100644
index 0000000..0af0973
--- /dev/null
+++ b/packages/web/src/branding/load.ts
@@ -0,0 +1,128 @@
+import { DEFAULT_BRANDING } from "./defaults.js";
+import type { Branding, BrandingOverride } from "./types.js";
+
+const HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const SAFE_LOGO_PROTOCOLS = new Set(["http:", "https:", "data:"]);
+
+/**
+ * Validate + sanitise an operator-supplied override before merging into
+ * defaults. Bad values are quietly dropped (and logged in dev) rather
+ * than rejected — a typo in `branding.json` shouldn't break the app.
+ */
+function sanitise(raw: unknown): BrandingOverride {
+ if (!raw || typeof raw !== "object") return {};
+ const r = raw as Record;
+ const out: BrandingOverride = {};
+
+ if (typeof r.appName === "string" && r.appName.trim().length > 0) {
+ // Cap to a length that fits the sidebar and the page title without truncation.
+ out.appName = r.appName.slice(0, 64);
+ }
+ if (typeof r.tagline === "string") {
+ out.tagline = r.tagline.slice(0, 160);
+ }
+ if (typeof r.logoUrl === "string") {
+ out.logoUrl = sanitiseLogoUrl(r.logoUrl);
+ }
+ if (typeof r.brandColor === "string" && HEX_COLOR.test(r.brandColor)) {
+ out.brandColor = r.brandColor;
+ }
+ if (typeof r.brandColorDark === "string" && HEX_COLOR.test(r.brandColorDark)) {
+ out.brandColorDark = r.brandColorDark;
+ }
+ if (typeof r.supportEmail === "string") {
+ out.supportEmail = r.supportEmail.slice(0, 254);
+ }
+ if (typeof r.footerText === "string") {
+ out.footerText = r.footerText.slice(0, 200);
+ }
+ return out;
+}
+
+/**
+ * Allow:
+ * - same-origin paths (start with `/`) — most common case, served from `public/`
+ * - https:// URLs — assume the operator has the appropriate `img-src` CSP rule
+ * - data: URLs — let operators inline a small SVG without serving a separate file
+ *
+ * Reject anything else (`javascript:`, `file://`, etc.) — those are XSS vectors
+ * even when set by the operator if `branding.json` ever becomes user-supplied.
+ */
+function sanitiseLogoUrl(value: string): string {
+ if (value === "") return "";
+ if (value.startsWith("/")) return value;
+ try {
+ const url = new URL(value);
+ if (SAFE_LOGO_PROTOCOLS.has(url.protocol)) return value;
+ } catch {
+ /* fall through */
+ }
+ return "";
+}
+
+/** Merge an override over the frozen defaults; returns a new object. */
+export function mergeBranding(override: BrandingOverride): Branding {
+ return { ...DEFAULT_BRANDING, ...override };
+}
+
+/**
+ * Fetch `/branding.json` from the deployment's same-origin and merge into
+ * defaults. Any failure (404, network, JSON parse error, missing fields)
+ * falls back to defaults so the app always boots into a usable state.
+ */
+export async function loadBranding(
+ url = "/branding.json",
+ fetchImpl: typeof fetch = globalThis.fetch,
+): Promise {
+ try {
+ const resp = await fetchImpl(url, { cache: "no-store" });
+ if (!resp.ok) return mergeBranding({});
+ const json = (await resp.json()) as unknown;
+ return mergeBranding(sanitise(json));
+ } catch {
+ // Operators don't always ship a branding.json; that's fine.
+ return mergeBranding({});
+ }
+}
+
+/**
+ * Push the merged branding into the document — sets the page title, the
+ * favicon (when a logo URL is set), and the `--brand` / `--brand-2` CSS
+ * variables so any accent already painted re-themes immediately.
+ */
+export function applyBranding(brand: Branding): void {
+ if (typeof document === "undefined") return;
+ document.title = brand.appName;
+ const root = document.documentElement;
+ root.style.setProperty("--brand", brand.brandColor);
+ root.style.setProperty("--brand-2", brand.brandColorDark);
+ // Re-derive the soft / line variants so the alpha-tinted accents stay in sync.
+ root.style.setProperty(
+ "--brand-soft",
+ hexWithAlpha(brand.brandColor, 0.12),
+ );
+ root.style.setProperty(
+ "--brand-line",
+ hexWithAlpha(brand.brandColor, 0.32),
+ );
+}
+
+/** Compose a #RRGGBB hex with an alpha channel into the same `rgba(...)` form
+ * that the design tokens use. Pass-through for already-prefixed alpha hex. */
+function hexWithAlpha(hex: string, alpha: number): string {
+ // We accept #RGB / #RRGGBB / #RRGGBBAA forms; for the alpha-prefixed form
+ // we strip the existing alpha and apply the new one.
+ let r = 0;
+ let g = 0;
+ let b = 0;
+ if (hex.length === 4) {
+ r = parseInt(hex[1]! + hex[1]!, 16);
+ g = parseInt(hex[2]! + hex[2]!, 16);
+ b = parseInt(hex[3]! + hex[3]!, 16);
+ } else if (hex.length === 7 || hex.length === 9) {
+ r = parseInt(hex.slice(1, 3), 16);
+ g = parseInt(hex.slice(3, 5), 16);
+ b = parseInt(hex.slice(5, 7), 16);
+ }
+ return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
diff --git a/packages/web/src/branding/types.ts b/packages/web/src/branding/types.ts
new file mode 100644
index 0000000..04a3e93
--- /dev/null
+++ b/packages/web/src/branding/types.ts
@@ -0,0 +1,34 @@
+/**
+ * Runtime branding shape. The web app fetches `/branding.json` on boot and
+ * merges its contents over `DEFAULT_BRANDING`. Every field is optional in
+ * the on-disk form — operators only override what they want changed, and
+ * a missing or malformed `branding.json` falls back to the defaults
+ * (existing deployments need zero changes).
+ */
+export interface Branding {
+ /** Product name shown in the sidebar, page title, and login/register heroes. */
+ appName: string;
+ /** Optional one-liner shown under the appName on the auth pages. */
+ tagline: string;
+ /**
+ * Logo image URL. Same-origin paths (e.g. `/branding/logo.svg`) are
+ * preferred — the strict CSP blocks remote images. An empty string
+ * shows the default brand mark (a green gradient square).
+ */
+ logoUrl: string;
+ /**
+ * Primary brand colour. Applied via the `--brand` CSS variable so it
+ * cascades to every accent in the UI (Connect button, focus rings,
+ * pill backgrounds, engine-tile borders for missing engine accents).
+ */
+ brandColor: string;
+ /** Darker shade used for hover / gradient stops. Defaults to a darkened brandColor. */
+ brandColorDark: string;
+ /** Optional support contact shown in error messages and the user card. */
+ supportEmail: string;
+ /** Optional small text shown in the sidebar footer. Empty hides it. */
+ footerText: string;
+}
+
+/** Partial-override shape an operator can put in `branding.json`. */
+export type BrandingOverride = Partial;
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index d362efd..cb35124 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -2,6 +2,7 @@ import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.js";
+import { BrandingProvider } from "./branding/index.js";
import "./styles.css";
const root = document.getElementById("root");
@@ -9,6 +10,8 @@ if (!root) throw new Error("#root element missing");
createRoot(root).render(
-
+
+
+
,
);
diff --git a/packages/web/src/pages/LoginPage.tsx b/packages/web/src/pages/LoginPage.tsx
index 6ab8299..fae8116 100644
--- a/packages/web/src/pages/LoginPage.tsx
+++ b/packages/web/src/pages/LoginPage.tsx
@@ -4,11 +4,14 @@ import { useNavigate } from "react-router-dom";
import { deriveLoginAuthKey, unlock } from "@passman/core";
import { ApiError, api } from "../api/client.js";
+import { useBranding } from "../branding/index.js";
import { useSession } from "../stores/session.js";
+import { BrandHeader } from "./vault/BrandHeader.js";
export function LoginPage() {
const nav = useNavigate();
const setSession = useSession((s) => s.setSession);
+ const branding = useBranding();
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState(null);
@@ -60,7 +63,11 @@ export function LoginPage() {
return (
+
Unlock your vault
+ {branding.tagline && (
+ {branding.tagline}
+ )}
+ Acme Vault
+