Compare commits
2 Commits
main
...
9971-cal-2
Author | SHA1 | Date | |
---|---|---|---|
|
15336fbaa4 | ||
|
6fa02dc74a |
|
@ -57,7 +57,7 @@ const ApiKeysView = () => {
|
||||||
<div>
|
<div>
|
||||||
{isLoading ? null : data?.length ? (
|
{isLoading ? null : data?.length ? (
|
||||||
<>
|
<>
|
||||||
<div className="mb-8 mt-6 rounded-md border">
|
<div className="border-subtle mb-8 mt-6 rounded-md border">
|
||||||
{data.map((apiKey, index) => (
|
{data.map((apiKey, index) => (
|
||||||
<ApiKeyListItem
|
<ApiKeyListItem
|
||||||
key={apiKey.id}
|
key={apiKey.id}
|
||||||
|
|
|
@ -0,0 +1,103 @@
|
||||||
|
// TODO: this page is a duplicate of API keys and should, of course,
|
||||||
|
// use the correct License Key generation setup page, not the API key setup page
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
|
||||||
|
import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
|
||||||
|
import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/ApiKeyDialogForm";
|
||||||
|
import ApiKeyListItem from "@calcom/features/ee/api-keys/components/ApiKeyListItem";
|
||||||
|
import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
|
||||||
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
||||||
|
import { trpc } from "@calcom/trpc/react";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
EmptyScreen,
|
||||||
|
Meta,
|
||||||
|
AppSkeletonLoader as SkeletonLoader,
|
||||||
|
} from "@calcom/ui";
|
||||||
|
import { Server as ServerIcon } from "@calcom/ui/components/icon";
|
||||||
|
|
||||||
|
import PageWrapper from "@components/PageWrapper";
|
||||||
|
|
||||||
|
const SelfHostingView = () => {
|
||||||
|
const { t } = useLocale();
|
||||||
|
|
||||||
|
const { data, isLoading } = trpc.viewer.apiKeys.list.useQuery();
|
||||||
|
|
||||||
|
const [apiKeyModal, setApiKeyModal] = useState(false);
|
||||||
|
const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires?: boolean }) | undefined>(
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
|
||||||
|
const ContinueButton = () => {
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setApiKeyToEdit(undefined);
|
||||||
|
setApiKeyModal(true);
|
||||||
|
}}>
|
||||||
|
{t("continue")}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Meta title={t("self_hosting")} description={t("self_hosting_description")} />
|
||||||
|
|
||||||
|
<LicenseRequired>
|
||||||
|
<>
|
||||||
|
{isLoading && <SkeletonLoader />}
|
||||||
|
<div>
|
||||||
|
{isLoading ? null : data?.length ? (
|
||||||
|
<>
|
||||||
|
<div className="border-subtle mb-8 mt-6 rounded-md border">
|
||||||
|
{data.map((apiKey, index) => (
|
||||||
|
<ApiKeyListItem
|
||||||
|
key={apiKey.id}
|
||||||
|
apiKey={apiKey}
|
||||||
|
lastItem={data.length === index + 1}
|
||||||
|
onEditClick={() => {
|
||||||
|
setApiKeyToEdit(apiKey);
|
||||||
|
setApiKeyModal(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<ContinueButton />
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<EmptyScreen
|
||||||
|
Icon={ServerIcon}
|
||||||
|
headline={t("host_calcom_title")}
|
||||||
|
description={t("host_calcom_description")}
|
||||||
|
buttonRaw={
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
<ContinueButton />
|
||||||
|
<Button href="https://cal.com/sales" color="secondary">
|
||||||
|
{t("contact_sales")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</LicenseRequired>
|
||||||
|
|
||||||
|
<Dialog open={apiKeyModal} onOpenChange={setApiKeyModal}>
|
||||||
|
<DialogContent type="creation">
|
||||||
|
<ApiKeyDialogForm handleClose={() => setApiKeyModal(false)} defaultValues={apiKeyToEdit} />
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
SelfHostingView.getLayout = getLayout;
|
||||||
|
SelfHostingView.PageWrapper = PageWrapper;
|
||||||
|
|
||||||
|
export default SelfHostingView;
|
|
@ -973,6 +973,10 @@
|
||||||
"booking_full": "No more seats available",
|
"booking_full": "No more seats available",
|
||||||
"api_keys": "API keys",
|
"api_keys": "API keys",
|
||||||
"api_key": "API key",
|
"api_key": "API key",
|
||||||
|
"self_hosting": "Self-Hosting",
|
||||||
|
"self_hosting_description": "Generate and manage commercial license keys",
|
||||||
|
"host_calcom_title": "Host Cal.com on your own server",
|
||||||
|
"host_calcom_description": "To host the commercial license of cal.com you can generate and manage your license key here",
|
||||||
"test_api_key": "Test API key",
|
"test_api_key": "Test API key",
|
||||||
"test_passed": "Test passed!",
|
"test_passed": "Test passed!",
|
||||||
"test_failed": "Test failed",
|
"test_failed": "Test failed",
|
||||||
|
|
|
@ -70,6 +70,7 @@ const tabs: VerticalTabItemProps[] = [
|
||||||
//
|
//
|
||||||
{ name: "webhooks", href: "/settings/developer/webhooks" },
|
{ name: "webhooks", href: "/settings/developer/webhooks" },
|
||||||
{ name: "api_keys", href: "/settings/developer/api-keys" },
|
{ name: "api_keys", href: "/settings/developer/api-keys" },
|
||||||
|
{ name: "self_hosting", href: "/settings/developer/self-hosting" },
|
||||||
// TODO: Add profile level for embeds
|
// TODO: Add profile level for embeds
|
||||||
// { name: "embeds", href: "/v2/settings/developer/embeds" },
|
// { name: "embeds", href: "/v2/settings/developer/embeds" },
|
||||||
],
|
],
|
||||||
|
|
Loading…
Reference in New Issue
Block a user