cal.pub0.org/apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx

78 lines
2.8 KiB
TypeScript
Raw Normal View History

Feature: Adds api keys to cal.com webapp (#2277) * feat: add ApiKey model for new Api auth, owned by a user * fix: remove metadata:Json and add note:String instead in new apiKey model * fix: rename apiKey to apiKeys in moder User relation in schema.prisma * feat: add hashedKey to apiKey and lastUsedAt datetime to keep track of usage of keys and makiung them securely stored in db * fix 30 day -> 30 days in expiresAt * feat: api keys frontend in security page * adds hashedKey to api key model, add frontend api keys in security page * Make frontend work to create api keys with or without expiry, note, defaults to 1 month expiry * remove migration for now, add env.example to swagger, sync api * feat: hashed api keys * fix: minor refactor and cleanup in apiKeys generator * add api key success modal * sync apps/api * feat: We have API Keys in Security =) * remove swagger env from pr * apps api sync * remove comments in password section * feat: migration for api keys schema * sync api w main * delete apps/api * add back apps/api * make min date and disabled optional props in datepicker * feat fix type check errors * fix : types * fix: rmeove renaming of verificationrequest token indexes in migration * fix: remove extra div * Fixes for feedback in PR * fix button /> * fix: rename weird naming of translation for you_will_only_view_it_once * fix: remove ternary and use && to avoid null for false * fix sync apps/api with main not old commit * fix empty className * fix: remove unused imports * fix remove commented jsx fragment close * fix rename editing * improve translations * feat: adds beta tag in security tab under api keys * fix: use api keys everywhere * fix: cleanup code in api keys * fix: use watch and controller for neverexpires/datepicker * Fixes: improve api key never expires * add back change password h2 title section in security page * fix update env API_KEY_ prefix default to cal_ * fix: improve eidt api keys modal * fix: update edit mutation in viewer.apiKeys * Update apps/web/ee/components/apiKeys/ApiKeyListItem.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com> * fix: item: any to pass build Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2022-04-16 02:58:34 +00:00
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 [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires: boolean }) | 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)}>
{t("generate_new_api_key")}
</Button>
</div>
</div>
{data.length > 0 && (
Feature: Adds api keys to cal.com webapp (#2277) * feat: add ApiKey model for new Api auth, owned by a user * fix: remove metadata:Json and add note:String instead in new apiKey model * fix: rename apiKey to apiKeys in moder User relation in schema.prisma * feat: add hashedKey to apiKey and lastUsedAt datetime to keep track of usage of keys and makiung them securely stored in db * fix 30 day -> 30 days in expiresAt * feat: api keys frontend in security page * adds hashedKey to api key model, add frontend api keys in security page * Make frontend work to create api keys with or without expiry, note, defaults to 1 month expiry * remove migration for now, add env.example to swagger, sync api * feat: hashed api keys * fix: minor refactor and cleanup in apiKeys generator * add api key success modal * sync apps/api * feat: We have API Keys in Security =) * remove swagger env from pr * apps api sync * remove comments in password section * feat: migration for api keys schema * sync api w main * delete apps/api * add back apps/api * make min date and disabled optional props in datepicker * feat fix type check errors * fix : types * fix: rmeove renaming of verificationrequest token indexes in migration * fix: remove extra div * Fixes for feedback in PR * fix button /> * fix: rename weird naming of translation for you_will_only_view_it_once * fix: remove ternary and use && to avoid null for false * fix sync apps/api with main not old commit * fix empty className * fix: remove unused imports * fix remove commented jsx fragment close * fix rename editing * improve translations * feat: adds beta tag in security tab under api keys * fix: use api keys everywhere * fix: cleanup code in api keys * fix: use watch and controller for neverexpires/datepicker * Fixes: improve api key never expires * add back change password h2 title section in security page * fix update env API_KEY_ prefix default to cal_ * fix: improve eidt api keys modal * fix: update edit mutation in viewer.apiKeys * Update apps/web/ee/components/apiKeys/ApiKeyListItem.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com> * fix: item: any to pass build Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>
2022-04-16 02:58:34 +00:00
<List className="pb-6">
{data.map((item: any) => (
<ApiKeyListItem
key={item.id}
apiKey={item}
onEditApiKey={() => {
setApiKeyToEdit(item);
setEditModalOpen(true);
}}
/>
))}
</List>
)}
{/* New api key dialog */}
<Dialog open={newApiKeyModal} onOpenChange={(isOpen) => !isOpen && setNewApiKeyModal(false)}>
<DialogContent>
<ApiKeyDialogForm title={t("create_api_key")} handleClose={() => setNewApiKeyModal(false)} />
</DialogContent>
</Dialog>
{/* Edit api key dialog */}
<Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
<DialogContent>
{apiKeyToEdit && (
<ApiKeyDialogForm
title={t("edit_api_key")}
key={apiKeyToEdit.id}
handleClose={() => setEditModalOpen(false)}
defaultValues={apiKeyToEdit}
/>
)}
</DialogContent>
</Dialog>
</>
)}
/>
);
}