unkeyed · harshsbhat · Oct 2, 2024 · Oct 3, 2024 · Oct 3, 2024 · Oct 3, 2024
@@ -287,6 +287,8 @@ export abstract class Harness {
       createdAtM: Date.now(),
       updatedAtM: null,
       deletedAtM: null,
+      defaultPrefix: null,
+      defaultBytes: null,
     };
     const userKeyAuth: KeyAuth = {
       id: newId("test"),
@@ -297,6 +299,8 @@ export abstract class Harness {
       createdAtM: Date.now(),
       updatedAtM: null,
       deletedAtM: null,
+      defaultPrefix: null,
+      defaultBytes: null,
     };
 
     const unkeyApi: Api = {

@@ -56,7 +56,7 @@ export const UpdateKeyEnabled: React.FC<Props> = ({ apiKey }) => {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    updateEnabled.mutateAsync(values);
+    await updateEnabled.mutateAsync(values);
   }
 
   return (

@@ -79,7 +79,7 @@ export const UpdateKeyExpiration: React.FC<Props> = ({ apiKey }) => {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    changeExpiration.mutateAsync(values);
+    await changeExpiration.mutateAsync(values);
   }
 
   return (

@@ -61,7 +61,7 @@ export const UpdateKeyName: React.FC<Props> = ({ apiKey }) => {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    updateName.mutateAsync(values);
+    await updateName.mutateAsync(values);
   }
   return (
     <Form {...form}>

@@ -94,7 +94,7 @@ export const UpdateKeyRatelimit: React.FC<Props> = ({ apiKey }) => {
     },
   });
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    updateRatelimit.mutateAsync(values);
+    await updateRatelimit.mutateAsync(values);
   }
   return (
     <Form {...form}>

@@ -117,7 +117,7 @@ export const UpdateKeyRemaining: React.FC<Props> = ({ apiKey }) => {
     if (values.refill?.interval === "none") {
       delete values.refill;
     }
-    updateRemaining.mutateAsync(values);
+    await updateRemaining.mutateAsync(values);
   }
 
   return (

@@ -145,9 +145,11 @@ const formSchema = z.object({
 type Props = {
   apiId: string;
   keyAuthId: string;
+  defaultBytes: number | null;
+  defaultPrefix: string | null;
 };
 
-export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
+export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId, defaultBytes, defaultPrefix }) => {
   const router = useRouter();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -158,7 +160,8 @@ export const CreateKey: React.FC<Props> = ({ apiId, keyAuthId }) => {
     shouldFocusError: true,
     delayError: 100,
     defaultValues: {
-      bytes: 16,
+      prefix: defaultPrefix || undefined,
+      bytes: defaultBytes || 16,
       expireEnabled: false,
       limitEnabled: false,
       metaEnabled: false,

@@ -23,5 +23,12 @@ export default async function CreateKeypage(props: {
     return notFound();
   }
 
-  return <CreateKey keyAuthId={keyAuth.id} apiId={props.params.apiId} />;
+  return (
+    <CreateKey
+      keyAuthId={keyAuth.id}
+      apiId={props.params.apiId}
+      defaultBytes={keyAuth.defaultBytes}
+      defaultPrefix={keyAuth.defaultPrefix}
+    />
+  );
 }
@@ -0,0 +1,109 @@
+"use client";
+import { Loading } from "@/components/dashboard/loading";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { FormField } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { toast } from "@/components/ui/toaster";
+import { trpc } from "@/lib/trpc/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+const formSchema = z.object({
+  keyAuthId: z.string(),
+  workspaceId: z.string(),
+  defaultBytes: z
+    .number()
+    .min(8, "Byte size needs to be at least 8")
+    .max(255, "Byte size cannot exceed 255")
+    .optional(),
+});
+
+type Props = {
+  keyAuth: {
+    id: string;
+    workspaceId: string;
+    defaultBytes: number | undefined | null;
+  };
+};
+
+export const DefaultBytes: React.FC<Props> = ({ keyAuth }) => {
+  const router = useRouter();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      defaultBytes: keyAuth.defaultBytes ?? undefined,
+      keyAuthId: keyAuth.id,
+      workspaceId: keyAuth.workspaceId,
+    },
+  });
+
+  const setDefaultBytes = trpc.api.setDefaultBytes.useMutation({
+    onSuccess() {
+      toast.success("Default Byte length for this API is updated!");
+      router.refresh();
+    },
+    onError(err) {
+      console.error(err);
+      toast.error(err.message);
+    },
+  });
+
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    if (values.defaultBytes === keyAuth.defaultBytes || !values.defaultBytes) {
+      return toast.error(
+        "Please provide a different byte-size than already existing one as default",
+      );
+    }
+    await setDefaultBytes.mutateAsync(values);
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Default Bytes</CardTitle>
+          <CardDescription>Set default Bytes for the keys under this API.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col space-y-2">
+            <input type="hidden" name="workspaceId" value={keyAuth.workspaceId} />
+            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+            <label className="hidden sr-only">Default Bytes</label>
+            <FormField
+              control={form.control}
+              name="defaultBytes"
+              render={({ field }) => (
+                <Input
+                  className="max-w-sm"
+                  {...field}
+                  autoComplete="off"
+                  onChange={(e) => field.onChange(Number(e.target.value))}
+                />
+              )}
+            />
+          </div>
+        </CardContent>
+        <CardFooter className="justify-end">
+          <Button
+            variant={
+              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
+            }
+            disabled={!form.formState.isValid || form.formState.isSubmitting}
+            type="submit"
+          >
+            {form.formState.isSubmitting ? <Loading /> : "Save"}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
+  );
+};
@@ -0,0 +1,98 @@
+"use client";
+import { Loading } from "@/components/dashboard/loading";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { FormField } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { toast } from "@/components/ui/toaster";
+import { trpc } from "@/lib/trpc/client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+const formSchema = z.object({
+  keyAuthId: z.string(),
+  workspaceId: z.string(),
+  defaultPrefix: z.string(),
+});
+
+type Props = {
+  keyAuth: {
+    id: string;
+    workspaceId: string;
+    defaultPrefix: string | undefined | null;
+  };
+};
+
+export const DefaultPrefix: React.FC<Props> = ({ keyAuth }) => {
+  const router = useRouter();
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      defaultPrefix: keyAuth.defaultPrefix ?? undefined,
+      keyAuthId: keyAuth.id,
+      workspaceId: keyAuth.workspaceId,
+    },
+  });
+
+  const setDefaultPrefix = trpc.api.setDefaultPrefix.useMutation({
+    onSuccess() {
+      toast.success("Default prefix for this API is updated!");
+      router.refresh();
+    },
+    onError(err) {
+      console.error(err);
+      toast.error(err.message);
+    },
+  });
+  async function onSubmit(values: z.infer<typeof formSchema>) {
+    if (values.defaultPrefix.length > 8) {
+      return toast.error("Default prefix is too long, maximum length is 8 characters.");
+    }
+    if (values.defaultPrefix === keyAuth.defaultPrefix) {
+      return toast.error("Please provide a different prefix than already existing one as default");
+    }
+    await setDefaultPrefix.mutateAsync(values);
+  }
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <Card>
+        <CardHeader>
+          <CardTitle>Default Prefix</CardTitle>
+          <CardDescription>Set default prefix for the keys under this API.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col space-y-2">
+            <input type="hidden" name="workspaceId" value={keyAuth.workspaceId} />
+            <input type="hidden" name="keyAuthId" value={keyAuth.id} />
+            <label className="hidden sr-only">Default Prefix</label>
+            <FormField
+              control={form.control}
+              name="defaultPrefix"
+              render={({ field }) => <Input className="max-w-sm" {...field} autoComplete="off" />}
+            />
+          </div>
+        </CardContent>
+        <CardFooter className="justify-end">
+          <Button
+            variant={
+              form.formState.isValid && !form.formState.isSubmitting ? "primary" : "disabled"
+            }
+            disabled={!form.formState.isValid || form.formState.isSubmitting}
+            type="submit"
+          >
+            {form.formState.isSubmitting ? <Loading /> : "Save"}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
+  );
+};
@@ -4,6 +4,8 @@ import { Code } from "@/components/ui/code";
 import { getTenantId } from "@/lib/auth";
 import { and, db, eq, isNull, schema, sql } from "@/lib/db";
 import { notFound, redirect } from "next/navigation";
