feat: api keys frontend in security page

apps/web/components/security/ChangePasswordSection.tsx

@@ -56,11 +56,11 @@ const ChangePasswordSection = () => {
 
   return (
     <>
-      <div className="mt-6">
+      {/* <div className="mt-6">
         <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
-      </div>
+      </div> */}
       <form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={changePasswordHandler}>
-        <div className="py-6 lg:pb-8">
+        <div className="py-6 lg:pb-5">
           <div className="flex">
             <div className="w-1/2 ltr:mr-2 rtl:ml-2">
               <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
@@ -99,9 +99,11 @@ const ChangePasswordSection = () => {
           </div>
           {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
           <div className="flex justify-end py-8">
-            <Button type="submit">{t("save")}</Button>
+            <Button color="secondary" type="submit">
+              {t("save")}
+            </Button>
           </div>
-          <hr className="mt-4" />
+          {/* <hr className="mt-4" /> */}
         </div>
       </form>
     </>

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -17,6 +17,8 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
 
   return (
     <>
+      <div className="flex flex-row justify-between truncate pt-9 pl-2">
+        <div className="">
           <div className="flex flex-row items-center">
             <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
             <Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
@@ -24,14 +26,16 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
             </Badge>
           </div>
           <p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
-
+        </div>
+        <div className="self-center">
           <Button
-        className="mt-6"
             type="submit"
+            color="secondary"
             onClick={() => (enabled ? setDisableModalOpen(true) : setEnableModalOpen(true))}>
-        {enabled ? t("disable") : t("enable")} {t("2fa")}
+            {enabled ? t("disable") : t("enable")}
           </Button>
-
+        </div>
+      </div>
       {enableModalOpen && (
         <EnableTwoFactorModal
           onEnable={() => {

apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx

@@ -0,0 +1,110 @@
+import dayjs from "dayjs";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { unknown } from "zod";
+
+import { generateUniqueAPIKey } from "@calcom/ee/lib/api/apiKeys";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { DialogFooter } from "@calcom/ui/Dialog";
+import Switch from "@calcom/ui/Switch";
+import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@calcom/ui/form/fields";
+
+import { trpc } from "@lib/trpc";
+
+import { DatePicker } from "@components/ui/form/DatePicker";
+
+import { TApiKeys } from "./ApiKeyListItem";
+
+export default function ApiKeyDialogForm(props: { defaultValues?: TApiKeys; handleClose: () => void }) {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const handleNoteChange = (e) => {
+    form.setValue("note", e.target.value);
+  };
+  const {
+    defaultValues = {
+      id: "",
+      note: "" as string | undefined,
+      expiresAt: "" as unknown as Date,
+      neverExpires: true,
+      hashedKey: "",
+    } as Omit<TApiKeys, "userId" | "createdAt" | "lastUsedAt">,
+  } = props;
+
+  const [selectedDate, setSelectedDate] = useState(props?.defaultValues?.expiresAt);
+  const [neverExpired, onNeverExpired] = useState(false);
+
+  const handleDateChange = (e) => {
+    setSelectedDate(e);
+    form.setValue("expiresAt", e);
+  };
+  const form = useForm({
+    defaultValues,
+  });
+  return (
+    <Form
+      data-testid="ApiKeyDialogForm"
+      form={form}
+      handleSubmit={async (event) => {
+        if (event.id) {
+          await utils.client.mutation("viewer.apiKeys.edit", event);
+          await utils.invalidateQueries(["viewer.apiKeys.list"]);
+          showToast(t("apiKeys_updated_successfully"), "success");
+        } else {
+          await utils.client.mutation("viewer.apiKeys.create", e);
+          await utils.invalidateQueries(["viewer.apiKeys.list"]);
+          showToast(t("apiKeys_created_successfully"), "success");
+        }
+        props.handleClose();
+      }}
+      className="space-y-4">
+      <input type="hidden" {...form.register("id")} />
+
+      <TextField
+        label={t("personal_note")}
+        {...form.register("note")}
+        required
+        type="text"
+        onChange={handleNoteChange}
+      />
+
+      <div className="flex flex-col">
+        <div className="flex justify-between py-2">
+          <span className="text-md text-gray-600">Expire date</span>
+          <Switch label={"Never expire"} onCheckedChange={onNeverExpired} checked={neverExpired} />
+          <Controller
+            control={form.control}
+            name="neverExpires"
+            render={({ field }) => (
+              <Switch
+                label={field.value ? t("never_expire_key_enabled") : t("never_expire_key_disabled")}
+                defaultChecked={field.value}
+                onCheckedChange={(isChecked) => {
+                  form.setValue("neverExpires", isChecked);
+                }}
+              />
+            )}
+          />
+        </div>
+        <DatePicker
+          // disabled={neverExpired}
+          minDate={new Date()}
+          // {...form.register("expiresAt")}
+          date={selectedDate as Date}
+          onDatesChange={handleDateChange}
+        />
+      </div>
+      <div></div>
+      <DialogFooter>
+        <Button type="button" color="secondary" onClick={props.handleClose} tabIndex={-1}>
+          {t("cancel")}
+        </Button>
+        <Button type="submit" loading={form.formState.isSubmitting}>
+          {t("save")}
+        </Button>
+      </DialogFooter>
+    </Form>
+  );
+}

apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx

@@ -0,0 +1,80 @@
+import { PlusIcon } from "@heroicons/react/outline";
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import ApiKeyDialogForm from "@ee/components/apiKeys/ApiKeyDialogForm";
+import ApiKeyListItem, { TApiKeys } from "@ee/components/apiKeys/ApiKeyListItem";
+
+import { QueryCell } from "@lib/QueryCell";
+import { trpc } from "@lib/trpc";
+
+import { List } from "@components/List";
+
+export default function ApiKeyListContainer() {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.apiKeys.list"]);
+
+  const [newApiKeyModal, setNewApiKeyModal] = useState(false);
+  const [editModalOpen, setEditModalOpen] = useState(false);
+  const [editing, setEditing] = useState<TApiKeys | null>(null);
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => (
+        <>
+          <div className="flex flex-row justify-between truncate pl-2 pr-1 ">
+            <div className="mt-9">
+              <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("api_keys")}</h2>
+              <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_keys_subtitle")}</p>
+            </div>
+            <div className="self-center">
+              <Button
+                StartIcon={PlusIcon}
+                color="secondary"
+                onClick={() => setNewApiKeyModal(true)}
+                data-testid="new_token">
+                {t("generate_new_token")}
+              </Button>
+            </div>
+          </div>
+
+          {data.length ? (
+            <List className="pb-6">
+              {data.map((item) => (
+                <ApiKeyListItem
+                  key={item.id}
+                  apiKey={item}
+                  onEditApiKey={() => {
+                    setEditing(item);
+                    setEditModalOpen(true);
+                  }}
+                />
+              ))}
+            </List>
+          ) : null}
+
+          {/* New webhook dialog */}
+          <Dialog open={newApiKeyModal} onOpenChange={(isOpen) => !isOpen && setNewApiKeyModal(false)}>
+            <DialogContent>
+              <ApiKeyDialogForm handleClose={() => setNewApiKeyModal(false)} />
+            </DialogContent>
+          </Dialog>
+          {/* Edit webhook dialog */}
+          <Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
+            <DialogContent>
+              {editing && (
+                <ApiKeyDialogForm
+                  key={editing.id}
+                  handleClose={() => setEditModalOpen(false)}
+                  defaultValues={editing}
+                />
+              )}
+            </DialogContent>
+          </Dialog>
+        </>
+      )}
+    />
+  );
+}

apps/web/ee/components/apiKeys/ApiKeyListItem.tsx

@@ -0,0 +1,85 @@
+import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
+
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+
+import { inferQueryOutput, trpc } from "@lib/trpc";
+
+import { ListItem } from "@components/List";
+import { Tooltip } from "@components/Tooltip";
+import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
+import Badge from "@components/ui/Badge";
+
+export type TApiKeys = inferQueryOutput<"viewer.apiKeys.list">[number];
+
+export default function ApiKeyListItem(props: { apiKey: TApiKeys; onEditApiKey: () => void }) {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const isExpired = props.apiKey.expiresAt < new Date();
+  const deleteApiKey = trpc.useMutation("viewer.apiKeys.delete", {
+    async onSuccess() {
+      await utils.invalidateQueries(["viewer.apiKeys.list"]);
+    },
+  });
+  return (
+    <ListItem className="-mt-px flex w-full p-4">
+      <div className="flex w-full justify-between">
+        <div className="flex max-w-full flex-col truncate">
+          <div className="flex space-x-2">
+            <span className={classNames("truncate text-sm", isExpired ? "text-gray-500" : "text-gray-900")}>
+              {props?.apiKey?.note}
+            </span>
+            {isExpired ? <Badge variant="default">Expired</Badge> : null}
+          </div>
+          <div className="mt-2 flex">
+            <span
+              className={classNames(
+                "flex flex-col space-x-2 space-y-1 text-xs sm:flex-row sm:space-y-0 sm:rtl:space-x-reverse",
+                isExpired ? "text-red-500" : "text-gray-900"
+              )}>
+              {props?.apiKey?.expiresAt.toLocaleDateString()}
+            </span>
+          </div>
+        </div>
+        <div className="flex">
+          <Tooltip content={t("edit_api_key")}>
+            <Button
+              onClick={() => props.onEditApiKey()}
+              color="minimal"
+              size="icon"
+              StartIcon={PencilAltIcon}
+              className="ml-4 w-full self-center p-2"></Button>
+          </Tooltip>
+          <Dialog>
+            <Tooltip content={t("delete_api_key")}>
+              <DialogTrigger asChild>
+                <Button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  color="minimal"
+                  size="icon"
+                  StartIcon={TrashIcon}
+                  className="ml-2 w-full self-center p-2"></Button>
+              </DialogTrigger>
+            </Tooltip>
+            <ConfirmationDialogContent
+              variety="danger"
+              title={t("delete_api-key")}
+              confirmBtnText={t("confirm_delete_api_key")}
+              cancelBtnText={t("cancel")}
+              onConfirm={() =>
+                deleteApiKey.mutate({
+                  id: props.apiKey.id,
+                })
+              }>
+              {t("delete_api_key_confirmation_message")}
+            </ConfirmationDialogContent>
+          </Dialog>
+        </div>
+      </div>
+    </ListItem>
+  );
+}

apps/web/pages/settings/security.tsx

@@ -1,10 +1,11 @@
 import { IdentityProvider } from "@prisma/client";
 import React from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import ApiKeyListContainer from "@ee/components/apiKeys/ApiKeyListContainer";
 import SAMLConfiguration from "@ee/components/saml/Configuration";
 
 import { identityProviderNameMap } from "@lib/auth";
-import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
 import SettingsShell from "@components/SettingsShell";
@@ -34,10 +35,11 @@ export default function Security() {
             </p>
           </>
         ) : (
-          <>
+          <div className="space-y-2 divide-y">
             <ChangePasswordSection />
+            <ApiKeyListContainer />
             <TwoFactorAuthSection twoFactorEnabled={user?.twoFactorEnabled || false} />
-          </>
+          </div>
         )}
 
         <SAMLConfiguration teamsView={false} teamId={null} />

apps/web/public/static/locales/en/common.json

@@ -708,5 +708,10 @@
   "12_hour": "12 hour",
   "24_hour": "24 hour",
   "duplicate": "Duplicate",
-  "you_can_manage_your_schedules": "You can manage your schedules on the Availability page."
+  "you_can_manage_your_schedules": "You can manage your schedules on the Availability page.",
+  "api_keys": "API Keys",
+  "api_keys_subtitle": "Generate API keys to use for accessing your own account.",
+  "generate_new_token": "Generate new token",
+  "personal_note": "Personal Note",
+  "delete_pat": "Delete personal access token"
 }

apps/web/server/routers/viewer.tsx

@@ -20,6 +20,7 @@ import {
 } from "@lib/saml";
 import slugify from "@lib/slugify";
 
+import { apiKeysRouter } from "@server/routers/viewer/apiKeys";
 import { availabilityRouter } from "@server/routers/viewer/availability";
 import { eventTypesRouter } from "@server/routers/viewer/eventTypes";
 import { TRPCError } from "@trpc/server";
@@ -800,4 +801,5 @@ export const viewerRouter = createRouter()
   .merge("eventTypes.", eventTypesRouter)
   .merge("availability.", availabilityRouter)
   .merge("teams.", viewerTeamsRouter)
-  .merge("webhook.", webhookRouter);
+  .merge("webhook.", webhookRouter)
+  .merge("apiKeys.", apiKeysRouter);

apps/web/server/routers/viewer/apiKeys.tsx

@@ -0,0 +1,138 @@
+import { v4 } from "uuid";
+import { z } from "zod";
+
+import { getErrorFromUnknown } from "@calcom/lib/errors";
+
+// import { WEBHOOK_TRIGGER_EVENTS } from "@lib/apiKeys/constants";
+// import sendPayload from "@lib/apiKeys/sendPayload";
+import { createProtectedRouter } from "@server/createRouter";
+import { getTranslation } from "@server/lib/i18n";
+
+export const apiKeysRouter = createProtectedRouter()
+  .query("list", {
+    async resolve({ ctx }) {
+      return await ctx.prisma.apiKey.findMany({
+        where: {
+          userId: ctx.user.id,
+        },
+        orderBy: { createdAt: "desc" },
+      });
+    },
+  })
+  .mutation("create", {
+    input: z.object({
+      note: z.string().optional().nullish(),
+      hashedKey: z.string(),
+      neverExpires: z.boolean(),
+      expiresAt: z.date().optional(),
+    }),
+    async resolve({ ctx, input }) {
+      return await ctx.prisma.apiKey.create({
+        data: {
+          id: v4(),
+          userId: ctx.user.id,
+          ...input,
+        },
+      });
+    },
+  })
+  .mutation("edit", {
+    input: z.object({
+      id: z.string(),
+      neverExpires: z.boolean(),
+      note: z.string().optional().nullish(),
+      expiresAt: z.date().optional(),
+    }),
+    async resolve({ ctx, input }) {
+      const { id, ...data } = input;
+      const apiKey = await ctx.prisma.apiKey.findFirst({
+        where: {
+          userId: ctx.user.id,
+          id,
+        },
+      });
+      if (!apiKey) {
+        // user does not own this apiKey
+        return null;
+      }
+      return await ctx.prisma.apiKey.update({
+        where: {
+          id,
+        },
+        data,
+      });
+    },
+  })
+  .mutation("delete", {
+    input: z.object({
+      id: z.string(),
+      eventTypeId: z.number().optional(),
+    }),
+    async resolve({ ctx, input }) {
+      const { id } = input;
+      await ctx.prisma.user.update({
+        where: {
+          id: ctx.user.id,
+        },
+        data: {
+          apiKeys: {
+            delete: {
+              id,
+            },
+          },
+        },
+      });
+      return {
+        id,
+      };
+    },
+  });
+// .mutation("testTrigger", {
+//   input: z.object({
+//     url: z.string().url(),
+//     type: z.string(),
+//     payloadTemplate: z.string().optional().nullable(),
+//   }),
+//   async resolve({ input }) {
+//     const { url, type, payloadTemplate } = input;
+//     const translation = await getTranslation("en", "common");
+//     const language = {
+//       locale: "en",
+//       translate: translation,
+//     };
+
+//     const data = {
+//       triggerEvent: "PING",
+//       type: "Test",
+//       title: "Test trigger event",
+//       description: "",
+//       startTime: new Date().toISOString(),
+//       endTime: new Date().toISOString(),
+//       attendees: [
+//         {
+//           email: "jdoe@example.com",
+//           name: "John Doe",
+//           timeZone: "Europe/London",
+//           language,
+//         },
+//       ],
+//       organizer: {
+//         name: "Cal",
+//         email: "no-reply@cal.com",
+//         timeZone: "Europe/London",
+//         language,
+//       },
+//     };
+
+//     try {
+//       return await sendPayload(type, new Date().toISOString(), url, data, payloadTemplate);
+//     } catch (_err) {
+//       const error = getErrorFromUnknown(_err);
+//       return {
+//         ok: false,
+//         status: 500,
+//         message: error.message,
+//       };
+//     }
+//   },
+// });

packages/prisma/schema.prisma

@@ -370,6 +370,7 @@ model ApiKey {
   userId       Int
   note         String?
   createdAt    DateTime @default(now())
+  neverExpires Boolean  @default(false)
   expiresAt    DateTime @default(dbgenerated("NOW() + interval '30 days'"))
   lastUsedAt   DateTime @default(now())
   hashedKey    String   @unique()