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

package/src/components/domain-claim.tsx

@@ -0,0 +1,121 @@
+import type { CreateDomainResponse } from "@yackey-labs/yauth-client";
+import { type Component, createSignal, Show } from "solid-js";
+import { createDomains } from "../hooks/create-organizations";
+
+export interface DomainClaimProps {
+  organizationId: string;
+  onSuccess?: (result: CreateDomainResponse) => void;
+  onError?: (error: Error) => void;
+}
+
+const isDomain = (v: string) => /^[a-z0-9.-]+\.[a-z]{2,}$/i.test(v.trim());
+
+/**
+ * Form for an org admin to claim a new email domain. On success surfaces
+ * the verification token + the DNS record name; the parent UI is expected
+ * to chain into <DomainVerifyStep /> for the "publish the TXT record" step.
+ */
+export const DomainClaim: Component<DomainClaimProps> = (props) => {
+  const { claim, lastCreated, error, submitting } = createDomains(() => props.organizationId);
+  const [domain, setDomain] = createSignal("");
+  const [autoJoin, setAutoJoin] = createSignal(false);
+  const [requireVerified, setRequireVerified] = createSignal(true);
+
+  const handleSubmit = async (e: SubmitEvent) => {
+    e.preventDefault();
+    const trimmed = domain().trim().toLowerCase();
+    if (!isDomain(trimmed)) return;
+    const result = await claim({
+      domain: trimmed,
+      auto_join_on_signup: autoJoin(),
+      require_email_verified: requireVerified(),
+    });
+    if (result) {
+      setDomain("");
+      props.onSuccess?.(result);
+    } else if (error()) {
+      props.onError?.(new Error(error() as string));
+    }
+  };
+
+  return (
+    <form class="space-y-4" 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-domain-input">
+          Domain
+        </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-domain-input"
+          name="domain"
+          type="text"
+          placeholder="acme.com"
+          value={domain()}
+          on:input={(e) => setDomain(e.currentTarget.value)}
+          required
+          autocomplete="off"
+          disabled={submitting()}
+        />
+      </div>
+
+      <label class="flex items-center gap-2 text-sm">
+        <input
+          type="checkbox"
+          checked={autoJoin()}
+          on:change={(e) => setAutoJoin(e.currentTarget.checked)}
+          disabled={submitting()}
+        />
+        Auto-join matching users on signup
+      </label>
+
+      <label class="flex items-center gap-2 text-sm">
+        <input
+          type="checkbox"
+          checked={requireVerified()}
+          on:change={(e) => setRequireVerified(e.currentTarget.checked)}
+          disabled={submitting()}
+        />
+        Require verified email before auto-join
+      </label>
+
+      <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() || !isDomain(domain().trim())}
+      >
+        {submitting() ? "Claiming…" : "Claim domain"}
+      </button>
+
+      <Show when={lastCreated()}>
+        {(result) => (
+          <div class="rounded-md border border-input bg-muted/40 p-3 space-y-2">
+            <p class="text-xs text-muted-foreground">
+              Publish the following DNS TXT record to verify ownership. The token is shown ONCE —
+              copy it now.
+            </p>
+            <div>
+              <span class="text-xs font-medium">Record</span>
+              <code class="mt-1 block break-all font-mono text-xs">{result().dns_record_name}</code>
+            </div>
+            <div>
+              <span class="text-xs font-medium">Value</span>
+              <code class="mt-1 block break-all font-mono text-xs">
+                {result().verification_token}
+              </code>
+            </div>
+          </div>
+        )}
+      </Show>
+    </form>
+  );
+};

package/src/components/domain-list.tsx

