mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-17 12:56:29 +00:00
Merge branch 'Infisical:main' into cloudflare-workers
This commit is contained in:
Shreyas
@@ -12,7 +12,7 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
|
||||
import attemptCliLogin from "@app/components/utilities/attemptCliLogin";
|
||||
import attemptLogin from "@app/components/utilities/attemptLogin";
|
||||
import { Button, Input } from "@app/components/v2";
|
||||
import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
|
||||
import { useServerConfig } from "@app/context";
|
||||
|
||||
import { navigateUserToOrg } from "../../Login.utils";
|
||||
|
||||
@@ -30,7 +30,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
|
||||
const { t } = useTranslation();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [loginError, setLoginError] = useState(false);
|
||||
const { data: serverDetails } = useFetchServerStatus();
|
||||
const { config } = useServerConfig();
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
|
||||
const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
|
||||
@@ -84,7 +84,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
await navigateUserToOrg(router);
|
||||
|
||||
// case: login does not require MFA step
|
||||
@@ -225,7 +225,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
|
||||
</Button>
|
||||
</div>
|
||||
{!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
|
||||
{!serverDetails?.inviteOnlySignup ? (
|
||||
{config.allowSignUp ? (
|
||||
<div className="mt-6 flex flex-row text-sm text-bunker-400">
|
||||
<Link href="/signup">
|
||||
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
|
||||
@@ -236,7 +236,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
<div className="flex flex-row text-sm text-bunker-400">
|
||||
<div className="flex flex-row text-sm text-bunker-400 mt-2">
|
||||
<Link href="/verify-email">
|
||||
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
|
||||
Forgot password? Recover your account
|
||||
|
||||
@@ -1,42 +1,32 @@
|
||||
/* eslint-disable @typescript-eslint/no-unused-vars */
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
|
||||
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
|
||||
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
|
||||
import { withProjectPermission } from "@app/hoc";
|
||||
import { useGetRoles } from "@app/hooks/api";
|
||||
import { TRole } from "@app/hooks/api/roles/types";
|
||||
|
||||
import { MemberListTab } from "./components/MemberListTab";
|
||||
import { ProjectRoleListTab } from "./components/ProjectRoleListTab";
|
||||
import { ServiceTokenTab } from "./components/ServiceTokenTab";
|
||||
|
||||
enum TabSections {
|
||||
Member = "members",
|
||||
Roles = "roles"
|
||||
Roles = "roles",
|
||||
ServiceTokens = "service-tokens"
|
||||
}
|
||||
|
||||
export const MembersPage = withProjectPermission(
|
||||
() => {
|
||||
const { t } = useTranslation();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const workspaceId = currentWorkspace?._id || "";
|
||||
const orgId = currentWorkspace?.organization || "";
|
||||
|
||||
const { data: roles, isLoading: isRolesLoading } = useGetRoles({
|
||||
orgId,
|
||||
workspaceId
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
|
||||
<div className="mb-6 w-full py-6 px-6 max-w-7xl mx-auto">
|
||||
<p className="mr-4 mb-4 text-3xl font-semibold text-white">
|
||||
{t("settings.members.title")}
|
||||
Access Control
|
||||
</p>
|
||||
<Tabs defaultValue={TabSections.Member}>
|
||||
<TabList>
|
||||
<Tab value={TabSections.Member}>Members</Tab>
|
||||
<Tab value={TabSections.ServiceTokens}>Service Tokens</Tab>
|
||||
<Tab value={TabSections.Roles}>Roles</Tab>
|
||||
</TabList>
|
||||
<TabPanel value={TabSections.Member}>
|
||||
@@ -47,14 +37,14 @@ export const MembersPage = withProjectPermission(
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: 30 }}
|
||||
>
|
||||
<MemberListTab roles={roles as TRole<string>[]} isRolesLoading={isRolesLoading} />
|
||||
<MemberListTab />
|
||||
</motion.div>
|
||||
</TabPanel>
|
||||
<TabPanel value={TabSections.ServiceTokens}>
|
||||
<ServiceTokenTab />
|
||||
</TabPanel>
|
||||
<TabPanel value={TabSections.Roles}>
|
||||
<ProjectRoleListTab
|
||||
roles={roles as TRole<string>[]}
|
||||
isRolesLoading={isRolesLoading}
|
||||
/>
|
||||
<ProjectRoleListTab />
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
|
||||
@@ -46,17 +46,11 @@ import {
|
||||
useAddUserToWs,
|
||||
useDeleteUserFromWorkspace,
|
||||
useGetOrgUsers,
|
||||
useGetRoles,
|
||||
useGetUserWsKey,
|
||||
useGetWorkspaceUsers,
|
||||
useUpdateUserWorkspaceRole,
|
||||
useUploadWsKey
|
||||
} from "@app/hooks/api";
|
||||
import { TRole } from "@app/hooks/api/roles/types";
|
||||
|
||||
type Props = {
|
||||
roles?: TRole<string>[];
|
||||
isRolesLoading?: boolean;
|
||||
};
|
||||
useUploadWsKey} from "@app/hooks/api";
|
||||
|
||||
const addMemberFormSchema = z.object({
|
||||
orgMembershipId: z.string().trim()
|
||||
@@ -64,7 +58,7 @@ const addMemberFormSchema = z.object({
|
||||
|
||||
type TAddMemberForm = z.infer<typeof addMemberFormSchema>;
|
||||
|
||||
export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
|
||||
export const MemberListTab = () => {
|
||||
const { createNotification } = useNotificationContext();
|
||||
const { t } = useTranslation();
|
||||
|
||||
@@ -76,6 +70,11 @@ export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
|
||||
const orgId = currentOrg?._id || "";
|
||||
const workspaceId = currentWorkspace?._id || "";
|
||||
|
||||
const { data: roles, isLoading: isRolesLoading } = useGetRoles({
|
||||
orgId,
|
||||
workspaceId
|
||||
});
|
||||
|
||||
const { data: wsKey } = useGetUserWsKey(workspaceId);
|
||||
const { data: members, isLoading: isMembersLoading } = useGetWorkspaceUsers(workspaceId);
|
||||
const { data: orgUsers } = useGetOrgUsers(orgId);
|
||||
@@ -162,7 +161,7 @@ export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
|
||||
|
||||
const findRoleFromId = useCallback(
|
||||
(roleId: string) => {
|
||||
return roles.find(({ _id: id }) => id === roleId);
|
||||
return (roles || []).find(({ _id: id }) => id === roleId);
|
||||
},
|
||||
[roles]
|
||||
);
|
||||
@@ -307,7 +306,7 @@ export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
|
||||
onRoleChange(membershipId, selectedRole)
|
||||
}
|
||||
>
|
||||
{roles
|
||||
{(roles || [])
|
||||
.filter(({ slug }) =>
|
||||
slug === "owner" ? isIamOwner || role === "owner" : true
|
||||
)
|
||||
|
||||
+2
-11
@@ -8,13 +8,8 @@ import { TRole } from "@app/hooks/api/roles/types";
|
||||
import { ProjectRoleList } from "./components/ProjectRoleList";
|
||||
import { ProjectRoleModifySection } from "./components/ProjectRoleModifySection";
|
||||
|
||||
type Props = {
|
||||
roles?: TRole<string>[];
|
||||
isRolesLoading?: boolean;
|
||||
};
|
||||
|
||||
export const ProjectRoleListTab = withProjectPermission(
|
||||
({ roles = [], isRolesLoading }: Props) => {
|
||||
() => {
|
||||
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["editRole"] as const);
|
||||
|
||||
return popUp.editRole.isOpen ? (
|
||||
@@ -38,11 +33,7 @@ export const ProjectRoleListTab = withProjectPermission(
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: -30 }}
|
||||
>
|
||||
<ProjectRoleList
|
||||
roles={roles}
|
||||
isRolesLoading={isRolesLoading}
|
||||
onSelectRole={(role) => handlePopUpOpen("editRole", role)}
|
||||
/>
|
||||
<ProjectRoleList onSelectRole={(role) => handlePopUpOpen("editRole", role)} />
|
||||
</motion.div>
|
||||
);
|
||||
},
|
||||
|
||||
+12
-8
@@ -25,24 +25,26 @@ import {
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import { useDeleteRole } from "@app/hooks/api";
|
||||
import { useDeleteRole, useGetRoles } from "@app/hooks/api";
|
||||
import { TRole } from "@app/hooks/api/roles/types";
|
||||
|
||||
type Props = {
|
||||
isRolesLoading?: boolean;
|
||||
roles?: TRole<string>[];
|
||||
onSelectRole: (role?: TRole<string>) => void;
|
||||
};
|
||||
|
||||
export const ProjectRoleList = ({ isRolesLoading, roles = [], onSelectRole }: Props) => {
|
||||
export const ProjectRoleList = ({ onSelectRole }: Props) => {
|
||||
const [searchRoles, setSearchRoles] = useState("");
|
||||
const { createNotification } = useNotificationContext();
|
||||
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
|
||||
const { currentOrg } = useOrganization();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const orgId = currentOrg?._id || "";
|
||||
const workspaceId = currentWorkspace?._id || "";
|
||||
|
||||
const { createNotification } = useNotificationContext();
|
||||
const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
|
||||
|
||||
const { data: roles, isLoading: isRolesLoading } = useGetRoles({
|
||||
orgId,
|
||||
workspaceId
|
||||
});
|
||||
|
||||
const { mutateAsync: deleteRole } = useDeleteRole();
|
||||
|
||||
@@ -62,6 +64,8 @@ export const ProjectRoleList = ({ isRolesLoading, roles = [], onSelectRole }: Pr
|
||||
}
|
||||
};
|
||||
|
||||
// roles={roles as TRole<string>[]}
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="mb-4 flex">
|
||||
@@ -97,7 +101,7 @@ export const ProjectRoleList = ({ isRolesLoading, roles = [], onSelectRole }: Pr
|
||||
</THead>
|
||||
<TBody>
|
||||
{isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
|
||||
{roles?.map((role) => {
|
||||
{(roles as TRole<string>[])?.map((role) => {
|
||||
const { _id: id, name, slug } = role;
|
||||
const isNonMutatable = ["admin", "member", "viewer"].includes(slug);
|
||||
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
import {
|
||||
ServiceTokenSection,
|
||||
// ServiceTokenV3Section
|
||||
} from "./components";
|
||||
|
||||
export const ServiceTokenTab = () => {
|
||||
return (
|
||||
<motion.div
|
||||
key="panel-service-token"
|
||||
transition={{ duration: 0.15 }}
|
||||
initial={{ opacity: 0, translateX: 30 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: 30 }}
|
||||
>
|
||||
{/* <ServiceTokenV3Section /> */}
|
||||
<ServiceTokenSection />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
+56
-174
@@ -29,22 +29,17 @@ import {
|
||||
Tabs,
|
||||
UpgradePlanModal} from "@app/components/v2";
|
||||
import {
|
||||
useOrganization,
|
||||
useSubscription,
|
||||
useWorkspace
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { useToggle } from "@app/hooks";
|
||||
import {
|
||||
useCreateServiceTokenV3,
|
||||
useGetRoles,
|
||||
useGetUserWsKey,
|
||||
useUpdateServiceTokenV3
|
||||
} from "@app/hooks/api";
|
||||
import {
|
||||
Permission
|
||||
} from "@app/hooks/api/serviceTokens/enums";
|
||||
import {
|
||||
ServiceTokenV3Scope,
|
||||
ServiceTokenV3TrustedIp
|
||||
} from "@app/hooks/api/serviceTokens/types";
|
||||
useUpdateServiceTokenV3} from "@app/hooks/api";
|
||||
import { ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
enum TabSections {
|
||||
@@ -61,13 +56,6 @@ const expirations = [
|
||||
{ label: "12 months", value: "31104000" }
|
||||
];
|
||||
|
||||
const permissionsMap: {
|
||||
[key: string]: Permission[]
|
||||
} = {
|
||||
"read": [Permission.READ],
|
||||
"readWrite": [Permission.READ, Permission.WRITE],
|
||||
}
|
||||
|
||||
const schema = yup.object({
|
||||
name: yup.string().required("ST V3 name is required"),
|
||||
expiresIn: yup.string(),
|
||||
@@ -82,24 +70,7 @@ const schema = yup.object({
|
||||
return !Number.isNaN(num) && num > 0 && String(num) === value;
|
||||
})
|
||||
.required("Access Token TTL is required"),
|
||||
scopes: yup
|
||||
.array(
|
||||
yup.object({
|
||||
permission: yup.string().oneOf(Object.keys(permissionsMap), "Invalid permission").required().label("Permission"),
|
||||
environment: yup.string().max(50).required().label("Environment"),
|
||||
secretPath: yup
|
||||
.string()
|
||||
.required()
|
||||
.default("/")
|
||||
.label("Secret Path")
|
||||
.transform((val) =>
|
||||
typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
|
||||
)
|
||||
})
|
||||
)
|
||||
.min(1)
|
||||
.required()
|
||||
.label("Scope"),
|
||||
role: yup.string().required("ST V3 role is required"),
|
||||
trustedIps: yup
|
||||
.array(
|
||||
yup.object({
|
||||
@@ -129,9 +100,18 @@ export const AddServiceTokenV3Modal = ({
|
||||
const [isServiceTokenJSONCopied, setIsServiceTokenJSONCopied] = useToggle(false);
|
||||
|
||||
const { subscription } = useSubscription();
|
||||
const { currentOrg } = useOrganization();
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
|
||||
const { data: latestFileKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
|
||||
const orgId = currentOrg?._id || "";
|
||||
const workspaceId = currentWorkspace?._id || "";
|
||||
|
||||
const { data: roles } = useGetRoles({
|
||||
orgId,
|
||||
workspaceId
|
||||
});
|
||||
|
||||
const { data: latestFileKey } = useGetUserWsKey(workspaceId);
|
||||
const { mutateAsync: createMutateAsync } = useCreateServiceTokenV3();
|
||||
const { mutateAsync: updateMutateAsync } = useUpdateServiceTokenV3();
|
||||
const { createNotification } = useNotificationContext();
|
||||
@@ -145,11 +125,6 @@ export const AddServiceTokenV3Modal = ({
|
||||
defaultValues: {
|
||||
name: "",
|
||||
accessTokenTTL: "7200",
|
||||
scopes: [{
|
||||
permission: "read",
|
||||
environment: currentWorkspace?.environments?.[0]?.slug,
|
||||
secretPath: "/",
|
||||
}],
|
||||
trustedIps: [{
|
||||
ipAddress: "0.0.0.0/0"
|
||||
}]
|
||||
@@ -175,31 +150,22 @@ export const AddServiceTokenV3Modal = ({
|
||||
const serviceTokenData = popUp?.serviceTokenV3?.data as {
|
||||
serviceTokenDataId: string;
|
||||
name: string;
|
||||
scopes: ServiceTokenV3Scope[];
|
||||
role: string;
|
||||
customRole: {
|
||||
name: string;
|
||||
slug: string;
|
||||
};
|
||||
trustedIps: ServiceTokenV3TrustedIp[];
|
||||
accessTokenTTL: number;
|
||||
isRefreshTokenRotationEnabled: boolean;
|
||||
};
|
||||
|
||||
if (!roles?.length) return;
|
||||
|
||||
if (serviceTokenData) {
|
||||
reset({
|
||||
name: serviceTokenData.name,
|
||||
scopes: serviceTokenData.scopes.map(({
|
||||
environment,
|
||||
secretPath,
|
||||
permissions
|
||||
}: ServiceTokenV3Scope) => {
|
||||
let permission = "read";
|
||||
if (permissions.includes(Permission.WRITE)) {
|
||||
permission = "readWrite";
|
||||
}
|
||||
|
||||
return ({
|
||||
environment,
|
||||
secretPath,
|
||||
permission
|
||||
})
|
||||
}),
|
||||
role: serviceTokenData?.customRole?.slug ?? serviceTokenData.role,
|
||||
trustedIps: serviceTokenData.trustedIps.map(({
|
||||
ipAddress,
|
||||
prefix
|
||||
@@ -215,26 +181,21 @@ export const AddServiceTokenV3Modal = ({
|
||||
reset({
|
||||
name: "",
|
||||
accessTokenTTL: "7200",
|
||||
scopes: [{
|
||||
permission: "read",
|
||||
environment: currentWorkspace?.environments?.[0]?.slug,
|
||||
secretPath: "/",
|
||||
}],
|
||||
role: roles[0].slug,
|
||||
trustedIps: [{
|
||||
ipAddress: "0.0.0.0/0"
|
||||
}]
|
||||
});
|
||||
}
|
||||
}, [popUp?.serviceTokenV3?.data]);
|
||||
}, [popUp?.serviceTokenV3?.data, roles]);
|
||||
|
||||
const { fields: tokenScopes, append, remove } = useFieldArray({ control, name: "scopes" });
|
||||
const { fields: tokenTrustedIps, append: appendTrustedIp, remove: removeTrustedIp } = useFieldArray({ control, name: "trustedIps" });
|
||||
|
||||
const onFormSubmit = async ({
|
||||
name,
|
||||
expiresIn,
|
||||
accessTokenTTL,
|
||||
scopes,
|
||||
role,
|
||||
trustedIps,
|
||||
isRefreshTokenRotationEnabled
|
||||
}: FormData) => {
|
||||
@@ -242,25 +203,16 @@ export const AddServiceTokenV3Modal = ({
|
||||
const serviceTokenData = popUp?.serviceTokenV3?.data as {
|
||||
serviceTokenDataId: string;
|
||||
name: string;
|
||||
scopes: any;
|
||||
role: string;
|
||||
};
|
||||
|
||||
// convert read/readWrite permission => ["read", "write"] format
|
||||
const reformattedScopes = scopes.map((scope) => {
|
||||
return ({
|
||||
environment: scope.environment,
|
||||
secretPath: scope.secretPath,
|
||||
permissions: permissionsMap[scope.permission]
|
||||
});
|
||||
});
|
||||
|
||||
if (serviceTokenData) {
|
||||
// update
|
||||
|
||||
await updateMutateAsync({
|
||||
serviceTokenDataId: serviceTokenData.serviceTokenDataId,
|
||||
name,
|
||||
scopes: reformattedScopes,
|
||||
role,
|
||||
trustedIps,
|
||||
expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
|
||||
accessTokenTTL: Number(accessTokenTTL),
|
||||
@@ -270,7 +222,7 @@ export const AddServiceTokenV3Modal = ({
|
||||
handlePopUpToggle("serviceTokenV3", false);
|
||||
} else {
|
||||
// create
|
||||
if (!currentWorkspace?._id) return;
|
||||
if (!workspaceId) return;
|
||||
if (!latestFileKey) return;
|
||||
|
||||
const pair = nacl.box.keyPair();
|
||||
@@ -294,9 +246,9 @@ export const AddServiceTokenV3Modal = ({
|
||||
|
||||
const { refreshToken } = await createMutateAsync({
|
||||
name,
|
||||
workspaceId: currentWorkspace._id,
|
||||
role,
|
||||
workspaceId,
|
||||
publicKey,
|
||||
scopes: reformattedScopes,
|
||||
trustedIps,
|
||||
expiresIn: expiresIn === "" ? undefined : Number(expiresIn),
|
||||
accessTokenTTL: Number(accessTokenTTL),
|
||||
@@ -385,102 +337,32 @@ export const AddServiceTokenV3Modal = ({
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
{tokenScopes.map(({ id }, index) => (
|
||||
<div className="flex items-end space-x-2 mb-3" key={id}>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.permission`}
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0"
|
||||
label={index === 0 ? "Permission" : undefined}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-36"
|
||||
>
|
||||
<SelectItem value="read" key="st-v3-read">
|
||||
Read
|
||||
</SelectItem>
|
||||
<SelectItem value="readWrite" key="st-v3-write">
|
||||
Read & Write
|
||||
</SelectItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.environment`}
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0"
|
||||
label={index === 0 ? "Environment" : undefined}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-36"
|
||||
>
|
||||
{currentWorkspace?.environments.map(({ name, slug }) => (
|
||||
<SelectItem value={slug} key={slug}>
|
||||
<Controller
|
||||
control={control}
|
||||
name="role"
|
||||
defaultValue=""
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label={`${popUp?.serviceTokenV3?.data ? "Update" : ""} Role`}
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
className="mt-4"
|
||||
>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="w-full"
|
||||
>
|
||||
{(roles || []).map(({ name, slug }) => (
|
||||
<SelectItem value={slug} key={`st-role-${slug}`}>
|
||||
{name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name={`scopes.${index}.secretPath`}
|
||||
defaultValue="/"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
className="mb-0 flex-grow"
|
||||
label={index === 0 ? "Secrets Path" : undefined}
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input {...field} placeholder="can be /, /nested/**, /**/deep" />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<IconButton
|
||||
onClick={() => remove(index)}
|
||||
size="lg"
|
||||
colorSchema="danger"
|
||||
variant="plain"
|
||||
ariaLabel="update"
|
||||
className="p-3"
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} />
|
||||
</IconButton>
|
||||
</div>
|
||||
))}
|
||||
<div className="my-4 ml-1">
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
onClick={() =>
|
||||
append({
|
||||
permission: "read",
|
||||
environment: currentWorkspace?.environments?.[0]?.slug || "",
|
||||
secretPath: "/"
|
||||
})
|
||||
}
|
||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||
size="xs"
|
||||
>
|
||||
Add Scope
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="expiresIn"
|
||||
+13
-27
@@ -22,8 +22,7 @@ import {
|
||||
useGetWorkspaceServiceTokenDataV3,
|
||||
useUpdateServiceTokenV3
|
||||
} from "@app/hooks/api";
|
||||
import { Permission } from "@app/hooks/api/serviceTokens/enums"
|
||||
import { ServiceTokenV3Scope, ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types"
|
||||
import { ServiceTokenV3TrustedIp } from "@app/hooks/api/serviceTokens/types"
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
type Props = {
|
||||
@@ -32,7 +31,11 @@ type Props = {
|
||||
data?: {
|
||||
serviceTokenDataId?: string;
|
||||
name?: string;
|
||||
scopes?: ServiceTokenV3Scope[];
|
||||
role?: string;
|
||||
customRole?: {
|
||||
name: string;
|
||||
slug: string;
|
||||
};
|
||||
trustedIps?: ServiceTokenV3TrustedIp[];
|
||||
accessTokenTTL?: number;
|
||||
isRefreshTokenRotationEnabled?: boolean;
|
||||
@@ -47,7 +50,7 @@ export const ServiceTokenV3Table = ({
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { data, isLoading } = useGetWorkspaceServiceTokenDataV3(currentWorkspace?._id || "");
|
||||
const { mutateAsync: updateMutateAsync } = useUpdateServiceTokenV3();
|
||||
|
||||
|
||||
const handleToggleServiceTokenDataStatus = async ({
|
||||
serviceTokenDataId,
|
||||
isActive
|
||||
@@ -81,7 +84,7 @@ export const ServiceTokenV3Table = ({
|
||||
<Tr>
|
||||
<Th>Name</Th>
|
||||
<Th>Status</Th>
|
||||
<Th>Scopes</Th>
|
||||
<Th>Role</Th>
|
||||
<Th>Trusted IPs</Th>
|
||||
<Th>Access Token TTL</Th>
|
||||
<Th>Created At</Th>
|
||||
@@ -98,7 +101,8 @@ export const ServiceTokenV3Table = ({
|
||||
_id,
|
||||
name,
|
||||
isActive,
|
||||
scopes,
|
||||
role,
|
||||
customRole,
|
||||
trustedIps,
|
||||
createdAt,
|
||||
expiresAt,
|
||||
@@ -128,26 +132,7 @@ export const ServiceTokenV3Table = ({
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
</Td>
|
||||
<Td>
|
||||
{scopes.map((scope) => {
|
||||
let permissionText = "read"
|
||||
if (
|
||||
scope.permissions.includes(Permission.WRITE) &&
|
||||
scope.permissions.includes(Permission.READ)
|
||||
) {
|
||||
permissionText = "readWrite";
|
||||
}
|
||||
|
||||
return (
|
||||
<p key={`service-token-${_id}-scope-${scope.environment}-${scope.secretPath}`}>
|
||||
<span className="font-bold">
|
||||
{permissionText}
|
||||
</span>
|
||||
{` @${scope.environment} - ${scope.secretPath}`}
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
</Td>
|
||||
<Td>{customRole?.slug ?? role}</Td>
|
||||
<Td>
|
||||
{trustedIps.map(({
|
||||
_id: trustedIpId,
|
||||
@@ -175,7 +160,8 @@ export const ServiceTokenV3Table = ({
|
||||
handlePopUpOpen("serviceTokenV3", {
|
||||
serviceTokenDataId: _id,
|
||||
name,
|
||||
scopes,
|
||||
role,
|
||||
customRole,
|
||||
trustedIps,
|
||||
accessTokenTTL,
|
||||
isRefreshTokenRotationEnabled
|
||||
@@ -0,0 +1,2 @@
|
||||
export { ServiceTokenSection } from "./ServiceTokenSection";
|
||||
export { ServiceTokenV3Section } from "./ServiceTokenV3Section";
|
||||
@@ -0,0 +1 @@
|
||||
export { ServiceTokenTab } from "./ServiceTokenTab";
|
||||
@@ -3,12 +3,10 @@ import { useTranslation } from "react-i18next";
|
||||
import { Tab } from "@headlessui/react";
|
||||
|
||||
import { ProjectGeneralTab } from "./components/ProjectGeneralTab";
|
||||
import { ProjectServiceTokensTab } from "./components/ProjectServiceTokensTab";
|
||||
import { WebhooksTab } from "./components/WebhooksTab";
|
||||
|
||||
const tabs = [
|
||||
{ name: "General", key: "tab-project-general" },
|
||||
{ name: "Service Tokens", key: "tab-project-service-tokens" },
|
||||
{ name: "Webhooks", key: "tab-project-webhooks" }
|
||||
];
|
||||
|
||||
@@ -41,9 +39,6 @@ export const ProjectSettingsPage = () => {
|
||||
<Tab.Panel>
|
||||
<ProjectGeneralTab />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<ProjectServiceTokensTab />
|
||||
</Tab.Panel>
|
||||
<Tab.Panel>
|
||||
<WebhooksTab />
|
||||
</Tab.Panel>
|
||||
|
||||
-11
@@ -1,11 +0,0 @@
|
||||
import { ServiceTokenSection } from "../ServiceTokenSection";
|
||||
// import { ServiceTokenV3Section } from "../ServiceTokenV3Section";
|
||||
|
||||
export const ProjectServiceTokensTab = () => {
|
||||
return (
|
||||
<>
|
||||
{/* <ServiceTokenV3Section /> */}
|
||||
<ServiceTokenSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
-1
@@ -1 +0,0 @@
|
||||
export { ProjectServiceTokensTab } from "./ProjectServiceTokensTab";
|
||||
@@ -3,5 +3,4 @@ export { DeleteProjectSection } from "./DeleteProjectSection";
|
||||
export { E2EESection } from "./E2EESection";
|
||||
export { EnvironmentSection } from "./EnvironmentSection";
|
||||
export { ProjectNameChangeSection } from "./ProjectNameChangeSection";
|
||||
export { SecretTagsSection } from "./SecretTagsSection";
|
||||
export { ServiceTokenSection } from "./ServiceTokenSection";
|
||||
export { SecretTagsSection } from "./SecretTagsSection";
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { ContentLoader, Switch, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
|
||||
import { useOrganization, useServerConfig, useUser } from "@app/context";
|
||||
import { useUpdateServerConfig } from "@app/hooks/api";
|
||||
|
||||
enum TabSections {
|
||||
Settings = "settings"
|
||||
}
|
||||
|
||||
export const AdminDashboardPage = () => {
|
||||
const router = useRouter();
|
||||
const data = useServerConfig();
|
||||
const { config } = data;
|
||||
const { user, isLoading: isUserLoading } = useUser();
|
||||
const { orgs } = useOrganization();
|
||||
const { mutate: updateServerConfig } = useUpdateServerConfig();
|
||||
|
||||
const isNotAllowed = !user?.superAdmin;
|
||||
|
||||
useEffect(() => {
|
||||
if (isNotAllowed && !isUserLoading) {
|
||||
if (orgs?.length) {
|
||||
localStorage.setItem("orgData.id", orgs?.[0]?._id);
|
||||
router.push(`/org/${orgs?.[0]?._id}/overview`);
|
||||
}
|
||||
}
|
||||
}, [isNotAllowed, isUserLoading]);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-7xl pb-12 text-white dark:[color-scheme:dark]">
|
||||
<div className="mb-8">
|
||||
<div className="mb-4 mt-6 flex flex-col items-start justify-between text-xl">
|
||||
<h1 className="text-3xl font-semibold">Admin Dashboard</h1>
|
||||
<p className="text-base text-bunker-300">Manage your Infisical</p>
|
||||
</div>
|
||||
</div>
|
||||
{isUserLoading || isNotAllowed ? (
|
||||
<ContentLoader text={isNotAllowed ? "Redirecting to org page..." : undefined} />
|
||||
) : (
|
||||
<div>
|
||||
<Tabs defaultValue={TabSections.Settings}>
|
||||
<TabList>
|
||||
<div className="flex flex-row border-b border-mineshaft-600 w-full">
|
||||
<Tab value={TabSections.Settings}>General</Tab>
|
||||
</div>
|
||||
</TabList>
|
||||
<TabPanel value={TabSections.Settings}>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Switch
|
||||
id="disable-invite"
|
||||
isChecked={Boolean(config?.allowSignUp)}
|
||||
onCheckedChange={(isChecked) => updateServerConfig({ allowSignUp: isChecked })}
|
||||
/>
|
||||
<div className="flex-grow">Enable signup or invite</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { AdminDashboardPage } from "./DashboardPage";
|
||||
@@ -0,0 +1,223 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { useRouter } from "next/router";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||
import { generateBackupPDFAsync } from "@app/components/utilities/generateBackupPDF";
|
||||
// TODO(akhilmhdh): rewrite this into module functions in lib
|
||||
import { saveTokenToLocalStorage } from "@app/components/utilities/saveTokenToLocalStorage";
|
||||
import SecurityClient from "@app/components/utilities/SecurityClient";
|
||||
import { Button, ContentLoader, FormControl, Input } from "@app/components/v2";
|
||||
import { useServerConfig } from "@app/context";
|
||||
import { useCreateAdminUser } from "@app/hooks/api";
|
||||
import { generateUserBackupKey, generateUserPassKey } from "@app/lib/crypto";
|
||||
import { isLoggedIn } from "@app/reactQuery";
|
||||
|
||||
import { DownloadBackupKeys } from "./components/DownloadBackupKeys";
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
email: z.string().email().trim(),
|
||||
firstName: z.string().trim(),
|
||||
lastName: z.string().trim().optional(),
|
||||
password: z.string().trim().min(14).max(100),
|
||||
confirmPassword: z.string().trim()
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Password don't match",
|
||||
path: ["confirmPassword"]
|
||||
});
|
||||
|
||||
type TFormSchema = z.infer<typeof formSchema>;
|
||||
|
||||
enum SignupSteps {
|
||||
DetailsForm = "details-form",
|
||||
BackupKey = "backup-key"
|
||||
}
|
||||
|
||||
export const SignUpPage = () => {
|
||||
const router = useRouter();
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
getValues,
|
||||
formState: { isSubmitting }
|
||||
} = useForm<TFormSchema>({
|
||||
resolver: zodResolver(formSchema)
|
||||
});
|
||||
const { createNotification } = useNotificationContext();
|
||||
const [step, setStep] = useState(SignupSteps.DetailsForm);
|
||||
|
||||
const { config } = useServerConfig();
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.initialized) {
|
||||
if (isLoggedIn()) {
|
||||
router.push("/admin");
|
||||
} else {
|
||||
router.push("/login");
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const { mutateAsync: createAdminUser } = useCreateAdminUser();
|
||||
|
||||
const handleFormSubmit = async ({ email, password, firstName, lastName }: TFormSchema) => {
|
||||
// avoid multi submission
|
||||
if (isSubmitting) return;
|
||||
try {
|
||||
const { privateKey, ...userPass } = await generateUserPassKey(email, password);
|
||||
const res = await createAdminUser({
|
||||
email,
|
||||
firstName,
|
||||
lastName,
|
||||
...userPass
|
||||
});
|
||||
SecurityClient.setToken(res.token);
|
||||
saveTokenToLocalStorage({
|
||||
publicKey: userPass.publicKey,
|
||||
encryptedPrivateKey: userPass.encryptedPrivateKey,
|
||||
iv: userPass.encryptedPrivateKeyIV,
|
||||
tag: userPass.encryptedPrivateKeyTag,
|
||||
privateKey
|
||||
});
|
||||
setStep(SignupSteps.BackupKey);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Faield to create admin"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleBackupKeyGenerate = async () => {
|
||||
try {
|
||||
const { email, password, firstName, lastName } = getValues();
|
||||
const generatedKey = await generateUserBackupKey(email, password);
|
||||
await generateBackupPDFAsync({
|
||||
generatedKey,
|
||||
personalEmail: email,
|
||||
personalName: `${firstName} ${lastName}`
|
||||
});
|
||||
router.push("/admin");
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Faield to generate backup"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (config?.initialized && step === SignupSteps.DetailsForm)
|
||||
return <ContentLoader text="Redirecting to admin page..." />;
|
||||
|
||||
return (
|
||||
<div className="flex justify-center items-center">
|
||||
<AnimatePresence exitBeforeEnter>
|
||||
{step === SignupSteps.DetailsForm && (
|
||||
<motion.div
|
||||
className="text-mineshaft-200"
|
||||
key="panel-1"
|
||||
transition={{ duration: 0.15 }}
|
||||
initial={{ opacity: 0, translateX: 30 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: 30 }}
|
||||
>
|
||||
<div className="text-center flex flex-col items-center space-y-4">
|
||||
<img src="/images/gradientLogo.svg" height={90} width={120} alt="Infisical logo" />
|
||||
<div className="text-4xl">Welcome to Infisical</div>
|
||||
<div>Create your first Admin Account</div>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)}>
|
||||
<div className="mt-8">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="firstName"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="First name"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input isFullWidth size="lg" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="lastName"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Last name"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input isFullWidth size="lg" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl label="Email" errorText={error?.message} isError={Boolean(error)}>
|
||||
<Input isFullWidth size="lg" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="password"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Password"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input isFullWidth size="lg" type="password" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="confirmPassword"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Confirm password"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<Input isFullWidth size="lg" type="password" {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" isFullWidth className="mt-4" isLoading={isSubmitting}>
|
||||
Let's Go
|
||||
</Button>
|
||||
</form>
|
||||
</motion.div>
|
||||
)}
|
||||
{step === SignupSteps.BackupKey && (
|
||||
<motion.div
|
||||
className="text-mineshaft-200"
|
||||
key="panel-2"
|
||||
transition={{ duration: 0.15 }}
|
||||
initial={{ opacity: 0, translateX: 30 }}
|
||||
animate={{ opacity: 1, translateX: 0 }}
|
||||
exit={{ opacity: 0, translateX: 30 }}
|
||||
>
|
||||
<DownloadBackupKeys onGenerate={handleBackupKeyGenerate} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { faWarning } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { Button } from "@app/components/v2";
|
||||
import { useToggle } from "@app/hooks";
|
||||
|
||||
type Props = {
|
||||
onGenerate: () => Promise<void>;
|
||||
};
|
||||
|
||||
export const DownloadBackupKeys = ({ onGenerate }: Props): JSX.Element => {
|
||||
const { t } = useTranslation();
|
||||
const [isLoading, setIsLoading] = useToggle();
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center w-full h-full md:px-6 mx-auto mb-36 md:mb-16">
|
||||
<p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
|
||||
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-3 pt-1 text-2xl text-bunker-200" />
|
||||
{t("signup.step4-message")}
|
||||
</p>
|
||||
<div className="flex flex-col pb-2 bg-mineshaft-800 border border-mineshaft-600 items-center justify-center text-center lg:w-1/6 w-full md:min-w-[24rem] mt-8 max-w-md text-bunker-300 text-md rounded-md">
|
||||
<div className="w-full mt-4 md:mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 md:min-w-[23rem] px-3 mx-auto">
|
||||
<span className="mb-2">
|
||||
{t("signup.step4-description1")} {t("signup.step4-description3")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center px-3 justify-center md:mt-4 mb-2 md:mb-4 lg:w-1/6 w-full md:min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
|
||||
<div className="text-l py-1 text-lg w-full">
|
||||
<Button
|
||||
onClick={async () => {
|
||||
try {
|
||||
setIsLoading.on();
|
||||
await onGenerate();
|
||||
} finally {
|
||||
setIsLoading.off();
|
||||
}
|
||||
}}
|
||||
size="sm"
|
||||
isFullWidth
|
||||
className="h-12"
|
||||
colorSchema="primary"
|
||||
variant="outline_bg"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
Download PDF
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { DownloadBackupKeys } from "./DownloadBackupKeys";
|
||||
@@ -0,0 +1 @@
|
||||
export { SignUpPage } from "./SignUpPage";
|
||||
Reference in New Issue
Block a user