-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implement api tokens management (#71)
- Loading branch information
1 parent
65d0c93
commit 1713284
Showing
17 changed files
with
698 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React from "react"; | ||
| import * as R from "ramda"; | ||
| import { RouteObject } from "react-router-dom"; | ||
|
|
||
| import type { InjectionZoneEntry, CuratorConfig } from "@/types/config"; | ||
| import { InjectionZone } from "@/types/config"; | ||
|
|
||
| import MainMenuItem from "./ui/MainMenuItem"; | ||
| import ApiTokens from "./routes/ApiTokens"; | ||
|
|
||
| /** | ||
| * Plugin for managing available API tokens. | ||
| */ | ||
| export default function apiTokensPlugin({ weight }: { weight?: number } = {}) { | ||
| return (config: CuratorConfig): CuratorConfig => { | ||
| return R.evolve({ | ||
| zones: R.append<InjectionZoneEntry>({ | ||
| zone: InjectionZone.MainMenuSettings, | ||
| weight: weight ?? 30, | ||
| render() { | ||
| return <MainMenuItem />; | ||
| }, | ||
| }), | ||
| routes: R.concat<RouteObject[]>([ | ||
| { | ||
| path: "/settings/api-tokens", | ||
| element: <ApiTokens />, | ||
| }, | ||
| ]), | ||
| })(config); | ||
| }; | ||
| } | ||
|
|
||
| interface PluginOptions { | ||
| sharedLink: string; | ||
| } |
222 changes: 222 additions & 0 deletions
222
packages/studio/app/plugins/api-tokens/routes/ApiTokens/ApiTokenForm.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,222 @@ | ||
| import React, { useState } from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import { | ||
| Alert, | ||
| Button, | ||
| Input, | ||
| message, | ||
| Modal, | ||
| Radio, | ||
| Result, | ||
| Typography, | ||
| } from "antd"; | ||
| import { Form, Formik } from "formik"; | ||
| import * as R from "ramda"; | ||
| import dayjs from "dayjs"; | ||
|
|
||
| import { ApiToken } from "@/types/apiToken"; | ||
| import useStrapi from "@/hooks/useStrapi"; | ||
| import Field from "@/ui/Field"; | ||
| import FormField from "@/ui/FormField"; | ||
|
|
||
| import PermissionsSelect from "./PermissionsSelect"; | ||
|
|
||
| const ApiTokenForm: React.FC<{ | ||
| item: ApiToken | { id: null }; | ||
| onClose: VoidFunction; | ||
| }> = ({ item, onClose }) => { | ||
| const { t } = useTranslation(); | ||
| const { sdk, permissions } = useStrapi(); | ||
| const [accessKey, setAccessKey] = useState<string | null>(null); | ||
| const [modal, contextHolder] = Modal.useModal(); | ||
|
|
||
| return ( | ||
| <> | ||
| {contextHolder} | ||
| <Formik< | ||
| Pick< | ||
| ApiToken, | ||
| "name" | "description" | "lifespan" | "type" | "permissions" | ||
| > & { id: number | null } | ||
| > | ||
| initialValues={ | ||
| item.id | ||
| ? item | ||
| : { | ||
| id: null, | ||
| name: "", | ||
| description: "", | ||
| lifespan: String(7 * 24 * 60 * 60 * 1_000), | ||
| type: "read-only", | ||
| permissions: null, | ||
| } | ||
| } | ||
| onSubmit={async (values) => { | ||
| try { | ||
| if (values.id) { | ||
| await sdk.updateApiToken(values.id, values); | ||
| onClose(); | ||
| } else { | ||
| const { accessKey } = await sdk.createApiToken( | ||
| R.evolve({ | ||
| lifespan: R.ifElse(R.isEmpty, R.always(null), Number), | ||
| })(values), | ||
| ); | ||
| setAccessKey(accessKey); | ||
| } | ||
| } catch (e: any) { | ||
| message.error(e.message); | ||
| } | ||
| }} | ||
| > | ||
| {({ values, submitForm, isSubmitting }) => ( | ||
| <Modal | ||
| open | ||
| title={ | ||
| accessKey | ||
| ? "" | ||
| : item.id | ||
| ? item.name | ||
| : t("api_tokens.create_api_token") | ||
| } | ||
| closeIcon={!accessKey} | ||
| onCancel={onClose} | ||
| onOk={submitForm} | ||
| cancelText={t("common.cancel")} | ||
| okText={item.id ? t("common.update") : t("common.create")} | ||
| footer={ | ||
| accessKey ? ( | ||
| <Button onClick={onClose}>{t("common.done")}</Button> | ||
| ) : undefined | ||
| } | ||
| okButtonProps={{ ghost: !R.isNil(item.id) }} | ||
| confirmLoading={isSubmitting} | ||
| > | ||
| {!accessKey ? ( | ||
| <Form className="py-8 space-y-4"> | ||
| {item.id && ( | ||
| <Alert | ||
| type="warning" | ||
| icon={<span>🔐</span>} | ||
| showIcon | ||
| message={t("api_tokens.token_not_accessible_anymore")} | ||
| action={ | ||
| <Button | ||
| size="small" | ||
| onClick={() => { | ||
| modal.confirm({ | ||
| title: t("phrases.are_you_sure"), | ||
| content: t("api_tokens.confirm_regeneration"), | ||
| cancelText: t("common.cancel"), | ||
| okText: t("api_tokens.regenerate"), | ||
| okButtonProps: { danger: true }, | ||
| onOk: async () => { | ||
| try { | ||
| const accessKey = await sdk.regenerateApiToken( | ||
| item.id, | ||
| ); | ||
| setAccessKey(accessKey); | ||
| } catch (e) {} | ||
| }, | ||
| }); | ||
| }} | ||
| > | ||
| {t("api_tokens.regenerate")} | ||
| </Button> | ||
| } | ||
| /> | ||
| )} | ||
| <FormField label={t("common.name")}> | ||
| <Field name="name"> | ||
| <Input /> | ||
| </Field> | ||
| </FormField> | ||
| <FormField label={t("common.description")}> | ||
| <Field name="description"> | ||
| <Input.TextArea /> | ||
| </Field> | ||
| </FormField> | ||
| <FormField | ||
| label={t("api_tokens.lifespan")} | ||
| help={ | ||
| item.id && | ||
| item.expiresAt && | ||
| `${t("api_tokens.expires_at")} ${dayjs( | ||
| item.expiresAt, | ||
| ).format("l LT")}` | ||
| } | ||
| > | ||
| <Field name="lifespan"> | ||
| <Radio.Group | ||
| buttonStyle="solid" | ||
| optionType="button" | ||
| disabled={!R.isNil(item.id)} | ||
| options={[ | ||
| { | ||
| label: t("api_tokens.lifespan_days", { days: 7 }), | ||
| value: String(7 * 24 * 60 * 60 * 1_000), | ||
| }, | ||
| { | ||
| label: t("api_tokens.lifespan_days", { days: 30 }), | ||
| value: String(30 * 24 * 60 * 60 * 1_000), | ||
| }, | ||
| { | ||
| label: t("api_tokens.lifespan_days", { days: 90 }), | ||
| value: String(90 * 24 * 60 * 60 * 1_000), | ||
| }, | ||
| { | ||
| label: t("api_tokens.unlimited"), | ||
| value: "", | ||
| }, | ||
| ]} | ||
| /> | ||
| </Field> | ||
| </FormField> | ||
| <FormField label={t("common.permissions")}> | ||
| <Field name="type"> | ||
| <Radio.Group | ||
| options={[ | ||
| { | ||
| label: t("api_tokens.read_only"), | ||
| value: "read-only", | ||
| }, | ||
| { | ||
| label: t("api_tokens.full_access"), | ||
| value: "full-access", | ||
| }, | ||
| { | ||
| label: t("api_tokens.custom"), | ||
| value: "custom", | ||
| }, | ||
| ]} | ||
| /> | ||
| </Field> | ||
| </FormField> | ||
|
|
||
| {values.type === "custom" && ( | ||
| <Field name="permissions"> | ||
| <PermissionsSelect /> | ||
| </Field> | ||
| )} | ||
| </Form> | ||
| ) : ( | ||
| <div> | ||
| <Result | ||
| icon={<span className="text-5xl">🔑</span>} | ||
| title={t("api_tokens.generated_title")} | ||
| subTitle={t("api_tokens.generated_description")} | ||
| > | ||
| <div className="font-mono"> | ||
| <Typography.Text copyable>{accessKey}</Typography.Text> | ||
| </div> | ||
| </Result> | ||
| </div> | ||
| )} | ||
| </Modal> | ||
| )} | ||
| </Formik> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ApiTokenForm; |
Oops, something went wrong.