-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ae83b89
commit eb221e3
Showing
8 changed files
with
208 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,148 @@ | ||
"use client"; | ||
|
||
import Empty from "@/components/empty"; | ||
import { FormPopUp } from "@/components/form"; | ||
import { PageLayout } from "@/components/page-layout"; | ||
import { Box, FormField, TextInput } from "grommet"; | ||
import { useState } from "react"; | ||
import { StatusGood } from "grommet-icons"; | ||
|
||
export default async function ApiManagementPage() { | ||
export default function ApiManagementPage() { | ||
const integrations = []; | ||
const [open, setOpen] = useState(false); | ||
const [submitting, setSubmitting] = useState(false); | ||
|
||
const onOpen = () => setOpen(true); | ||
const onClose = () => setOpen(false); | ||
|
||
const onSubmit = async (event) => { | ||
setSubmitting(true); | ||
const { | ||
value: { name: vendorName, url: vendorUrl }, | ||
} = event; | ||
|
||
const formattedUrl = new URL(vendorUrl); | ||
|
||
const data = { | ||
vendorName, | ||
vendorUrl: formattedUrl.origin, | ||
}; | ||
|
||
const response = await fetch("/api/api-keys", { | ||
method: "POST", | ||
body: JSON.stringify(data), | ||
}); | ||
|
||
if (response.ok) { | ||
onClose(); | ||
|
||
const data = await response.json(); | ||
|
||
prompt( | ||
` | ||
This is the only time you will see this API key, | ||
so make sure you copy it and store it somewhere safe.`, | ||
JSON.stringify(data), | ||
); | ||
} | ||
|
||
setSubmitting(false); | ||
}; | ||
|
||
if (!integrations || integrations.length === 0) { | ||
return ( | ||
<Empty | ||
empty={{ description: "No integrations available to manage yet" }} | ||
/> | ||
<> | ||
<Empty | ||
empty={{ | ||
description: "No integrations available to manage yet", | ||
label: "Create one 🆕", | ||
callback: onOpen, | ||
}} | ||
/> | ||
<Form | ||
open={open} | ||
onClose={onClose} | ||
onSubmit={onSubmit} | ||
submitting={submitting} | ||
/> | ||
</> | ||
); | ||
} | ||
|
||
return integrations.map((integration) => integration._id); | ||
return ( | ||
<PageLayout> | ||
{integrations.map((integration) => integration._id)} | ||
<Form | ||
open={open} | ||
onClose={onClose} | ||
onSubmit={onSubmit} | ||
submitting={submitting} | ||
/> | ||
</PageLayout> | ||
); | ||
} | ||
|
||
function Form(props) { | ||
const { onClose, open, onSubmit, submitting } = props; | ||
|
||
return ( | ||
<FormPopUp | ||
open={open} | ||
onClose={onClose} | ||
heading={"Add"} | ||
onSubmit={onSubmit} | ||
submitting={submitting} | ||
> | ||
<FormField | ||
label="Vendor Name" | ||
aria-label="name" | ||
name="name" | ||
required | ||
validate={[ | ||
{ regexp: /^[a-z]/i }, | ||
(name) => { | ||
if (name && name.length === 1) return "must be >1 character"; | ||
return undefined; | ||
}, | ||
() => { | ||
return { | ||
message: ( | ||
<Box align="end"> | ||
<StatusGood /> | ||
</Box> | ||
), | ||
status: "info", | ||
}; | ||
}, | ||
]} | ||
/> | ||
<FormField | ||
label="Vendor URL" | ||
name="url" | ||
required | ||
validate={[ | ||
(url) => { | ||
try { | ||
new URL(url); | ||
} catch (error) { | ||
console.error(error); | ||
return "must be a valid url"; | ||
} | ||
}, | ||
() => { | ||
return { | ||
message: ( | ||
<Box align="end"> | ||
<StatusGood /> | ||
</Box> | ||
), | ||
status: "info", | ||
}; | ||
}, | ||
]} | ||
> | ||
<TextInput name="url" aria-label="url" type="url" /> | ||
</FormField> | ||
</FormPopUp> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
"use client"; | ||
|
||
import { Box, Button, Form, Heading, Layer } from "grommet"; | ||
|
||
import { Close } from "grommet-icons"; | ||
|
||
export function FormPopUp(props) { | ||
const { onClose, open, heading, onSubmit, children, submitting } = props; | ||
|
||
return open ? ( | ||
<Layer position="right" full="vertical" modal> | ||
<Box fill="vertical" overflow="auto" width="medium" pad="medium"> | ||
<Form validate="blur" onSubmit={onSubmit}> | ||
<Box flex={false} direction="row" justify="between"> | ||
<Heading level={2} margin="none"> | ||
{heading} | ||
</Heading> | ||
<Button icon={<Close />} onClick={onClose} /> | ||
</Box> | ||
{children} | ||
<Box flex={false} as="footer" align="start"> | ||
<Button | ||
type="submit" | ||
label={submitting ? "Submitting" : "Submit"} | ||
primary | ||
/> | ||
</Box> | ||
</Form> | ||
</Box> | ||
</Layer> | ||
) : null; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
"use client"; | ||
|
||
import { Box } from "grommet"; | ||
|
||
export function PageLayout(props) { | ||
const { children } = props; | ||
|
||
return ( | ||
<Box align="center" justify="center" pad="large"> | ||
<Box width="medium">{children}</Box> | ||
</Box> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters