jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Fixed secret key modal, made it congruent with existing design

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-04 18:52:10 -03:00
commit 37238ca2ca
2 changed files with 70 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

170
src/frontend/src/modals/secretKeyModal/index.tsx
View file

@ -11,15 +11,10 @@ import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
export default function SecretKeyModal({ export default function SecretKeyModal({
title,
cancelText,
confirmationText,
children, children,
icon,
data, data,
onCloseModal, onCloseModal,
}: ApiKeyType) { }: ApiKeyType) {
const Icon: any = nodeIconsLucide[icon];
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [apiKeyName, setApiKeyName] = useState(data?.apikeyname ?? ""); const [apiKeyName, setApiKeyName] = useState(data?.apikeyname ?? "");
const [apiKeyValue, setApiKeyValue] = useState(""); const [apiKeyValue, setApiKeyValue] = useState("");
@ -66,118 +61,91 @@ export default function SecretKeyModal({
.catch((err) => {}); .catch((err) => {});
} }
function handleSubmitForm() {
if (!renderKey) {
setRenderKey(true);
handleAddNewKey();
} else {
setOpen(false);
}
}
return ( return (
<BaseModal size="small-h-full" open={open} setOpen={setOpen}> <BaseModal
onSubmit={handleSubmitForm}
size="small-h-full"
open={open}
setOpen={setOpen}
>
<BaseModal.Trigger>{children}</BaseModal.Trigger> <BaseModal.Trigger>{children}</BaseModal.Trigger>
<BaseModal.Header description={""}> <BaseModal.Header
<span className="pr-2">{title}</span> description={
<Icon renderKey ? (
name="icon" <>
className="h-6 w-6 pl-1 text-foreground" {" "}
aria-hidden="true"
/>
</BaseModal.Header>
<BaseModal.Content>
{renderKey === true && (
<>
<span className="text-xs">
Please save this secret key somewhere safe and accessible. For Please save this secret key somewhere safe and accessible. For
security reasons,{" "} security reasons,{" "}
<strong>you won't be able to view it again</strong> through your <strong>you won't be able to view it again</strong> through your
account. If you lose this secret key, you'll need to generate a account. If you lose this secret key, you'll need to generate a
new one. new one.
</span> </>
<div className="flex pt-3"> ) : (
<>Create a secret API Key to use Langflow API.</>
)
}
>
<span className="pr-2">Create API Key</span>
<IconComponent
name="Key"
className="h-6 w-6 pl-1 text-foreground"
aria-hidden="true"
/>
</BaseModal.Header>
<BaseModal.Content>
{renderKey ? (
<>
<div className="flex items-center gap-3">
<div className="w-full"> <div className="w-full">
<Input ref={inputRef} readOnly={true} value={apiKeyValue} /> <Input ref={inputRef} readOnly={true} value={apiKeyValue} />
</div> </div>
<div> <Button
<Button onClick={() => {
className="ml-3" handleCopyClick();
onClick={() => { }}
handleCopyClick(); variant="none"
}} size="none"
> >
{textCopied ? ( {textCopied ? (
<IconComponent name="Copy" className="h-4 w-4" /> <IconComponent name="Copy" className="h-4 w-4" />
) : ( ) : (
<IconComponent name="Check" className="h-4 w-4" /> <IconComponent name="Check" className="h-4 w-4" />
)} )}
</Button> </Button>
</div>
</div> </div>
</> </>
)} ) : (
<Form.Field name="apikey">
<Form.Root <div className="flex items-center justify-between gap-2">
onSubmit={(event) => { <Form.Control asChild>
setRenderKey(true); <Input
handleAddNewKey(); //fake api key
event.preventDefault(); id="primary-input"
}} value={apiKeyName}
> ref={inputRef}
{renderKey === false && ( onChange={({ target: { value } }) => {
<div className="grid gap-5"> setApiKeyName(value);
<Form.Field name="username">
<div
style={{
display: "flex",
alignItems: "baseline",
justifyContent: "space-between",
}} }}
> placeholder="Insert a name for your API Key"
<Form.Label className="data-[invalid]:label-invalid"> />
Name (optional){" "} </Form.Control>
</Form.Label>
</div>
<Form.Control asChild>
<input
onChange={({ target: { value } }) => {
setApiKeyName(value);
}}
value={apiKeyName}
className="primary-input"
placeholder="My key name"
/>
</Form.Control>
</Form.Field>
</div> </div>
)} </Form.Field>
{renderKey === false && ( )}
<div className="float-right">
<Button
type="button"
className="mr-3"
variant="outline"
onClick={() => {
setOpen(false);
}}
>
{cancelText}
</Button>
<Form.Submit asChild>
<Button className="mt-8">{confirmationText}</Button>
</Form.Submit>
</div>
)}
{renderKey === true && (
<div className="float-right">
<Button
onClick={() => {
setOpen(false);
setRenderKey(false);
}}
className="mt-8"
>
Done
</Button>
</div>
)}
</Form.Root>
</BaseModal.Content> </BaseModal.Content>
<BaseModal.Footer
submit={{ label: renderKey ? "Done" : "Create Secret Key" }}
/>
</BaseModal> </BaseModal>
); );
} }

6
src/frontend/src/types/components/index.ts
View file

@ -393,11 +393,7 @@ export type UserInputType = {
}; };
export type ApiKeyType = { export type ApiKeyType = {
title: string;
cancelText: string;
confirmationText: string;
children: ReactElement; children: ReactElement;
icon: string;
data?: any; data?: any;
onCloseModal: () => void; onCloseModal: () => void;
}; };
@ -547,7 +543,7 @@ export type iconsType = {
export type modalHeaderType = { export type modalHeaderType = {
children: ReactNode; children: ReactNode;
description: string | null; description: string | JSX.Element | null;
}; };
export type codeAreaModalPropsType = { export type codeAreaModalPropsType = {