101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { CardStackIcon, PlusIcon } from "@radix-ui/react-icons";
|
|
import {
|
|
CredentialModalTypes,
|
|
useCredentialModalState,
|
|
} from "./useCredentialModalState";
|
|
import { CredentialsModal } from "./CredentialsModal";
|
|
import { CredentialsList } from "./CredentialsList";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { KeyIcon } from "@/components/icons/KeyIcon";
|
|
|
|
const subHeaderText =
|
|
"Securely store your passwords or credit cards here to link them throughout your workflows.";
|
|
|
|
function CredentialsPage() {
|
|
const { setIsOpen, setType } = useCredentialModalState();
|
|
return (
|
|
<div className="space-y-5">
|
|
<h1 className="text-2xl">Credentials</h1>
|
|
<div className="flex items-center justify-between">
|
|
<div className="w-96 text-sm text-slate-300">{subHeaderText}</div>
|
|
<DropdownMenu modal={false}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button>
|
|
<PlusIcon className="mr-2 size-6" /> Add
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-48">
|
|
<DropdownMenuItem
|
|
onSelect={() => {
|
|
setIsOpen(true);
|
|
setType(CredentialModalTypes.PASSWORD);
|
|
}}
|
|
className="cursor-pointer"
|
|
>
|
|
<KeyIcon className="mr-2 size-4" />
|
|
Password
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onSelect={() => {
|
|
setIsOpen(true);
|
|
setType(CredentialModalTypes.CREDIT_CARD);
|
|
}}
|
|
className="cursor-pointer"
|
|
>
|
|
<CardStackIcon className="mr-2 size-4" />
|
|
Credit Card
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
<CredentialsList />
|
|
<CredentialsModal />
|
|
|
|
{/* Footer note */}
|
|
<div className="mt-8 border-t border-slate-700 pt-4">
|
|
<div className="text-sm italic text-slate-400">
|
|
<strong>Note:</strong> This feature requires a Bitwarden-compatible
|
|
server ({" "}
|
|
<a
|
|
href="https://bitwarden.com/help/self-host-an-organization/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-400 underline hover:text-blue-300"
|
|
>
|
|
self-hosted Bitwarden
|
|
</a>{" "}
|
|
) or{" "}
|
|
<a
|
|
href="https://github.com/dani-garcia/vaultwarden"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-400 underline hover:text-blue-300"
|
|
>
|
|
this community version
|
|
</a>{" "}
|
|
or a paid Bitwarden account. Make sure the relevant
|
|
`SKYVERN_AUTH_BITWARDEN_*` environment variables are configured. See
|
|
details{" "}
|
|
<a
|
|
href="https://docs.skyvern.com/credentials/bitwarden"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-blue-400 underline hover:text-blue-300"
|
|
>
|
|
here
|
|
</a>
|
|
.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { CredentialsPage };
|