zudoku 0.0.0-f36627bd → 0.0.0-f370c714

package/src/lib/plugins/api-keys/settings/ApiKeyItem.tsx

@@ -0,0 +1,342 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  CheckIcon,
+  CircleSlashIcon,
+  PencilLineIcon,
+  RefreshCwIcon,
+  XIcon,
+} from "lucide-react";
+import { AnimatePresence } from "motion/react";
+import { useState } from "react";
+import { Alert, AlertTitle } from "zudoku/ui/Alert.js";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "zudoku/ui/Dialog.js";
+import {
+  Frame,
+  FrameDescription,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "zudoku/ui/Frame.js";
+import { Input } from "zudoku/ui/Input.js";
+import { useZudoku } from "../../../components/context/ZudokuContext.js";
+import type { ZudokuContext } from "../../../core/ZudokuContext.js";
+import { cn } from "../../../util/cn.js";
+import type { ApiConsumer } from "../index.js";
+import { RevealApiKey } from "./RevealApiKey.js";
+
+const ApiKeyItem = ({
+  consumer,
+  onUpdate,
+  onRollKey,
+  onDeleteKey,
+}: {
+  consumer: ApiConsumer;
+  onUpdate?: (
+    data: { label: string; id: string },
+    context: ZudokuContext,
+  ) => Promise<void>;
+  onRollKey?: (consumerId: string, context: ZudokuContext) => Promise<void>;
+  onDeleteKey?: (
+    consumerId: string,
+    keyId: string,
+    context: ZudokuContext,
+  ) => Promise<void>;
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingLabel, setEditingLabel] = useState(consumer.label);
+  const queryClient = useQueryClient();
+  const context = useZudoku();
+
+  const rollKeyMutation = useMutation({
+    mutationFn: async (id: string) => {
+      if (!onRollKey) {
+        throw new Error("rollKey not implemented");
+      }
+
+      return await onRollKey?.(id, context);
+    },
+    onSuccess: () =>
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] }),
+  });
+
+  const deleteKeyMutation = useMutation({
+    mutationFn: ({
+      consumerId,
+      keyId,
+    }: {
+      consumerId: string;
+      keyId: string;
+    }) => {
+      if (!onDeleteKey) {
+        throw new Error("deleteKey not implemented");
+      }
+
+      return onDeleteKey(consumerId, keyId, context);
+    },
+    onMutate: async ({ consumerId, keyId }) => {
+      await queryClient.cancelQueries({ queryKey: ["api-keys"] });
+      const previousData = queryClient.getQueryData<ApiConsumer[]>([
+        "api-keys",
+      ]);
+      queryClient.setQueryData<ApiConsumer[]>(["api-keys"], (old) => {
+        if (!old) {
+          return old;
+        }
+
+        return old.map((consumer) => {
+          if (consumer.id === consumerId) {
+            return {
+              ...consumer,
+              apiKeys: consumer.apiKeys.filter((key) => key.id !== keyId),
+            };
+          }
+          return consumer;
+        });
+      });
+
+      return { previousData };
+    },
+    onError: (_err, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(["api-keys"], context.previousData);
+      }
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+    },
+  });
+
+  const updateConsumerMutation = useMutation({
+    mutationFn: ({
+      consumerId,
+      label,
+    }: {
+      consumerId: string;
+      label: string;
+    }) => {
+      if (!onUpdate) {
+        throw new Error("updateConsumer not implemented");
+      }
+
+      return onUpdate({ id: consumerId, label }, context);
+    },
+    onMutate: async ({ consumerId, label }) => {
+      await queryClient.cancelQueries({ queryKey: ["api-keys"] });
+
+      const previousData = queryClient.getQueryData(["api-keys"]);
+      queryClient.setQueryData<ApiConsumer[]>(["api-keys"], (old) => {
+        if (!old) {
+          return old;
+        }
+
+        return old.map((consumer) => {
+          if (consumer.id === consumerId) {
+            return {
+              ...consumer,
+              label,
+            };
+          }
+          return consumer;
+        });
+      });
+
+      return { previousData };
+    },
+    onError: (_err, _variables, context) => {
+      if (context?.previousData) {
+        queryClient.setQueryData(["api-keys"], context.previousData);
+      }
+    },
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: ["api-keys"] });
+    },
+  });
+
+  const handleStartEdit = () => {
+    setIsEditing(true);
+    setEditingLabel(consumer.label);
+  };
+
+  const handleSaveEdit = () => {
+    if (editingLabel.trim()) {
+      updateConsumerMutation.mutate({
+        label: editingLabel.trim(),
+        consumerId: consumer.id,
+      });
+    }
+    setIsEditing(false);
+  };
+
+  return (
+    <>
+      {rollKeyMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{rollKeyMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      {updateConsumerMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{updateConsumerMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      {deleteKeyMutation.isError && (
+        <Alert variant="destructive" className="mb-4">
+          <CircleSlashIcon size={16} />
+          <AlertTitle>{deleteKeyMutation.error.message}</AlertTitle>
+        </Alert>
+      )}
+      <Frame
+        className="grid grid-cols-subgrid col-span-full items-center mb-4 group"
+        key={consumer.id}
+      >
+        <FrameHeader className="col-span-full flex-row items-start justify-between gap-4">
+          <div className="flex flex-col gap-1">
+            {isEditing ? (
+              <div className="flex items-center gap-2">
+                <Input
+                  maxLength={32}
+                  value={editingLabel}
+                  onChange={(e) => setEditingLabel(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleSaveEdit();
+                    } else if (e.key === "Escape") {
+                      setIsEditing(false);
+                    }
+                  }}
+                  autoFocus
+                />
+                <div className="flex items-center">
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={handleSaveEdit}
+                    disabled={!editingLabel.trim()}
+                  >
+                    <CheckIcon size={16} />
+                  </Button>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    onClick={() => setIsEditing(false)}
+                  >
+                    <XIcon size={16} />
+                  </Button>
+                </div>
+              </div>
+            ) : (
+              <FrameTitle>{consumer.label}</FrameTitle>
+            )}
+            <FrameDescription>
+              {consumer.createdOn && (
+                <div>
+                  Created on {new Date(consumer.createdOn).toLocaleDateString()}
+                </div>
+              )}
+              {consumer.expiresOn && (
+                <div>
+                  Expires on {new Date(consumer.expiresOn).toLocaleDateString()}
+                </div>
+              )}
+            </FrameDescription>
+          </div>
+
+          <div className="flex gap-1">
+            {onUpdate && (
+              <Button
+                variant="ghost"
+                onClick={handleStartEdit}
+                className={cn(
+                  "flex gap-2",
+                  isEditing && "opacity-0! pointer-events-none",
+                )}
+                disabled={isEditing}
+              >
+                <PencilLineIcon size={16} />
+                <span className="hidden md:block">Edit label</span>
+              </Button>
+            )}
+            {onRollKey && (
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button
+                    title="Roll this key"
+                    variant="ghost"
+                    disabled={rollKeyMutation.isPending}
+                    className="flex items-center gap-2"
+                  >
+                    <RefreshCwIcon
+                      size={16}
+                      className={
+                        rollKeyMutation.isPending ? "animate-spin" : undefined
+                      }
+                    />
+                    <span className="hidden md:block">Roll key</span>
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Roll API Key</DialogTitle>
+                    <DialogDescription>
+                      Are you sure you want to roll this API key?
+                    </DialogDescription>
+                  </DialogHeader>
+                  <DialogFooter>
+                    <DialogClose asChild>
+                      <Button variant="outline">Cancel</Button>
+                    </DialogClose>
+                    <DialogClose asChild>
+                      <Button
+                        onClick={() => {
+                          rollKeyMutation.mutate(consumer.id);
+                        }}
+                      >
+                        Roll Key
+                      </Button>
+                    </DialogClose>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            )}
+          </div>
+        </FrameHeader>
+        <FramePanel className="p-0 grid grid-cols-subgrid col-span-full divide-y divide-border">
+          <AnimatePresence>
+            {consumer.apiKeys.map((apiKey) => (
+              <RevealApiKey
+                key={apiKey.id}
+                apiKey={apiKey}
+                onDeleteKey={() => {
+                  deleteKeyMutation.mutate({
+                    consumerId: consumer.id,
+                    keyId: apiKey.id,
+                  });
+                }}
+                className={
+                  deleteKeyMutation.variables?.keyId === apiKey.id &&
+                  deleteKeyMutation.isPending
+                    ? "opacity-10!"
+                    : undefined
+                }
+              />
+            ))}
+          </AnimatePresence>
+        </FramePanel>
+      </Frame>
+    </>
+  );
+};
+
+export default ApiKeyItem;

package/src/lib/plugins/api-keys/settings/ApiKeyList.tsx

@@ -0,0 +1,64 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { useZudoku } from "../../../components/context/ZudokuContext.js";
+import { cn } from "../../../util/cn.js";
+import { ZudokuError } from "../../../util/invariant.js";
+import { CreateApiKeyDialog } from "../CreateApiKeyDialog.js";
+import type { ApiKeyService } from "../index.js";
+import ApiKeyItem from "./ApiKeyItem.js";
+
+export const ApiKeyList = ({ service }: { service: ApiKeyService }) => {
+  const context = useZudoku();
+
+  const { data } = useSuspenseQuery({
+    queryFn: async () => {
+      try {
+        return await service.getConsumers(context);
+      } catch (error) {
+        throw new ZudokuError("Cannot get API keys", {
+          cause: error,
+          title: "Error getting API keys",
+          developerHint:
+            "Check the response of the API request for more information.",
+        });
+      }
+    },
+    queryKey: ["api-keys"],
+    retry: false,
+  });
+
+  const [isCreateApiKeyOpen, setIsCreateApiKeyOpen] = useState(false);
+
+  return (
+    <div className="mt-8">
+      {data.length === 0 ? (
+        <div className="flex col-span-full flex-col justify-center gap-4 items-center p-8 border rounded-sm bg-muted/30 text-muted-foreground">
+          <p className="text-center">
+            You have no API keys yet.
+            <br />
+            {service.createKey && "Get started and create your first key."}
+          </p>
+          {service.createKey && (
+            <CreateApiKeyDialog
+              service={service}
+              isOpen={isCreateApiKeyOpen}
+              onOpenChange={setIsCreateApiKeyOpen}
+            />
+          )}
+        </div>
+      ) : (
+        <ul className={cn("grid grid-cols-[1fr_min-content] col-span-6")}>
+          {data.map((consumer) => (
+            <ApiKeyItem
+              key={consumer.id}
+              consumer={consumer}
+              onUpdate={service.updateConsumer}
+              onRollKey={service.rollKey}
+              onDeleteKey={service.deleteKey}
+            />
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};

package/src/lib/plugins/api-keys/settings/RevealApiKey.tsx

@@ -0,0 +1,124 @@
+import { TrashIcon } from "lucide-react";
+import { useState } from "react";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "zudoku/ui/Dialog.js";
+import { Secret } from "zudoku/ui/Secret.js";
+import { cn } from "../../../util/cn.js";
+import type { ApiKey } from "../index.js";
+
+export const RevealApiKey = ({
+  apiKey,
+  onDeleteKey,
+  className,
+}: {
+  apiKey: ApiKey;
+  onDeleteKey: () => void;
+  className?: string;
+}) => {
+  const [revealed, setRevealed] = useState(false);
+
+  const { key, createdOn, expiresOn } = apiKey;
+  const isExpired = expiresOn && new Date(expiresOn) < new Date();
+  const daysUntilExpiry = expiresOn
+    ? Math.ceil(
+        (new Date(expiresOn).getTime() - Date.now()) / (1000 * 60 * 60 * 24),
+      )
+    : Infinity;
+  const expiresSoon = daysUntilExpiry <= 7 && !isExpired;
+
+  return (
+    <div className={cn("grid col-span-full grid-cols-subgrid p-6", className)}>
+      <div className="flex flex-col gap-1">
+        <Secret
+          className="max-w-fit w-full"
+          secret={key}
+          status={isExpired ? "expired" : expiresSoon ? "expiring" : "active"}
+          revealed={revealed}
+          onReveal={setRevealed}
+        />
+        <div className="flex gap-1 mt-0.5 text-nowrap">
+          {createdOn && (
+            <span className="text-xs text-muted-foreground">
+              Created {getTimeAgo(createdOn)}.
+            </span>
+          )}{" "}
+          {expiresOn && expiresSoon && (
+            <span className="text-xs text-primary">
+              Expires in {daysUntilExpiry}{" "}
+              {daysUntilExpiry === 1 ? "day" : "days"}.
+            </span>
+          )}
+          {expiresOn && isExpired && (
+            <span className="text-xs text-primary">
+              Expired{" "}
+              {daysUntilExpiry === 0
+                ? "today."
+                : `${daysUntilExpiry * -1} days ago.`}
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="flex justify-end">
+        {expiresOn && onDeleteKey && (
+          <Dialog>
+            <DialogTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <TrashIcon size={16} />
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Delete API Key</DialogTitle>
+                <DialogDescription>
+                  Are you sure you want to delete this API key?
+                </DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <DialogClose asChild>
+                  <Button
+                    onClick={() => {
+                      onDeleteKey();
+                    }}
+                  >
+                    Delete
+                  </Button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const getTimeAgo = (date: string) => {
+  const now = new Date();
+  const created = new Date(date);
+  const diffInSeconds = Math.floor((now.getTime() - created.getTime()) / 1000);
+
+  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+
+  if (diffInSeconds < 60) return rtf.format(-diffInSeconds, "second");
+  if (diffInSeconds < 3600)
+    return rtf.format(-Math.floor(diffInSeconds / 60), "minute");
+  if (diffInSeconds < 86400)
+    return rtf.format(-Math.floor(diffInSeconds / 3600), "hour");
+  if (diffInSeconds < 2592000)
+    return rtf.format(-Math.floor(diffInSeconds / 86400), "day");
+  if (diffInSeconds < 31536000)
+    return rtf.format(-Math.floor(diffInSeconds / 2592000), "month");
+  return rtf.format(-Math.floor(diffInSeconds / 31536000), "year");
+};