diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModalV2.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModalV2.tsx new file mode 100644 index 000000000..ea272fab5 --- /dev/null +++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentityModalV2.tsx @@ -0,0 +1,193 @@ +import { Controller, useForm } from "react-hook-form"; +import { faKey } from "@fortawesome/free-solid-svg-icons"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { z } from "zod"; + +import { + Button, + EmptyState, + FormControl, + Input, + Modal, + ModalContent, + Tab, + Table, + TableContainer, + TabList, + TabPanel, + Tabs, + TBody, + Td, + Th, + THead, + Tr} from "@app/components/v2"; +import { IdentityAuthMethod } from "@app/hooks/api/identities"; +import { UsePopUpState } from "@app/hooks/usePopUp"; + +type Props = { + popUp: UsePopUpState<["identityModalV2", "upgradePlan"]>; + handlePopUpOpen: (popUpName: keyof UsePopUpState<["upgradePlan"]>) => void; + handlePopUpToggle: ( + popUpName: keyof UsePopUpState<["identityModalV2", "upgradePlan"]>, + state?: boolean + ) => void; +}; + +enum TabSections { + AccessTokens = "access-tokens", + AuthMethod = "auth-method" +} + +const schema = z.object({ + name: z.string(), + role: z.string() +}); + +type FormData = z.infer; + +export const IdentityModalV2 = ({ popUp, handlePopUpToggle }: Props) => { + const { + control, + formState: { isSubmitting } + } = useForm({ + resolver: zodResolver(schema), + defaultValues: { + name: "", + role: "" + } + }); + + const identityData = popUp?.identityModalV2?.data as { + identityId: string; + name: string; + authMethod?: IdentityAuthMethod; + }; + + return ( + { + handlePopUpToggle("identityModalV2", isOpen); + }} + > + +
+
+
+
+
+

Some ID

+
+ ( + + + + )} + /> + ( + + + + )} + /> +
+ +
+
+
+ + + Access Tokens + Auth Method + + +
+
+

Access Token

+ +
+

+ Create an access token to authenticate with the API +

+
+ + + + + + + + + + + + + +
TokenExpires +
+ +
+
+
+ Amx +
+
+
+ {/* ( + + + + )} + /> */} + {/* {renderIdentityAuthForm()} */} + {/* handlePopUpToggle("upgradePlan", isOpen)} + text="You can use IP allowlisting if you switch to Infisical's Pro plan." + /> */} +
+
+ ); +}; diff --git a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx index 3068eaf92..dce8adcb1 100644 --- a/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx +++ b/frontend/src/views/Org/MembersPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx @@ -17,6 +17,8 @@ import { usePopUp } from "@app/hooks/usePopUp"; import { IdentityAuthMethodModal } from "./IdentityAuthMethodModal"; import { IdentityModal } from "./IdentityModal"; +// new +import { IdentityModalV2 } from "./IdentityModalV2"; import { IdentityTable } from "./IdentityTable"; import { IdentityTokenAuthTokenModal } from "./IdentityTokenAuthTokenModal"; import { IdentityUniversalAuthClientSecretModal } from "./IdentityUniversalAuthClientSecretModal"; @@ -30,6 +32,7 @@ export const IdentitySection = withPermission( const { mutateAsync: deleteMutateAsync } = useDeleteIdentity(); const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ "identity", + "identityModalV2", // TODO: update "identityAuthMethod", "deleteIdentity", "universalAuthClientSecret", @@ -114,6 +117,11 @@ export const IdentitySection = withPermission( handlePopUpOpen={handlePopUpOpen} handlePopUpToggle={handlePopUpToggle} /> + { data.map(({ identity: { id, name, authMethod }, role, customRole }) => { return ( - {name} + + +