+
+
{t("change_password")}
+
{errorMessage &&
{errorMessage}
}
-
+
-
diff --git a/apps/web/components/security/TwoFactorAuthSection.tsx b/apps/web/components/security/TwoFactorAuthSection.tsx
index 00fd4adf..72aaeb88 100644
--- a/apps/web/components/security/TwoFactorAuthSection.tsx
+++ b/apps/web/components/security/TwoFactorAuthSection.tsx
@@ -17,21 +17,25 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
return (
<>
-
-
{t("2fa")}
-
- {enabled ? t("enabled") : t("disabled")}
-
+
+
+
+
{t("2fa")}
+
+ {enabled ? t("enabled") : t("disabled")}
+
+
+
{t("add_an_extra_layer_of_security")}
+
+
+
+
-
{t("add_an_extra_layer_of_security")}
-
-
-
{enableModalOpen && (
{
diff --git a/apps/web/components/ui/form/DatePicker.tsx b/apps/web/components/ui/form/DatePicker.tsx
index f45d97bd..6edb71df 100644
--- a/apps/web/components/ui/form/DatePicker.tsx
+++ b/apps/web/components/ui/form/DatePicker.tsx
@@ -10,9 +10,11 @@ type Props = {
date: Date;
onDatesChange?: ((date: Date) => void) | undefined;
className?: string;
+ disabled?: boolean;
+ minDate?: Date;
};
-export const DatePicker = ({ date, onDatesChange, className }: Props) => {
+export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props) => {
return (
{
clearIcon={null}
calendarIcon={}
value={date}
+ minDate={minDate}
+ disabled={disabled}
onChange={onDatesChange}
/>
);
diff --git a/apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx b/apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx
new file mode 100644
index 00000000..b3b168bf
--- /dev/null
+++ b/apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx
@@ -0,0 +1,150 @@
+import { ClipboardCopyIcon } from "@heroicons/react/solid";
+import dayjs from "dayjs";
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+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 { Form, TextField } from "@calcom/ui/form/fields";
+
+import { trpc } from "@lib/trpc";
+
+import { Tooltip } from "@components/Tooltip";
+import { DatePicker } from "@components/ui/form/DatePicker";
+
+import { TApiKeys } from "./ApiKeyListItem";
+
+export default function ApiKeyDialogForm(props: {
+ title: string;
+ defaultValues?: Omit & { neverExpires: boolean };
+ handleClose: () => void;
+}) {
+ const { t } = useLocale();
+ const utils = trpc.useContext();
+
+ const {
+ defaultValues = {
+ note: "",
+ neverExpires: false,
+ expiresAt: dayjs().add(1, "month").toDate(),
+ },
+ } = props;
+
+ const [apiKey, setApiKey] = useState("");
+ const [successfulNewApiKeyModal, setSuccessfulNewApiKeyModal] = useState(false);
+ const [apiKeyDetails, setApiKeyDetails] = useState({
+ id: "",
+ hashedKey: "",
+ expiresAt: null as Date | null,
+ note: "" as string | null,
+ neverExpires: false,
+ });
+
+ const form = useForm({
+ defaultValues,
+ });
+ const watchNeverExpires = form.watch("neverExpires");
+
+ return (
+ <>
+ {successfulNewApiKeyModal ? (
+ <>
+
+
+ {apiKeyDetails ? t("success_api_key_edited") : t("success_api_key_created")}
+
+
+ {t("success_api_key_created_bold_tagline")}{" "}
+ {t("you_will_only_view_it_once")}
+
+
+
+
+ {apiKey}
+
+
+
+
+
+
+ {apiKeyDetails.neverExpires
+ ? t("never_expire_key")
+ : `${t("expires")} ${apiKeyDetails?.expiresAt?.toLocaleDateString()}`}
+
+
+
{props.title}
+
{t("api_key_modal_subtitle")}
+
+
+ {t("expire_date")}
+ (
+
+ )}
+ />
+
+
(
+
+ )}
+ />
+
+
+
{t("api_keys")}
+
{t("api_keys_subtitle")}
+
+
+
+
+
+ {data.map((item: any) => (
+ {
+ setApiKeyToEdit(item);
+ setEditModalOpen(true);
+ }}
+ />
+ ))}
+
+ )}
+
+ {/* New api key dialog */}
+
+ {/* Edit api key dialog */}
+
+
+ )}
+ />
+ );
+}
diff --git a/apps/web/ee/components/apiKeys/ApiKeyListItem.tsx b/apps/web/ee/components/apiKeys/ApiKeyListItem.tsx
new file mode 100644
index 00000000..6c74f9fd
--- /dev/null
+++ b/apps/web/ee/components/apiKeys/ApiKeyListItem.tsx
@@ -0,0 +1,107 @@
+import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
+import { ExclamationIcon } from "@heroicons/react/solid";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+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";
+
+dayjs.extend(relativeTime);
+
+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 ? props.apiKey.expiresAt < new Date() : null;
+ const neverExpires = props?.apiKey?.expiresAt === null;
+ const deleteApiKey = trpc.useMutation("viewer.apiKeys.delete", {
+ async onSuccess() {
+ await utils.invalidateQueries(["viewer.apiKeys.list"]);
+ },
+ });
+ return (
+
+
+
+
+
+ {props?.apiKey?.note ? props.apiKey.note : t("api_key_no_note")}
+
+ {!neverExpires && isExpired && (
+
+ {t("expired")}
+
+ )}
+
+
+
+ {neverExpires ? (
+
+
+ {t("api_key_never_expires")}
+
+ ) : (
+ `${isExpired ? t("expired") : t("expires")} ${dayjs(
+ props?.apiKey?.expiresAt?.toString()
+ ).fromNow()}`
+ )}
+
+
+
+
+
+
+
+
+