diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx index e6ce99921..2ac70a19a 100644 --- a/frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx +++ b/frontend/src/views/SecretMainPage/components/SecretListView/CreateReminderForm.tsx @@ -1,6 +1,6 @@ import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; -import { faClock } from "@fortawesome/free-solid-svg-icons"; +import { faClock, faTrash } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { zodResolver } from "@hookform/resolvers/zod"; import { twMerge } from "tailwind-merge"; @@ -9,20 +9,28 @@ import { z } from "zod"; import { Button, FormControl, Input, Modal, ModalContent, TextArea } from "@app/components/v2"; const ReminderFormSchema = z.object({ - note: z.string().optional(), + note: z.string().optional().nullable(), days: z .number() .min(1, { message: "Must be at least 1 day" }) .max(365, { message: "Must be less than 365 days" }) + .nullable() }); export type TReminderFormSchema = z.infer; interface ReminderFormProps { isOpen: boolean; + repeatDays?: number | null; + note?: string | null; onOpenChange: (isOpen: boolean, data?: TReminderFormSchema) => void; } -export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps) => { +export const CreateReminderForm = ({ + isOpen, + onOpenChange, + repeatDays, + note +}: ReminderFormProps) => { const { register, control, @@ -31,32 +39,31 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps) handleSubmit, formState: { isSubmitting } } = useForm({ + defaultValues: { + days: repeatDays || undefined, + note: note || "" + }, resolver: zodResolver(ReminderFormSchema) }); const handleFormSubmit = async (data: TReminderFormSchema) => { - console.log(data); onOpenChange(false, data); }; useEffect(() => { if (isOpen) { - reset(); + reset({ + days: repeatDays || undefined, + note: note || "" + }); } }, [isOpen]); return ( - Set up a reminder for when this secret should be rotated. Everyone with access to this - project will be notified when the reminder is triggered. - - } + title={`${repeatDays ? "Update" : "Create"} reminder`} + subTitle="Set up a reminder for when this secret should be rotated. Everyone with access to this project will be notified when the reminder is triggered." >
@@ -76,6 +83,7 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps) onChange={(el) => setValue("days", parseInt(el.target.value, 10))} type="number" placeholder="31" + value={field.value || undefined} />
- Every {field.value > 1 ? `${field.value} days` : "day"} + A reminder will be sent every{" "} + {field.value && field.value > 1 ? `${field.value} days` : "day"}
)} @@ -102,17 +111,27 @@ export const CreateReminderForm = ({ isOpen, onOpenChange }: ReminderFormProps) />
-
+
+ {repeatDays && ( + + )}