mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-21 03:50:10 +00:00
586 lines
22 KiB
TypeScript
586 lines
22 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Controller, useFieldArray, useForm } from "react-hook-form";
|
|
import { faChevronDown, faChevronRight, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import ms from "ms";
|
|
import { z } from "zod";
|
|
|
|
import { createNotification } from "@app/components/notifications";
|
|
import {
|
|
Button,
|
|
FormControl,
|
|
FormLabel,
|
|
IconButton,
|
|
Input,
|
|
Modal,
|
|
ModalContent,
|
|
Select,
|
|
SelectItem
|
|
} from "@app/components/v2";
|
|
import { useWorkspace } from "@app/context";
|
|
import {
|
|
useCreateSshHost,
|
|
useGetSshHostById,
|
|
useGetWorkspaceUsers,
|
|
useListWorkspaceGroups,
|
|
useListWorkspaceSshHosts,
|
|
useUpdateSshHost
|
|
} from "@app/hooks/api";
|
|
import { LoginMappingSource } from "@app/hooks/api/sshHost/types";
|
|
import { UsePopUpState } from "@app/hooks/usePopUp";
|
|
|
|
type Props = {
|
|
popUp: UsePopUpState<["sshHost"]>;
|
|
handlePopUpToggle: (popUpName: keyof UsePopUpState<["sshHost"]>, state?: boolean) => void;
|
|
};
|
|
|
|
const schema = z
|
|
.object({
|
|
hostname: z.string().trim(),
|
|
alias: z.string().trim(),
|
|
userCertTtl: z
|
|
.string()
|
|
.trim()
|
|
.refine(
|
|
(val) => ms(val) > 0,
|
|
"TTL must be a valid time string such as 2 days, 1d, 2h 1y, ..."
|
|
)
|
|
.default("8h"),
|
|
loginMappings: z
|
|
.object({
|
|
loginUser: z.string().trim().min(1),
|
|
allowedPrincipals: z
|
|
.array(
|
|
z.object({
|
|
type: z.enum(["user", "group"]),
|
|
value: z.string().trim().min(1)
|
|
})
|
|
)
|
|
.default([]),
|
|
source: z.nativeEnum(LoginMappingSource)
|
|
})
|
|
.array()
|
|
.default([])
|
|
})
|
|
.required();
|
|
|
|
export type FormData = z.infer<typeof schema>;
|
|
|
|
export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
|
|
const { currentWorkspace } = useWorkspace();
|
|
const projectId = currentWorkspace?.id || "";
|
|
const { data: sshHosts } = useListWorkspaceSshHosts(currentWorkspace.id);
|
|
const { data: members = [] } = useGetWorkspaceUsers(projectId);
|
|
const { data: groups = [] } = useListWorkspaceGroups(projectId);
|
|
const [expandedMappings, setExpandedMappings] = useState<Record<number, boolean>>({});
|
|
|
|
const { data: sshHost } = useGetSshHostById(
|
|
(popUp?.sshHost?.data as { sshHostId: string })?.sshHostId || ""
|
|
);
|
|
|
|
const { mutateAsync: createMutateAsync } = useCreateSshHost();
|
|
const { mutateAsync: updateMutateAsync } = useUpdateSshHost();
|
|
|
|
const {
|
|
control,
|
|
handleSubmit,
|
|
reset,
|
|
getValues,
|
|
setValue,
|
|
formState: { isSubmitting }
|
|
} = useForm<FormData>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: {
|
|
hostname: "",
|
|
alias: "",
|
|
userCertTtl: "8h",
|
|
loginMappings: []
|
|
}
|
|
});
|
|
|
|
const loginMappingsFormFields = useFieldArray({
|
|
control,
|
|
name: "loginMappings"
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (sshHost) {
|
|
reset({
|
|
hostname: sshHost.hostname,
|
|
alias: sshHost.alias ?? "",
|
|
userCertTtl: sshHost.userCertTtl,
|
|
loginMappings: sshHost.loginMappings.map(({ loginUser, allowedPrincipals, source }) => ({
|
|
loginUser,
|
|
allowedPrincipals: [
|
|
...(allowedPrincipals.usernames || []).map((username) => ({
|
|
type: "user" as const,
|
|
value: username
|
|
})),
|
|
...(allowedPrincipals.groups || []).map((group) => ({
|
|
type: "group" as const,
|
|
value: group
|
|
}))
|
|
],
|
|
source
|
|
}))
|
|
});
|
|
|
|
setExpandedMappings(
|
|
Object.fromEntries(sshHost.loginMappings.map((_, index) => [index, false]))
|
|
);
|
|
} else {
|
|
reset({
|
|
hostname: "",
|
|
alias: "",
|
|
userCertTtl: "8h",
|
|
loginMappings: []
|
|
});
|
|
}
|
|
}, [sshHost]);
|
|
|
|
const onFormSubmit = async ({ hostname, alias, userCertTtl, loginMappings }: FormData) => {
|
|
try {
|
|
if (!projectId) return;
|
|
|
|
// Filter out login mappings that are from host groups
|
|
const hostLoginMappings = loginMappings.filter(
|
|
(mapping) => mapping.source === LoginMappingSource.HOST
|
|
);
|
|
|
|
// check if there is already a different host with the same hostname
|
|
const existingHostnames =
|
|
sshHosts?.filter((h) => h.id !== sshHost?.id).map((h) => h.hostname) || [];
|
|
|
|
if (existingHostnames.includes(hostname.trim())) {
|
|
createNotification({
|
|
text: "A host with this hostname already exists.",
|
|
type: "error"
|
|
});
|
|
return;
|
|
}
|
|
|
|
const trimmedAlias = alias.trim();
|
|
|
|
// check if there is already a different host with the same non-null alias
|
|
if (trimmedAlias) {
|
|
const existingAliases =
|
|
sshHosts?.filter((h) => h.id !== sshHost?.id && h.alias !== null).map((h) => h.alias) ||
|
|
[];
|
|
|
|
if (existingAliases.includes(trimmedAlias)) {
|
|
createNotification({
|
|
text: "A host with this alias already exists.",
|
|
type: "error"
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
|
|
const transformedLoginMappings = hostLoginMappings.map(({ loginUser, allowedPrincipals }) => {
|
|
const usernames = allowedPrincipals
|
|
.filter((p) => p.type === "user" && p.value)
|
|
.map((p) => p.value);
|
|
|
|
const groupNames = allowedPrincipals
|
|
.filter((p) => p.type === "group" && p.value)
|
|
.map((p) => p.value);
|
|
|
|
return {
|
|
loginUser,
|
|
allowedPrincipals: {
|
|
usernames,
|
|
groups: groupNames
|
|
}
|
|
};
|
|
});
|
|
|
|
if (sshHost) {
|
|
await updateMutateAsync({
|
|
sshHostId: sshHost.id,
|
|
hostname,
|
|
alias: trimmedAlias,
|
|
userCertTtl,
|
|
loginMappings: transformedLoginMappings
|
|
});
|
|
} else {
|
|
await createMutateAsync({
|
|
projectId,
|
|
hostname,
|
|
alias: trimmedAlias,
|
|
userCertTtl,
|
|
loginMappings: transformedLoginMappings
|
|
});
|
|
}
|
|
|
|
reset();
|
|
handlePopUpToggle("sshHost", false);
|
|
|
|
createNotification({
|
|
text: `Successfully ${sshHost ? "updated" : "added"} SSH host`,
|
|
type: "success"
|
|
});
|
|
} catch (err) {
|
|
console.error(err);
|
|
createNotification({
|
|
text: `Failed to ${sshHost ? "update" : "add"} SSH host`,
|
|
type: "error"
|
|
});
|
|
}
|
|
};
|
|
|
|
const toggleMapping = (index: number) => {
|
|
setExpandedMappings((prev) => ({
|
|
...prev,
|
|
[index]: !prev[index]
|
|
}));
|
|
};
|
|
|
|
const isPrincipalDuplicate = (
|
|
mappingIndex: number,
|
|
principalType: string,
|
|
principalValue: string
|
|
) => {
|
|
const principals = getValues(`loginMappings.${mappingIndex}.allowedPrincipals`) || [];
|
|
return principals.some((p) => p.type === principalType && p.value === principalValue);
|
|
};
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={popUp?.sshHost?.isOpen}
|
|
onOpenChange={(isOpen) => {
|
|
reset();
|
|
handlePopUpToggle("sshHost", isOpen);
|
|
}}
|
|
>
|
|
<ModalContent title={`${sshHost ? "View" : "Add"} SSH host`}>
|
|
<form onSubmit={handleSubmit(onFormSubmit)}>
|
|
{sshHost && (
|
|
<FormControl label="SSH Host ID">
|
|
<Input value={sshHost.id} isDisabled className="bg-white/[0.07]" />
|
|
</FormControl>
|
|
)}
|
|
<Controller
|
|
control={control}
|
|
defaultValue=""
|
|
name="hostname"
|
|
render={({ field, fieldState: { error } }) => (
|
|
<FormControl
|
|
label="Hostname"
|
|
isError={Boolean(error)}
|
|
errorText={error?.message}
|
|
isRequired
|
|
>
|
|
<Input {...field} placeholder="host.example.com" />
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
<Controller
|
|
control={control}
|
|
defaultValue=""
|
|
name="alias"
|
|
render={({ field, fieldState: { error } }) => (
|
|
<FormControl label="Alias" isError={Boolean(error)} errorText={error?.message}>
|
|
<Input {...field} placeholder="host" />
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
<Controller
|
|
control={control}
|
|
defaultValue=""
|
|
name="userCertTtl"
|
|
render={({ field, fieldState: { error } }) => (
|
|
<FormControl
|
|
label="User Certificate TTL"
|
|
isError={Boolean(error)}
|
|
errorText={error?.message}
|
|
isRequired
|
|
>
|
|
<Input {...field} placeholder="8h, 1d, 30m" />
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
<div className="mb-4 flex items-center justify-between">
|
|
<FormLabel label="Login Mappings" />
|
|
<Button
|
|
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
|
size="xs"
|
|
variant="outline_bg"
|
|
onClick={() => {
|
|
const newIndex = loginMappingsFormFields.fields.length;
|
|
loginMappingsFormFields.append({
|
|
loginUser: "",
|
|
allowedPrincipals: [],
|
|
source: LoginMappingSource.HOST
|
|
});
|
|
setExpandedMappings((prev) => ({
|
|
...prev,
|
|
[newIndex]: true
|
|
}));
|
|
}}
|
|
>
|
|
Add Login Mapping
|
|
</Button>
|
|
</div>
|
|
<div className="mb-4 flex flex-col space-y-4">
|
|
{loginMappingsFormFields.fields.map(({ id: metadataFieldId }, i) => (
|
|
<div
|
|
key={metadataFieldId}
|
|
className="flex flex-col space-y-2 rounded-md border border-mineshaft-600 p-4"
|
|
>
|
|
<div className="mb-2 flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
className="flex cursor-pointer items-center py-1 text-sm text-mineshaft-200"
|
|
onClick={() => toggleMapping(i)}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={expandedMappings[i] ? faChevronDown : faChevronRight}
|
|
className="mr-4"
|
|
size="sm"
|
|
/>
|
|
<Controller
|
|
control={control}
|
|
name={`loginMappings.${i}.loginUser`}
|
|
render={({ field }) => (
|
|
<span className="text-sm font-medium leading-tight">
|
|
{field.value || "New Login Mapping"}
|
|
{loginMappingsFormFields.fields[i].source ===
|
|
LoginMappingSource.HOST_GROUP && (
|
|
<span className="ml-2 text-xs text-mineshaft-400">
|
|
(inherited from host group)
|
|
</span>
|
|
)}
|
|
</span>
|
|
)}
|
|
/>
|
|
</button>
|
|
<IconButton
|
|
ariaLabel="delete login mapping"
|
|
variant="plain"
|
|
onClick={() => loginMappingsFormFields.remove(i)}
|
|
isDisabled={
|
|
loginMappingsFormFields.fields[i].source === LoginMappingSource.HOST_GROUP
|
|
}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} />
|
|
</IconButton>
|
|
</div>
|
|
|
|
{expandedMappings[i] && (
|
|
<>
|
|
<div>
|
|
<span className="text-xs text-mineshaft-400">Login User</span>
|
|
<Controller
|
|
control={control}
|
|
name={`loginMappings.${i}.loginUser`}
|
|
render={({ field, fieldState: { error } }) => (
|
|
<FormControl
|
|
isError={Boolean(error?.message)}
|
|
errorText={error?.message}
|
|
className="mb-0"
|
|
>
|
|
<Input
|
|
{...field}
|
|
placeholder="ec2-user"
|
|
isDisabled={
|
|
loginMappingsFormFields.fields[i].source ===
|
|
LoginMappingSource.HOST_GROUP
|
|
}
|
|
onChange={(e) => {
|
|
if (
|
|
loginMappingsFormFields.fields[i].source ===
|
|
LoginMappingSource.HOST_GROUP
|
|
)
|
|
return;
|
|
|
|
const newValue = e.target.value;
|
|
const loginMappings = getValues("loginMappings");
|
|
const isDuplicate = loginMappings.some(
|
|
(mapping, index) =>
|
|
index !== i &&
|
|
mapping.loginUser === newValue &&
|
|
mapping.source === LoginMappingSource.HOST
|
|
);
|
|
|
|
if (isDuplicate) {
|
|
createNotification({
|
|
text: "This login user already exists",
|
|
type: "error"
|
|
});
|
|
return;
|
|
}
|
|
|
|
field.onChange(e);
|
|
}}
|
|
/>
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col space-y-2">
|
|
<div className="mb-2 mt-4 flex items-center justify-between">
|
|
<FormLabel
|
|
label="Allowed Principals"
|
|
className="text-xs text-mineshaft-400"
|
|
/>
|
|
{loginMappingsFormFields.fields[i].source === LoginMappingSource.HOST && (
|
|
<Button
|
|
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
|
size="xs"
|
|
variant="outline_bg"
|
|
onClick={() => {
|
|
const current =
|
|
getValues(`loginMappings.${i}.allowedPrincipals`) ?? [];
|
|
setValue(`loginMappings.${i}.allowedPrincipals`, [
|
|
...current,
|
|
{ type: "user", value: "" }
|
|
]);
|
|
}}
|
|
>
|
|
Add Principal
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Controller
|
|
control={control}
|
|
name={`loginMappings.${i}.allowedPrincipals`}
|
|
render={({ field: { value = [], onChange }, fieldState: { error } }) => (
|
|
<div className="flex flex-col space-y-2">
|
|
{value.map((principal, principalIndex) => (
|
|
<div
|
|
key={`principal-${i + 1}-${principalIndex + 1}-${principal.type}`}
|
|
className="flex items-center space-x-2"
|
|
>
|
|
<div className="mr-2">
|
|
<Select
|
|
className="w-24"
|
|
value={principal.type}
|
|
onValueChange={(newType) => {
|
|
const newPrincipals = [...value];
|
|
newPrincipals[principalIndex] = {
|
|
type: newType as "user" | "group",
|
|
value: ""
|
|
};
|
|
onChange(newPrincipals);
|
|
}}
|
|
isDisabled={
|
|
loginMappingsFormFields.fields[i].source ===
|
|
LoginMappingSource.HOST_GROUP
|
|
}
|
|
>
|
|
<SelectItem value="user">User</SelectItem>
|
|
<SelectItem value="group">Group</SelectItem>
|
|
</Select>
|
|
</div>
|
|
<div className="flex-1">
|
|
<Select
|
|
value={principal.value}
|
|
onValueChange={(newValue) => {
|
|
if (
|
|
loginMappingsFormFields.fields[i].source ===
|
|
LoginMappingSource.HOST_GROUP
|
|
)
|
|
return;
|
|
if (isPrincipalDuplicate(i, principal.type, newValue)) {
|
|
createNotification({
|
|
text: `This ${principal.type} is already added`,
|
|
type: "error"
|
|
});
|
|
return;
|
|
}
|
|
const newPrincipals = [...value];
|
|
newPrincipals[principalIndex] = {
|
|
type: principal.type,
|
|
value: newValue
|
|
};
|
|
onChange(newPrincipals);
|
|
}}
|
|
placeholder={`Select a ${principal.type}`}
|
|
className="w-full"
|
|
isDisabled={
|
|
loginMappingsFormFields.fields[i].source ===
|
|
LoginMappingSource.HOST_GROUP
|
|
}
|
|
>
|
|
{principal.type === "user"
|
|
? members.map((member) => (
|
|
<SelectItem
|
|
key={member.user.id}
|
|
value={member.user.username}
|
|
>
|
|
{member.user.username}
|
|
</SelectItem>
|
|
))
|
|
: groups.map((group) => (
|
|
<SelectItem
|
|
key={group.group.slug}
|
|
value={group.group.slug}
|
|
>
|
|
{group.group.slug}
|
|
</SelectItem>
|
|
))}
|
|
</Select>
|
|
</div>
|
|
<div className="flex w-10 justify-center">
|
|
<IconButton
|
|
size="sm"
|
|
ariaLabel="delete principal"
|
|
variant="plain"
|
|
className="h-9"
|
|
onClick={() => {
|
|
if (
|
|
loginMappingsFormFields.fields[i].source ===
|
|
LoginMappingSource.HOST_GROUP
|
|
)
|
|
return;
|
|
|
|
const newPrincipals = value.filter(
|
|
(_, idx) => idx !== principalIndex
|
|
);
|
|
onChange([...newPrincipals]);
|
|
}}
|
|
isDisabled={
|
|
loginMappingsFormFields.fields[i].source ===
|
|
LoginMappingSource.HOST_GROUP
|
|
}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{error && <span className="text-sm text-red-500">{error.message}</span>}
|
|
</div>
|
|
)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Button
|
|
className="mr-4"
|
|
size="sm"
|
|
type="submit"
|
|
isLoading={isSubmitting}
|
|
isDisabled={isSubmitting}
|
|
>
|
|
{popUp?.sshHost?.data ? "Update" : "Add"}
|
|
</Button>
|
|
<Button
|
|
colorSchema="secondary"
|
|
variant="plain"
|
|
onClick={() => handlePopUpToggle("sshHost", false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|