@k2b/cloud 0.6.0-rc.0

package/src/access/ResourceApiKeys.tsx

@@ -0,0 +1,271 @@
+import { dates } from "@k2b/stdlib";
+import { mutation as mutations } from "@k2b/stdlib/solid";
+import { NoticeCard, Button, CopyButton, DateTimePicker, Placeholder, prompts, Select, Tag, TextInput, useLocale } from "@k2b/ui";
+import { createEffect, createSignal, For, Show } from "solid-js";
+import type { PermissionLevel, ServiceAccountCredential } from "../contracts/shared";
+import { accessMessages } from "./messages";
+
+type GrantablePermission = Exclude<PermissionLevel, "none">;
+
+export type ResourceApiKey = ServiceAccountCredential & {
+  permission: PermissionLevel;
+};
+
+export type ResourceApiKeyPermissionOption = {
+  value: GrantablePermission;
+  label: string;
+  description: string;
+  icon?: string;
+};
+
+type CreateResourceApiKeyInput = {
+  name: string;
+  expiresAt: string | null;
+  permission: GrantablePermission;
+};
+
+export type ResourceApiKeysProps = {
+  title?: string;
+  description?: string;
+  initialKeys: ResourceApiKey[];
+  permissionOptions?: ResourceApiKeyPermissionOption[];
+  createKey: (input: CreateResourceApiKeyInput) => Promise<{ credential: ResourceApiKey; token: string }>;
+  revokeKey: (credentialId: string) => Promise<void>;
+};
+
+const defaultPermissions = (t: ReturnType<typeof accessMessages.resolve>["t"]): ResourceApiKeyPermissionOption[] => [
+  { value: "read", label: t.read, description: t.readDescription, icon: "ti ti-eye" },
+  { value: "write", label: t.write, description: t.writeDescription, icon: "ti ti-pencil" },
+  { value: "admin", label: t.admin, description: t.adminDescription, icon: "ti ti-shield" },
+];
+
+const presetDate = (days: number) => new Date(Date.now() + days * 24 * 60 * 60 * 1000).toISOString();
+const hasInstantOffset = (value: string) => /[T\s].*([zZ]|[+-]\d{2}:?\d{2})$/.test(value);
+const toInstant = (value: string | null): string | null => {
+  if (!value) return null;
+  if (hasInstantOffset(value)) return value;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+};
+
+const permissionLabel = (permission: PermissionLevel, options: ResourceApiKeyPermissionOption[], noAccess: string) =>
+  permission === "none" ? noAccess : (options.find((option) => option.value === permission)?.label ?? permission);
+
+function TokenDialog(props: { token: string }) {
+  const locale = useLocale();
+  const t = () => accessMessages.resolve([locale()]).t;
+  return (
+    <div class="flex flex-col gap-4">
+      <NoticeCard tone="warning" icon={false}>
+        {t().copyOnce}
+      </NoticeCard>
+      <div class="rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900">
+        <code class="block break-all font-mono text-xs text-primary">{props.token}</code>
+      </div>
+      <div class="flex justify-end">
+        <CopyButton text={props.token} label={t().copyKey} />
+      </div>
+    </div>
+  );
+}
+
+function CreateResourceApiKeyDialog(props: {
+  permissionOptions: ResourceApiKeyPermissionOption[];
+  close: (value: CreateResourceApiKeyInput | null) => void;
+}) {
+  const locale = useLocale();
+  const t = () => accessMessages.resolve([locale()]).t;
+  const [name, setName] = createSignal("");
+  const [permission, setPermission] = createSignal<GrantablePermission>(props.permissionOptions[0]?.value ?? "read");
+  const [expiresAt, setExpiresAt] = createSignal<string | null>(presetDate(90));
+  const [error, setError] = createSignal<string | undefined>();
+  const selectOptions = () =>
+    props.permissionOptions.map((option) => ({
+      id: option.value,
+      label: option.label,
+      description: option.description,
+      icon: option.icon ?? "ti ti-key",
+    }));
+
+  const submit = () => {
+    const trimmedName = name().trim();
+    if (!trimmedName) {
+      setError(t().nameRequired);
+      return;
+    }
+    props.close({ name: trimmedName, permission: permission(), expiresAt: toInstant(expiresAt()) });
+  };
+
+  return (
+    <form
+      class="flex flex-col gap-4"
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+    >
+      <TextInput
+        label={t().name}
+        description={t().keyNameDescription}
+        placeholder={t().namePlaceholder}
+        icon="ti ti-tag"
+        value={name}
+        onValueChange={(value) => {
+          setName(value);
+          setError(undefined);
+        }}
+        error={error}
+        required
+      />
+      <Select
+        label={t().access}
+        description={t().keyAccessDescription}
+        icon="ti ti-shield-lock"
+        value={permission}
+        onValueChange={(value) => setPermission(value as GrantablePermission)}
+        options={selectOptions()}
+        required
+      />
+      <DateTimePicker
+        label={t().expires}
+        description={t().expiryDescription}
+        value={expiresAt}
+        onValueChange={setExpiresAt}
+        clearable
+        presets={[
+          { label: t().days30, value: presetDate(30) },
+          { label: t().days90, value: presetDate(90) },
+          { label: t().year1, value: presetDate(365) },
+          { label: t().never, value: null },
+        ]}
+      />
+      <div class="flex justify-end gap-2">
+        <Button type="button" variant="secondary" size="sm" onClick={() => props.close(null)}>
+          {t().cancel}
+        </Button>
+        <Button type="submit" variant="primary" size="sm">
+          <i class="ti ti-plus" />
+          {t().createKey}
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export default function ResourceApiKeys(props: ResourceApiKeysProps) {
+  const locale = useLocale();
+  const t = () => accessMessages.resolve([locale()]).t;
+  const dateContext = () => ({ locale: locale() });
+  const options = () => (props.permissionOptions && props.permissionOptions.length > 0 ? props.permissionOptions : defaultPermissions(t()));
+  const [keys, setKeys] = createSignal<ResourceApiKey[]>(props.initialKeys);
+
+  createEffect(() => {
+    setKeys(props.initialKeys);
+  });
+
+  const createMutation = mutations.create<{ credential: ResourceApiKey; token: string }, CreateResourceApiKeyInput>({
+    mutation: props.createKey,
+    onSuccess: async (data) => {
+      setKeys([data.credential, ...keys()]);
+      await prompts.dialog<void>(() => <TokenDialog token={data.token} />, {
+        title: t().keyCreated,
+        icon: "ti ti-key",
+        size: "medium",
+      });
+    },
+    onError: (error) => prompts.error(error.message),
+  });
+
+  const revokeMutation = mutations.create<void, { id: string; name: string }, { id: string }>({
+    onBefore: (vars) => ({ id: vars.id }),
+    mutation: async (vars) => props.revokeKey(vars.id),
+    onSuccess: (_, ctx) => {
+      if (ctx?.id) setKeys(keys().filter((key) => key.id !== ctx.id));
+    },
+    onError: (error) => prompts.error(error.message),
+  });
+
+  const openCreate = async () => {
+    const result = await prompts.dialog<CreateResourceApiKeyInput | null>(
+      (close) => <CreateResourceApiKeyDialog permissionOptions={options()} close={close} />,
+      { title: t().createApiKey, icon: "ti ti-key", size: "medium" },
+    );
+    if (result) await createMutation.mutate(result);
+  };
+
+  const revoke = async (key: ResourceApiKey) => {
+    const confirmed = await prompts.confirm(t().revokeConfirm({ name: key.name }), {
+      title: t().revokeApiKey,
+      icon: "ti ti-key-off",
+      variant: "danger",
+      confirmText: t().revoke,
+    });
+    if (confirmed) await revokeMutation.mutate({ id: key.id, name: key.name });
+  };
+
+  return (
+    <section class="flex flex-col gap-4">
+      <div class="flex items-start justify-between gap-3">
+        <div>
+          <h3 class="flex items-center gap-1.5 text-sm font-semibold text-primary">
+            <i class="ti ti-key text-sm" />
+            {props.title ?? t().apiKeys}
+          </h3>
+          <p class="mt-1 text-xs text-dimmed">{props.description ?? t().apiKeysDescription}</p>
+        </div>
+        <Button type="button" variant="secondary" size="sm" class="shrink-0" onClick={openCreate} disabled={createMutation.loading()}>
+          <i class="ti ti-plus" />
+          {t().add}
+        </Button>
+      </div>
+
+      <Show
+        when={keys().length > 0}
+        fallback={
+          <Placeholder
+            icon="ti ti-key"
+            class="rounded-lg border border-dashed border-zinc-200 dark:border-zinc-800"
+            description={t().noApiKeys}
+          />
+        }
+      >
+        <div class="flex flex-col gap-2">
+          <For each={keys()}>
+            {(key) => (
+              <div class="group/api-key flex items-center gap-3 rounded-lg bg-zinc-50/70 p-3 dark:bg-zinc-900/35">
+                <div class="min-w-0 flex-1">
+                  <div class="flex min-w-0 items-center gap-2">
+                    <span class="truncate text-sm font-medium text-primary">{key.name}</span>
+                    <Tag color={key.permission === "none" ? "#dc2626" : "#2563eb"}>
+                      {permissionLabel(key.permission, options(), t().noAccess)}
+                    </Tag>
+                    <Tag>{key.tokenPrefix}</Tag>
+                  </div>
+                  <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-dimmed">
+                    <span>{t().created({ date: dates.formatDate(key.createdAt, dateContext()) })}</span>
+                    <span>
+                      {key.expiresAt ? t().expiresOn({ date: dates.formatDate(key.expiresAt, dateContext()) }) : t().neverExpires}
+                    </span>
+                    <span>
+                      {key.lastUsedAt ? t().used({ date: dates.formatDateTimeRelative(key.lastUsedAt, dateContext()) }) : t().neverUsed}
+                    </span>
+                  </div>
+                </div>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  class="shrink-0 text-red-600 opacity-100 transition-opacity sm:opacity-0 sm:group-hover/api-key:opacity-100 sm:group-focus-within/api-key:opacity-100 dark:text-red-400"
+                  onClick={() => revoke(key)}
+                >
+                  <i class="ti ti-trash" />
+                  {t().revoke}
+                </Button>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+    </section>
+  );
+}

package/src/access/messages.ts

@@ -0,0 +1,121 @@
+import { i18n } from "@k2b/stdlib";
+
+export const accessMessages = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      view: "View",
+      edit: "Edit",
+      manage: "Manage",
+      noAccess: "No access",
+      allUsers: "All users (including guests)",
+      public: "Public",
+      signedInDescription: "Anyone signed in to Cloud",
+      publicDescription: "Anyone with the link, including people who are not signed in",
+      removeAccessConfirm: ({ name }: { name: string }) => `Remove access for ${name}?`,
+      removeAccess: "Remove access",
+      userBoundServiceAccount: "User-bound service account",
+      noDirectGrants: "No direct access granted yet.",
+      addAll: "Add user, group, service account, or audience…",
+      addService: "Add user, group, or service account…",
+      addAudience: "Add user, group, or audience…",
+      addBasic: "Add user or group…",
+      anyoneWithLink: "Anyone with the link",
+      permissionFor: ({ name }: { name: string }) => `Permission for ${name}`,
+      remove: ({ name }: { name: string }) => `Remove ${name}`,
+      read: "Read",
+      readDescription: "Read this resource through the app API.",
+      write: "Write",
+      writeDescription: "Read and update this resource through the app API.",
+      admin: "Admin",
+      adminDescription: "Manage this resource through the app API.",
+      copyOnce: "Copy this API key now. It is shown once and cannot be recovered later.",
+      copyKey: "Copy key",
+      nameRequired: "Enter a name.",
+      name: "Name",
+      keyNameDescription: "Shown on this resource so administrators can identify where the key is used.",
+      namePlaceholder: "e.g. website embed",
+      access: "Access",
+      keyAccessDescription: "Choose what this API key can do with this resource.",
+      expires: "Expires",
+      expiryDescription: "Leave empty only for long-lived integrations you actively maintain.",
+      days30: "30 days",
+      days90: "90 days",
+      year1: "1 year",
+      never: "Never",
+      cancel: "Cancel",
+      createKey: "Create key",
+      keyCreated: "API key created",
+      createApiKey: "Create API key",
+      revokeConfirm: ({ name }: { name: string }) => `Revoke “${name}”? Integrations using this key will lose access immediately.`,
+      revokeApiKey: "Revoke API key",
+      revoke: "Revoke",
+      apiKeys: "API keys",
+      apiKeysDescription: "Resource-bound keys for app integrations.",
+      add: "Add",
+      noApiKeys: "No API keys yet.",
+      created: ({ date }: { date: string }) => `Created ${date}`,
+      expiresOn: ({ date }: { date: string }) => `Expires ${date}`,
+      neverExpires: "Never expires",
+      used: ({ date }: { date: string }) => `Used ${date}`,
+      neverUsed: "Never used",
+    },
+    de: {
+      view: "Ansehen",
+      edit: "Bearbeiten",
+      manage: "Verwalten",
+      noAccess: "Kein Zugriff",
+      allUsers: "Alle Benutzer einschließlich Gäste",
+      public: "Öffentlich",
+      signedInDescription: "Alle bei Cloud angemeldeten Personen",
+      publicDescription: "Alle mit dem Link, auch ohne Anmeldung",
+      removeAccessConfirm: ({ name }) => `Zugriff für ${name} entfernen?`,
+      removeAccess: "Zugriff entfernen",
+      userBoundServiceAccount: "Benutzergebundenes Dienstkonto",
+      noDirectGrants: "Noch kein direkter Zugriff erteilt.",
+      addAll: "Benutzer, Gruppe, Dienstkonto oder Zielgruppe hinzufügen…",
+      addService: "Benutzer, Gruppe oder Dienstkonto hinzufügen…",
+      addAudience: "Benutzer, Gruppe oder Zielgruppe hinzufügen…",
+      addBasic: "Benutzer oder Gruppe hinzufügen…",
+      anyoneWithLink: "Alle mit dem Link",
+      permissionFor: ({ name }) => `Berechtigung für ${name}`,
+      remove: ({ name }) => `${name} entfernen`,
+      read: "Lesen",
+      readDescription: "Diese Ressource über die App-API lesen.",
+      write: "Schreiben",
+      writeDescription: "Diese Ressource über die App-API lesen und aktualisieren.",
+      admin: "Verwalten",
+      adminDescription: "Diese Ressource über die App-API verwalten.",
+      copyOnce: "Kopiere diesen API-Schlüssel jetzt. Er wird nur einmal angezeigt und kann später nicht wiederhergestellt werden.",
+      copyKey: "Schlüssel kopieren",
+      nameRequired: "Gib einen Namen ein.",
+      name: "Name",
+      keyNameDescription: "Wird an dieser Ressource angezeigt, damit die Administration die Verwendung des Schlüssels erkennen kann.",
+      namePlaceholder: "z. B. Website-Einbettung",
+      access: "Zugriff",
+      keyAccessDescription: "Lege fest, was dieser API-Schlüssel mit der Ressource tun darf.",
+      expires: "Läuft ab",
+      expiryDescription: "Nur für aktiv verwaltete langfristige Integrationen leer lassen.",
+      days30: "30 Tage",
+      days90: "90 Tage",
+      year1: "1 Jahr",
+      never: "Nie",
+      cancel: "Abbrechen",
+      createKey: "Schlüssel erstellen",
+      keyCreated: "API-Schlüssel erstellt",
+      createApiKey: "API-Schlüssel erstellen",
+      revokeConfirm: ({ name }) => `„${name}“ widerrufen? Integrationen mit diesem Schlüssel verlieren sofort den Zugriff.`,
+      revokeApiKey: "API-Schlüssel widerrufen",
+      revoke: "Widerrufen",
+      apiKeys: "API-Schlüssel",
+      apiKeysDescription: "An eine Ressource gebundene Schlüssel für App-Integrationen.",
+      add: "Hinzufügen",
+      noApiKeys: "Noch keine API-Schlüssel.",
+      created: ({ date }) => `Erstellt am ${date}`,
+      expiresOn: ({ date }) => `Läuft am ${date} ab`,
+      neverExpires: "Läuft nicht ab",
+      used: ({ date }) => `Verwendet ${date}`,
+      neverUsed: "Noch nie verwendet",
+    },
+  },
+});