@@ -0,0 +1,94 @@
+import { type Component, For, Show } from "solid-js";
+import { createDomains } from "../hooks/create-organizations";
+
+export interface DomainListProps {
+  organizationId: string;
+}
+
+const STATUS_LABEL: Record<string, string> = {
+  pending: "Pending verification",
+  verified: "Verified",
+  failed: "Verification failed",
+};
+
+/**
+ * Read-only-with-actions listing of an org's claimed domains. Admins get
+ * verify / remove buttons; non-admins still see the list (the backend gate
+ * is on member-of-org rather than admin-of-org).
+ */
+export const DomainList: Component<DomainListProps> = (props) => {
+  const { domains, loading, error, verify, remove, submitting } = createDomains(
+    () => props.organizationId,
+  );
+
+  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()}>
+        <p class="text-sm text-muted-foreground">Loading domains…</p>
+      </Show>
+
+      <Show when={!loading() && domains().length === 0}>
+        <p class="text-sm text-muted-foreground">No domains claimed yet.</p>
+      </Show>
+
+      <ul class="divide-y divide-border">
+        <For each={domains()}>
+          {(d) => (
+            <li class="flex items-center justify-between gap-3 py-2">
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                  <code class="font-mono text-sm">{d.domain}</code>
+                  <span
+                    class={`rounded-full px-2 py-0.5 text-xs ${
+                      d.status === "verified"
+                        ? "bg-emerald-500/10 text-emerald-700"
+                        : d.status === "failed"
+                          ? "bg-destructive/10 text-destructive"
+                          : "bg-muted text-muted-foreground"
+                    }`}
+                  >
+                    {STATUS_LABEL[d.status] ?? d.status}
+                  </span>
+                </div>
+                <p class="text-xs text-muted-foreground">
+                  Auto-join {d.auto_join_on_signup ? "on" : "off"} · default role{" "}
+                  {d.default_role_on_auto_join}
+                </p>
+              </div>
+              <div class="flex gap-2">
+                <Show when={d.status !== "verified"}>
+                  <button
+                    type="button"
+                    class="inline-flex h-8 cursor-pointer items-center justify-center rounded-md border border-input bg-transparent px-3 text-xs font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
+                    on:click={() => verify(d.id)}
+                    disabled={submitting()}
+                  >
+                    Verify
+                  </button>
+                </Show>
+                <button
+                  type="button"
+                  class="inline-flex h-8 cursor-pointer items-center justify-center rounded-md border border-input bg-transparent px-3 text-xs font-medium text-destructive shadow-sm transition-colors hover:bg-destructive/10 disabled:pointer-events-none disabled:opacity-50"
+                  on:click={() => remove(d.id)}
+                  disabled={submitting()}
+                >
+                  Remove
+                </button>
+              </div>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  );
+};

package/src/components/domain-verify-step.tsx

@@ -0,0 +1,81 @@
+import type { CreateDomainResponse, VerifyDomainResponse } from "@yackey-labs/yauth-client";
+import { type Component, createSignal, Show } from "solid-js";
+import { createDomains } from "../hooks/create-organizations";
+
+export interface DomainVerifyStepProps {
+  organizationId: string;
+  /** The domain claim to verify — usually the result of `<DomainClaim />`. */
+  claim: CreateDomainResponse;
+  onVerified?: (result: VerifyDomainResponse) => void;
+}
+
+/**
+ * Final step of the domain-onboarding flow. Displays the DNS TXT record the
+ * operator must publish, plus a "Run verification" button that hits the
+ * verify endpoint. The verification is best-effort — operators can retry.
+ */
+export const DomainVerifyStep: Component<DomainVerifyStepProps> = (props) => {
+  const { verify, error, submitting } = createDomains(() => props.organizationId);
+  const [lastResult, setLastResult] = createSignal<VerifyDomainResponse | null>(null);
+
+  const handleVerify = async () => {
+    const result = await verify(props.claim.domain.id);
+    setLastResult(result);
+    if (result?.verified) {
+      props.onVerified?.(result);
+    }
+  };
+
+  return (
+    <div class="space-y-3">
+      <div class="rounded-md border border-input bg-muted/40 p-3 space-y-2">
+        <p class="text-xs text-muted-foreground">
+          Publish the following DNS TXT record at your DNS provider, then click "Run verification".
+          Some DNS providers can take up to 60 seconds to propagate.
+        </p>
+        <div>
+          <span class="text-xs font-medium">Record</span>
+          <code class="mt-1 block break-all font-mono text-xs">{props.claim.dns_record_name}</code>
+        </div>
+        <div>
+          <span class="text-xs font-medium">Value</span>
+          <code class="mt-1 block break-all font-mono text-xs">
+            {props.claim.verification_token}
+          </code>
+        </div>
+      </div>
+
+      <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={lastResult() && !lastResult()?.verified}>
+        <div class="rounded-md bg-amber-500/10 px-3 py-2 text-sm text-amber-700">
+          Verification did not find the expected DNS TXT record. Double-check the record name +
+          value, then retry.
+        </div>
+      </Show>
+
+      <Show when={lastResult()?.verified}>
+        <div class="rounded-md bg-emerald-500/10 px-3 py-2 text-sm text-emerald-700">
+          Domain verified. JIT auto-join is now active for matching users.
+        </div>
+      </Show>
+
+      <button
+        type="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 disabled:pointer-events-none disabled:opacity-50"
+        on:click={handleVerify}
+        disabled={submitting()}
+      >
+        {submitting() ? "Verifying…" : "Run verification"}
+      </button>
+    </div>
+  );
+};

