@yackey-labs/yauth-ui-solidjs 0.12.2 → 0.12.4

package/src/components/role-selector.tsx

@@ -0,0 +1,32 @@
+import { type Component } from "solid-js";
+import { ROLES } from "../hooks/create-organizations";
+
+export interface RoleSelectorProps {
+  value: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+}
+
+/**
+ * Dropdown for picking a built-in org role.
+ *
+ * `owner` is intentionally omitted — the documented promotion path is
+ * `TransferOwnership`, and the server-side change-role endpoint rejects
+ * an `owner` payload with 409.
+ */
+export const RoleSelector: Component<RoleSelectorProps> = (props) => {
+  return (
+    <select
+      value={props.value}
+      disabled={props.disabled}
+      class="rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+      aria-label="Member role"
+      onChange={(e) => props.onChange(e.currentTarget.value)}
+    >
+      <option value={ROLES.ADMIN}>Admin</option>
+      <option value={ROLES.BILLING_ADMIN}>Billing admin</option>
+      <option value={ROLES.MEMBER}>Member</option>
+      <option value={ROLES.VIEWER}>Viewer</option>
+    </select>
+  );
+};

package/src/components/saml-connection-form.tsx

@@ -0,0 +1,348 @@
+import type {
+  CreateSsoConnectionRequest,
+  SsoConnectionResponse,
+} from "@yackey-labs/yauth-client";
+import { For, Show, createMemo, createSignal } from "solid-js";
+import { createSsoConnections } from "../hooks/create-sso-connections";
+
+/**
+ * SAML 2.0 SP connection creation form (issue #94, Phase B).
+ *
+ * Mirror of `SamlConnectionForm.vue` — drafts a new SAML SP
+ * connection; the admin flips it to `active` after testing.
+ *
+ * Field shape mirrors `crates/yauth/src/plugins/organizations.rs`'s
+ * `SamlConfigInput`. `sp_entity_id` / `sp_acs_url` are server-derived
+ * and surfaced on the returned `SsoConnectionResponse.saml` blob; the
+ * admin then pastes those into the IdP's "Audience URI" / "ACS URL"
+ * fields (or imports the SP metadata XML via the connection list).
+ */
+export interface SamlConnectionFormProps {
+  organizationId: string;
+  onSuccess?: (created: SsoConnectionResponse) => void;
+  onError?: (error: Error) => void;
+}
+
+export function SamlConnectionForm(props: SamlConnectionFormProps) {
+  const { create, error } = createSsoConnections(() => props.organizationId);
+
+  const [name, setName] = createSignal("");
+  const [idpEntityId, setIdpEntityId] = createSignal("");
+  const [idpSsoUrl, setIdpSsoUrl] = createSignal("");
+  const [idpSloUrl, setIdpSloUrl] = createSignal("");
+  const [idpX509Cert, setIdpX509Cert] = createSignal("");
+  const [spPrivateKey, setSpPrivateKey] = createSignal("");
+  const [emailAttr, setEmailAttr] = createSignal(
+    "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
+  );
+  const [displayNameAttr, setDisplayNameAttr] = createSignal(
+    "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name",
+  );
+  const [externalIdAttr, setExternalIdAttr] = createSignal("NameID");
+  const [groupsAttr, setGroupsAttr] = createSignal(
+    "http://schemas.xmlsoap.org/claims/Group",
+  );
+  const [groupRoles, setGroupRoles] = createSignal<
+    Array<{ group: string; role: string }>
+  >([{ group: "", role: "member" }]);
+  const [assertionSignedRequired, setAssertionSignedRequired] = createSignal(true);
+  const [responseSignedRequired, setResponseSignedRequired] = createSignal(true);
+  const [wantEncryptedAssertions, setWantEncryptedAssertions] = createSignal(false);
+  const [idpInitiatedSsoAllowed, setIdpInitiatedSsoAllowed] = createSignal(false);
+  const [jitEnabled, setJitEnabled] = createSignal(true);
+  const [defaultRole, setDefaultRole] = createSignal("member");
+  const [submitting, setSubmitting] = createSignal(false);
+
+  const isValid = createMemo(
+    () =>
+      name().trim() !== "" &&
+      idpEntityId().trim() !== "" &&
+      idpSsoUrl().trim().startsWith("http") &&
+      idpX509Cert().includes("BEGIN CERTIFICATE"),
+  );
+
+  const updateGroupRow = (
+    i: number,
+    patch: Partial<{ group: string; role: string }>,
+  ) => {
+    setGroupRoles((rows) =>
+      rows.map((r, idx) => (idx === i ? { ...r, ...patch } : r)),
+    );
+  };
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    if (!isValid() || submitting()) return;
+    setSubmitting(true);
+    const groupMap: Record<string, string> = {};
+    for (const { group, role } of groupRoles()) {
+      const g = group.trim();
+      if (g) groupMap[g] = role;
+    }
+    const req: CreateSsoConnectionRequest = {
+      name: name().trim(),
+      kind: "saml_sp",
+      saml: {
+        idp_entity_id: idpEntityId().trim(),
+        idp_sso_url: idpSsoUrl().trim(),
+        idp_slo_url: idpSloUrl().trim() || null,
+        idp_x509_cert: idpX509Cert().trim(),
+        sp_private_key: spPrivateKey().trim() || null,
+        idp_initiated_sso_allowed: idpInitiatedSsoAllowed(),
+        assertion_signed_required: assertionSignedRequired(),
+        response_signed_required: responseSignedRequired(),
+        want_encrypted_assertions: wantEncryptedAssertions(),
+        attribute_mappings: {
+          email: emailAttr().trim(),
+          display_name: displayNameAttr().trim() || null,
+          external_id: externalIdAttr().trim() || "NameID",
+          groups: groupsAttr().trim() || null,
+          group_to_role: groupMap,
+        },
+      },
+      jit_provisioning_enabled: jitEnabled(),
+      default_role_on_jit: defaultRole(),
+    };
+    const result = await create(req);
+    setSubmitting(false);
+    if (result) {
+      props.onSuccess?.(result);
+    } else if (error()) {
+      props.onError?.(new Error(error() ?? "create failed"));
+    }
+  };
+
+  return (
+    <form class="space-y-4" onSubmit={handleSubmit}>
+      <Show when={error()}>
+        <div
+          class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+          role="alert"
+        >
+          {error()}
+        </div>
+      </Show>
+      <div class="grid gap-3 md:grid-cols-2">
+        <label class="block">
+          <span class="text-xs font-medium">Name</span>
+          <input
+            value={name()}
+            onInput={(e) => setName(e.currentTarget.value)}
+            required
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2"
+            placeholder="Acme Okta SAML"
+          />
+        </label>
+        <label class="block">
+          <span class="text-xs font-medium">IdP Entity ID</span>
+          <input
+            value={idpEntityId()}
+            onInput={(e) => setIdpEntityId(e.currentTarget.value)}
+            required
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            placeholder="urn:idp:acme:saml or https://acme.okta.com/..."
+          />
+        </label>
+        <label class="block md:col-span-2">
+          <span class="text-xs font-medium">IdP Single Sign-On URL</span>
+          <input
+            value={idpSsoUrl()}
+            onInput={(e) => setIdpSsoUrl(e.currentTarget.value)}
+            required
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            placeholder="https://acme.okta.com/app/.../sso/saml"
+          />
+        </label>
+        <label class="block md:col-span-2">
+          <span class="text-xs font-medium">
+            IdP Single Logout URL (optional)
+          </span>
+          <input
+            value={idpSloUrl()}
+            onInput={(e) => setIdpSloUrl(e.currentTarget.value)}
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            placeholder="https://acme.okta.com/app/.../slo/saml"
+          />
+        </label>
+        <label class="block md:col-span-2">
+          <span class="text-xs font-medium">
+            IdP X.509 Signing Certificate (PEM)
+          </span>
+          <textarea
+            value={idpX509Cert()}
+            onInput={(e) => setIdpX509Cert(e.currentTarget.value)}
+            required
+            rows="6"
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            placeholder={"-----BEGIN CERTIFICATE-----\n...\n-----END CERTIFICATE-----"}
+          />
+        </label>
+        <label class="block md:col-span-2">
+          <span class="text-xs font-medium">
+            SP Private Key (PEM) — optional, only for SP signing or encrypted
+            assertions
+          </span>
+          <textarea
+            value={spPrivateKey()}
+            onInput={(e) => setSpPrivateKey(e.currentTarget.value)}
+            rows="4"
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            placeholder="-----BEGIN PRIVATE KEY-----"
+          />
+        </label>
+      </div>
+
+      <fieldset class="rounded-md border p-3">
+        <legend class="px-1 text-xs font-medium">Attribute mappings</legend>
+        <div class="grid gap-3 md:grid-cols-2">
+          <label class="block">
+            <span class="text-xs">email attribute</span>
+            <input
+              value={emailAttr()}
+              onInput={(e) => setEmailAttr(e.currentTarget.value)}
+              class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            />
+          </label>
+          <label class="block">
+            <span class="text-xs">display_name attribute</span>
+            <input
+              value={displayNameAttr()}
+              onInput={(e) => setDisplayNameAttr(e.currentTarget.value)}
+              class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            />
+          </label>
+          <label class="block">
+            <span class="text-xs">external_id (default: NameID)</span>
+            <input
+              value={externalIdAttr()}
+              onInput={(e) => setExternalIdAttr(e.currentTarget.value)}
+              class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            />
+          </label>
+          <label class="block">
+            <span class="text-xs">groups attribute</span>
+            <input
+              value={groupsAttr()}
+              onInput={(e) => setGroupsAttr(e.currentTarget.value)}
+              class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            />
+          </label>
+        </div>
+        <div class="mt-3 space-y-2">
+          <div class="text-xs font-medium">group → role</div>
+          <For each={groupRoles()}>
+            {(row, i) => (
+              <div class="flex items-center gap-2">
+                <input
+                  value={row.group}
+                  onInput={(e) =>
+                    updateGroupRow(i(), { group: e.currentTarget.value })
+                  }
+                  placeholder="group name"
+                  class="flex-1 rounded-md border bg-background px-3 py-2 text-sm"
+                />
+                <select
+                  value={row.role}
+                  onChange={(e) => updateGroupRow(i(), { role: e.currentTarget.value })}
+                  class="rounded-md border bg-background px-3 py-2 text-sm"
+                >
+                  <option value="owner">owner</option>
+                  <option value="admin">admin</option>
+                  <option value="member">member</option>
+                </select>
+                <button
+                  type="button"
+                  class="rounded-md border px-2 py-1 text-xs"
+                  onClick={() =>
+                    setGroupRoles((rows) => rows.filter((_, idx) => idx !== i()))
+                  }
+                >
+                  x
+                </button>
+              </div>
+            )}
+          </For>
+          <button
+            type="button"
+            class="rounded-md border px-3 py-1 text-xs"
+            onClick={() =>
+              setGroupRoles((rows) => [...rows, { group: "", role: "member" }])
+            }
+          >
+            + Add mapping
+          </button>
+        </div>
+      </fieldset>
+
+      <fieldset class="rounded-md border p-3">
+        <legend class="px-1 text-xs font-medium">Signing requirements</legend>
+        <div class="space-y-2">
+          <label class="flex items-center gap-2 text-xs">
+            <input
+              type="checkbox"
+              checked={assertionSignedRequired()}
+              onChange={(e) => setAssertionSignedRequired(e.currentTarget.checked)}
+            />
+            Require assertion signature (recommended)
+          </label>
+          <label class="flex items-center gap-2 text-xs">
+            <input
+              type="checkbox"
+              checked={responseSignedRequired()}
+              onChange={(e) => setResponseSignedRequired(e.currentTarget.checked)}
+            />
+            Require response signature (recommended)
+          </label>
+          <label class="flex items-center gap-2 text-xs">
+            <input
+              type="checkbox"
+              checked={wantEncryptedAssertions()}
+              onChange={(e) => setWantEncryptedAssertions(e.currentTarget.checked)}
+            />
+            Require encrypted assertions (requires SP private key)
+          </label>
+          <label class="flex items-center gap-2 text-xs">
+            <input
+              type="checkbox"
+              checked={idpInitiatedSsoAllowed()}
+              onChange={(e) => setIdpInitiatedSsoAllowed(e.currentTarget.checked)}
+            />
+            Allow IdP-initiated SSO (cross-tenant footgun — leave OFF unless
+            the IdP sets <code>RelayState=cid:&lt;uuid&gt;</code>)
+          </label>
+        </div>
+      </fieldset>
+
+      <div class="flex items-center gap-4">
+        <label class="flex items-center gap-2 text-xs">
+          <input
+            type="checkbox"
+            checked={jitEnabled()}
+            onChange={(e) => setJitEnabled(e.currentTarget.checked)}
+          />
+          JIT provisioning
+        </label>
+        <label class="flex items-center gap-2 text-xs">
+          Default role:
+          <select
+            value={defaultRole()}
+            onChange={(e) => setDefaultRole(e.currentTarget.value)}
+            class="rounded-md border bg-background px-2 py-1"
+          >
+            <option value="owner">owner</option>
+            <option value="admin">admin</option>
+            <option value="member">member</option>
+          </select>
+        </label>
+      </div>
+
+      <button
+        type="submit"
+        disabled={!isValid() || submitting()}
+        class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground disabled:opacity-50"
+      >
+        {submitting() ? "Saving..." : "Create SAML connection"}
+      </button>
+    </form>
+  );
+}

