awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-08 14:28:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: adds cancel button and uses zod over yup

Browse Source
This commit is contained in:
Ronit Panda
2023-10-24 06:02:20 +05:30
parent fb59b02ab4
commit 1476d06b7e
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Org/components/CreateOrgModal.tsx
+20 -15
View File
@@ -1,20 +1,20 @@
import { FC } from "react"; import { FC } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { yupResolver } from "@hookform/resolvers/yup"; import { zodResolver } from "@hookform/resolvers/zod";
import * as yup from "yup"; import z from "zod";
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider"; import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2"; import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
import { useCreateOrg } from "@app/hooks/api"; import { useCreateOrg } from "@app/hooks/api";
const schema = yup const schema = z
.object({ .object({
name: yup.string().required("Organization name is required") name: z.string().nonempty({ message: "Name is required" })
}) })
.required(); .required();
export type FormData = yup.InferType<typeof schema>; export type FormData = z.infer<typeof schema>;
interface CreateOrgModalProps { interface CreateOrgModalProps {
isOpen: boolean; isOpen: boolean;
@@ -31,7 +31,7 @@ export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) =>
reset, reset,
formState: { isSubmitting } formState: { isSubmitting }
} = useForm<FormData>({ } = useForm<FormData>({
resolver: yupResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
name: "" name: ""
} }
@@ -83,15 +83,20 @@ export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) =>
</FormControl> </FormControl>
)} )}
/> />
<Button <div className="flex w-full gap-4">
className="" <Button
size="sm" className=""
type="submit" size="sm"
isLoading={isSubmitting} type="submit"
isDisabled={isSubmitting} isLoading={isSubmitting}
> isDisabled={isSubmitting}
Create >
</Button> Create
</Button>
<Button className="" size="sm" variant="outline_bg" type="button" onClick={onClose}>
Cancel
</Button>
</div>
</form> </form>
</ModalContent> </ModalContent>
</Modal> </Modal>