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

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

@@ -0,0 +1,265 @@
+import type {
+  CreateSsoConnectionRequest,
+  SsoConnectionResponse,
+} from "@yackey-labs/yauth-client";
+import { For, Show, createMemo, createSignal } from "solid-js";
+import { createSsoConnections } from "../hooks/create-sso-connections";
+
+/**
+ * SSO OIDC connection creation form (issue #93, Phase B).
+ *
+ * Mirror of the Vue component. Drafts a new connection; admin
+ * flips it to `active` after testing.
+ */
+export interface SsoConnectionFormProps {
+  organizationId: string;
+  onSuccess?: (created: SsoConnectionResponse) => void;
+  onError?: (error: Error) => void;
+}
+
+export function SsoConnectionForm(props: SsoConnectionFormProps) {
+  const { create, error } = createSsoConnections(() => props.organizationId);
+
+  const [name, setName] = createSignal("");
+  const [discoveryUrl, setDiscoveryUrl] = createSignal("");
+  const [clientId, setClientId] = createSignal("");
+  const [clientSecret, setClientSecret] = createSignal("");
+  const [scopes, setScopes] = createSignal("openid, email, profile");
+  const [externalIdClaim, setExternalIdClaim] = createSignal("sub");
+  const [emailClaim, setEmailClaim] = createSignal("email");
+  const [displayNameClaim, setDisplayNameClaim] = createSignal("name");
+  const [groupsClaim, setGroupsClaim] = createSignal("groups");
+  const [groupRoles, setGroupRoles] = createSignal<
+    Array<{ group: string; role: string }>
+  >([{ group: "", role: "member" }]);
+  const [jitEnabled, setJitEnabled] = createSignal(true);
+  const [defaultRole, setDefaultRole] = createSignal("member");
+  const [submitting, setSubmitting] = createSignal(false);
+
+  const isValid = createMemo(
+    () =>
+      name().trim() !== "" &&
+      discoveryUrl().includes(".well-known/openid-configuration") &&
+      clientId().trim() !== "" &&
+      clientSecret().trim() !== "",
+  );
+
+  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: "oidc_client",
+      oidc: {
+        discovery_url: discoveryUrl().trim(),
+        client_id: clientId().trim(),
+        client_secret: clientSecret(),
+        scopes: scopes()
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean),
+        claim_mappings: {
+          external_id: externalIdClaim().trim() || "sub",
+          email: emailClaim().trim() || "email",
+          display_name: displayNameClaim().trim() || null,
+          groups: groupsClaim().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"
+          />
+        </label>
+        <label class="block">
+          <span class="text-xs font-medium">Discovery URL</span>
+          <input
+            value={discoveryUrl()}
+            onInput={(e) => setDiscoveryUrl(e.currentTarget.value)}
+            required
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2 font-mono text-xs"
+            placeholder="https://idp.example/.well-known/openid-configuration"
+          />
+        </label>
+        <label class="block">
+          <span class="text-xs font-medium">Client ID</span>
+          <input
+            value={clientId()}
+            onInput={(e) => setClientId(e.currentTarget.value)}
+            required
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2"
+          />
+        </label>
+        <label class="block">
+          <span class="text-xs font-medium">Client Secret</span>
+          <input
+            value={clientSecret()}
+            onInput={(e) => setClientSecret(e.currentTarget.value)}
+            type="password"
+            required
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2"
+          />
+        </label>
+        <label class="block md:col-span-2">
+          <span class="text-xs font-medium">Scopes (comma-separated)</span>
+          <input
+            value={scopes()}
+            onInput={(e) => setScopes(e.currentTarget.value)}
+            class="mt-1 w-full rounded-md border bg-background px-3 py-2"
+          />
+        </label>
+      </div>
+
+      <fieldset class="rounded-md border p-3">
+        <legend class="px-1 text-xs font-medium">Claim mappings</legend>
+        <div class="grid gap-3 md:grid-cols-2">
+          <label class="block">
+            <span class="text-xs">external_id</span>
+            <input
+              value={externalIdClaim()}
+              onInput={(e) => setExternalIdClaim(e.currentTarget.value)}
+              class="mt-1 w-full rounded-md border bg-background px-3 py-2"
+            />
+          </label>
+          <label class="block">
+            <span class="text-xs">email</span>
+            <input
+              value={emailClaim()}
+              onInput={(e) => setEmailClaim(e.currentTarget.value)}
+              class="mt-1 w-full rounded-md border bg-background px-3 py-2"
+            />
+          </label>
+          <label class="block">
+            <span class="text-xs">display_name</span>
+            <input
+              value={displayNameClaim()}
+              onInput={(e) => setDisplayNameClaim(e.currentTarget.value)}
+              class="mt-1 w-full rounded-md border bg-background px-3 py-2"
+            />
+          </label>
+          <label class="block">
+            <span class="text-xs">groups</span>
+            <input
+              value={groupsClaim()}
+              onInput={(e) => setGroupsClaim(e.currentTarget.value)}
+              class="mt-1 w-full rounded-md border bg-background px-3 py-2"
+            />
+          </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()))
+                  }
+                >
+                  ✕
+                </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>
+
+      <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 connection"}
+      </button>
+    </form>
+  );
+}

