)
}
+
+function SecretsTable({
+ secret,
+ deleteFn,
+}: {
+ secret: Secret
+ deleteFn: (secret: Secret) => void
+}) {
+ return (
+
+ )
+}
diff --git a/frontend/src/app/settings/layout.tsx b/frontend/src/app/settings/layout.tsx
index 3d3b0084..4853baf0 100644
--- a/frontend/src/app/settings/layout.tsx
+++ b/frontend/src/app/settings/layout.tsx
@@ -30,9 +30,9 @@ export default async function SettingsLayout({
data: { session },
} = await supabase.auth.getSession()
return (
- <>
+
-
+
Settings
@@ -44,9 +44,9 @@ export default async function SettingsLayout({
-
{children}
+
{children}
- >
+
)
}
diff --git a/frontend/src/components/confirmation-dialog.tsx b/frontend/src/components/confirmation-dialog.tsx
index 46a57475..b64c712e 100644
--- a/frontend/src/components/confirmation-dialog.tsx
+++ b/frontend/src/components/confirmation-dialog.tsx
@@ -35,7 +35,7 @@ export function ConfirmationDialog({
Cancel
- Continue
+ Confirm
diff --git a/frontend/src/components/new-credential-dialog.tsx b/frontend/src/components/new-credential-dialog.tsx
index c089cccd..429fd5ee 100644
--- a/frontend/src/components/new-credential-dialog.tsx
+++ b/frontend/src/components/new-credential-dialog.tsx
@@ -5,7 +5,10 @@ import { useSession } from "@/providers/session"
import { zodResolver } from "@hookform/resolvers/zod"
import { DialogProps } from "@radix-ui/react-dialog"
import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { useForm } from "react-hook-form"
+import { KeyRoundIcon, PlusCircle, Trash2Icon } from "lucide-react"
+import { ArrayPath, FieldPath, useFieldArray, useForm } from "react-hook-form"
+import SyntaxHighlighter from "react-syntax-highlighter"
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs"
import { Secret, secretSchema } from "@/types/schemas"
import { createSecret } from "@/lib/secrets"
@@ -14,7 +17,6 @@ import {
Dialog,
DialogClose,
DialogContent,
- DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
@@ -23,8 +25,10 @@ import {
import {
Form,
FormControl,
+ FormDescription,
FormField,
FormItem,
+ FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
@@ -44,8 +48,7 @@ export function NewCredentialsDialog({
const queryClient = useQueryClient()
const { mutate } = useMutation({
- mutationFn: (secret: Secret) =>
- createSecret(session, secret.name, secret.value),
+ mutationFn: (secret: Secret) => createSecret(session, secret),
onSuccess: (data, variables, context) => {
toast({
title: "Added new secret",
@@ -62,75 +65,203 @@ export function NewCredentialsDialog({
},
})
- const form = useForm
({
+ const methods = useForm({
resolver: zodResolver(secretSchema),
+ defaultValues: {
+ name: "",
+ type: "custom",
+ keys: [{ key: "", value: "" }],
+ },
})
+ const { getValues, control, register, watch, trigger } = methods
- const onSubmit = (values: Secret) => {
- console.log("Submitting new secret", values)
+ const onSubmit = async () => {
+ const validated = await trigger()
+ if (!validated) {
+ console.error("Form validation failed")
+ return
+ }
+ const values = getValues()
mutate(values)
}
+ const inputKey = "keys"
+ const typedKey = inputKey as FieldPath
+ const { fields, append, remove } = useFieldArray({
+ control,
+ name: inputKey as ArrayPath,
+ })
return (
)
}
+
+function InlineHLCode({ children }: { children: string }) {
+ return (
+
+ {children}
+
+ )
+}
+
export const NewCredentialsDialogTrigger = DialogTrigger