package/src/access/ui.ts

@@ -0,0 +1,16 @@
+/**
+ * Cloud-owned access controls that depend on Cloud principals, permissions,
+ * and resource API-key contracts.
+ *
+ * Portable controls belong in `@k2b/ui`; this focused boundary keeps apps
+ * from depending on Cloud's broad legacy UI entrypoint.
+ */
+
+export type { AllowedLevel, GrantableLevel } from "./PermissionEditor";
+export { default as PermissionEditor } from "./PermissionEditor";
+export type {
+  ResourceApiKey,
+  ResourceApiKeyPermissionOption,
+  ResourceApiKeysProps,
+} from "./ResourceApiKeys";
+export { default as ResourceApiKeys } from "./ResourceApiKeys";

package/src/account/Avatar.tsx

@@ -0,0 +1,28 @@
+import { Avatar, type AvatarProps } from "@k2b/ui";
+import type { JSX } from "solid-js";
+
+export type CloudAvatarProps = Omit<AvatarProps, "name" | "src"> & {
+  username: string;
+  userId?: string | null;
+  avatarHash?: string | null;
+};
+
+const avatarSource = (userId?: string | null, avatarHash?: string | null): string | undefined => {
+  if (!userId || !avatarHash) return undefined;
+  return `/api/accounts/users/${encodeURIComponent(userId)}/avatar?rev=${encodeURIComponent(avatarHash)}`;
+};
+
+export function CloudAvatar(props: CloudAvatarProps): JSX.Element {
+  return (
+    <Avatar
+      name={props.username}
+      src={avatarSource(props.userId, props.avatarHash)}
+      alt={props.alt}
+      fallback={props.fallback}
+      size={props.size}
+      loading={props.loading}
+      class={props.class}
+      style={props.style}
+    />
+  );
+}