package/src/components/sso-connection-list.tsx

@@ -0,0 +1,158 @@
+import type { SamlConfigResponse } from "@yackey-labs/yauth-client";
+import { For, Show } from "solid-js";
+import { createSsoConnections } from "../hooks/create-sso-connections";
+import { useYAuth } from "../provider";
+
+/**
+ * SSO connection list (issue #93 + #94, Phase B).
+ *
+ * Mirror of the Vue component — admin view of one org's federation
+ * connections (OIDC and SAML) with per-row test/enable/disable/delete
+ * actions. SAML rows additionally expose a "Download SP metadata"
+ * link pointing at `/sso/saml/metadata/{cid}`.
+ */
+export interface SsoConnectionListProps {
+  organizationId: string;
+  onTest?: (id: string, ok: boolean, detail: string) => void;
+}
+
+const signingSummary = (saml: SamlConfigResponse) => {
+  const parts: string[] = [];
+  if (saml.assertion_signed_required) parts.push("assertion signed");
+  if (saml.response_signed_required) parts.push("response signed");
+  if (saml.want_encrypted_assertions) parts.push("encrypted");
+  if (saml.idp_initiated_sso_allowed) parts.push("IdP-init allowed");
+  return parts.length > 0 ? parts.join(" · ") : "no signing required";
+};
+
+export function SsoConnectionList(props: SsoConnectionListProps) {
+  const { connections, loading, error, disable, enable, remove, test } =
+    createSsoConnections(() => props.organizationId);
+  const yauth = useYAuth();
+
+  const handleTest = async (id: string) => {
+    const r = await test(id);
+    if (r) props.onTest?.(id, r.ok, r.detail);
+  };
+
+  const samlMetadataUrl = (id: string) => yauth.client.sso.samlMetadataUrl(id);
+
+  return (
+    <div class="space-y-4">
+      <Show when={loading()}>
+        <div class="text-sm text-muted-foreground">Loading…</div>
+      </Show>
+      <Show when={error()}>
+        <div
+          class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+          role="alert"
+        >
+          {error()}
+        </div>
+      </Show>
+      <Show
+        when={!loading() && connections().length > 0}
+        fallback={
+          <Show when={!loading()}>
+            <div class="rounded-md border border-dashed px-4 py-6 text-center text-sm text-muted-foreground">
+              No SSO connections yet. Add one to enable federated sign-in for
+              this organization.
+            </div>
+          </Show>
+        }
+      >
+        <ul class="space-y-3">
+          <For each={connections()}>
+            {(c) => (
+              <li class="rounded-md border bg-card p-4">
+                <div class="flex items-start justify-between gap-4">
+                  <div>
+                    <div class="font-medium">{c.name}</div>
+                    <div class="text-xs text-muted-foreground">
+                      {c.kind} ·{" "}
+                      <span
+                        classList={{
+                          "text-emerald-600": c.status === "active",
+                          "text-amber-600": c.status === "draft",
+                          "text-muted-foreground": c.status === "disabled",
+                        }}
+                      >
+                        {c.status}
+                      </span>
+                    </div>
+                    <Show when={c.oidc}>
+                      <div class="mt-1 text-xs text-muted-foreground">
+                        client_id: <code>{c.oidc?.client_id}</code>
+                      </div>
+                    </Show>
+                    <Show when={c.saml}>
+                      {(saml) => (
+                        <div class="mt-1 space-y-1">
+                          <div class="text-xs text-muted-foreground">
+                            IdP entity: <code>{saml().idp_entity_id}</code>
+                          </div>
+                          <div class="text-xs text-muted-foreground">
+                            SP entity: <code>{saml().sp_entity_id}</code>
+                          </div>
+                          <div class="text-xs text-muted-foreground">
+                            {signingSummary(saml())}
+                          </div>
+                        </div>
+                      )}
+                    </Show>
+                  </div>
+                  <div class="flex flex-wrap gap-2">
+                    <Show when={c.saml}>
+                      <a
+                        href={samlMetadataUrl(c.id)}
+                        download={`sp-metadata-${c.id}.xml`}
+                        class="rounded-md border px-3 py-1 text-xs hover:bg-accent"
+                        data-testid="saml-metadata-download"
+                      >
+                        SP metadata
+                      </a>
+                    </Show>
+                    <button
+                      type="button"
+                      class="rounded-md border px-3 py-1 text-xs"
+                      onClick={() => handleTest(c.id)}
+                    >
+                      Test
+                    </button>
+                    <Show
+                      when={c.status === "active"}
+                      fallback={
+                        <button
+                          type="button"
+                          class="rounded-md border px-3 py-1 text-xs"
+                          onClick={() => enable(c.id)}
+                        >
+                          Enable
+                        </button>
+                      }
+                    >
+                      <button
+                        type="button"
+                        class="rounded-md border px-3 py-1 text-xs"
+                        onClick={() => disable(c.id)}
+                      >
+                        Disable
+                      </button>
+                    </Show>
+                    <button
+                      type="button"
+                      class="rounded-md border border-destructive px-3 py-1 text-xs text-destructive"
+                      onClick={() => remove(c.id)}
+                    >
+                      Delete
+                    </button>
+                  </div>
+                </div>
+              </li>
+            )}
+          </For>
+        </ul>
+      </Show>
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+import { Show, createMemo } from "solid-js";
+import { useYAuth } from "../provider";
+
+export interface SsoLoginButtonProps {
+  /** 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 with SSO". */
+  label?: string;
+  /** Where to redirect after a successful sign-in. */
+  redirectTo?: string;
+}
+
+export function SsoLoginButton(props: SsoLoginButtonProps) {
+  const yauth = useYAuth();
+  const url = createMemo(() =>
+    yauth.client.sso.loginUrl({
+      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>SSO</title>
+          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3" />
+        </svg>
+        {props.label ?? "Sign in with SSO"}
+      </a>
+    </Show>
+  );
+}

package/src/components/transfer-ownership.tsx

@@ -0,0 +1,122 @@
+import { type Component, For, Show, createMemo, createSignal } from "solid-js";
+import { ROLES, createMembers, createOrgRoles } from "../hooks/create-organizations";
+
+export interface TransferOwnershipProps {
+  organizationId: string;
+  open: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+/**
+ * Modal-style component for transferring org ownership to another
+ * member.
+ */
+export const TransferOwnership: Component<TransferOwnershipProps> = (props) => {
+  const { members, refetch: refetchMembers } = createMembers(() => props.organizationId);
+  const { submitting, error, transferOwnership } = createOrgRoles(() => props.organizationId);
+  const [selectedUserId, setSelectedUserId] = createSignal("");
+  const [confirmed, setConfirmed] = createSignal(false);
+
+  const eligibleMembers = createMemo(() => members().filter((m) => m.role !== ROLES.OWNER));
+
+  const close = () => {
+    setSelectedUserId("");
+    setConfirmed(false);
+    props.onClose();
+  };
+
+  const submit = async () => {
+    if (!selectedUserId() || !confirmed()) return;
+    const ok = await transferOwnership({
+      new_owner_user_id: selectedUserId(),
+    });
+    if (ok) {
+      props.onSuccess?.();
+      await refetchMembers();
+      close();
+    }
+  };
+
+  return (
+    <Show when={props.open}>
+      <div
+        class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="transfer-ownership-title"
+      >
+        <div class="w-full max-w-md rounded-lg border border-input bg-background p-6 shadow-lg">
+          <h2 id="transfer-ownership-title" class="mb-2 text-lg font-semibold">
+            Transfer ownership
+          </h2>
+          <p class="mb-4 text-sm text-muted-foreground">
+            Choose a member to promote to owner. You will be demoted to admin. This cannot be undone
+            without another transfer.
+          </p>
+
+          <Show when={error()}>
+            <div
+              class="mb-3 rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+              role="alert"
+            >
+              {error()}
+            </div>
+          </Show>
+
+          <label class="mb-2 block text-sm font-medium" for="successor-select">
+            New owner
+          </label>
+          <select
+            id="successor-select"
+            value={selectedUserId()}
+            disabled={submitting()}
+            onChange={(e) => setSelectedUserId(e.currentTarget.value)}
+            class="mb-4 w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          >
+            <option value="" disabled>
+              Select a member…
+            </option>
+            <For each={eligibleMembers()}>
+              {(m) => (
+                <option value={m.user_id}>
+                  {m.user_id} ({m.role})
+                </option>
+              )}
+            </For>
+          </select>
+
+          <label class="mb-4 flex items-start gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={confirmed()}
+              disabled={submitting()}
+              onChange={(e) => setConfirmed(e.currentTarget.checked)}
+              class="mt-0.5"
+            />
+            <span>I understand I will lose owner privileges in this organization.</span>
+          </label>
+
+          <div class="flex justify-end gap-2">
+            <button
+              type="button"
+              class="rounded-md border border-input px-3 py-1.5 text-sm hover:bg-secondary"
+              disabled={submitting()}
+              onClick={close}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              class="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+              disabled={!selectedUserId() || !confirmed() || submitting()}
+              onClick={submit}
+            >
+              {submitting() ? "Transferring…" : "Transfer ownership"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Show>
+  );
+};

package/src/hooks/create-active-org.ts

@@ -0,0 +1,98 @@
+/**
+ * Headless hook for the active-organization claim (issue #89).
+ *
+ * Exposes the currently-active org, the full membership list, and an
+ * imperative `switchTo(orgId)` action.
+ *
+ * Carrier semantics (cookie vs bearer) are abstracted from callers:
+ * - Cookie sessions update server-side; no token rotation needed.
+ * - Bearer JWT clients receive a freshly-issued token via
+ *   `bearer_access_token` on the response; callers are responsible for
+ *   adopting it (e.g. via the YAuth client mutator).
+ */
+import type {
+  ActiveOrgEntry,
+  ActiveOrgResponse,
+  SetActiveOrgRequest,
+} from "@yackey-labs/yauth-client";
+import { createSignal } from "solid-js";
+import { useYAuth } from "../provider";
+
+export function createActiveOrg() {
+  const { client } = useYAuth();
+  const [activeOrgId, setActiveOrgId] = createSignal<string | null>(null);
+  const [orgs, setOrgs] = createSignal<ActiveOrgEntry[]>([]);
+  const [loading, setLoading] = createSignal(false);
+  const [error, setError] = createSignal<string | null>(null);
+
+  const apply = (resp: ActiveOrgResponse) => {
+    setActiveOrgId(resp.active_org_id ?? null);
+    setOrgs(resp.orgs);
+  };
+
+  const refetch = async () => {
+    if (!client?.organizations) {
+      setError("Organizations feature is not enabled on this server.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      apply(await client.organizations.getActiveOrg());
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /**
+   * Switch into an organization the caller is a member of.
+   *
+   * Returns the new bearer access token when the caller used JWT auth —
+   * the client adopter is responsible for surfacing it onto subsequent
+   * requests. Cookie callers receive `null` since no rotation occurs.
+   */
+  const switchTo = async (orgId: string): Promise<string | null> => {
+    if (!client?.organizations) {
+      setError("Organizations feature is not enabled on this server.");
+      return null;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const body: SetActiveOrgRequest = { organization_id: orgId };
+      const resp = await client.organizations.setActiveOrg(body);
+      apply(resp);
+      return resp.bearer_access_token ?? null;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clear = async (): Promise<string | null> => {
+    if (!client?.organizations) {
+      setError("Organizations feature is not enabled on this server.");
+      return null;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const resp = await client.organizations.clearActiveOrg();
+      apply(resp);
+      return resp.bearer_access_token ?? null;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  void refetch();
+
+  return { activeOrgId, orgs, loading, error, refetch, switchTo, clear };
+}