+import { DefaultBytes } from "./default-bytes";
+import { DefaultPrefix } from "./default-prefix";
 import { DeleteApi } from "./delete-api";
 import { DeleteProtection } from "./delete-protection";
 import { UpdateApiName } from "./update-api-name";
@@ -41,10 +43,23 @@ export default async function SettingsPage(props: Props) {
     .from(schema.keys)
     .where(and(eq(schema.keys.keyAuthId, api.keyAuthId!), isNull(schema.keys.deletedAt)))
     .then((rows) => Number.parseInt(rows.at(0)?.count ?? "0"));
+  const keyAuth = await db.query.keyAuth.findFirst({
+    where: (table, { eq, and, isNull }) =>
+      and(eq(table.id, api.keyAuthId!), isNull(table.deletedAt)),
+    with: {
+      workspace: true,
+      api: true,
+    },
+  });
+  if (!keyAuth || keyAuth.workspace.tenantId !== tenantId) {
+    return notFound();
+  }
 
   return (
     <div className="flex flex-col gap-8 mb-20 ">
       <UpdateApiName api={api} />
+      <DefaultBytes keyAuth={keyAuth} />
+      <DefaultPrefix keyAuth={keyAuth} />
       <UpdateIpWhitelist api={api} workspace={workspace} />
       <Card>
         <CardHeader>

@@ -56,7 +56,7 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
     if (values.name === api.name || !values.name) {
       return toast.error("Please provide a valid name before saving.");
     }
-    updateName.mutateAsync(values);
+    await updateName.mutateAsync(values);
   }
 
   return (

@@ -52,7 +52,7 @@ export const UpdateNamespaceName: React.FC<Props> = ({ namespace }) => {
     if (values.name === namespace.name || !values.name) {
       return toast.error("Please provide a valid name before saving.");
     }
-    updateName.mutateAsync(values);
+    await updateName.mutateAsync(values);
   }
 
   return (

@@ -48,7 +48,7 @@ export const UpdateWorkspaceName: React.FC<Props> = ({ workspace }) => {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    updateName.mutateAsync(values);
+    await updateName.mutateAsync(values);
   }
 
   return (

@@ -59,7 +59,7 @@ export const UpdateRootKeyName: React.FC<Props> = ({ apiKey }) => {
   });
 
   async function onSubmit(values: z.infer<typeof formSchema>) {
-    updateName.mutateAsync(values);
+    await updateName.mutateAsync(values);
   }
   return (
     <Form {...form}>