idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-25 17:59:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(api): add apikey support (#408)

Browse source 
* feat(api): add apikey support

* feat(web): api settings crud
This commit is contained in:
ze0s 2022-08-15 11:58:13 +02:00 • committed by GitHub
parent 9c036033e9
commit fa20978d58
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 834 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

77
web/src/components/fields/text.tsx Normal file
View 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>
);
};