feat: adds ability to create multiple orgs under the same account

frontend/src/views/Org/NonePage/NonePage.tsx

@@ -1,112 +1,31 @@
 import { useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";
 
-import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
-import {
-    Button,
-    FormControl,
-    Input,
-    Modal,
-    ModalContent} from "@app/components/v2";
-import { useCreateOrg } from "@app/hooks/api";
 import { usePopUp } from "@app/hooks/usePopUp";
 
-const schema = yup.object({
-    name: yup.string().required("Organization name is required"),
-}).required();
+import { CreateOrgModal } from "../components";
+
+const schema = yup
+  .object({
+    name: yup.string().required("Organization name is required")
+  })
+  .required();
 
 export type FormData = yup.InferType<typeof schema>;
 
 export const NonePage = () => {
-    const { createNotification } = useNotificationContext();
-    const { popUp, handlePopUpOpen,  handlePopUpToggle } = usePopUp([
-        "createOrg",
-    ] as const);
-    
-    const { mutateAsync } = useCreateOrg();
-    
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<FormData>({
-        resolver: yupResolver(schema),
-        defaultValues: {
-            name: ""
-        }
-    });
-    
-    useEffect(() => {
-        handlePopUpOpen("createOrg");
-    }, []);
-    
-    const onFormSubmit = async ({ name }: FormData) => {
-        try {
-            
-            const organization = await mutateAsync({
-                name
-            });
+  const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["createOrg"] as const);
 
-            createNotification({
-                text: "Successfully created organization",
-                type: "success"
-            });
+  useEffect(() => {
+    handlePopUpOpen("createOrg");
+  }, []);
 
-            window.location.href = `/org/${organization._id}/overview`;
-            
-            reset();
-            handlePopUpToggle("createOrg", false);
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to created organization",
-                type: "error"
-            });
-        }
-    }
-
-    return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <Modal
-            isOpen={popUp?.createOrg?.isOpen}
-        >
-            <ModalContent 
-                title="Create Organization"
-                subTitle="Looks like you're not part of any organizations. Create one to start using Infisical"
-            >
-                <form onSubmit={handleSubmit(onFormSubmit)}>
-                    <Controller
-                        control={control}
-                        defaultValue=""
-                        name="name"
-                        render={({ field, fieldState: { error } }) => (
-                            <FormControl
-                                label="Name"
-                                isError={Boolean(error)}
-                                errorText={error?.message}
-                            >
-                            <Input 
-                                {...field} 
-                                placeholder="Acme Corp"
-                            />
-                            </FormControl>
-                        )}
-                    />
-                    <Button
-                        className=""
-                        size="sm"
-                        type="submit"
-                        isLoading={isSubmitting}
-                        isDisabled={isSubmitting}
-                    >
-                        Create
-                    </Button>
-                </form>
-            </ModalContent>
-        </Modal>
-      </div>
-    );
-}
+  return (
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <CreateOrgModal
+        isOpen={popUp.createOrg.isOpen}
+        onClose={() => handlePopUpToggle("createOrg", false)}
+      />
+    </div>
+  );
+};

frontend/src/views/Org/components/CreateOrgModal.tsx

@@ -0,0 +1,94 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useCreateOrg } from "@app/hooks/api";
+
+const schema = yup
+  .object({
+    name: yup.string().required("Organization name is required")
+  })
+  .required();
+
+export type FormData = yup.InferType<typeof schema>;
+
+interface CreateOrgModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const CreateOrgModal: FC<CreateOrgModalProps> = ({ isOpen, onClose }) => {
+  const { createNotification } = useNotificationContext();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<FormData>({
+    resolver: yupResolver(schema),
+    defaultValues: {
+      name: ""
+    }
+  });
+
+  const { mutateAsync } = useCreateOrg();
+
+  const onFormSubmit = async ({ name }: FormData) => {
+    try {
+      const organization = await mutateAsync({
+        name
+      });
+
+      createNotification({
+        text: "Successfully created organization",
+        type: "success"
+      });
+
+      window.location.href = `/org/${organization._id}/overview`;
+
+      reset();
+      onClose();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to created organization",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen}>
+      <ModalContent
+        title="Create Organization"
+        subTitle="Looks like you're not part of any organizations. Create one to start using Infisical"
+      >
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="name"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Name" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="Acme Corp" />
+              </FormControl>
+            )}
+          />
+          <Button
+            className=""
+            size="sm"
+            type="submit"
+            isLoading={isSubmitting}
+            isDisabled={isSubmitting}
+          >
+            Create
+          </Button>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/views/Org/components/index.tsx

@@ -0,0 +1 @@
+export { CreateOrgModal } from "./CreateOrgModal";