package/src/components/invitation-accept.tsx

@@ -0,0 +1,82 @@
+import type { MembershipResponse } from "@yackey-labs/yauth-client";
+import { type Component, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import { createInvitation } from "../hooks/create-organizations";
+
+export interface InvitationAcceptProps {
+	/** Pre-fill the token (e.g. from a query string). */
+	token?: string;
+	onSuccess?: (membership: MembershipResponse) => void;
+	onError?: (error: Error) => void;
+}
+
+export const InvitationAccept: Component<InvitationAcceptProps> = (props) => {
+	const { accept, submitting, error } = createInvitation();
+	const [token, setToken] = createSignal(props.token ?? "");
+	const [accepted, setAccepted] = createSignal<MembershipResponse | null>(null);
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const result = await accept(token().trim());
+		if (result) {
+			setAccepted(result);
+			props.onSuccess?.(result);
+		} else if (error()) {
+			props.onError?.(new Error(error() as string));
+		}
+	};
+
+	return (
+		<form class="space-y-4" 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>
+
+			<Show when={accepted()}>
+				<div
+					class="rounded-md bg-primary/10 px-3 py-2 text-sm"
+					role="status"
+					aria-live="polite"
+				>
+					Invitation accepted. Welcome to the organization!
+				</div>
+			</Show>
+
+			<Show when={!accepted()}>
+				<div class="space-y-2">
+					<label
+						class="text-sm font-medium leading-none"
+						for="yauth-invitation-accept-token"
+					>
+						Invitation token
+					</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-invitation-accept-token"
+						name="token"
+						type="text"
+						value={token()}
+						on:input={(e) => setToken(e.currentTarget.value)}
+						required
+						autocomplete="off"
+						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() || !token().trim()}
+				>
+					{submitting() ? "Accepting…" : "Accept invitation"}
+				</button>
+			</Show>
+		</form>
+	);
+};

package/src/components/invite-form.tsx

@@ -0,0 +1,108 @@
+import type { CreateInvitationResponse } from "@yackey-labs/yauth-client";
+import { type Component, createSignal } from "solid-js";
+import { Show } from "solid-js/web";
+import { createMembers } from "../hooks/create-organizations";
+
+export interface InviteFormProps {
+	organizationId: string;
+	onSuccess?: (result: CreateInvitationResponse) => void;
+	onError?: (error: Error) => void;
+}
+
+const isEmail = (v: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
+
+export const InviteForm: Component<InviteFormProps> = (props) => {
+	const { invite, error } = createMembers(() => props.organizationId);
+
+	const [email, setEmail] = createSignal("");
+	const [role, setRole] = createSignal("member");
+	const [submitting, setSubmitting] = createSignal(false);
+	const [lastToken, setLastToken] = createSignal<string | null>(null);
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		const trimmed = email().trim();
+		if (!isEmail(trimmed)) return;
+		setSubmitting(true);
+		const result = await invite({ email: trimmed, role: role() });
+		setSubmitting(false);
+		if (result) {
+			setLastToken(result.token);
+			setEmail("");
+			props.onSuccess?.(result);
+		} else if (error()) {
+			props.onError?.(new Error(error() as string));
+		}
+	};
+
+	return (
+		<form class="space-y-4" 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-invite-email"
+				>
+					Email
+				</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-invite-email"
+					name="email"
+					type="email"
+					value={email()}
+					on:input={(e) => setEmail(e.currentTarget.value)}
+					required
+					autocomplete="email"
+					disabled={submitting()}
+				/>
+			</div>
+
+			<div class="space-y-2">
+				<label class="text-sm font-medium leading-none" for="yauth-invite-role">
+					Role
+				</label>
+				<select
+					class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
+					id="yauth-invite-role"
+					name="role"
+					value={role()}
+					on:change={(e) => setRole(e.currentTarget.value)}
+					disabled={submitting()}
+				>
+					<option value="member">Member</option>
+					<option value="admin">Admin</option>
+				</select>
+			</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() || !isEmail(email().trim())}
+			>
+				{submitting() ? "Sending…" : "Send invitation"}
+			</button>
+
+			<Show when={lastToken()}>
+				<div class="rounded-md border border-input bg-muted/40 p-3">
+					<p class="text-xs text-muted-foreground">
+						Invitation created. Deliver this token to the invitee — it will
+						not be shown again.
+					</p>
+					<code class="mt-2 block break-all font-mono text-xs">
+						{lastToken()}
+					</code>
+				</div>
+			</Show>
+		</form>
+	);
+};