feat: create and delete api keys

apps/web/src/views/settings/components/CreateAPIKeyForm.tsx

@@ -0,0 +1,60 @@
+import { authClient } from "@kan/auth";
+
+import Button from "~/components/Button";
+import Input from "~/components/Input";
+
+const CreateAPIKeyForm = ({
+  apiKey,
+  refetchUser,
+}: {
+  apiKey:
+    | {
+        id: number;
+        prefix: string | null;
+        key: string;
+      }
+    | null
+    | undefined;
+  refetchUser: () => void;
+}) => {
+  console.log({ apiKey });
+  const handleCreateAPIKey = async () => {
+    await authClient.apiKey.create();
+
+    refetchUser();
+  };
+
+  const handleRevokeAPIKey = async () => {
+    if (!apiKey) return;
+    await authClient.apiKey.delete({
+      keyId: apiKey.id.toString(),
+    });
+
+    refetchUser();
+  };
+
+  return (
+    <div>
+      {apiKey ? (
+        <div className="flex gap-2">
+          <div className="mb-4 flex w-full max-w-[325px] items-center gap-2">
+            <Input
+              value={`${apiKey.prefix}${apiKey.key}`}
+              readOnly
+              type="password"
+            />
+          </div>
+          <div>
+            <Button variant="danger" onClick={handleRevokeAPIKey}>
+              Revoke
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <Button onClick={handleCreateAPIKey}>Create new key</Button>
+      )}
+    </div>
+  );
+};
+
+export default CreateAPIKeyForm;

apps/web/src/views/settings/index.tsx

@@ -8,6 +8,7 @@ import { useModal } from "~/providers/modal";
 import { useWorkspace } from "~/providers/workspace";
 import { api } from "~/utils/api";
 import Avatar from "./components/Avatar";
+import CreateAPIKeyForm from "./components/CreateAPIKeyForm";
 import { CustomURLConfirmation } from "./components/CustomURLConfirmation";
 import { DeleteWorkspaceConfirmation } from "./components/DeleteWorkspaceConfirmation";
 import UpdateDisplayNameForm from "./components/UpdateDisplayNameForm";
@@ -18,9 +19,12 @@ import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
 export default function SettingsPage() {
   const { modalContentType, openModal } = useModal();
   const { workspace } = useWorkspace();
+  const utils = api.useUtils();
 
   const { data } = api.user.getUser.useQuery();
 
+  const refetchUser = () => utils.user.getUser.refetch();
+
   const handleOpenBillingPortal = async () => {
     try {
       const response = await fetch("/api/stripe/create_billing_session", {
@@ -91,7 +95,7 @@ export default function SettingsPage() {
               />
             </div>
 
-            {process.env.NEXT_PUBLIC_KAN_ENV !== "cloud" && (
+            {process.env.NEXT_PUBLIC_KAN_ENV === "cloud" && (
               <div className="mb-8 border-t border-light-300 dark:border-dark-300">
                 <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
                   Billing
@@ -109,6 +113,19 @@ export default function SettingsPage() {
               </div>
             )}
 
+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                API keys
+              </h2>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                View and manage your API keys.
+              </p>
+              <CreateAPIKeyForm
+                apiKey={data?.apiKey}
+                refetchUser={refetchUser}
+              />
+            </div>
+
             <div className="border-t border-light-300 dark:border-dark-300">
               <h2 className="mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
                 Delete workspace