package/src/components/saml-login-button.tsx

@@ -0,0 +1,53 @@
+import { Show, createMemo } from "solid-js";
+import { useYAuth } from "../provider";
+
+/**
+ * "Sign in via SAML" button (issue #94, Phase B).
+ *
+ * Drives the user-facing SAML federated login flow by redirecting to
+ * `/sso/saml/login?org=<slug>&redirect_to=<path>`. Renders nothing if
+ * neither `orgSlug` nor `domain` is provided.
+ */
+export interface SamlLoginButtonProps {
+  /** Org slug for the explicit-org login path. */
+  orgSlug?: string;
+  /** Email-domain for the HRD path (e.g. `acme.com`). */
+  domain?: string;
+  /** Display label override. Default: "Sign in via SAML". */
+  label?: string;
+  /** Where to redirect after a successful sign-in. */
+  redirectTo?: string;
+}
+
+export function SamlLoginButton(props: SamlLoginButtonProps) {
+  const yauth = useYAuth();
+  const url = createMemo(() =>
+    yauth.client.sso.samlLoginUrl({
+      org: props.orgSlug,
+      domain: props.domain,
+      redirectTo: props.redirectTo,
+    }),
+  );
+  const canSignIn = createMemo(() => Boolean(props.orgSlug || props.domain));
+
+  return (
+    <Show when={canSignIn()}>
+      <a
+        href={url()}
+        class="inline-flex items-center justify-center rounded-md border bg-background px-4 py-2 text-sm font-medium hover:bg-accent"
+      >
+        <svg
+          class="mr-2 h-4 w-4"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <title>SAML</title>
+          <path d="M21 2H3a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zM7 17l5-5-5-5M13 17h4" />
+        </svg>
+        {props.label ?? "Sign in via SAML"}
+      </a>
+    </Show>
+  );
+}

