Myzel394/kleckrelay
1
0
Fork 0
mirror of https://github.com/Myzel394/kleckrelay-website.git synced 2025-06-18 23:45:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(api-key): Add auto create

Browse Source
This commit is contained in:
Myzel394 2023-03-11 14:02:44 +01:00
parent 899208986f
commit b4b0514bff
No known key found for this signature in database
GPG Key ID: 79CC92F37B3E1A2B
2 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/route-widgets/SettingsAPIKeysRoute/CreateNewAPIKeyDialog.tsx
View File

@ -48,6 +48,9 @@ export interface CreateNewAPIKeyDialogProps {
open: boolean
onClose: () => void
onCreated: (key: APIKey & {key: string}) => void
prefilledLabel: string
prefilledScopes: APIKeyScope[]
}
const PRESET_DAYS: number[] = [1, 7, 30, 180, 360]
@ -76,6 +79,8 @@ const normalizeTime = (date: Date) =>
export default function CreateNewAPIKeyDialog({
open,
prefilledLabel,
prefilledScopes,
onClose,
onCreated,
}: CreateNewAPIKeyDialogProps): ReactElement {
@ -108,9 +113,9 @@ export default function CreateNewAPIKeyDialog({
const formik = useFormik<CreateAPIKeyData & {detail: string}>({
validationSchema: scheme,
initialValues: {
label: "",
label: prefilledLabel,
expiresAt: addDays(new Date(), 30),
scopes: [],
scopes: [...prefilledScopes],
detail: "",
},
onSubmit: async (values, {setErrors}) => {

27
src/routes/SettingsAPIKeysRoute.tsx
View File

@ -1,4 +1,4 @@
import {ReactElement, useState} from "react"
import {ReactElement, useLayoutEffect, useState} from "react"
import {useTranslation} from "react-i18next"
import {useQuery} from "@tanstack/react-query"
import {APIKey, PaginationResult} from "~/server-types"
@ -7,17 +7,38 @@ import {getAPIKeys} from "~/apis"
import {QueryResult, SimplePage} from "~/components"
import {Button, List} from "@mui/material"
import {MdAdd} from "react-icons/md"
import {useQueryParams} from "~/hooks"
import {isArray} from "lodash"
import {API_KEY_SCOPES} from "~/constants/values"
import {useNavigate} from "react-router-dom"
import APIKeyListItem from "~/route-widgets/SettingsAPIKeysRoute/APIKeyListItem"
import CreateNewAPIKeyDialog from "../route-widgets/SettingsAPIKeysRoute/CreateNewAPIKeyDialog"
import EmptyStateScreen from "~/route-widgets/SettingsAPIKeysRoute/EmptyStateScreen"
export default function SettingsAPIKeysRoute(): ReactElement {
const {t} = useTranslation("settings-api-keys")
const navigate = useNavigate()
const rawParams = useQueryParams<{action?: any; scopes?: any; label?: any}>()
const params = {
action: rawParams.action === "create-new" ? "create-new" : undefined,
scopes: isArray(rawParams.scopes?.split(","))
? rawParams.scopes.split(",").filter((scope: string) => API_KEY_SCOPES.includes(scope))
: [],
label: rawParams.label,
}
const queryKey = ["get_api_keys"]
const query = useQuery<PaginationResult<APIKey>, AxiosError>(queryKey, () => getAPIKeys())
const [createdAPIKey, setCreatedAPIKey] = useState<(APIKey & {key: string}) | null>(null)
const [createNew, setCreateNew] = useState<boolean>(false)
const [createNew, setCreateNew] = useState<boolean>(params.action === "create-new")
useLayoutEffect(() => {
if (params.action === "create-new") {
navigate(location.pathname, {replace: true})
}
}, [params.action, navigate])
return (
<>
@ -60,6 +81,8 @@ export default function SettingsAPIKeysRoute(): ReactElement {
<CreateNewAPIKeyDialog
key={createNew.toString()}
open={createNew}
prefilledScopes={params.scopes}
prefilledLabel={params.label}
onClose={() => setCreateNew(false)}
onCreated={key => {
query.refetch()