mirror of
https://github.com/idanoo/autobrr
synced 2025-07-23 16:59:12 +00:00
feat(api): add apikey support (#408)
* feat(api): add apikey support * feat(web): api settings crud
This commit is contained in:
ze0s
GitHub
parent
9c036033e9
commit
fa20978d58
31 changed files with 834 additions and 70 deletions
|
|
@ -74,6 +74,11 @@ export const APIClient = {
|
|||
delete: (id: number) => appClient.Delete(`api/actions/${id}`),
|
||||
toggleEnable: (id: number) => appClient.Patch(`api/actions/${id}/toggleEnabled`)
|
||||
},
|
||||
apikeys: {
|
||||
getAll: () => appClient.Get<APIKey[]>("api/keys"),
|
||||
create: (key: APIKey) => appClient.Post("api/keys", key),
|
||||
delete: (key: string) => appClient.Delete(`api/keys/${key}`),
|
||||
},
|
||||
config: {
|
||||
get: () => appClient.Get<Config>("api/config")
|
||||
},
|
||||
|
|
|
|||
77
web/src/components/fields/text.tsx
Normal file
77
web/src/components/fields/text.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
import { useToggle } from "../../hooks/hooks";
|
||||
import { ClipboardCopyIcon, EyeIcon, EyeOffIcon, CheckIcon } from "@heroicons/react/outline";
|
||||
import { useState } from "react";
|
||||
|
||||
interface KeyFieldProps {
|
||||
value: string;
|
||||
}
|
||||
|
||||
export const KeyField = ({ value }: KeyFieldProps) => {
|
||||
const [isVisible, toggleVisibility] = useToggle(false);
|
||||
const [isCopied, setIsCopied] = useState(false);
|
||||
|
||||
async function copyTextToClipboard(text: string) {
|
||||
if ("clipboard" in navigator) {
|
||||
return await navigator.clipboard.writeText(text);
|
||||
} else {
|
||||
return document.execCommand("copy", true, text);
|
||||
}
|
||||
}
|
||||
|
||||
// onClick handler function for the copy button
|
||||
const handleCopyClick = () => {
|
||||
// Asynchronously call copyTextToClipboard
|
||||
copyTextToClipboard(value)
|
||||
.then(() => {
|
||||
// If successful, update the isCopied state value
|
||||
setIsCopied(true);
|
||||
setTimeout(() => {
|
||||
setIsCopied(false);
|
||||
}, 1500);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sm:col-span-2 w-full">
|
||||
<div className="flex rounded-md shadow-sm">
|
||||
<div className="relative flex items-stretch flex-grow focus-within:z-10">
|
||||
<input
|
||||
id="keyfield"
|
||||
type={isVisible ? "text" : "password"}
|
||||
value={value}
|
||||
readOnly={true}
|
||||
className="focus:outline-none dark:focus:border-blue-500 focus:border-indigo-500 dark:focus:ring-blue-500 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 text-sm font-medium text-gray-700 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"
|
||||
onClick={toggleVisibility}
|
||||
title="show"
|
||||
>
|
||||
{!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="-ml-px relative inline-flex items-center space-x-2 px-4 py-2 border border-gray-300 dark:border-gray-700 hover:bg-gray-100 text-sm font-medium rounded-r-md text-gray-700 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none"
|
||||
onClick={handleCopyClick}
|
||||
title="Copy to clipboard"
|
||||
>
|
||||
{isCopied
|
||||
? <CheckIcon
|
||||
className="text-blue-500 w-5 h-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
: <ClipboardCopyIcon
|
||||
className="text-blue-500 w-5 h-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -17,6 +17,7 @@ import { IrcSettings } from "../screens/settings/Irc";
|
|||
import NotificationSettings from "../screens/settings/Notifications";
|
||||
import { RegexPlayground } from "../screens/settings/RegexPlayground";
|
||||
import ReleaseSettings from "../screens/settings/Releases";
|
||||
import APISettings from "../screens/settings/Api";
|
||||
|
||||
import { baseUrl } from "../utils";
|
||||
|
||||
|
|
@ -35,6 +36,7 @@ export const LocalRouter = ({ isLoggedIn }: { isLoggedIn: boolean }) => (
|
|||
</Route>
|
||||
<Route path="settings" element={<Settings />}>
|
||||
<Route index element={<ApplicationSettings />} />
|
||||
<Route path="api-keys" element={<APISettings />} />
|
||||
<Route path="indexers" element={<IndexerSettings />} />
|
||||
<Route path="feeds" element={<FeedSettings />} />
|
||||
<Route path="irc" element={<IrcSettings />} />
|
||||
|
|
|
|||
158
web/src/forms/settings/APIKeyAddForm.tsx
Normal file
158
web/src/forms/settings/APIKeyAddForm.tsx
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
import { Fragment } from "react";
|
||||
import { useMutation } from "react-query";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { XIcon } from "@heroicons/react/solid";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import type { FieldProps } from "formik";
|
||||
import { Field, Form, Formik, FormikErrors, FormikValues } from "formik";
|
||||
|
||||
import { queryClient } from "../../App";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import DEBUG from "../../components/debug";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
|
||||
interface apiKeyAddFormProps {
|
||||
isOpen: boolean;
|
||||
toggle: () => void;
|
||||
}
|
||||
|
||||
function APIKeyAddForm({ isOpen, toggle }: apiKeyAddFormProps) {
|
||||
const mutation = useMutation(
|
||||
(apikey: APIKey) => APIClient.apikeys.create(apikey),
|
||||
{
|
||||
onSuccess: (_, key) => {
|
||||
queryClient.invalidateQueries("apikeys");
|
||||
toast.custom((t) => <Toast type="success" body={`API key ${key.name} was added`} t={t}/>);
|
||||
|
||||
toggle();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const handleSubmit = (data: unknown) => mutation.mutate(data as APIKey);
|
||||
const validate = (values: FormikValues) => {
|
||||
const errors = {} as FormikErrors<FormikValues>;
|
||||
if (!values.name) {
|
||||
errors.name = "Required";
|
||||
}
|
||||
return errors;
|
||||
};
|
||||
|
||||
return (
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" static className="fixed inset-0 overflow-hidden" open={isOpen} onClose={toggle}>
|
||||
<div className="absolute inset-0 overflow-hidden">
|
||||
<Dialog.Overlay className="absolute inset-0"/>
|
||||
|
||||
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
enterFrom="translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transform transition ease-in-out duration-500 sm:duration-700"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<div className="w-screen max-w-2xl border-l dark:border-gray-700">
|
||||
|
||||
<Formik
|
||||
initialValues={{
|
||||
name: "",
|
||||
scopes: []
|
||||
}}
|
||||
onSubmit={handleSubmit}
|
||||
validate={validate}
|
||||
>
|
||||
{({ values }) => (
|
||||
<Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll">
|
||||
<div className="flex-1">
|
||||
<div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
|
||||
<div className="flex items-start justify-between space-x-3">
|
||||
<div className="space-y-1">
|
||||
<Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">Create API
|
||||
key</Dialog.Title>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Add new API key.
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-7 flex items-center">
|
||||
<button
|
||||
type="button"
|
||||
className="light:bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
|
||||
onClick={toggle}
|
||||
>
|
||||
<span className="sr-only">Close panel</span>
|
||||
<XIcon className="h-6 w-6" aria-hidden="true"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
|
||||
<div
|
||||
className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
</div>
|
||||
<Field name="name">
|
||||
{({
|
||||
field,
|
||||
meta
|
||||
}: FieldProps) => (
|
||||
<div className="sm:col-span-2">
|
||||
<input
|
||||
{...field}
|
||||
id="name"
|
||||
type="text"
|
||||
className="block w-full shadow-sm dark:bg-gray-800 border-gray-300 dark:border-gray-700 sm:text-sm dark:text-white focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 rounded-md"
|
||||
/>
|
||||
|
||||
{meta.touched && meta.error &&
|
||||
<span className="block mt-2 text-red-500">{meta.error}</span>}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
|
||||
<div className="space-x-3 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
className="bg-white dark:bg-gray-800 py-2 px-4 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
|
||||
onClick={toggle}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<DEBUG values={values}/>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default APIKeyAddForm;
|
||||
|
|
@ -24,6 +24,7 @@ const subNavigation: NavTabType[] = [
|
|||
{ name: "Feeds", href: "feeds", icon: RssIcon },
|
||||
{ name: "Clients", href: "clients", icon: DownloadIcon },
|
||||
{ name: "Notifications", href: "notifications", icon: BellIcon },
|
||||
{ name: "API keys", href: "api-keys", icon: KeyIcon },
|
||||
{ name: "Releases", href: "releases", icon: CollectionIcon }
|
||||
// {name: 'Regex Playground', href: 'regex-playground', icon: CogIcon, current: false}
|
||||
// {name: 'Rules', href: 'rules', icon: ClipboardCheckIcon, current: false},
|
||||
|
|
|
|||
137
web/src/screens/settings/Api.tsx
Normal file
137
web/src/screens/settings/Api.tsx
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import { queryClient } from "../../App";
|
||||
import { useRef } from "react";
|
||||
import { useMutation, useQuery } from "react-query";
|
||||
import { KeyField } from "../../components/fields/text";
|
||||
import { DeleteModal } from "../../components/modals";
|
||||
import APIKeyAddForm from "../../forms/settings/APIKeyAddForm";
|
||||
import Toast from "../../components/notifications/Toast";
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { useToggle } from "../../hooks/hooks";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { classNames } from "../../utils";
|
||||
import { TrashIcon } from "@heroicons/react/outline";
|
||||
import { EmptySimple } from "../../components/emptystates";
|
||||
|
||||
function APISettings() {
|
||||
const [addFormIsOpen, toggleAddForm] = useToggle(false);
|
||||
|
||||
const { isLoading, data } = useQuery(
|
||||
["apikeys"],
|
||||
() => APIClient.apikeys.getAll(),
|
||||
{
|
||||
retry: false,
|
||||
refetchOnWindowFocus: false,
|
||||
onError: err => console.log(err)
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
|
||||
<div className="pb-6 py-6 px-4 sm:p-6 lg:pb-8">
|
||||
<APIKeyAddForm isOpen={addFormIsOpen} toggle={toggleAddForm}/>
|
||||
|
||||
<div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
|
||||
<div className="ml-4 mt-4">
|
||||
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">API keys</h3>
|
||||
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
Manage API keys.
|
||||
</p>
|
||||
</div>
|
||||
<div className="ml-4 mt-4 flex-shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
onClick={toggleAddForm}
|
||||
>
|
||||
Add new
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{data && data.length > 0 ?
|
||||
<section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
|
||||
<ol className="min-w-full relative">
|
||||
<li className="grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700">
|
||||
<div
|
||||
className="col-span-5 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name
|
||||
</div>
|
||||
<div
|
||||
className="col-span-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Key
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{data && data.map((k) => (
|
||||
<APIListItem key={k.key} apikey={k}/>
|
||||
))}
|
||||
</ol>
|
||||
</section>
|
||||
: <EmptySimple title="No API keys" subtitle="Create a new" buttonAction={toggleAddForm}
|
||||
buttonText="Create API key"/>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface ApiKeyItemProps {
|
||||
apikey: APIKey
|
||||
}
|
||||
|
||||
function APIListItem({ apikey }: ApiKeyItemProps) {
|
||||
const cancelModalButtonRef = useRef(null);
|
||||
const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
|
||||
|
||||
const deleteMutation = useMutation(
|
||||
(key: string) => APIClient.apikeys.delete(key),
|
||||
{
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries(["apikeys"]);
|
||||
queryClient.invalidateQueries(["apikeys", apikey.key]);
|
||||
|
||||
toast.custom((t) => <Toast type="success" body={`API key ${apikey?.name} was deleted`} t={t}/>);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<li className="text-gray-500 dark:text-gray-400">
|
||||
<DeleteModal
|
||||
isOpen={deleteModalIsOpen}
|
||||
toggle={toggleDeleteModal}
|
||||
buttonRef={cancelModalButtonRef}
|
||||
deleteAction={() => {
|
||||
deleteMutation.mutate(apikey.key);
|
||||
toggleDeleteModal();
|
||||
}}
|
||||
title={`Remove API key: ${apikey.name}`}
|
||||
text="Are you sure you want to remove this API key? This action cannot be undone."
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-12 gap-4 items-center py-2">
|
||||
<div className="col-span-5 flex items-center text-sm font-medium text-gray-900 dark:text-white">
|
||||
{apikey.name}
|
||||
</div>
|
||||
<div className="col-span-6 flex items-center text-sm font-medium text-gray-900 dark:text-white">
|
||||
<KeyField value={apikey.key}/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-1 flex items-center justify-end text-sm font-medium text-gray-900 dark:text-white">
|
||||
<button
|
||||
className={classNames(
|
||||
"text-gray-900 dark:text-gray-300",
|
||||
"font-medium group flex rounded-md items-center px-2 py-2 text-sm"
|
||||
)}
|
||||
onClick={toggleDeleteModal}
|
||||
title="Delete key"
|
||||
>
|
||||
<TrashIcon
|
||||
className="text-red-500 w-5 h-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default APISettings;
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { useQuery } from "react-query";
|
||||
|
||||
import { APIClient } from "../../api/APIClient";
|
||||
import { Checkbox } from "../../components/Checkbox";
|
||||
import { SettingsContext } from "../../utils/Context";
|
||||
|
|
@ -18,7 +17,7 @@ function ApplicationSettings() {
|
|||
);
|
||||
|
||||
return (
|
||||
<form className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9" action="#" method="POST">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9">
|
||||
<div className="py-6 px-4 sm:p-6 lg:pb-8">
|
||||
<div>
|
||||
<h2 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">Application</h2>
|
||||
|
|
@ -27,54 +26,56 @@ function ApplicationSettings() {
|
|||
</p>
|
||||
</div>
|
||||
|
||||
{!isLoading && data && (
|
||||
<div className="mt-6 grid grid-cols-12 gap-6">
|
||||
<div className="col-span-6 sm:col-span-4">
|
||||
<label htmlFor="host" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
|
||||
<form className="divide-y divide-gray-200 dark:divide-gray-700 lg:col-span-9" action="#" method="POST">
|
||||
{!isLoading && data && (
|
||||
<div className="mt-6 grid grid-cols-12 gap-6">
|
||||
<div className="col-span-6 sm:col-span-4">
|
||||
<label htmlFor="host" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
|
||||
Host
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="host"
|
||||
id="host"
|
||||
value={data.host}
|
||||
disabled={true}
|
||||
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="host"
|
||||
id="host"
|
||||
value={data.host}
|
||||
disabled={true}
|
||||
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6 sm:col-span-4">
|
||||
<label htmlFor="port" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
|
||||
<div className="col-span-6 sm:col-span-4">
|
||||
<label htmlFor="port" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
|
||||
Port
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="port"
|
||||
id="port"
|
||||
value={data.port}
|
||||
disabled={true}
|
||||
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="port"
|
||||
id="port"
|
||||
value={data.port}
|
||||
disabled={true}
|
||||
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-span-6 sm:col-span-4">
|
||||
<label htmlFor="base_url" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
|
||||
<div className="col-span-6 sm:col-span-4">
|
||||
<label htmlFor="base_url" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
|
||||
Base url
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="base_url"
|
||||
id="base_url"
|
||||
value={data.base_url}
|
||||
disabled={true}
|
||||
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="base_url"
|
||||
id="base_url"
|
||||
value={data.base_url}
|
||||
disabled={true}
|
||||
className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="pb-6 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<div className="px-4 py-5 sm:p-0">
|
||||
<dl className="sm:divide-y divide-gray-200 dark:divide-gray-700">
|
||||
{data?.version ? (
|
||||
|
|
@ -124,7 +125,7 @@ function ApplicationSettings() {
|
|||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
6
web/src/types/API.d.ts
vendored
Normal file
6
web/src/types/API.d.ts
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
interface APIKey {
|
||||
name: string;
|
||||
key: string;
|
||||
scopes: string[];
|
||||
created_at: Date;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue