awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-14 05:29:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into import-export-secrets

Browse Source
This commit is contained in:
mv-turtle
2023-01-06 16:07:11 -08:00
committed by GitHub
parent 9239b66b4b 53273df51f
commit 5e03a54fa8
177 changed files with 9049 additions and 4575 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/activity/[id].tsx
+145
View File
@@ -0,0 +1,145 @@
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { useTranslation } from "next-i18next";
import ActivitySideBar from 'ee/components/ActivitySideBar';
import Button from '~/components/basic/buttons/Button';
import EventFilter from '~/components/basic/EventFilter';
import NavHeader from '~/components/navigation/NavHeader';
import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
import getProjectLogs from '../../ee/api/secrets/GetProjectLogs';
import ActivityTable from '../../ee/components/ActivityTable';
interface logData {
_id: string;
channel: string;
createdAt: string;
ipAddress: string;
user: {
email: string;
};
actions: {
_id: string;
name: string;
payload: {
secretVersions: string[];
}
}[]
}
interface PayloadProps {
_id: string;
name: string;
secretVersions: string[];
}
interface logDataPoint {
_id: string;
channel: string;
createdAt: string;
ipAddress: string;
user: string;
payload: PayloadProps[];
}
/**
* This is the tab that includes all of the user activity logs
*/
export default function Activity() {
const router = useRouter();
const [eventChosen, setEventChosen] = useState('');
const [logsData, setLogsData] = useState<logDataPoint[]>([]);
const [currentOffset, setCurrentOffset] = useState(0);
const currentLimit = 10;
const [currentSidebarAction, toggleSidebar] = useState<string>()
const { t } = useTranslation();
// this use effect updates the data in case of a new filter being added
useEffect(() => {
setCurrentOffset(0);
const getLogData = async () => {
const tempLogsData = await getProjectLogs({ workspaceId: String(router.query.id), offset: 0, limit: currentLimit, userId: "", actionNames: eventChosen })
setLogsData(tempLogsData.map((log: logData) => {
return {
_id: log._id,
channel: log.channel,
createdAt: log.createdAt,
ipAddress: log.ipAddress,
user: log.user.email,
payload: log.actions.map(action => {
return {
_id: action._id,
name: action.name,
secretVersions: action.payload.secretVersions
}
})
}
}))
}
getLogData();
}, [eventChosen]);
// this use effect adds more data in case 'View More' button is clicked
useEffect(() => {
const getLogData = async () => {
const tempLogsData = await getProjectLogs({ workspaceId: String(router.query.id), offset: currentOffset, limit: currentLimit, userId: "", actionNames: eventChosen })
setLogsData(logsData.concat(tempLogsData.map((log: logData) => {
return {
_id: log._id,
channel: log.channel,
createdAt: log.createdAt,
ipAddress: log.ipAddress,
user: log.user.email,
payload: log.actions.map(action => {
return {
_id: action._id,
name: action.name,
secretVersions: action.payload.secretVersions
}
})
}
})))
}
getLogData();
}, [currentLimit, currentOffset]);
const loadMoreLogs = () => {
setCurrentOffset(currentOffset + currentLimit);
}
return (
<div className="mx-6 lg:mx-0 w-full overflow-y-scroll h-screen">
<NavHeader pageName="Project Activity" isProjectRelated={true} />
{currentSidebarAction && <ActivitySideBar toggleSidebar={toggleSidebar} currentAction={currentSidebarAction} />}
<div className="flex flex-col justify-between items-start mx-4 mt-6 mb-4 text-xl max-w-5xl px-2">
<div className="flex flex-row justify-start items-center text-3xl">
<p className="font-semibold mr-4 text-bunker-100">Activity Logs</p>
</div>
<p className="mr-4 text-base text-gray-400">
Event history for this Infisical project.
</p>
</div>
<div className="px-6 h-8 mt-2">
<EventFilter
selected={eventChosen}
select={setEventChosen}
/>
</div>
<ActivityTable
data={logsData}
toggleSidebar={toggleSidebar}
/>
<div className='flex justify-center w-full mb-6'>
<div className='items-center w-60'>
<Button text="View More" textDisabled="End of History" active={logsData.length % 10 == 0 ? true : false} onButtonPressed={loadMoreLogs} size="md" color="mineshaft"/>
</div>
</div>
</div>
);
}
Activity.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps(["activity"]);
frontend/pages/api/serviceToken/addServiceToken.ts
+16 -9
View File
@@ -5,14 +5,21 @@ interface Props {
workspaceId: string;
environment: string;
expiresIn: number;
publicKey: string;
encryptedKey: string;
nonce: string;
iv: string;
tag: string;
}
/**
* This route gets service tokens for a specific user in a project
* @param {*} param0
* @param {object} obj
* @param {string} obj.name - name of the service token
* @param {string} obj.workspaceId - workspace for which we are issuing the token
* @param {string} obj.environment - environment for which we are issuing the token
* @param {string} obj.expiresIn - how soon the service token expires in ms
* @param {string} obj.encryptedKey - encrypted project key through random symmetric encryption
* @param {string} obj.iv - obtained through symmetric encryption
* @param {string} obj.tag - obtained through symmetric encryption
* @returns
*/
const addServiceToken = ({
@@ -20,11 +27,11 @@ const addServiceToken = ({
workspaceId,
environment,
expiresIn,
publicKey,
encryptedKey,
nonce
iv,
tag
}: Props) => {
return SecurityClient.fetchCall('/api/v1/service-token/', {
return SecurityClient.fetchCall('/api/v2/service-token/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
@@ -34,13 +41,13 @@ const addServiceToken = ({
workspaceId,
environment,
expiresIn,
publicKey,
encryptedKey,
nonce
iv,
tag
})
}).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).token;
return (await res.json());
} else {
console.log('Failed to add service tokens');
}
frontend/pages/api/serviceToken/deleteServiceToken.ts
+30
View File
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
serviceTokenId: string;
}
/**
* This route revokes a specific service token
* @param {object} obj
* @param {string} obj.serviceTokenId - id of a cervice token that we want to delete
* @returns
*/
const deleteServiceToken = ({
serviceTokenId,
}: Props) => {
return SecurityClient.fetchCall('/api/v2/service-token/' + serviceTokenId, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
}).then(async (res) => {
if (res && res.status == 200) {
return (await res.json());
} else {
console.log('Failed to delete a service token');
}
});
};
export default deleteServiceToken;
frontend/pages/api/serviceToken/getServiceTokens.ts
+2 -2
View File
@@ -7,7 +7,7 @@ import SecurityClient from '~/utilities/SecurityClient';
*/
const getServiceTokens = ({ workspaceId }: { workspaceId: string }) => {
return SecurityClient.fetchCall(
'/api/v1/workspace/' + workspaceId + '/service-tokens',
'/api/v2/workspace/' + workspaceId + '/service-token-data',
{
method: 'GET',
headers: {
@@ -16,7 +16,7 @@ const getServiceTokens = ({ workspaceId }: { workspaceId: string }) => {
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).serviceTokens;
return (await res.json()).serviceTokenData;
} else {
console.log('Failed to get service tokens');
}
frontend/pages/dashboard/[id].tsx
+214 -106
View File
@@ -6,8 +6,9 @@ import { useTranslation } from "next-i18next";
import {
faArrowDownAZ,
faArrowDownZA,
faArrowLeft,
faCheck,
faCopy,
faClockRotateLeft,
faDownload,
faEye,
faEyeSlash,
@@ -18,6 +19,8 @@ import {
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Menu, Transition } from '@headlessui/react';
import { Document, YAMLSeq } from 'yaml';
import getProjectSercetSnapshotsCount from 'ee/api/secrets/GetProjectSercetSnapshotsCount';
import PITRecoverySidebar from 'ee/components/PITRecoverySidebar';
import Button from '~/components/basic/buttons/Button';
import ListBox from '~/components/basic/Listbox';
@@ -32,12 +35,13 @@ import pushKeys from '~/components/utilities/secrets/pushKeys';
import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
import guidGenerator from '~/utilities/randomId';
import { envMapping } from '../../public/data/frequentConstants';
import { envMapping, reverseEnvMapping } from '../../public/data/frequentConstants';
import getUser from '../api/user/getUser';
import checkUserAction from '../api/userActions/checkUserAction';
import registerUserAction from '../api/userActions/registerUserAction';
import getWorkspaces from '../api/workspace/getWorkspaces';
const queryString = require("query-string");
interface SecretDataProps {
type: 'personal' | 'shared';
@@ -48,6 +52,19 @@ interface SecretDataProps {
comment: string;
}
interface SnapshotProps {
id: string;
createdAt: string;
secretVersions: {
id: string;
pos: number;
type: "personal" | "shared";
environment: string;
key: string;
value: string;
}[];
}
/**
* this function finds the teh duplicates in an array
* @param arr - array of anything (e.g., with secret keys and types (personal/shared))
@@ -78,22 +95,20 @@ export default function Dashboard() {
const [workspaceId, setWorkspaceId] = useState('');
const [blurred, setBlurred] = useState(true);
const [isKeyAvailable, setIsKeyAvailable] = useState(true);
const [env, setEnv] = useState(
router.asPath.split('?').length == 1
? 'Development'
: Object.keys(envMapping).includes(router.asPath.split('?')[1])
? router.asPath.split('?')[1]
: 'Development'
);
const [env, setEnv] = useState('Development');
const [snapshotEnv, setSnapshotEnv] = useState('Development');
const [isNew, setIsNew] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [searchKeys, setSearchKeys] = useState('');
const [errorDragAndDrop, setErrorDragAndDrop] = useState(false);
const [projectIdCopied, setProjectIdCopied] = useState(false);
const [sortMethod, setSortMethod] = useState('alphabetical');
const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
const [sidebarSecretId, toggleSidebar] = useState("None");
const [PITSidebarOpen, togglePITSidebar] = useState(false);
const [sharedToHide, setSharedToHide] = useState<string[]>([]);
const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
const [numSnapshots, setNumSnapshots] = useState<number>();
const { t } = useTranslation();
const { createNotification } = useNotificationContext();
@@ -144,17 +159,38 @@ export default function Dashboard() {
useEffect(() => {
(async () => {
try {
const tempNumSnapshots = await getProjectSercetSnapshotsCount({ workspaceId: String(router.query.id) })
setNumSnapshots(tempNumSnapshots);
const userWorkspaces = await getWorkspaces();
const listWorkspaces = userWorkspaces.map((workspace) => workspace._id);
if (
!listWorkspaces.includes(router.asPath.split('/')[2].split('?')[0])
!listWorkspaces.includes(router.asPath.split('/')[2])
) {
router.push('/dashboard/' + listWorkspaces[0]);
}
if (env != router.asPath.split('?')[1]) {
router.push(router.asPath.split('?')[0] + '?' + env);
}
const user = await getUser();
setIsNew(
(Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
? true
: false
);
const userAction = await checkUserAction({
action: 'first_time_secrets_pushed'
});
setHasUserEverPushed(userAction ? true : false);
} catch (error) {
console.log('Error', error);
setData(undefined);
}
})();
}, []);
useEffect(() => {
(async () => {
try {
setIsLoading(true);
setBlurred(true);
setWorkspaceId(String(router.query.id));
@@ -176,18 +212,7 @@ export default function Dashboard() {
dataToSort?.map((item) => item.key).indexOf(item)
).includes(row.key) && row.type == 'shared'))?.map((item) => item.id)
)
const user = await getUser();
setIsNew(
(Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
? true
: false
);
const userAction = await checkUserAction({
action: 'first_time_secrets_pushed'
});
setHasUserEverPushed(userAction ? true : false);
setIsLoading(false);
} catch (error) {
console.log('Error', error);
setData(undefined);
@@ -243,9 +268,14 @@ export default function Dashboard() {
sortValuesHandler(tempdata, sortMethod == "alhpabetical" ? "-alphabetical" : "alphabetical");
};
const deleteRow = (id: string) => {
const deleteRow = ({ ids, secretName }: { ids: string[]; secretName: string; }) => {
setButtonReady(true);
setData(data!.filter((row: SecretDataProps) => row.id !== id));
toggleSidebar("None");
createNotification({
text: `${secretName} has been deleted. Remember to save changes.`,
type: 'error'
});
setData(data!.filter((row: SecretDataProps) => !ids.includes(row.id)));
};
/**
@@ -319,12 +349,21 @@ export default function Dashboard() {
/**
* Save the changes of environment variables and push them to the database
*/
const savePush = async () => {
// Format the new object with environment variables
const obj = Object.assign(
{},
...data!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment] }))
);
const savePush = async (dataToPush?: any[], envToPush?: string) => {
let obj;
// dataToPush is mostly used for rollbacks, otherwise we always take the current state data
if ((dataToPush ?? [])?.length > 0) {
obj = Object.assign(
{},
...dataToPush!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment ?? ''] }))
);
} else {
// Format the new object with environment variables
obj = Object.assign(
{},
...data!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment ?? ''] }))
);
}
// Checking if any of the secret keys start with a number - if so, don't do anything
const nameErrors = !Object.keys(obj)
@@ -348,13 +387,17 @@ export default function Dashboard() {
// Once "Save changed is clicked", disable that button
setButtonReady(false);
pushKeys({ obj, workspaceId: String(router.query.id), env });
console.log(envToPush ? envToPush : env, env, envToPush)
pushKeys({ obj, workspaceId: String(router.query.id), env: envToPush ? envToPush : env });
// If this user has never saved environment variables before, show them a prompt to read docs
if (!hasUserEverPushed) {
setCheckDocsPopUpVisible(true);
await registerUserAction({ action: 'first_time_secrets_pushed' });
}
// increasing the number of project commits
setNumSnapshots((numSnapshots ?? 0) + 1);
};
const addData = (newData: SecretDataProps[]) => {
@@ -456,27 +499,10 @@ export default function Dashboard() {
alink.click();
};
const deleteCertainRow = (id: string) => {
deleteRow(id);
const deleteCertainRow = ({ ids, secretName }: { ids: string[]; secretName: string; }) => {
deleteRow({ids, secretName});
};
/**
* This function copies the project id to the clipboard
*/
function copyToClipboard() {
const copyText = document.getElementById('myInput') as HTMLInputElement;
if (copyText) {
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value);
setProjectIdCopied(true);
setTimeout(() => setProjectIdCopied(false), 2000);
}
}
return data ? (
<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
<Head>
@@ -499,6 +525,12 @@ export default function Dashboard() {
savePush={savePush}
sharedToHide={sharedToHide}
setSharedToHide={setSharedToHide}
deleteRow={deleteCertainRow}
/>}
{PITSidebarOpen && <PITRecoverySidebar
toggleSidebar={togglePITSidebar}
chosenSnapshot={String(snapshotData?.id ? snapshotData.id : "")}
setSnapshotData={setSnapshotData}
/>}
<div className="w-full max-h-96 pb-2">
<NavHeader pageName={t("dashboard:title")} isProjectRelated={true} />
@@ -514,9 +546,22 @@ export default function Dashboard() {
/>
)}
<div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
{snapshotData &&
<div className={`flex justify-start max-w-sm mt-1 mr-2`}>
<Button
text={String(t("Go back to current"))}
onButtonPressed={() => setSnapshotData(undefined)}
color="mineshaft"
size="md"
icon={faArrowLeft}
/>
</div>}
<div className="flex flex-row justify-start items-center text-3xl">
<p className="font-semibold mr-4 mt-1">{t("dashboard:title")}</p>
{data?.length == 0 && (
<div className="font-semibold mr-4 mt-1 flex flex-row items-center">
<p>{snapshotData ? "Secret Snapshot" : t("dashboard:title")}</p>
{snapshotData && <span className='bg-primary-800 text-sm ml-4 mt-1 px-1.5 rounded-md'>{new Date(snapshotData.createdAt).toLocaleString()}</span>}
</div>
{!snapshotData && data?.length == 0 && (
<ListBox
selected={env}
data={['Development', 'Staging', 'Production', 'Testing']}
@@ -525,35 +570,17 @@ export default function Dashboard() {
)}
</div>
<div className="flex flex-row">
<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400">
<p className="mr-2 font-bold pl-4">{`${t(
"common:project-id"
)}:`}</p>
<input
type="text"
value={workspaceId}
id="myInput"
className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none"
disabled
></input>
<div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
<button
onClick={copyToClipboard}
className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
>
{projectIdCopied ? (
<FontAwesomeIcon icon={faCheck} className="pr-0.5" />
) : (
<FontAwesomeIcon icon={faCopy} />
)}
</button>
<span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-white/10 rounded-md text-center text-gray-400 text-sm">
{t("common:click-to-copy")}
</span>
</div>
<div className={`flex justify-start max-w-sm mt-1 mr-2`}>
<Button
text={String(numSnapshots + " " + t("Commits"))}
onButtonPressed={() => togglePITSidebar(true)}
color="mineshaft"
size="md"
icon={faClockRotateLeft}
/>
</div>
{(data?.length !== 0 || buttonReady) && (
<div className={`flex justify-start max-w-sm mt-2`}>
{(data?.length !== 0 || buttonReady) && !snapshotData && (
<div className={`flex justify-start max-w-sm mt-1`}>
<Button
text={String(t("common:save-changes"))}
onButtonPressed={savePush}
@@ -565,18 +592,64 @@ export default function Dashboard() {
/>
</div>
)}
{snapshotData && <div className={`flex justify-start max-w-sm mt-1`}>
<Button
text={String(t("Rollback to this snapshot"))}
onButtonPressed={async () => {
const envsToRollback = snapshotData.secretVersions.map(sv => sv.environment).filter((v, i, a) => a.indexOf(v) === i);
// Update secrets in the state only for the current environment
setData(
snapshotData.secretVersions
.filter(row => reverseEnvMapping[row.environment] == env)
.map((sv, position) => {
return {
id: sv.id, pos: position, type: sv.type, key: sv.key, value: sv.value, comment: ''
}
})
);
// Rollback each of the environments in the snapshot
// #TODO: clean up other environments
envsToRollback.map(async (envToRollback) => {
await savePush(
snapshotData.secretVersions
.filter(row => row.environment == envToRollback)
.map((sv, position) => {
return {id: sv.id, pos: position, type: sv.type, key: sv.key, value: sv.value, comment: ''}
}),
reverseEnvMapping[envToRollback]
);
});
setSnapshotData(undefined);
createNotification({
text: `Rollback has been performed successfully.`,
type: 'success'
});
}}
color="primary"
size="md"
active={buttonReady}
/>
</div>}
</div>
</div>
<div className="mx-6 w-full pr-12">
<div className="flex flex-col max-w-5xl pb-1">
<div className="w-full flex flex-row items-start">
{data?.length !== 0 && (
{(snapshotData || data?.length !== 0) && (
<>
<ListBox
{!snapshotData
? <ListBox
selected={env}
data={['Development', 'Staging', 'Production', 'Testing']}
onChange={setEnv}
/>
: <ListBox
selected={snapshotEnv}
data={['Development', 'Staging', 'Production', 'Testing']}
onChange={setSnapshotEnv}
/>}
<div className="h-10 w-full bg-white/5 hover:bg-white/10 ml-2 flex items-center rounded-md flex flex-row items-center">
<FontAwesomeIcon
className="bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
@@ -589,7 +662,7 @@ export default function Dashboard() {
placeholder={String(t("dashboard:search-keys"))}
/>
</div>
<div className="ml-2 min-w-max flex flex-row items-start justify-start">
{!snapshotData && <div className="ml-2 min-w-max flex flex-row items-start justify-start">
<Button
onButtonPressed={() => reorderRows(1)}
color="mineshaft"
@@ -601,7 +674,7 @@ export default function Dashboard() {
}
/>
</div>
<div className="ml-2 min-w-max flex flex-row items-start justify-start">
{!snapshotData && <div className="ml-2 min-w-max flex flex-row items-start justify-start">
<Menu
as="div"
className="relative inline-block text-left"
@@ -645,7 +718,7 @@ export default function Dashboard() {
</Menu.Items>
</Transition>
</Menu>
</div>
</div>}
<div className="ml-2 min-w-max flex flex-row items-start justify-start">
<Button
onButtonPressed={changeBlurred}
@@ -654,7 +727,7 @@ export default function Dashboard() {
icon={blurred ? faEye : faEyeSlash}
/>
</div>
<div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
{!snapshotData && <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
<Button
text={String(t("dashboard:add-key"))}
onButtonPressed={addRow}
@@ -668,34 +741,69 @@ export default function Dashboard() {
<span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
</span>
)}
</div>
</div>}
</>
)}
</div>
</div>
{data?.length !== 0 ? (
{isLoading ? (
<div className="flex items-center justify-center h-full my-48">
<Image
src="/images/loading/loading.gif"
height={60}
width={100}
alt="infisical loading indicator"
></Image>
</div>
) : (
data?.length !== 0 ? (
<div className="flex flex-col w-full mt-1 mb-2">
<div
className={`max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar`}
>
<div className="px-1 pt-2 bg-mineshaft-800 rounded-md p-2">
{data?.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
<KeyPair
{!snapshotData && data?.filter(row => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
<KeyPair
key={keyPair.id}
keyPair={keyPair}
deleteRow={deleteCertainRow}
modifyValue={listenChangeValue}
modifyKey={listenChangeKey}
isBlurred={blurred}
isDuplicate={findDuplicates(
data?.map((item) => item.key + item.type)
)?.includes(keyPair.key + keyPair.type)}
toggleSidebar={toggleSidebar}
sidebarSecretId={sidebarSecretId}
/>
))}
isDuplicate={findDuplicates(
data?.map((item) => item.key + item.type)
)?.includes(keyPair.key + keyPair.type)}
toggleSidebar={toggleSidebar}
sidebarSecretId={sidebarSecretId}
isSnapshot={false}
/>
))}
{snapshotData && snapshotData.secretVersions?.sort((a, b) => a.key.localeCompare(b.key))
.filter(row => reverseEnvMapping[row.environment] == snapshotEnv)
.filter(row => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
.filter(row => !(snapshotData.secretVersions?.filter(row => (snapshotData.secretVersions
?.map((item) => item.key)
.filter(
(item, index) =>
index !==
snapshotData.secretVersions?.map((item) => item.key).indexOf(item)
).includes(row.key) && row.type == 'shared'))?.map((item) => item.id).includes(row.id) && row.type == 'shared')).map((keyPair) => (
<KeyPair
key={keyPair.id}
keyPair={keyPair}
modifyValue={listenChangeValue}
modifyKey={listenChangeKey}
isBlurred={blurred}
isDuplicate={findDuplicates(
data?.map((item) => item.key + item.type)
)?.includes(keyPair.key + keyPair.type)}
toggleSidebar={toggleSidebar}
sidebarSecretId={sidebarSecretId}
isSnapshot={true}
/>
))}
</div>
<div className="w-full max-w-5xl px-2 pt-3">
{!snapshotData && <div className="w-full max-w-5xl px-2 pt-3">
<DropZone
setData={addData}
setErrorDragAndDrop={setErrorDragAndDrop}
@@ -705,12 +813,12 @@ export default function Dashboard() {
keysExist={true}
numCurrentRows={data.length}
/>
</div>
</div>}
</div>
</div>
) : (
<div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
{isKeyAvailable && (
{isKeyAvailable && !snapshotData && (
<DropZone
setData={setData}
setErrorDragAndDrop={setErrorDragAndDrop}
@@ -739,7 +847,7 @@ export default function Dashboard() {
</>
))}
</div>
)}
))}
</div>
</div>
</div>
frontend/pages/home/[id].tsx
+2 -2
View File
@@ -1,6 +1,7 @@
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useTranslation } from "next-i18next";
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { faSlack } from '@fortawesome/free-brands-svg-icons';
import {
@@ -13,12 +14,11 @@ import {
faUserPlus
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useTranslation } from "next-i18next";
import onboardingCheck from '~/components/utilities/checks/OnboardingCheck';
import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
import registerUserAction from '../api/userActions/registerUserAction';
import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
type ItemProps = {
text: string;
frontend/pages/noprojects.js
+1
View File
@@ -1,5 +1,6 @@
import React from "react";
import Image from "next/image";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
export default function NoProjects() {
frontend/pages/password-reset.tsx
+1 -1
View File
@@ -8,11 +8,11 @@ import Button from "~/components/basic/buttons/Button";
import InputField from "~/components/basic/InputField";
import passwordCheck from "~/components/utilities/checks/PasswordCheck";
import Aes256Gcm from "~/components/utilities/cryptography/aes-256-gcm";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
import EmailVerifyOnPasswordReset from "./api/auth/EmailVerifyOnPasswordReset";
import getBackupEncryptedPrivateKey from "./api/auth/getBackupEncryptedPrivateKey";
import resetPasswordOnAccountRecovery from "./api/auth/resetPasswordOnAccountRecovery";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
const queryString = require("query-string");
const nacl = require("tweetnacl");
frontend/pages/requestnewinvite.js → frontend/pages/requestnewinvite.tsx
+10 -8
View File
@@ -2,6 +2,10 @@ import React from "react";
import Head from "next/head";
import Image from "next/image";
/**
* This is the page that shows up when a user's invitation
* to join a project/organization on Infisical has expired
*/
export default function RequestNewInvite() {
return (
<div className="bg-bunker-700 md:h-screen flex flex-col justify-between">
@@ -9,16 +13,14 @@ export default function RequestNewInvite() {
<title>Request a New Invite</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<div className="flex flex-col items-center justify-center text-bunker-200 h-screen w-screen mt-24">
<p className="text-4xl text-bunker-100">Oops, your invite has expired.</p>
<p className="text-lg my-6">Ask the administrator for a new one.</p>
<p className="text-md text-bunker-400 max-w-sm text-center">
Note: If it still {"doesn't work"}, please reach out to us at
<div className="flex flex-col items-center justify-center text-bunker-200 h-screen w-screen mt-8">
<p className="text-4xl text-primary-100">Oops, your invite has expired.</p>
<p className="text-lg my-4">Ask your admin for a new one.</p>
<p className="text-sm text-bunker-400 max-w-xs px-7 text-center leading-tight">
<span className="bg-primary-500/40 text-black px-1 rounded-md">Note:</span> If it still {"doesn't work"}, please reach out to us at
support@infisical.com
</p>
<div
className=""
>
<div className="">
<Image
src="/images/invitation-expired.svg"
height={500}
frontend/pages/settings/project/[id].js
+70 -53
View File
@@ -2,12 +2,13 @@ import { useEffect, useRef, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
import { faCheck, faCopy, faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from "~/components/basic/buttons/Button";
import AddServiceTokenDialog from "~/components/basic/dialog/AddServiceTokenDialog";
import InputField from "~/components/basic/InputField";
import ServiceTokenTable from "~/components/basic/table/ServiceTokenTable";
import ServiceTokenTable from "~/components/basic/table/ServiceTokenTable.tsx";
import NavHeader from "~/components/navigation/NavHeader";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
@@ -16,6 +17,7 @@ import deleteWorkspace from "../../api/workspace/deleteWorkspace";
import getWorkspaces from "../../api/workspace/getWorkspaces";
import renameWorkspace from "../../api/workspace/renameWorkspace";
export default function SettingsBasic() {
const [buttonReady, setButtonReady] = useState(false);
const router = useRouter();
@@ -26,9 +28,28 @@ export default function SettingsBasic() {
const [isAddOpen, setIsAddOpen] = useState(false);
let [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] =
useState(false);
const [projectIdCopied, setProjectIdCopied] = useState(false);
const { t } = useTranslation();
/**
* This function copies the project id to the clipboard
*/
function copyToClipboard() {
// const copyText = document.getElementById('myInput') as HTMLInputElement;
const copyText = document.getElementById('myInput')
if (copyText) {
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
navigator.clipboard.writeText(copyText.value);
setProjectIdCopied(true);
setTimeout(() => setProjectIdCopied(false), 2000);
}
}
useEffect(async () => {
let userWorkspaces = await getWorkspaces();
userWorkspaces.map((userWorkspace) => {
@@ -103,6 +124,8 @@ export default function SettingsBasic() {
workspaceId={router.query.id}
closeModal={closeAddServiceTokenModal}
workspaceName={workspaceName}
serviceTokens={serviceTokens}
setServiceTokens={setServiceTokens}
/>
<div className="flex flex-row mr-6 max-w-5xl">
<div className="w-full max-h-screen pb-2 overflow-y-auto">
@@ -124,7 +147,7 @@ export default function SettingsBasic() {
<div className="flex flex-col">
<div className="min-w-md mt-2 flex flex-col items-start">
<div className="bg-white/5 rounded-md px-6 pt-6 pb-4 flex flex-col items-start flex flex-col items-start w-full mb-6 pt-2">
<p className="text-xl font-semibold mb-4">
<p className="text-xl font-semibold mb-4 mt-2">
{t("common:display-name")}
</p>
<div className="max-h-28 w-full max-w-md mr-auto">
@@ -150,7 +173,7 @@ export default function SettingsBasic() {
</div>
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-6 pb-2 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4">
<div className="bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4">
<p className="text-xl font-semibold self-start">
{t("common:project-id")}
</p>
@@ -169,28 +192,57 @@ export default function SettingsBasic() {
{t("settings-project:docs")}
</a>
</p>
<div className="max-h-28 w-ful">
<InputField
type="varName"
value={router.query.id}
placeholder=""
isRequired
static
text={t("settings-project:auto-generated")}
/>
<p className="mt-4 text-xs text-bunker-300">{t("settings-project:auto-generated")}</p>
<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mb-3 mr-2 rounded-md text-gray-400">
<p className="mr-2 font-bold pl-4">{`${t(
"common:project-id"
)}:`}</p>
<input
type="text"
value={workspaceId}
id="myInput"
className="bg-white/0 text-gray-400 py-2 w-60 px-2 min-w-md outline-none"
disabled
></input>
<div className="group font-normal group relative inline-block text-gray-400 underline hover:text-primary duration-200">
<button
onClick={copyToClipboard}
className="pl-4 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
>
{projectIdCopied ? (
<FontAwesomeIcon icon={faCheck} className="pr-0.5" />
) : (
<FontAwesomeIcon icon={faCopy} />
)}
</button>
<span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full pl-3 py-2 bg-bunker-800 rounded-md text-center text-gray-400 text-sm">
{t("common:click-to-copy")}
</span>
</div>
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-6 flex flex-col items-start flex flex-col items-start w-full mt-4 mb-4 pt-2">
<div className="bg-white/5 rounded-md px-6 pt-4 flex flex-col items-start flex flex-col items-start w-full mt-4 mb-4 pt-2">
<div className="flex flex-row justify-between w-full">
<div className="flex flex-col w-full">
<p className="text-xl font-semibold mb-3">
{t("section-token:service-tokens")}
</p>
<p className="text-base text-gray-400 mb-4">
<p className="text-sm text-gray-400">
{t("section-token:service-tokens-description")}
</p>
<p className="text-sm text-gray-400 mb-4">
Please, make sure you are on the
<a
className="text-primary underline underline-offset-2 ml-1"
href="https://infisical.com/docs/cli/overview"
target="_blank"
rel="noreferrer"
>
latest version of CLI
</a>.
</p>
</div>
<div className="w-48">
<div className="w-48 mt-2">
<Button
text={t("section-token:add-new")}
onButtonPressed={() => {
@@ -205,47 +257,12 @@ export default function SettingsBasic() {
<ServiceTokenTable
data={serviceTokens}
workspaceName={workspaceName}
setServiceTokens={setServiceTokens}
/>
</div>
{/* <div className="bg-white/5 rounded-md px-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pb-6 pt-6">
<p className="text-xl font-semibold self-start">
Project Environments
</p>
<p className="text-md mr-1 text-gray-400 mt-2 self-start">
Choose which environments will show up
in your Dashboard. Some common ones
include Development, Staging, and
Production. Often, teams choose to add
Testing.
</p>
<p className="text-sm mr-1 text-gray-500 self-start">
Note: the text in brackets shows how
these environmant should be accessed in
CLI.
</p>
<div className="rounded-md h-10 w-full mr-auto mt-4 flex flex-row">
{envOptions.map((env) => (
<div className="bg-white/5 hover:bg-white/10 duration-200 h-full w-max px-3 flex flex-row items-center justify-between rounded-md mr-1 text-sm">
{env}
<XIcon
className="h-5 w-5 ml-2 mt-0.5 text-white cursor-pointer"
aria-hidden="true"
/>
</div>
))}
<div className="group bg-white/5 hover:bg-primary hover:text-black duration-200 h-full w-max py-1 px-3 flex flex-row items-center justify-between rounded-md mr-1 cursor-pointer text-sm font-semibold">
<PlusIcon
className="h-5 w-5 text-white mr-2 group-hover:text-black"
aria-hidden="true"
/>
Add
</div>
</div>
</div> */}
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-6 pb-6 border-l border-red pl-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pb-4 pt-2">
<div className="bg-white/5 rounded-md px-6 pt-4 pb-6 border-l border-red pl-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pb-4 pt-2">
<p className="text-xl font-bold text-red">
{t("settings-project:danger-zone")}
</p>
frontend/pages/signupinvite.js
+3 -3
View File
@@ -141,16 +141,16 @@ export default function SignupInvite() {
// Step 4 of the sign up process (download the emergency kit pdf)
const stepConfirmEmail = (
<div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg mx-auto h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
<p className="text-4xl text-center font-semibold mb-8 flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
<p className="text-4xl text-center font-semibold mb-6 flex justify-center text-primary-100">
Confirm your email
</p>
<Image
src="/images/envelope.svg"
src="/images/dragon-signupinvite.svg"
height={262}
width={410}
alt="verify email"
></Image>
<div className="flex max-w-max flex-col items-center justify-center md:p-2 max-h-24 max-w-md mx-auto text-lg px-4 mt-4 mb-2">
<div className="flex max-w-max flex-col items-center justify-center md:p-2 max-h-24 max-w-md mx-auto text-lg px-4 mt-10 mb-2">
<Button
text="Confirm Email"
onButtonPressed={async () => {