package/src/components/scim-settings-panel.tsx

@@ -0,0 +1,191 @@
+import { createMemo, createSignal } from "solid-js";
+
+/**
+ * SCIM settings panel (issue #95).
+ *
+ * SolidJS mirror of the Vue ScimSettingsPanel. Surfaces the per-org
+ * SCIM Base URL and the bound API key requirement to org admins, with
+ * copy-pasteable curl snippets an IdP admin can run to verify the
+ * connector before wiring it into Okta / Entra / OneLogin.
+ *
+ * Authentication: SCIM endpoints use Authorization: Bearer <key> where
+ * <key> is an org-scoped API key (issue #91) with the `scim:read` and
+ * `scim:write` scopes. This component does NOT mint the key — it links
+ * to the API Keys panel. We never display the plaintext here.
+ */
+export interface ScimSettingsPanelProps {
+  organizationId: string;
+  /** yauth base URL without trailing slash. */
+  baseUrl: string;
+  /** Route to the API Keys panel; defaults to a sensible path. */
+  apiKeysRoute?: string;
+}
+
+function stripTrailingSlashes(url: string): string {
+  let i = url.length;
+  while (i > 0 && url[i - 1] === "/") i--;
+  return url.slice(0, i);
+}
+
+export function ScimSettingsPanel(props: ScimSettingsPanelProps) {
+  const apiKeysRoute = createMemo(
+    () =>
+      props.apiKeysRoute ??
+      `/organizations/${props.organizationId}/settings/api-keys`,
+  );
+  const scimBaseUrl = createMemo(
+    () =>
+      `${stripTrailingSlashes(props.baseUrl)}/api/scim/v2/organizations/${props.organizationId}`,
+  );
+  const curlList = createMemo(
+    () => `curl -H "Authorization: Bearer <your-scim-key>" \\
+     -H "Accept: application/scim+json" \\
+     "${scimBaseUrl()}/Users?count=10"`,
+  );
+  const curlConfig = createMemo(
+    () => `curl -H "Authorization: Bearer <your-scim-key>" \\
+     -H "Accept: application/scim+json" \\
+     "${scimBaseUrl()}/ServiceProviderConfig"`,
+  );
+
+  type CopyKey = "url" | "curl-list" | "curl-config";
+  const [copied, setCopied] = createSignal<CopyKey | null>(null);
+  const copy = async (value: string, label: CopyKey) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(label);
+      setTimeout(() => {
+        if (copied() === label) setCopied(null);
+      }, 1500);
+    } catch {
+      // Silent no-op outside HTTPS.
+    }
+  };
+
+  return (
+    <section class="space-y-6">
+      <header>
+        <h2 class="text-base font-semibold">SCIM provisioning</h2>
+        <p class="mt-1 text-sm text-muted-foreground">
+          Paste the SCIM Base URL and an org-scoped API key into your IdP
+          (Okta, Entra ID, OneLogin) so it can provision users into this
+          organization.
+        </p>
+      </header>
+
+      <div class="space-y-2">
+        <label class="block text-xs font-medium uppercase tracking-wider text-muted-foreground">
+          SCIM Base URL
+        </label>
+        <div class="flex gap-2">
+          <code class="flex-1 truncate rounded-md border bg-muted px-3 py-2 text-xs">
+            {scimBaseUrl()}
+          </code>
+          <button
+            type="button"
+            class="rounded-md border px-3 py-1 text-xs"
+            onClick={() => copy(scimBaseUrl(), "url")}
+          >
+            {copied() === "url" ? "Copied" : "Copy"}
+          </button>
+        </div>
+      </div>
+
+      <div
+        class="rounded-md border bg-muted/30 p-4 text-sm"
+        role="region"
+        aria-label="API key requirement"
+      >
+        <div class="mb-2 font-medium">Authentication</div>
+        <p class="text-muted-foreground">
+          SCIM uses an <strong>org-scoped API key</strong> with the
+          {" "}
+          <code>scim:read</code> and <code>scim:write</code> scopes. The IdP
+          sends it as <code>Authorization: Bearer &lt;key&gt;</code> on every
+          request.
+        </p>
+        <div class="mt-3">
+          <a
+            href={apiKeysRoute()}
+            class="inline-flex items-center rounded-md bg-primary px-3 py-1 text-xs text-primary-foreground"
+          >
+            Manage API keys →
+          </a>
+        </div>
+        <p class="mt-3 text-xs text-muted-foreground">
+          The plaintext key is shown{" "}
+          <strong>only at the moment of creation</strong>. We never display it
+          here or in the IdP-side view — only the prefix and the {" "}
+          <code>scim:*</code> scopes.
+        </p>
+      </div>
+
+      <div class="space-y-3">
+        <h3 class="text-sm font-medium">Verify with curl</h3>
+        <p class="text-xs text-muted-foreground">
+          Replace <code>&lt;your-scim-key&gt;</code> with the plaintext API key
+          you copied during key creation.
+        </p>
+
+        <div class="space-y-2">
+          <label class="block text-xs font-medium uppercase tracking-wider text-muted-foreground">
+            List users
+          </label>
+          <div class="flex gap-2">
+            <pre class="flex-1 overflow-x-auto rounded-md border bg-muted px-3 py-2 text-xs whitespace-pre">
+              {curlList()}
+            </pre>
+            <button
+              type="button"
+              class="rounded-md border px-3 py-1 text-xs self-start"
+              onClick={() => copy(curlList(), "curl-list")}
+            >
+              {copied() === "curl-list" ? "Copied" : "Copy"}
+            </button>
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <label class="block text-xs font-medium uppercase tracking-wider text-muted-foreground">
+            Discover capabilities
+          </label>
+          <div class="flex gap-2">
+            <pre class="flex-1 overflow-x-auto rounded-md border bg-muted px-3 py-2 text-xs whitespace-pre">
+              {curlConfig()}
+            </pre>
+            <button
+              type="button"
+              class="rounded-md border px-3 py-1 text-xs self-start"
+              onClick={() => copy(curlConfig(), "curl-config")}
+            >
+              {copied() === "curl-config" ? "Copied" : "Copy"}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="rounded-md border bg-muted/30 p-4 text-xs text-muted-foreground">
+        <div class="mb-1 font-medium text-foreground">
+          Per-IdP setup guides
+        </div>
+        <ul class="ml-4 list-disc space-y-1">
+          <li>
+            <a class="underline" href="/docs/scim/okta.md" target="_blank">
+              Okta
+            </a>
+          </li>
+          <li>
+            <a class="underline" href="/docs/scim/entra.md" target="_blank">
+              Microsoft Entra ID
+            </a>
+          </li>
+          <li>
+            <a class="underline" href="/docs/scim/onelogin.md" target="_blank">
+              OneLogin
+            </a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  );
+}