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

package/src/components/member-list.tsx

@@ -0,0 +1,214 @@
+import { type Component, For, Show, createSignal } from "solid-js";
+import {
+	ROLES,
+	createMembers,
+	createOrgPermissions,
+	createOrgRoles,
+} from "../hooks/create-organizations";
+import { RoleSelector } from "./role-selector";
+
+export interface MemberListProps {
+	organizationId: string;
+}
+
+const formatDate = (iso: string | null | undefined): string => {
+	if (!iso) return "—";
+	const d = new Date(iso);
+	return Number.isNaN(d.getTime()) ? "—" : d.toLocaleDateString();
+};
+
+/**
+ * Tailwind badge class for a built-in role. Custom strings render as
+ * the default secondary badge.
+ */
+const roleBadgeClass = (role: string): string => {
+	switch (role) {
+		case ROLES.OWNER:
+			return "bg-amber-500/15 text-amber-700 dark:text-amber-300";
+		case ROLES.ADMIN:
+			return "bg-blue-500/15 text-blue-700 dark:text-blue-300";
+		case ROLES.BILLING_ADMIN:
+			return "bg-purple-500/15 text-purple-700 dark:text-purple-300";
+		case ROLES.MEMBER:
+			return "bg-secondary text-secondary-foreground";
+		case ROLES.VIEWER:
+			return "bg-muted text-muted-foreground";
+		default:
+			return "bg-secondary text-secondary-foreground";
+	}
+};
+
+export const MemberList: Component<MemberListProps> = (props) => {
+	const { members, loading, error, refetch } = createMembers(
+		() => props.organizationId,
+	);
+	const { hasPermission } = createOrgPermissions(() => props.organizationId);
+	const {
+		submitting,
+		error: actionError,
+		changeRole,
+		removeMember,
+	} = createOrgRoles(() => props.organizationId);
+
+	const [editingUserId, setEditingUserId] = createSignal<string | null>(null);
+	const [editingRole, setEditingRole] = createSignal("");
+
+	const startEdit = (userId: string, role: string) => {
+		setEditingUserId(userId);
+		setEditingRole(role);
+	};
+
+	const cancelEdit = () => {
+		setEditingUserId(null);
+		setEditingRole("");
+	};
+
+	const saveRole = async (userId: string) => {
+		const updated = await changeRole(userId, { role: editingRole() });
+		if (updated) {
+			await refetch();
+			cancelEdit();
+		}
+	};
+
+	const doRemove = async (userId: string) => {
+		if (!confirm("Remove this member from the organization?")) return;
+		const ok = await removeMember(userId);
+		if (ok) await refetch();
+	};
+
+	const showActions = () =>
+		hasPermission("members:change_role") || hasPermission("members:remove");
+
+	return (
+		<div class="space-y-3">
+			<Show when={error() || actionError()}>
+				<div
+					class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					role="alert"
+					aria-live="polite"
+				>
+					{error() || actionError()}
+				</div>
+			</Show>
+
+			<Show when={loading() && members().length === 0}>
+				<div class="text-sm text-muted-foreground">Loading members…</div>
+			</Show>
+
+			<Show when={members().length > 0}>
+				<table class="w-full text-sm" aria-label="Organization members">
+					<thead>
+						<tr class="border-b border-input text-left text-xs font-medium text-muted-foreground">
+							<th scope="col" class="py-2 pr-4">User</th>
+							<th scope="col" class="py-2 pr-4">Role</th>
+							<th scope="col" class="py-2 pr-4">Status</th>
+							<th scope="col" class="py-2 pr-4">Joined</th>
+							<Show when={showActions()}>
+								<th scope="col" class="py-2 pr-4 text-right">Actions</th>
+							</Show>
+						</tr>
+					</thead>
+					<tbody>
+						<For each={members()}>
+							{(m) => (
+								<tr class="border-b border-input/40">
+									<td class="py-2 pr-4 font-mono text-xs">{m.user_id}</td>
+									<td class="py-2 pr-4">
+										<Show
+											when={editingUserId() !== m.user_id}
+											fallback={
+												<RoleSelector
+													value={editingRole()}
+													disabled={submitting()}
+													onChange={setEditingRole}
+												/>
+											}
+										>
+											<span
+												class={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${roleBadgeClass(m.role)}`}
+											>
+												{m.role}
+											</span>
+										</Show>
+									</td>
+									<td class="py-2 pr-4 text-xs text-muted-foreground">
+										{m.status}
+									</td>
+									<td class="py-2 pr-4 text-xs text-muted-foreground">
+										{formatDate(m.joined_at)}
+									</td>
+									<Show when={showActions()}>
+										<td class="py-2 pr-4 text-right">
+											<div class="inline-flex gap-2">
+												<Show
+													when={editingUserId() === m.user_id}
+													fallback={
+														<>
+															<Show
+																when={
+																	hasPermission("members:change_role") &&
+																	m.role !== ROLES.OWNER
+																}
+															>
+																<button
+																	type="button"
+																	class="rounded-md border border-input px-2 py-1 text-xs hover:bg-secondary"
+																	onClick={() => startEdit(m.user_id, m.role)}
+																>
+																	Change role
+																</button>
+															</Show>
+															<Show
+																when={
+																	hasPermission("members:remove") &&
+																	m.role !== ROLES.OWNER
+																}
+															>
+																<button
+																	type="button"
+																	class="rounded-md border border-destructive/40 px-2 py-1 text-xs text-destructive hover:bg-destructive/10"
+																	disabled={submitting()}
+																	onClick={() => doRemove(m.user_id)}
+																>
+																	Remove
+																</button>
+															</Show>
+														</>
+													}
+												>
+													<button
+														type="button"
+														class="rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+														disabled={submitting()}
+														onClick={() => saveRole(m.user_id)}
+													>
+														Save
+													</button>
+													<button
+														type="button"
+														class="rounded-md border border-input px-2 py-1 text-xs hover:bg-secondary"
+														disabled={submitting()}
+														onClick={cancelEdit}
+													>
+														Cancel
+													</button>
+												</Show>
+											</div>
+										</td>
+									</Show>
+								</tr>
+							)}
+						</For>
+					</tbody>
+				</table>
+			</Show>
+
+			<Show when={!loading() && members().length === 0}>
+				<div class="rounded-md border border-dashed border-input px-4 py-6 text-center text-sm text-muted-foreground">
+					No members yet.
+				</div>
+			</Show>
+		</div>
+	);
+};

package/src/components/organization-card.tsx

@@ -0,0 +1,45 @@
+import type { OrganizationResponse } from "@yackey-labs/yauth-client";
+import type { Component } from "solid-js";
+import { Show } from "solid-js/web";
+
+export interface OrganizationCardProps {
+	organization: OrganizationResponse;
+	role?: string | null;
+	memberCount?: number | null;
+	onSelect?: (org: OrganizationResponse) => void;
+}
+
+export const OrganizationCard: Component<OrganizationCardProps> = (props) => {
+	return (
+		<button
+			class="flex w-full items-start justify-between gap-4 rounded-md border border-input bg-card px-4 py-3 text-left text-card-foreground shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+			type="button"
+			on:click={() => props.onSelect?.(props.organization)}
+		>
+			<div class="min-w-0 flex-1">
+				<div class="flex items-center gap-2">
+					<span class="truncate text-sm font-medium">
+						{props.organization.display_name || props.organization.name}
+					</span>
+					<Show when={props.role}>
+						<span class="rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground">
+							{props.role}
+						</span>
+					</Show>
+				</div>
+				<div class="mt-1 truncate text-xs text-muted-foreground">
+					@{props.organization.slug}
+				</div>
+			</div>
+			<Show
+				when={
+					props.memberCount !== null && props.memberCount !== undefined
+				}
+			>
+				<div class="shrink-0 text-xs text-muted-foreground">
+					{props.memberCount} {props.memberCount === 1 ? "member" : "members"}
+				</div>
+			</Show>
+		</button>
+	);
+};

package/src/components/organization-create.tsx

@@ -0,0 +1,147 @@
+import type { OrganizationResponse } from "@yackey-labs/yauth-client";
+import { type Component, createEffect, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import {
+	createOrganizations,
+	slugify,
+} from "../hooks/create-organizations";
+
+export interface OrganizationCreateProps {
+	onSuccess?: (org: OrganizationResponse) => void;
+	onError?: (error: Error) => void;
+}
+
+export const OrganizationCreate: Component<OrganizationCreateProps> = (
+	props,
+) => {
+	const { create, error } = createOrganizations();
+
+	const [name, setName] = createSignal("");
+	const [displayName, setDisplayName] = createSignal("");
+	const [slug, setSlug] = createSignal("");
+	const [slugTouched, setSlugTouched] = createSignal(false);
+	const [submitting, setSubmitting] = createSignal(false);
+
+	createEffect(() => {
+		const auto = slugify(name());
+		if (!slugTouched()) {
+			setSlug(auto);
+		}
+	});
+
+	const onSlugInput = (e: InputEvent & { currentTarget: HTMLInputElement }) => {
+		setSlugTouched(true);
+		setSlug(slugify(e.currentTarget.value));
+	};
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		if (!name().trim() || !slug().trim()) return;
+		setSubmitting(true);
+		const org = await create({
+			name: name().trim(),
+			slug: slug().trim(),
+			display_name: displayName().trim() || undefined,
+		});
+		setSubmitting(false);
+		if (org) {
+			props.onSuccess?.(org);
+			setName("");
+			setDisplayName("");
+			setSlug("");
+			setSlugTouched(false);
+		} else if (error()) {
+			props.onError?.(new Error(error() as string));
+		}
+	};
+
+	return (
+		<form class="space-y-6" on:submit={handleSubmit}>
+			<Show when={error()}>
+				<div
+					class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					role="alert"
+					aria-live="polite"
+				>
+					{error()}
+				</div>
+			</Show>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-org-create-name"
+				>
+					Organization name
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-org-create-name"
+					name="name"
+					type="text"
+					value={name()}
+					on:input={(e) => setName(e.currentTarget.value)}
+					required
+					maxlength={120}
+					autocomplete="organization"
+					disabled={submitting()}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-org-create-slug"
+				>
+					Slug
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 font-mono text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-org-create-slug"
+					name="slug"
+					type="text"
+					value={slug()}
+					on:input={onSlugInput}
+					required
+					pattern="[a-z0-9-]+"
+					maxlength={64}
+					aria-describedby="yauth-org-create-slug-hint"
+					disabled={submitting()}
+				/>
+				<p
+					id="yauth-org-create-slug-hint"
+					class="text-xs text-muted-foreground"
+				>
+					URL-safe identifier. Lowercase letters, numbers, and hyphens only.
+				</p>
+			</div>
+
+			<div class="space-y-2">
+				<label
+					class="text-sm font-medium leading-none"
+					for="yauth-org-create-display-name"
+				>
+					Display name (optional)
+				</label>
+				<input
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-org-create-display-name"
+					name="display_name"
+					type="text"
+					value={displayName()}
+					on:input={(e) => setDisplayName(e.currentTarget.value)}
+					maxlength={120}
+					disabled={submitting()}
+				/>
+			</div>
+
+			<button
+				class="inline-flex h-9 w-full cursor-pointer items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+				type="submit"
+				disabled={submitting() || !name().trim() || !slug().trim()}
+			>
+				{submitting() ? "Creating…" : "Create organization"}
+			</button>
+		</form>
+	);
+};

package/src/components/organization-detail.tsx

@@ -0,0 +1,68 @@
+import type { Component } from "solid-js";
+import { Show } from "solid-js/web";
+import { createOrganization } from "../hooks/create-organizations";
+import { InviteForm } from "./invite-form";
+import { MemberList } from "./member-list";
+
+export interface OrganizationDetailProps {
+	organizationId: string;
+	/** When false, hide the invite form section. */
+	canInvite?: boolean;
+}
+
+export const OrganizationDetail: Component<OrganizationDetailProps> = (
+	props,
+) => {
+	const { organization, loading, error } = createOrganization(
+		() => props.organizationId,
+	);
+
+	return (
+		<section class="space-y-6">
+			<Show when={error()}>
+				<div
+					class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					role="alert"
+					aria-live="polite"
+				>
+					{error()}
+				</div>
+			</Show>
+
+			<Show when={loading() && !organization()}>
+				<div class="text-sm text-muted-foreground">Loading organization…</div>
+			</Show>
+
+			<Show when={organization()}>
+				{(org) => (
+					<>
+						<div class="space-y-2">
+							<h2 class="text-lg font-semibold">
+								{org().display_name || org().name}
+							</h2>
+							<p class="font-mono text-xs text-muted-foreground">
+								@{org().slug}
+							</p>
+						</div>
+
+						<div class="space-y-3">
+							<h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+								Members
+							</h3>
+							<MemberList organizationId={org().id} />
+						</div>
+
+						<Show when={props.canInvite !== false}>
+							<div class="space-y-3">
+								<h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+									Invite a member
+								</h3>
+								<InviteForm organizationId={org().id} />
+							</div>
+						</Show>
+					</>
+				)}
+			</Show>
+		</section>
+	);
+};

package/src/components/organization-list.tsx

@@ -0,0 +1,54 @@
+import type { OrganizationResponse } from "@yackey-labs/yauth-client";
+import { type Component, For } from "solid-js";
+import { Show } from "solid-js/web";
+import { createOrganizations } from "../hooks/create-organizations";
+import { OrganizationCard } from "./organization-card";
+
+export interface OrganizationListProps {
+	onSelect?: (org: OrganizationResponse) => void;
+}
+
+export const OrganizationList: Component<OrganizationListProps> = (props) => {
+	const { organizations, loading, error } = createOrganizations();
+
+	return (
+		<div class="space-y-3">
+			<Show when={error()}>
+				<div
+					class="rounded-md bg-destructive/10 px-3 py-2 text-sm text-destructive"
+					role="alert"
+					aria-live="polite"
+				>
+					{error()}
+				</div>
+			</Show>
+
+			<Show when={loading() && organizations().length === 0}>
+				<div class="text-sm text-muted-foreground">
+					Loading organizations…
+				</div>
+			</Show>
+
+			<Show when={!loading() && organizations().length === 0}>
+				<div class="rounded-md border border-dashed border-input px-4 py-6 text-center text-sm text-muted-foreground">
+					You're not in any organizations yet.
+				</div>
+			</Show>
+
+			<Show when={organizations().length > 0}>
+				<ul class="space-y-2">
+					<For each={organizations()}>
+						{(org) => (
+							<li>
+								<OrganizationCard
+									organization={org}
+									onSelect={props.onSelect}
+								/>
+							</li>
+						)}
+					</For>
+				</ul>
+			</Show>
+		</div>
+	);
+};

package/src/components/organization-switcher.tsx

@@ -0,0 +1,139 @@
+import type { ActiveOrgEntry } from "@yackey-labs/yauth-client";
+import { type Component, createSignal, For, onCleanup } from "solid-js";
+import { Show } from "solid-js/web";
+import { createActiveOrg } from "../hooks/create-active-org";
+
+export interface OrganizationSwitcherProps {
+  /**
+   * Override the active org id (e.g. for SSR or test fixtures). When
+   * omitted the component reads from `createActiveOrg()` and is fully
+   * self-driving.
+   */
+  activeId?: string | null;
+  /**
+   * Callback fired after a successful switch — receives the membership
+   * entry the caller switched into. Useful for clients that need to
+   * adopt a freshly-issued bearer token from `switchTo`.
+   */
+  onSwitch?: (org: ActiveOrgEntry, bearerToken: string | null) => void;
+}
+
+/**
+ * Organization-switcher dropdown (issue #89).
+ *
+ * Self-driving by default: reads the active-org claim and full membership
+ * list from the server via `createActiveOrg`, and dispatches switches
+ * through the active-org endpoint. Cookie callers update server-side;
+ * bearer callers receive a freshly-issued JWT in the response that the
+ * `onSwitch` callback can adopt.
+ */
+export const OrganizationSwitcher: Component<OrganizationSwitcherProps> = (props) => {
+  const { activeOrgId, orgs, loading, switchTo } = createActiveOrg();
+  const [open, setOpen] = createSignal(false);
+  let containerEl: HTMLDivElement | undefined;
+
+  const effectiveActiveId = () => (props.activeId === undefined ? activeOrgId() : props.activeId);
+  const activeOrg = () => orgs().find((o) => o.organization_id === effectiveActiveId()) ?? null;
+
+  const handleClickOutside = (e: MouseEvent) => {
+    if (!containerEl) return;
+    if (!containerEl.contains(e.target as Node)) {
+      setOpen(false);
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+  };
+
+  const toggle = () => {
+    const next = !open();
+    setOpen(next);
+    if (next) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+  };
+
+  const choose = async (org: ActiveOrgEntry) => {
+    setOpen(false);
+    document.removeEventListener("mousedown", handleClickOutside);
+    const bearerToken = await switchTo(org.organization_id);
+    props.onSwitch?.(org, bearerToken);
+  };
+
+  onCleanup(() => {
+    document.removeEventListener("mousedown", handleClickOutside);
+  });
+
+  return (
+    <div ref={containerEl} class="relative inline-block w-full">
+      <button
+        class="inline-flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        type="button"
+        aria-expanded={open()}
+        aria-haspopup="listbox"
+        aria-label="Switch organization"
+        disabled={loading() && orgs().length === 0}
+        on:click={toggle}
+      >
+        <span class="truncate">
+          {activeOrg()?.display_name ||
+            activeOrg()?.slug ||
+            (loading() ? "Loading…" : "Select organization")}
+        </span>
+        <svg
+          class="h-4 w-4 shrink-0 opacity-50"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          aria-hidden="true"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      <Show when={open()}>
+        <div
+          class="absolute z-50 mt-1 max-h-64 w-full overflow-auto rounded-md border border-input bg-popover text-popover-foreground shadow-md"
+          role="listbox"
+        >
+          <For each={orgs()}>
+            {(org) => (
+              <button
+                class="flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 text-left text-sm hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
+                type="button"
+                role="option"
+                aria-selected={org.organization_id === effectiveActiveId()}
+                on:click={() => void choose(org)}
+              >
+                <div class="min-w-0 flex-1">
+                  <div class="truncate font-medium">
+                    {org.display_name || org.slug || org.organization_id}
+                  </div>
+                  <Show when={org.slug}>
+                    <div class="truncate font-mono text-xs text-muted-foreground">@{org.slug}</div>
+                  </Show>
+                </div>
+                <Show when={org.organization_id === effectiveActiveId()}>
+                  <svg
+                    class="h-4 w-4 shrink-0"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    aria-hidden="true"
+                  >
+                    <polyline points="20 6 9 17 4 12" />
+                  </svg>
+                </Show>
+              </button>
+            )}
+          </For>
+          <Show when={orgs().length === 0}>
+            <div class="px-3 py-2 text-sm text-muted-foreground">No organizations.</div>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  );
+};