mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-16 21:37:59 +00:00
Merge pull request #838 from Infisical/deprecation
Cleaning & deprecating parts of code
This commit is contained in:
BlackMagiq
@@ -1,46 +0,0 @@
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import NavHeader from "@app/components/navigation/NavHeader";
|
||||
|
||||
import { SAProjectLevelPermissionsTable } from "./components/SAProjectLevelPermissionsTable";
|
||||
import {
|
||||
CopyServiceAccountPublicKeySection,
|
||||
ServiceAccountNameChangeSection
|
||||
} from "./components";
|
||||
|
||||
export const CreateServiceAccountPage = () => {
|
||||
const router = useRouter();
|
||||
const {serviceAccountId} = router.query;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
|
||||
<NavHeader
|
||||
pageName="Service Account"
|
||||
isOrganizationRelated
|
||||
/>
|
||||
<div className="my-8 ml-6 max-w-5xl">
|
||||
<p className="text-3xl font-semibold text-gray-200">Service Account</p>
|
||||
<p className="text-base font-normal text-gray-400">
|
||||
A service account represents a machine identity such as a VM or application client.
|
||||
</p>
|
||||
</div>
|
||||
{typeof serviceAccountId === "string" && (
|
||||
<div className="max-w-8xl mx-6">
|
||||
<ServiceAccountNameChangeSection
|
||||
serviceAccountId={serviceAccountId}
|
||||
/>
|
||||
<div className="mt-8">
|
||||
<CopyServiceAccountPublicKeySection
|
||||
serviceAccountId={serviceAccountId}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<SAProjectLevelPermissionsTable
|
||||
serviceAccountId={serviceAccountId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
-49
@@ -1,49 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { IconButton } from "@app/components/v2";
|
||||
import { useToggle } from "@app/hooks";
|
||||
|
||||
type Props = {
|
||||
serviceAccountId: string;
|
||||
}
|
||||
|
||||
export const CopyServiceAccountIDSection = ({ serviceAccountId }: Props): JSX.Element => {
|
||||
const [isServiceAccountIdCopied, setIsServiceAccountIdCopied] = useToggle(false);
|
||||
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout;
|
||||
|
||||
if (isServiceAccountIdCopied) {
|
||||
timer = setTimeout(() => setIsServiceAccountIdCopied.off(), 2000);
|
||||
}
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [isServiceAccountIdCopied]);
|
||||
|
||||
const copyServiceAccountIdToClipboard = () => {
|
||||
navigator.clipboard.writeText(serviceAccountId);
|
||||
setIsServiceAccountIdCopied.on();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col items-start rounded-md bg-white/5 px-6 p-6">
|
||||
<p className="text-xl font-semibold">Service Account ID</p>
|
||||
<div className="mt-4 flex items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400 p-2">
|
||||
<p className="mr-4 break-all">{serviceAccountId}</p>
|
||||
<IconButton
|
||||
ariaLabel="copy icon"
|
||||
colorSchema="secondary"
|
||||
className="group relative"
|
||||
onClick={() => copyServiceAccountIdToClipboard()}
|
||||
>
|
||||
<FontAwesomeIcon icon={isServiceAccountIdCopied ? faCheck : faCopy} />
|
||||
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
|
||||
Copy
|
||||
</span>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
-1
@@ -1 +0,0 @@
|
||||
export { CopyServiceAccountIDSection } from "./CopyServiceAccountIDSection";
|
||||
-53
@@ -1,53 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { IconButton } from "@app/components/v2";
|
||||
import { useToggle } from "@app/hooks";
|
||||
import { useGetServiceAccountById } from "@app/hooks/api";
|
||||
|
||||
type Props = {
|
||||
serviceAccountId: string;
|
||||
}
|
||||
|
||||
export const CopyServiceAccountPublicKeySection = ({ serviceAccountId }: Props): JSX.Element => {
|
||||
const { data: serviceAccount } = useGetServiceAccountById(serviceAccountId);
|
||||
const [isServiceAccountIdCopied, setIsServiceAccountIdCopied] = useToggle(false);
|
||||
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout;
|
||||
|
||||
if (isServiceAccountIdCopied) {
|
||||
timer = setTimeout(() => setIsServiceAccountIdCopied.off(), 2000);
|
||||
}
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [isServiceAccountIdCopied]);
|
||||
|
||||
const copyServiceAccountIdToClipboard = () => {
|
||||
if (!serviceAccount) return;
|
||||
|
||||
navigator.clipboard.writeText(serviceAccount.publicKey);
|
||||
setIsServiceAccountIdCopied.on();
|
||||
};
|
||||
|
||||
return serviceAccount ? (
|
||||
<div className="flex w-full flex-col items-start rounded-md bg-white/5 px-6 p-6">
|
||||
<p className="text-xl font-semibold">Public Key</p>
|
||||
<div className="mt-4 flex items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400 p-2">
|
||||
<p className="mr-4 break-all">{serviceAccount.publicKey}</p>
|
||||
<IconButton
|
||||
ariaLabel="copy icon"
|
||||
colorSchema="secondary"
|
||||
className="group relative"
|
||||
onClick={() => copyServiceAccountIdToClipboard()}
|
||||
>
|
||||
<FontAwesomeIcon icon={isServiceAccountIdCopied ? faCheck : faCopy} />
|
||||
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
|
||||
Copy
|
||||
</span>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
) : <div />
|
||||
}
|
||||
-1
@@ -1 +0,0 @@
|
||||
export { CopyServiceAccountPublicKeySection } from "./CopyServiceAccountPublicKeySection";
|
||||
-412
@@ -1,412 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { faKey, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import * as yup from "yup";
|
||||
|
||||
import {
|
||||
decryptAssymmetric,
|
||||
encryptAssymmetric,
|
||||
verifyPrivateKey
|
||||
} from "@app/components/utilities/cryptography/crypto";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
DeleteActionModal,
|
||||
EmptyState,
|
||||
FormControl,
|
||||
IconButton,
|
||||
Input,
|
||||
Modal,
|
||||
ModalClose,
|
||||
ModalContent,
|
||||
Select,
|
||||
SelectItem,
|
||||
Table,
|
||||
TableContainer,
|
||||
TableSkeleton,
|
||||
TBody,
|
||||
Td,
|
||||
Th,
|
||||
THead,
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import {
|
||||
useCreateServiceAccountProjectLevelPermission,
|
||||
useDeleteServiceAccountProjectLevelPermission,
|
||||
useGetServiceAccountById,
|
||||
useGetServiceAccountProjectLevelPermissions,
|
||||
useGetUserWorkspaces
|
||||
} from "@app/hooks/api";
|
||||
import getLatestFileKey from "@app/pages/api/workspace/getLatestFileKey";
|
||||
|
||||
const createProjectLevelPermissionSchema = yup.object({
|
||||
privateKey: yup.string().required().label("Private Key"),
|
||||
workspace: yup.string().required().label("Workspace"),
|
||||
environment: yup.string().required().label("Environment"),
|
||||
permissions: yup
|
||||
.object()
|
||||
.shape({
|
||||
read: yup.boolean().required(),
|
||||
write: yup.boolean().required()
|
||||
})
|
||||
.defined()
|
||||
.required()
|
||||
});
|
||||
|
||||
type CreateProjectLevelPermissionForm = yup.InferType<typeof createProjectLevelPermissionSchema>;
|
||||
|
||||
type Props = {
|
||||
serviceAccountId: string;
|
||||
};
|
||||
|
||||
export const SAProjectLevelPermissionsTable = ({ serviceAccountId }: Props): JSX.Element => {
|
||||
const { data: serviceAccount } = useGetServiceAccountById(serviceAccountId);
|
||||
const { data: userWorkspaces, isLoading: isUserWorkspacesLoading } = useGetUserWorkspaces();
|
||||
const [searchPermissions, setSearchPermissions] = useState("");
|
||||
|
||||
const { data: serviceAccountWorkspacePermissions, isLoading: isPermissionsLoading } =
|
||||
useGetServiceAccountProjectLevelPermissions(serviceAccountId);
|
||||
|
||||
const createServiceAccountProjectLevelPermission =
|
||||
useCreateServiceAccountProjectLevelPermission();
|
||||
const deleteServiceAccountProjectLevelPermission =
|
||||
useDeleteServiceAccountProjectLevelPermission();
|
||||
|
||||
const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
|
||||
"addProjectLevelPermission",
|
||||
"removeProjectLevelPermission"
|
||||
] as const);
|
||||
|
||||
const [, setSelectedWorkspace] = useState<undefined | string>(undefined);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { isSubmitting }
|
||||
} = useForm<CreateProjectLevelPermissionForm>({
|
||||
resolver: yupResolver(createProjectLevelPermissionSchema)
|
||||
});
|
||||
|
||||
const onAddProjectLevelPermission = async ({
|
||||
privateKey,
|
||||
workspace,
|
||||
environment,
|
||||
permissions: { read, write }
|
||||
}: CreateProjectLevelPermissionForm) => {
|
||||
// TODO: clean up / modularize this function
|
||||
|
||||
if (!serviceAccount) return;
|
||||
|
||||
const { latestKey } = await getLatestFileKey({
|
||||
workspaceId: workspace
|
||||
});
|
||||
|
||||
verifyPrivateKey({
|
||||
privateKey,
|
||||
publicKey: serviceAccount.publicKey
|
||||
});
|
||||
|
||||
const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
|
||||
|
||||
const key = decryptAssymmetric({
|
||||
ciphertext: latestKey.encryptedKey,
|
||||
nonce: latestKey.nonce,
|
||||
publicKey: latestKey.sender.publicKey,
|
||||
privateKey: PRIVATE_KEY
|
||||
});
|
||||
|
||||
const { ciphertext, nonce } = encryptAssymmetric({
|
||||
plaintext: key,
|
||||
publicKey: serviceAccount.publicKey,
|
||||
privateKey
|
||||
});
|
||||
|
||||
await createServiceAccountProjectLevelPermission.mutateAsync({
|
||||
serviceAccountId,
|
||||
workspaceId: workspace,
|
||||
environment,
|
||||
read,
|
||||
write,
|
||||
encryptedKey: ciphertext,
|
||||
nonce
|
||||
});
|
||||
handlePopUpClose("addProjectLevelPermission");
|
||||
};
|
||||
|
||||
const onRemoveProjectLevelPermission = async () => {
|
||||
const serviceAccountWorkspacePermissionId = (
|
||||
popUp?.removeProjectLevelPermission?.data as { _id: string }
|
||||
)?._id;
|
||||
await deleteServiceAccountProjectLevelPermission.mutateAsync({
|
||||
serviceAccountId,
|
||||
serviceAccountWorkspacePermissionId
|
||||
});
|
||||
handlePopUpClose("removeProjectLevelPermission");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full bg-white/5 p-6">
|
||||
<p className="mb-4 text-xl font-semibold">Project-Level Permissions</p>
|
||||
<div className="mb-4 flex">
|
||||
<div className="mr-4 flex-1">
|
||||
<Input
|
||||
value={searchPermissions}
|
||||
onChange={(e) => setSearchPermissions(e.target.value)}
|
||||
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
|
||||
placeholder="Search service account project-level permissions..."
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
||||
onClick={() => {
|
||||
handlePopUpOpen("addProjectLevelPermission");
|
||||
reset();
|
||||
}}
|
||||
>
|
||||
Add Permission
|
||||
</Button>
|
||||
</div>
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th>Project</Th>
|
||||
<Th>Environment</Th>
|
||||
<Th>Read</Th>
|
||||
<Th>Write</Th>
|
||||
<Th aria-label="actions" />
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
{isPermissionsLoading && (
|
||||
<TableSkeleton columns={6} innerKey="service-account-project-level-permissions" />
|
||||
)}
|
||||
{!isPermissionsLoading &&
|
||||
serviceAccountWorkspacePermissions &&
|
||||
serviceAccountWorkspacePermissions.map(
|
||||
({ _id, workspace, environment, read, write }) => {
|
||||
const environmentName = workspace.environments.find(
|
||||
(env) => env.slug === environment
|
||||
)?.name;
|
||||
return (
|
||||
<Tr key={`service-account-project-level-permission-${_id}`} className="w-full">
|
||||
<Td>{workspace.name}</Td>
|
||||
<Td>{environmentName}</Td>
|
||||
<Td>
|
||||
<Checkbox id="isReadPermissionEnabled" isChecked={read} isDisabled>
|
||||
{/**/}
|
||||
</Checkbox>
|
||||
</Td>
|
||||
<Td>
|
||||
<Checkbox id="isWritePermissionEnabled" isChecked={write} isDisabled>
|
||||
{/**/}
|
||||
</Checkbox>
|
||||
</Td>
|
||||
<Td>
|
||||
<IconButton
|
||||
ariaLabel="delete"
|
||||
colorSchema="danger"
|
||||
onClick={() => handlePopUpOpen("removeProjectLevelPermission", { _id })}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</IconButton>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
)}
|
||||
{!isPermissionsLoading && serviceAccountWorkspacePermissions?.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={7} className="py-6 text-center text-bunker-400">
|
||||
<EmptyState title="No permissions found" icon={faKey} />
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
</TBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<Modal
|
||||
isOpen={popUp?.addProjectLevelPermission?.isOpen}
|
||||
onOpenChange={(isOpen) => {
|
||||
handlePopUpToggle("addProjectLevelPermission", isOpen);
|
||||
}}
|
||||
>
|
||||
<ModalContent
|
||||
title="Add a Project-Level Permission"
|
||||
subTitle="The service account will be granted scoped access to the specified project and environment"
|
||||
>
|
||||
<form onSubmit={handleSubmit(onAddProjectLevelPermission)}>
|
||||
{!isUserWorkspacesLoading && userWorkspaces && (
|
||||
<>
|
||||
<Controller
|
||||
control={control}
|
||||
defaultValue=""
|
||||
name="privateKey"
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl
|
||||
label="Service Account Private Key"
|
||||
isError={Boolean(error)}
|
||||
errorText={error?.message}
|
||||
>
|
||||
<Input {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="workspace"
|
||||
defaultValue={String(userWorkspaces?.[0]?._id)}
|
||||
render={({ field: { onChange, ...field }, fieldState: { error } }) => (
|
||||
<FormControl label="Project" errorText={error?.message}>
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => {
|
||||
onChange(e);
|
||||
setSelectedWorkspace(e);
|
||||
}}
|
||||
className="border-mine-shaft-500 w-full border"
|
||||
>
|
||||
{userWorkspaces && userWorkspaces.length > 0 ? (
|
||||
userWorkspaces.map((userWorkspace) => {
|
||||
return (
|
||||
<SelectItem
|
||||
value={userWorkspace._id}
|
||||
key={`project-${userWorkspace._id}`}
|
||||
>
|
||||
{userWorkspace.name}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<SelectItem value="none" key="target-app-none">
|
||||
No projects found
|
||||
</SelectItem>
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="environment"
|
||||
defaultValue={String(userWorkspaces?.[0]?.environments?.[0]?.slug)}
|
||||
render={({ field: { onChange, ...field } }) => {
|
||||
const environments =
|
||||
userWorkspaces?.find(
|
||||
/* eslint-disable-next-line no-underscore-dangle */
|
||||
(userWorkspace) => userWorkspace._id === control?._formValues?.workspace
|
||||
)?.environments ?? [];
|
||||
return (
|
||||
<FormControl label="Environment" className="mt-4">
|
||||
<Select
|
||||
defaultValue={field.value}
|
||||
{...field}
|
||||
onValueChange={(e) => onChange(e)}
|
||||
className="border-mine-shaft-500 w-full border"
|
||||
>
|
||||
{environments.length > 0 ? (
|
||||
environments.map((environment) => {
|
||||
return (
|
||||
<SelectItem
|
||||
value={environment.slug}
|
||||
key={`environment-${environment.slug}`}
|
||||
>
|
||||
{environment.name}
|
||||
</SelectItem>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<SelectItem value="none" key="target-app-none">
|
||||
No environments found
|
||||
</SelectItem>
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Controller
|
||||
control={control}
|
||||
name="permissions"
|
||||
defaultValue={{
|
||||
read: true,
|
||||
write: false
|
||||
}}
|
||||
render={({ field: { onChange, value }, fieldState: { error } }) => {
|
||||
const options = [
|
||||
{
|
||||
label: "Read (default)",
|
||||
value: "read"
|
||||
},
|
||||
{
|
||||
label: "Write",
|
||||
value: "write"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<FormControl
|
||||
label="Permissions"
|
||||
errorText={error?.message}
|
||||
isError={Boolean(error)}
|
||||
>
|
||||
<>
|
||||
{options.map(({ label, value: optionValue }) => {
|
||||
return (
|
||||
<Checkbox
|
||||
id={value[optionValue]}
|
||||
key={optionValue}
|
||||
className="data-[state=checked]:bg-primary"
|
||||
isChecked={value[optionValue]}
|
||||
isDisabled={optionValue === "read"}
|
||||
onCheckedChange={(state) => {
|
||||
onChange({
|
||||
...value,
|
||||
[optionValue]: state
|
||||
});
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Checkbox>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
</FormControl>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="mt-8 flex items-center">
|
||||
<Button
|
||||
className="mr-4"
|
||||
type="submit"
|
||||
isDisabled={isSubmitting}
|
||||
isLoading={isSubmitting}
|
||||
>
|
||||
Create
|
||||
</Button>
|
||||
<ModalClose asChild>
|
||||
<Button variant="plain" colorSchema="secondary">
|
||||
Cancel
|
||||
</Button>
|
||||
</ModalClose>
|
||||
</div>
|
||||
</form>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.removeProjectLevelPermission.isOpen}
|
||||
deleteKey="remove"
|
||||
title="Do you want to remove this permission from the service account?"
|
||||
onChange={(isOpen) => handlePopUpToggle("removeProjectLevelPermission", isOpen)}
|
||||
onDeleteApproved={onRemoveProjectLevelPermission}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
-1
@@ -1 +0,0 @@
|
||||
export { SAProjectLevelPermissionsTable } from "./SAProjectLevelPermissionsTable";
|
||||
-88
@@ -1,88 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { faCheck } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import * as yup from "yup";
|
||||
|
||||
import {
|
||||
Button,
|
||||
FormControl,
|
||||
Input} from "@app/components/v2";
|
||||
import {
|
||||
useGetServiceAccountById,
|
||||
useRenameServiceAccount
|
||||
} from "@app/hooks/api";
|
||||
|
||||
const formSchema = yup.object({
|
||||
name: yup.string().required().label("Service Account Name")
|
||||
});
|
||||
|
||||
type FormData = yup.InferType<typeof formSchema>;
|
||||
|
||||
type Props = {
|
||||
serviceAccountId: string;
|
||||
}
|
||||
|
||||
export const ServiceAccountNameChangeSection = ({
|
||||
serviceAccountId
|
||||
}: Props) => {
|
||||
const { data: serviceAccount, isLoading: isServiceAccountLoading } = useGetServiceAccountById(serviceAccountId);
|
||||
|
||||
const renameServiceAccount = useRenameServiceAccount();
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
formState: { isDirty, isSubmitting }
|
||||
} = useForm<FormData>({ resolver: yupResolver(formSchema) });
|
||||
|
||||
useEffect(() => {
|
||||
reset({ name: serviceAccount?.name });
|
||||
}, [serviceAccount?.name]);
|
||||
|
||||
const onFormSubmit = async ({ name }: FormData) => {
|
||||
try {
|
||||
await renameServiceAccount.mutateAsync({
|
||||
serviceAccountId,
|
||||
name
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(onFormSubmit)}
|
||||
className="rounded-md bg-white/5 p-6"
|
||||
>
|
||||
<p className="mb-4 text-xl font-semibold">Name</p>
|
||||
<div className="mb-2 w-full max-w-lg">
|
||||
{!isServiceAccountLoading && (
|
||||
<Controller
|
||||
defaultValue=""
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl isError={Boolean(error)} errorText={error?.message}>
|
||||
<Input placeholder="Type your service account name..." {...field} />
|
||||
</FormControl>
|
||||
)}
|
||||
control={control}
|
||||
name="name"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
isLoading={isSubmitting}
|
||||
color="mineshaft"
|
||||
size="sm"
|
||||
type="submit"
|
||||
isDisabled={!isDirty || isSubmitting}
|
||||
leftIcon={<FontAwesomeIcon icon={faCheck} />}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
-1
@@ -1 +0,0 @@
|
||||
export { ServiceAccountNameChangeSection } from "./ServiceAccountNameChangeSection";
|
||||
@@ -1,4 +0,0 @@
|
||||
export { CopyServiceAccountIDSection } from "./CopyServiceAccountIDSection";
|
||||
export { CopyServiceAccountPublicKeySection } from "./CopyServiceAccountPublicKeySection";
|
||||
export { SAProjectLevelPermissionsTable } from "./SAProjectLevelPermissionsTable";
|
||||
export { ServiceAccountNameChangeSection } from "./ServiceAccountNameChangeSection";
|
||||
@@ -1 +0,0 @@
|
||||
export { CreateServiceAccountPage } from "./CreateServiceAccountPage";
|
||||
@@ -1,17 +1,14 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||
import { Checkbox, EmailServiceSetupModal } from "@app/components/v2";
|
||||
import {
|
||||
useGetUser,
|
||||
useUpdateMfaEnabled} from "@app/hooks/api";
|
||||
import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
|
||||
import { usePopUp } from "@app/hooks/usePopUp";
|
||||
|
||||
import { useGetUser } from "../../../../hooks/api";
|
||||
import { User } from "../../../../hooks/api/types";
|
||||
import updateMyMfaEnabled from "../../../../pages/api/user/updateMyMfaEnabled";
|
||||
|
||||
export const MFASection = () => {
|
||||
const [isMfaEnabled, setIsMfaEnabled] = useState(false);
|
||||
const { data: user } = useGetUser();
|
||||
const { mutateAsync } = useUpdateMfaEnabled();
|
||||
const { createNotification } = useNotificationContext();
|
||||
const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
|
||||
"setUpEmail"
|
||||
@@ -19,22 +16,12 @@ export const MFASection = () => {
|
||||
|
||||
const {data: serverDetails } = useFetchServerStatus()
|
||||
|
||||
useEffect(() => {
|
||||
if (user && typeof user.isMfaEnabled !== "undefined") {
|
||||
setIsMfaEnabled(user.isMfaEnabled);
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
const toggleMfa = async (state: boolean) => {
|
||||
try {
|
||||
const newUser: User = await updateMyMfaEnabled({
|
||||
const newUser = await mutateAsync({
|
||||
isMfaEnabled: state
|
||||
});
|
||||
|
||||
if (newUser) {
|
||||
setIsMfaEnabled(newUser.isMfaEnabled);
|
||||
}
|
||||
|
||||
createNotification({
|
||||
text: `${newUser.isMfaEnabled ? "Successfully turned on two-factor authentication." : "Successfully turned off two-factor authentication."}`,
|
||||
type: "success"
|
||||
@@ -55,20 +42,22 @@ export const MFASection = () => {
|
||||
<p className="text-xl font-semibold text-mineshaft-100 mb-8">
|
||||
Two-factor Authentication
|
||||
</p>
|
||||
<Checkbox
|
||||
className="data-[state=checked]:bg-primary"
|
||||
id="isTwoFAEnabled"
|
||||
isChecked={isMfaEnabled}
|
||||
onCheckedChange={(state) => {
|
||||
if (serverDetails?.emailConfigured){
|
||||
toggleMfa(state as boolean);
|
||||
} else {
|
||||
handlePopUpOpen("setUpEmail");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Enable 2-factor authentication via your personal email.
|
||||
</Checkbox>
|
||||
{user && (
|
||||
<Checkbox
|
||||
className="data-[state=checked]:bg-primary"
|
||||
id="isTwoFAEnabled"
|
||||
isChecked={user?.isMfaEnabled}
|
||||
onCheckedChange={(state) => {
|
||||
if (serverDetails?.emailConfigured){
|
||||
toggleMfa(state as boolean);
|
||||
} else {
|
||||
handlePopUpOpen("setUpEmail");
|
||||
}
|
||||
}}
|
||||
>
|
||||
Enable 2-factor authentication via your personal email.
|
||||
</Checkbox>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
<EmailServiceSetupModal
|
||||
|
||||
+17
-35
@@ -1,30 +1,16 @@
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import {
|
||||
decryptAssymmetric,
|
||||
encryptAssymmetric
|
||||
} from "@app/components/utilities/cryptography/crypto";
|
||||
import { Checkbox } from "@app/components/v2";
|
||||
import { useWorkspace } from "@app/context";
|
||||
|
||||
import getBot from "../../../../../pages/api/bot/getBot";
|
||||
import setBotActiveStatus from "../../../../../pages/api/bot/setBotActiveStatus";
|
||||
import getLatestFileKey from "../../../../../pages/api/workspace/getLatestFileKey";
|
||||
import { useGetUserWsKey,useGetWorkspaceBot, useUpdateBotActiveStatus } from "@app/hooks/api";
|
||||
|
||||
export const E2EESection = () => {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const [bot, setBot] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (currentWorkspace) {
|
||||
// get project bot
|
||||
setBot(await getBot({
|
||||
workspaceId: currentWorkspace._id
|
||||
}));
|
||||
}
|
||||
})();
|
||||
}, [currentWorkspace]);
|
||||
const { data: bot } = useGetWorkspaceBot(currentWorkspace?._id ?? "");
|
||||
const { mutateAsync: updateBotActiveStatus } = useUpdateBotActiveStatus();
|
||||
const { data: wsKey } = useGetUserWsKey(currentWorkspace?._id ?? "");
|
||||
|
||||
/**
|
||||
* Activate bot for project by performing the following steps:
|
||||
@@ -38,14 +24,12 @@ export const E2EESection = () => {
|
||||
try {
|
||||
if (!currentWorkspace?._id) return;
|
||||
|
||||
if (bot) {
|
||||
if (bot && wsKey) {
|
||||
// case: there is a bot
|
||||
|
||||
if (!bot.isActive) {
|
||||
// bot is not active -> activate bot
|
||||
const key = await getLatestFileKey({
|
||||
workspaceId: currentWorkspace._id
|
||||
});
|
||||
|
||||
const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
|
||||
|
||||
if (!PRIVATE_KEY) {
|
||||
@@ -53,9 +37,9 @@ export const E2EESection = () => {
|
||||
}
|
||||
|
||||
const WORKSPACE_KEY = decryptAssymmetric({
|
||||
ciphertext: key.latestKey.encryptedKey,
|
||||
nonce: key.latestKey.nonce,
|
||||
publicKey: key.latestKey.sender.publicKey,
|
||||
ciphertext: wsKey.encryptedKey,
|
||||
nonce: wsKey.nonce,
|
||||
publicKey: wsKey.sender.publicKey,
|
||||
privateKey: PRIVATE_KEY
|
||||
});
|
||||
|
||||
@@ -69,22 +53,20 @@ export const E2EESection = () => {
|
||||
encryptedKey: ciphertext,
|
||||
nonce
|
||||
};
|
||||
|
||||
const botx = await setBotActiveStatus({
|
||||
botId: bot._id,
|
||||
|
||||
await updateBotActiveStatus({
|
||||
workspaceId: currentWorkspace._id,
|
||||
botKey,
|
||||
isActive: true,
|
||||
botKey
|
||||
botId: bot._id
|
||||
});
|
||||
|
||||
setBot(botx.bot);
|
||||
} else {
|
||||
// bot is active -> deactivate bot
|
||||
const botx = await setBotActiveStatus({
|
||||
await updateBotActiveStatus({
|
||||
isActive: false,
|
||||
botId: bot._id,
|
||||
isActive: false
|
||||
workspaceId: currentWorkspace._id
|
||||
});
|
||||
|
||||
setBot(botx.bot);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
Reference in New Issue
Block a user