chore(frontend): changed source code to src folder from root

This commit is contained in:
akhilmhdh
2023-01-16 00:34:22 +05:30
parent c563548a1c
commit 63e9d83ba4
193 changed files with 280 additions and 33 deletions
+39
View File
@@ -0,0 +1,39 @@
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
export default function Custom404() {
return (
<div className='bg-bunker-800 md:h-screen flex flex-col justify-between'>
<Head>
<title>Infisical | Page Not Found</title>
<link rel='icon' href='/infisical.ico' />
</Head>
<div className='flex flex-col items-center justify-center text-gray-200 h-screen w-screen'>
<p className='text-4xl mt-32'>Oops, something went wrong</p>
<p className='mt-2 mb-1 text-lg'>
Think this is a mistake? Email{' '}
<a
className='text-primary underline underline-offset-4'
href='mailto:[email protected]'
>
team@infisical.com
</a>{' '}
and we`ll fix it!{' '}
</p>
<Link
href='/dashboard'
className='bg-mineshaft-500 mt-8 py-2 px-4 rounded-md hover:bg-primary diration-200 hover:text-black cursor-pointer font-semibold'
>
Go to Dashboard
</Link>
<Image
src='/images/dragon-404.svg'
height={554}
width={942}
alt='infisical dragon - page not found'
></Image>
</div>
</div>
);
}
+90
View File
@@ -0,0 +1,90 @@
import { useEffect } from 'react';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { appWithTranslation } from 'next-i18next';
import { config } from '@fortawesome/fontawesome-svg-core';
import Layout from '~/components/basic/Layout';
import NotificationProvider from '~/components/context/Notifications/NotificationProvider';
import RouteGuard from '~/components/RouteGuard';
import { publicPaths } from '~/const';
import Telemetry from '~/utilities/telemetry/Telemetry';
import '@fortawesome/fontawesome-svg-core/styles.css';
import '../styles/globals.css';
config.autoAddCss = false;
type NextAppProp = AppProps & {
Component: AppProps['Component'] & { requireAuth: boolean };
};
const App = ({
Component,
pageProps,
...appProps
}: NextAppProp): JSX.Element => {
const router = useRouter();
useEffect(() => {
const storedLang = localStorage.getItem('lang');
if (router.locale ?? 'en' !== storedLang ?? 'en') {
router.push(router.asPath, router.asPath, {
locale: storedLang ?? 'en',
});
}
}, [router.locale, router.pathname]);
useEffect(() => {
// Init for auto capturing
const telemetry = new Telemetry().getInstance();
const handleRouteChange = () => {
if (typeof window !== 'undefined') {
telemetry.capture('$pageview');
}
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router.events]);
// If it's one of these routes, don't add the layout (e.g., these routes are external)
if (
publicPaths.includes('/' + appProps.router.pathname.split('/')[1]) ||
!Component.requireAuth
) {
return <Component {...pageProps} />;
}
return (
<RouteGuard>
<NotificationProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</NotificationProvider>
</RouteGuard>
);
};
export default appWithTranslation(App);
{
/* <Script
src="https://www.googletagmanager.com/gtag/js?id=G-DQ1XLJJGG1"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DQ1XLJJGG1');
`}
</Script> */
}
+151
View File
@@ -0,0 +1,151 @@
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { useTranslation } from "next-i18next";
import ActivitySideBar from '@app/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 [isLoading, setIsLoading] = useState(false);
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 () => {
setIsLoading(true);
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
}
})
}
}))
setIsLoading(false);
}
getLogData();
}, [eventChosen]);
// this use effect adds more data in case 'View More' button is clicked
useEffect(() => {
const getLogData = async () => {
setIsLoading(true);
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
}
})
}
})))
setIsLoading(false);
}
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">{t("activity:title")}</p>
</div>
<p className="mr-4 text-base text-gray-400">
{t("activity:subtitle")}
</p>
</div>
<div className="px-6 h-8 mt-2">
<EventFilter
selected={eventChosen}
select={setEventChosen}
/>
</div>
<ActivityTable
data={logsData}
toggleSidebar={toggleSidebar}
isLoading={isLoading}
/>
<div className='flex justify-center w-full mb-6'>
<div className='items-center w-60'>
<Button text={String(t("common:view-more"))} textDisabled={String(t("common: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", "common"]);
@@ -0,0 +1,37 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
name: string;
expiresIn: number;
}
/**
* This route adds an API key for the user
* @param {object} obj
* @param {string} obj.name - name of the API key
* @param {string} obj.expiresIn - how soon the API key expires in ms
* @returns
*/
const addAPIKey = ({
name,
expiresIn,
}: Props) => {
return SecurityClient.fetchCall('/api/v2/api-key/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name,
expiresIn
})
}).then(async (res) => {
if (res && res.status == 200) {
return (await res.json());
} else {
console.log('Failed to add API key');
}
});
};
export default addAPIKey;
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
apiKeyId: string;
}
/**
* This route revokes the API key with id [apiKeyId]
* @param {object} obj
* @param {string} obj.apiKeyId - id of the API key to delete
* @returns
*/
const deleteAPIKey = ({
apiKeyId
}: Props) => {
return SecurityClient.fetchCall('/api/v2/api-key/' + apiKeyId, {
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 API key');
}
});
};
export default deleteAPIKey;
@@ -0,0 +1,26 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route gets API keys for the user
* @param {*} param0
* @returns
*/
const getAPIKeys = () => {
return SecurityClient.fetchCall(
'/api/v2/api-key',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).apiKeyData;
} else {
console.log('Failed to get API keys');
}
});
};
export default getAPIKeys;
@@ -0,0 +1,47 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
encryptedPrivateKey: string;
iv: string;
tag: string;
salt: string;
verifier: string;
clientProof: string;
}
/**
* This is the second step of the change password process (pake)
* @param {*} clientPublicKey
* @returns
*/
const changePassword2 = ({
encryptedPrivateKey,
iv,
tag,
salt,
verifier,
clientProof
}: Props) => {
return SecurityClient.fetchCall('/api/v1/password/change-password', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
clientProof: clientProof,
encryptedPrivateKey: encryptedPrivateKey,
iv: iv,
tag: tag,
salt: salt,
verifier: verifier
})
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to change the password');
}
});
};
export default changePassword2;
+16
View File
@@ -0,0 +1,16 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This function is used to check if the user is authenticated.
* To do that, we get their tokens from cookies, and verify if they are good.
*/
const checkAuth = async () => {
return SecurityClient.fetchCall('/api/v1/auth/checkAuth', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
}).then((res) => res);
};
export default checkAuth;
@@ -0,0 +1,26 @@
interface Props {
email: string;
code: string;
}
/**
* This route check the verification code from the email that user just recieved
* @param {object} obj
* @param {string} obj.email
* @param {string} obj.code
* @returns
*/
const checkEmailVerificationCode = ({ email, code }: Props) => {
return fetch('/api/v1/signup/email/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
code: code
})
});
};
export default checkEmailVerificationCode;
@@ -0,0 +1,66 @@
interface Props {
email: string;
firstName: string;
lastName: string;
publicKey: string;
ciphertext: string;
organizationName: string;
iv: string;
tag: string;
salt: string;
verifier: string;
token: string;
}
/**
* This function is called in the end of the signup process.
* It sends all the necessary nformation to the server.
* @param {object} obj
* @param {string} obj.email - email of the user completing signup
* @param {string} obj.firstName - first name of the user completing signup
* @param {string} obj.lastName - last name of the user completing sign up
* @param {string} obj.organizationName - organization name for this user (usually, [FIRST_NAME]'s organization)
* @param {string} obj.publicKey - public key of the user completing signup
* @param {string} obj.ciphertext
* @param {string} obj.iv
* @param {string} obj.tag
* @param {string} obj.salt
* @param {string} obj.verifier
* @param {string} obj.token - token that confirms a user's identity
* @returns
*/
const completeAccountInformationSignup = ({
email,
firstName,
lastName,
organizationName,
publicKey,
ciphertext,
iv,
tag,
salt,
verifier,
token
}: Props) => {
return fetch('/api/v1/signup/complete-account/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + token
},
body: JSON.stringify({
email,
firstName,
lastName,
publicKey,
encryptedPrivateKey: ciphertext,
organizationName,
iv,
tag,
salt,
verifier
})
});
};
export default completeAccountInformationSignup;
@@ -0,0 +1,62 @@
interface Props {
email: string;
firstName: string;
lastName: string;
publicKey: string;
ciphertext: string;
iv: string;
tag: string;
salt: string;
verifier: string;
token: string;
}
/**
* This function is called in the end of the signup process.
* It sends all the necessary nformation to the server.
* @param {object} obj
* @param {string} obj.email - email of the user completing signupinvite flow
* @param {string} obj.firstName - first name of the user completing signupinvite flow
* @param {string} obj.lastName - last name of the user completing signupinvite flow
* @param {string} obj.publicKey - public key of the user completing signupinvite flow
* @param {string} obj.ciphertext
* @param {string} obj.iv
* @param {string} obj.tag
* @param {string} obj.salt
* @param {string} obj.verifier
* @param {string} obj.token - token that confirms a user's identity
* @returns
*/
const completeAccountInformationSignupInvite = ({
email,
firstName,
lastName,
publicKey,
ciphertext,
iv,
tag,
salt,
verifier,
token
}: Props) => {
return fetch('/api/v1/signup/complete-account/invite', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + token
},
body: JSON.stringify({
email: email,
firstName: firstName,
lastName: lastName,
publicKey: publicKey,
encryptedPrivateKey: ciphertext,
iv: iv,
tag: tag,
salt: salt,
verifier: verifier
})
});
};
export default completeAccountInformationSignupInvite;
@@ -0,0 +1,34 @@
interface Props {
email: string;
code: string;
}
/**
* This is the second part of the account recovery step (a user needs to verify their email).
* A user need to click on a button in a magic link page
* @param {object} obj
* @param {object} obj.email - email of a user that is trying to recover access to their account
* @param {object} obj.code - token that a use received via the magic link
* @returns
*/
const EmailVerifyOnPasswordReset = async ({ email, code }: Props) => {
const response = await fetch('/api/v1/password/email/password-reset-verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
code: code
})
});
if (response?.status === 200) {
return response;
}
throw new Error(
'Something went wrong during email verification on password reset.'
);
};
export default EmailVerifyOnPasswordReset;
@@ -0,0 +1,52 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
encryptedPrivateKey: string;
iv: string;
tag: string;
salt: string;
verifier: string;
clientProof: string;
}
/**
* This is the route that issues a backup private key that will afterwards be added into a pdf
* @param {object} obj
* @param {string} obj.encryptedPrivateKey
* @param {string} obj.iv
* @param {string} obj.tag
* @param {string} obj.salt
* @param {string} obj.verifier
* @param {string} obj.clientProof
* @returns
*/
const issueBackupPrivateKey = ({
encryptedPrivateKey,
iv,
tag,
salt,
verifier,
clientProof
}: Props) => {
return SecurityClient.fetchCall('/api/v1/password/backup-private-key', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
clientProof: clientProof,
encryptedPrivateKey: encryptedPrivateKey,
iv: iv,
tag: tag,
salt: salt,
verifier: verifier
})
}).then((res) => {
if (res?.status !== 200) {
console.log('Failed to issue the backup key');
}
return res;
});
};
export default issueBackupPrivateKey;
+32
View File
@@ -0,0 +1,32 @@
interface Login1 {
serverPublicKey: string;
salt: string;
}
/**
* This is the first step of the login process (pake)
* @param {*} email
* @param {*} clientPublicKey
* @returns
*/
const login1 = async (email: string, clientPublicKey: string) => {
const response = await fetch("/api/v1/auth/login1", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: email,
clientPublicKey,
}),
});
// need precise error handling about the status code
if (response?.status === 200) {
const data = (await response.json()) as unknown as Login1;
return data;
}
throw new Error("Wrong password");
};
export default login1;
+36
View File
@@ -0,0 +1,36 @@
interface Login2Response {
encryptedPrivateKey: string;
iv: string;
publicKey: string;
tag: string;
token: string;
}
/**
* This is the second step of the login process
* @param {*} email
* @param {*} clientPublicKey
* @returns
*/
const login2 = async (email: string, clientProof: string) => {
const response = await fetch("/api/v1/auth/login2", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: email,
clientProof,
}),
credentials: "include",
});
// need precise error handling about the status code
if (response.status == 200) {
const data = (await response.json()) as unknown as Login2Response;
return data;
}
throw new Error("Password verification failed");
};
export default login2;
+31
View File
@@ -0,0 +1,31 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route logs the user out. Note: the user should authorized to do this.
* We first try to log out - if the authorization fails (response.status = 401), we refetch the new token, and then retry
*/
const logout = async () => {
return SecurityClient.fetchCall('/api/v1/auth/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include'
}).then((res) => {
if (res?.status == 200) {
SecurityClient.setToken('');
// Delete the cookie by not setting a value; Alternatively clear the local storage
localStorage.setItem('publicKey', '');
localStorage.setItem('encryptedPrivateKey', '');
localStorage.setItem('iv', '');
localStorage.setItem('tag', '');
localStorage.setItem('PRIVATE_KEY', '');
console.log('User logged out', res);
return res;
} else {
console.log('Failed to log out');
}
});
};
export default logout;
+30
View File
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
clientPublicKey: string;
}
/**
* This is the first step of the change password process (pake)
* @param {string} clientPublicKey
* @returns
*/
const SRP1 = ({ clientPublicKey }: Props) => {
return SecurityClient.fetchCall('/api/v1/password/srp1', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
clientPublicKey
})
}).then(async (res) => {
if (res && res.status == 200) {
return await res.json();
} else {
console.log('Failed to do the first step of SRP');
}
});
};
export default SRP1;
@@ -0,0 +1,33 @@
interface Props {
email: string;
}
/**
* This is the first of the account recovery step (a user needs to verify their email).
* It will send an email containing a magic link to start the account recovery flow.
* @param {object} obj
* @param {object} obj.email - email of a user that is trying to recover access to their account
* @returns
*/
const SendEmailOnPasswordReset = async ({ email }: Props) => {
const response = await fetch('/api/v1/password/email/password-reset', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email
})
});
// need precise error handling about the status code
if (response?.status === 200) {
const data = await response.json();
return data;
}
throw new Error(
'Something went wrong while sending the email verification for password reset.'
);
};
export default SendEmailOnPasswordReset;
@@ -0,0 +1,17 @@
/**
* This route send the verification email to the user's email (contains a 6-digit verification code)
* @param {*} email
*/
const sendVerificationEmail = (email: string) => {
fetch('/api/v1/signup/email/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email
})
});
};
export default sendVerificationEmail;
+17
View File
@@ -0,0 +1,17 @@
const token = async () => {
return fetch('/api/v1/auth/token', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
credentials: 'include'
}).then(async (res) => {
if (res.status == 200) {
return (await res.json()).token;
} else {
console.log('Getting a new token failed');
}
});
};
export default token;
@@ -0,0 +1,26 @@
interface Props {
email: string;
code: string;
}
/**
* This route verifies the signup invite link
* @param {object} obj
* @param {string} obj.email - email that a user is trying to verify
* @param {string} obj.code - code that a user received to the abovementioned email
* @returns
*/
const verifySignupInvite = ({ email, code }: Props) => {
return fetch('/api/v1/invite-org/verify', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email,
code
})
});
};
export default verifySignupInvite;
@@ -0,0 +1,26 @@
/**
* This is the route that get an encrypted private key (will be decrypted with a backup key)
* @param {object} obj
* @param {object} obj.verificationToken - this is the token that confirms that a user is the right one
* @returns
*/
const getBackupEncryptedPrivateKey = ({
verificationToken
}: {
verificationToken: string;
}) => {
return fetch('/api/v1/password/backup-private-key', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + verificationToken
}
}).then(async (res) => {
if (res?.status !== 200) {
console.log('Failed to get the backup key');
}
return (await res?.json())?.backupPrivateKey;
});
};
export default getBackupEncryptedPrivateKey;
@@ -0,0 +1,10 @@
const publicKeyInfisical = () => {
return fetch('/api/v1/key/publicKey/infisical', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
};
export default publicKeyInfisical;
@@ -0,0 +1,50 @@
interface Props {
verificationToken: string;
encryptedPrivateKey: string;
iv: string;
tag: string;
salt: string;
verifier: string;
}
/**
* This is the route that resets the account password if all the previus steps were passed
* @param {object} obj
* @param {object} obj.verificationToken - this is the token that confirms that a user is the right one
* @param {object} obj.encryptedPrivateKey - the new encrypted private key (encrypted using the new password)
* @param {object} obj.iv
* @param {object} obj.tag
* @param {object} obj.salt
* @param {object} obj.verifier
* @returns
*/
const resetPasswordOnAccountRecovery = ({
verificationToken,
encryptedPrivateKey,
iv,
tag,
salt,
verifier
}: Props) => {
return fetch('/api/v1/password/password-reset', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer ' + verificationToken
},
body: JSON.stringify({
encryptedPrivateKey: encryptedPrivateKey,
iv: iv,
tag: tag,
salt: salt,
verifier: verifier
})
}).then(async (res) => {
if (res?.status !== 200) {
console.log('Failed to get the backup key');
}
return res;
});
};
export default resetPasswordOnAccountRecovery;
+31
View File
@@ -0,0 +1,31 @@
import SecurityClient from "~/utilities/SecurityClient";
interface Props {
workspaceId: string;
}
/**
* This function fetches the bot for a project
* @param {Object} obj
* @param {String} obj.workspaceId
* @returns
*/
const getBot = async ({ workspaceId }: Props) => {
return SecurityClient.fetchCall(
"/api/v1/bot/" + workspaceId,
{
method: "GET",
headers: {
"Content-Type": "application/json",
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).bot;
} else {
console.log("Failed to get bot for project");
}
});
};
export default getBot;
@@ -0,0 +1,46 @@
import SecurityClient from "~/utilities/SecurityClient";
interface BotKey {
encryptedKey: string;
nonce: string;
}
interface Props {
botId: string;
isActive: boolean;
botKey: BotKey;
}
/**
* This function sets the active status of a bot and shares a copy of
* the project key (encrypted under the bot's public key) with the
* project's bot
* @param {Object} obj
* @param {String} obj.botId
* @param {String} obj.isActive
* @param {Object} obj.botKey
* @returns
*/
const setBotActiveStatus = async ({ botId, isActive, botKey }: Props) => {
return SecurityClient.fetchCall(
"/api/v1/bot/" + botId + "/active",
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
isActive,
botKey
})
}
).then(async (res) => {
if (res && res.status == 200) {
return await res.json();
} else {
console.log("Failed to get bot for project");
}
});
};
export default setBotActiveStatus;
@@ -0,0 +1,29 @@
import SecurityClient from '~/utilities/SecurityClient';
type NewEnvironmentInfo = {
environmentSlug: string;
environmentName: string;
};
/**
* This route deletes a specified workspace.
* @param {*} workspaceId
* @returns
*/
const createEnvironment = (workspaceId:string, newEnv: NewEnvironmentInfo) => {
return SecurityClient.fetchCall(`/api/v2/workspace/${workspaceId}/environments`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newEnv)
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to create environment');
}
});
};
export default createEnvironment;
@@ -0,0 +1,26 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route deletes a specified env.
* @param {*} workspaceId
* @returns
*/
const deleteEnvironment = (workspaceId: string, environmentSlug: string) => {
return SecurityClient.fetchCall(
`/api/v2/workspace/${workspaceId}/environments`,
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ environmentSlug }),
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to delete environment');
}
});
};
export default deleteEnvironment;
@@ -0,0 +1,33 @@
import SecurityClient from '~/utilities/SecurityClient';
type EnvironmentInfo = {
oldEnvironmentSlug: string;
environmentSlug: string;
environmentName: string;
};
/**
* This route updates a specified environment.
* @param {*} workspaceId
* @returns
*/
const updateEnvironment = (workspaceId: string, env: EnvironmentInfo) => {
return SecurityClient.fetchCall(
`/api/v2/workspace/${workspaceId}/environments`,
{
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(env),
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to update environment');
}
});
};
export default updateEnvironment;
@@ -0,0 +1,48 @@
import SecurityClient from '~/utilities/SecurityClient';
interface EncryptedSecretProps {
id: string;
createdAt: string;
environment: string;
secretCommentCiphertext: string;
secretCommentIV: string;
secretCommentTag: string;
secretKeyCiphertext: string;
secretKeyIV: string;
secretKeyTag: string;
secretValueCiphertext: string;
secretValueIV: string;
secretValueTag: string;
type: "personal" | "shared";
}
/**
* This function adds secrets to a certain project
* @param {object} obj
* @param {EncryptedSecretProps} obj.secrets - the ids of secrets that we want to add
* @param {string} obj.env - the environment to which we are adding secrets
* @param {string} obj.workspaceId - the project to which we are adding secrets
* @returns
*/
const addSecrets = async ({ secrets, env, workspaceId }: { secrets: EncryptedSecretProps[]; env: string; workspaceId: string; }) => {
return SecurityClient.fetchCall('/api/v2/secrets', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
environment: env,
workspaceId,
secrets
})
}
).then(async (res) => {
if (res && res.status == 200) {
return await res.json();
} else {
console.log('Failed to add certain project secrets');
}
});
};
export default addSecrets;
@@ -0,0 +1,27 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This function deletes certain secrets from a certain project
* @param {string[]} secretIds - the ids of secrets that we want to be deleted
* @returns
*/
const deleteSecrets = async ({ secretIds }: { secretIds: string[] }) => {
return SecurityClient.fetchCall('/api/v2/secrets', {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
secretIds
})
}
).then(async (res) => {
if (res && res.status == 200) {
return await res.json();
} else {
console.log('Failed to delete certain project secrets');
}
});
};
export default deleteSecrets;
@@ -0,0 +1,31 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This function fetches the encrypted secrets for a certain project
* @param {string} workspaceId - project is for which a user is trying to get secrets
* @param {string} env - environment of a project for which a user is trying ot get secrets
* @returns
*/
const getSecrets = async (workspaceId: string, env: string) => {
return SecurityClient.fetchCall(
'/api/v2/secrets?' +
new URLSearchParams({
environment: env,
workspaceId
}),
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).secrets;
} else {
console.log('Failed to get project secrets');
}
});
};
export default getSecrets;
@@ -0,0 +1,44 @@
import SecurityClient from '~/utilities/SecurityClient';
interface EncryptedSecretProps {
id: string;
createdAt: string;
environment: string;
secretCommentCiphertext: string;
secretCommentIV: string;
secretCommentTag: string;
secretKeyCiphertext: string;
secretKeyIV: string;
secretKeyTag: string;
secretValueCiphertext: string;
secretValueIV: string;
secretValueTag: string;
type: "personal" | "shared";
}
/**
* This function updates certain secrets in a certain project
* @param {object} obj
* @param {EncryptedSecretProps[]} obj.secrets - the ids of secrets that we want to update
* @returns
*/
const updateSecrets = async ({ secrets }: { secrets: EncryptedSecretProps[] }) => {
return SecurityClient.fetchCall('/api/v2/secrets', {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
secrets
})
}
).then(async (res) => {
if (res && res.status == 200) {
return await res.json();
} else {
console.log('Failed to update certain project secrets');
}
});
};
export default updateSecrets;
@@ -0,0 +1,45 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
workspaceId: string;
secrets: any;
keys: string;
environment: string;
}
/**
* This function uploads the encrypted .env file
* @param {object} obj
* @param {string} obj.workspaceId
* @param {} obj.secrets
* @param {} obj.keys
* @param {string} obj.environment
* @returns
*/
const uploadSecrets = async ({
workspaceId,
secrets,
keys,
environment
}: Props) => {
return SecurityClient.fetchCall('/api/v2/workspace/' + workspaceId + '/secrets', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
secrets,
keys,
environment,
channel: 'web'
})
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to push secrets');
}
});
};
export default uploadSecrets;
@@ -0,0 +1,41 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
integrationId: string;
key: { encryptedKey: any; nonce: any };
secrets: {
ciphertextKey: any;
ivKey: any;
tagKey: any;
hashKey: any;
ciphertextValue: any;
ivValue: any;
tagValue: any;
hashValue: any;
type: string;
}[];
}
const changeHerokuConfigVars = ({ integrationId, key, secrets }: Props) => {
return SecurityClient.fetchCall(
'/api/v1/integration/' + integrationId + '/sync',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
key,
secrets
})
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to sync secrets to Heroku');
}
});
};
export default changeHerokuConfigVars;
@@ -0,0 +1,27 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
integrationId: string;
}
/**
* This route deletes an integration from a certain project
* @param {*} integrationId
* @returns
*/
const deleteIntegration = ({ integrationId }: Props) => {
return SecurityClient.fetchCall('/api/v1/integration/' + integrationId, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).workspace;
} else {
console.log('Failed to delete an integration');
}
});
};
export default deleteIntegration;
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
integrationAuthId: string;
}
/**
* This route deletes an integration authorization from a certain project
* @param {*} integrationAuthId
* @returns
*/
const deleteIntegrationAuth = ({ integrationAuthId }: Props) => {
return SecurityClient.fetchCall(
'/api/v1/integration-auth/' + integrationAuthId,
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to delete an integration authorization');
}
});
};
export default deleteIntegrationAuth;
@@ -0,0 +1,25 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
integrationAuthId: string;
}
const getIntegrationApps = ({ integrationAuthId }: Props) => {
return SecurityClient.fetchCall(
'/api/v1/integration-auth/' + integrationAuthId + '/apps',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).apps;
} else {
console.log('Failed to get available apps for an integration');
}
});
};
export default getIntegrationApps;
@@ -0,0 +1,21 @@
import SecurityClient from '~/utilities/SecurityClient';
const getIntegrationOptions = () => {
return SecurityClient.fetchCall(
'/api/v1/integration-auth/integration-options',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).integrationOptions;
} else {
console.log('Failed to get (cloud) integration options');
}
});
};
export default getIntegrationOptions;
@@ -0,0 +1,36 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
integrationId: string;
appName: string;
environment: string;
}
/**
* This route starts the integration after teh default one if gonna set up.
* @param {*} integrationId
* @returns
*/
const startIntegration = ({ integrationId, appName, environment }: Props) => {
return SecurityClient.fetchCall('/api/v1/integration/' + integrationId, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
update: {
app: appName,
environment,
isActive: true
}
})
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to start an integration');
}
});
};
export default startIntegration;
@@ -0,0 +1,36 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
workspaceId: string;
code: string;
integration: string;
}
/**
* This is the first step of the change password process (pake)
* @param {object} obj
* @param {object} obj.workspaceId - project id for which we want to authorize the integration
* @param {object} obj.code
* @param {object} obj.integration - integration which a user is trying to turn on
* @returns
*/
const AuthorizeIntegration = ({ workspaceId, code, integration }: Props) => {
return SecurityClient.fetchCall('/api/v1/integration-auth/oauth-token', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
workspaceId,
code,
integration
})
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to authorize the integration');
}
});
};
export default AuthorizeIntegration;
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
workspaceId: string;
}
/**
* This route gets authorizations of a certain project (Heroku, etc.)
* @param {*} workspaceId
* @returns
*/
const getWorkspaceAuthorizations = ({ workspaceId }: Props) => {
return SecurityClient.fetchCall(
'/api/v1/workspace/' + workspaceId + '/authorizations',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).authorizations;
} else {
console.log('Failed to get project authorizations');
}
});
};
export default getWorkspaceAuthorizations;
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
workspaceId: string;
}
/**
* This route gets integrations of a certain project (Heroku, etc.)
* @param {*} workspaceId
* @returns
*/
const getWorkspaceIntegrations = ({ workspaceId }: Props) => {
return SecurityClient.fetchCall(
'/api/v1/workspace/' + workspaceId + '/integrations',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).integrations;
} else {
console.log('Failed to get the project integrations');
}
});
};
export default getWorkspaceIntegrations;
@@ -0,0 +1,60 @@
import SecurityClient from "~/utilities/SecurityClient";
/**
* This route starts the integration after teh default one if gonna set up.
* Update integration with id [integrationId] to sync envars from the project's
* [environment] to the integration [app] with active state [isActive]
* @param {Object} obj
* @param {String} obj.integrationId - id of integration
* @param {String} obj.app - name of app
* @param {String} obj.environment - project environment to push secrets from
* @param {Boolean} obj.isActive - active state
* @param {String} obj.target - (optional) target (environment) for Vercel integration
* @param {String} obj.context - (optional) context (environment) for Netlify integration
* @param {String} obj.siteId - (optional) app (site_id) for Netlify integration
* @returns
*/
const updateIntegration = ({
integrationId,
app,
environment,
isActive,
target,
context,
siteId
}: {
integrationId: string,
app: string,
environment: string,
isActive: boolean,
target: string | null,
context: string | null,
siteId: string | null
}) => {
return SecurityClient.fetchCall(
"/api/v1/integration/" + integrationId,
{
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
app,
environment,
isActive,
target,
context,
siteId
}),
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log("Failed to start an integration");
}
});
};
export default updateIntegration;
@@ -0,0 +1,23 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us get info about a certain org
* @param {string} orgId - the organization ID
* @returns
*/
const getOrganization = ({ orgId }: { orgId: string }) => {
return SecurityClient.fetchCall('/api/v1/organization/' + orgId, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res?.status == 200) {
return (await res.json()).organization;
} else {
console.log('Failed to get org info');
}
});
};
export default getOrganization;
@@ -0,0 +1,29 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us get all the users in an org.
* @param {*} req
* @param {*} res
* @returns
*/
// TODO: this file is not used anywhere
const getOrganizationProjects = (req: { orgId: string }) => {
return SecurityClient.fetchCall(
'/api/organization/' + req.orgId + '/workspaces',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).workspaces;
} else {
console.log('Failed to get projects for an org');
}
});
};
export default getOrganizationProjects;
@@ -0,0 +1,27 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us get the current subscription of an org.
* @param {*} req
* @param {*} res
* @returns
*/
const getOrganizationSubscriptions = (req: { orgId: string }) => {
return SecurityClient.fetchCall(
'/api/v1/organization/' + req.orgId + '/subscriptions',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).subscriptions;
} else {
console.log('Failed to get org subscriptions');
}
});
};
export default getOrganizationSubscriptions;
@@ -0,0 +1,27 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us get all the projects of a certain user in an org.
* @param {*} req
* @param {*} res
* @returns
*/
const getOrganizationUserProjects = (req: { orgId: string }) => {
return SecurityClient.fetchCall(
'/api/v1/organization/' + req.orgId + '/my-workspaces',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).workspaces;
} else {
console.log('Failed to get projects of a user in an org');
}
});
};
export default getOrganizationUserProjects;
@@ -0,0 +1,42 @@
import SecurityClient from '~/utilities/SecurityClient';
export interface IMembershipOrg {
_id: string;
user: {
email: string;
firstName: string;
lastName: string;
_id: string;
publicKey: string;
};
inviteEmail: string;
organization: string;
role: 'owner' | 'admin' | 'member';
status: 'invited' | 'accepted';
}
/**
* This route lets us get all the users in an org.
* @param {object} obj
* @param {string} obj.orgId - organization Id
* @returns
*/
const getOrganizationUsers = ({
orgId,
}: {
orgId: string;
}): Promise<IMembershipOrg[]> => {
return SecurityClient.fetchCall('/api/v1/organization/' + orgId + '/users', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}).then(async (res) => {
if (res?.status == 200) {
return (await res.json()).users;
} else {
console.log('Failed to get org users');
}
});
};
export default getOrganizationUsers;
@@ -0,0 +1,27 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route redirects the user to the right stripe billing page.
* @param {*} req
* @param {*} res
* @returns
*/
const StripeRedirect = ({ orgId }: { orgId: string }) => {
return SecurityClient.fetchCall(
'/api/v1/organization/' + orgId + '/customer-portal-session',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (window.location.href = (await res.json()).url);
} else {
console.log('Failed to redirect to Stripe');
}
});
};
export default StripeRedirect;
@@ -0,0 +1,29 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route add an incident contact email to a certain organization
* @param {*} param0
* @returns
*/
const addIncidentContact = (organizationId: string, email: string) => {
return SecurityClient.fetchCall(
'/api/v1/organization/' + organizationId + '/incidentContactOrg',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email
})
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to add an incident contact');
}
});
};
export default addIncidentContact;
@@ -0,0 +1,28 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This function sends an email invite to a user to join an org
* @param {*} email
* @param {*} orgId
* @returns
*/
const addUserToOrg = (email: string, orgId: string) => {
return SecurityClient.fetchCall('/api/v1/invite-org/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
inviteeEmail: email,
organizationId: orgId
})
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to add a user to an org');
}
});
};
export default addUserToOrg;
@@ -0,0 +1,29 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route deletes an incident Contact from a certain organization
* @param {*} param0
* @returns
*/
const deleteIncidentContact = (organizationId: string, email: string) => {
return SecurityClient.fetchCall(
'/api/v1/organization/' + organizationId + '/incidentContactOrg',
{
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email
})
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to delete an incident contact');
}
});
};
export default deleteIncidentContact;
@@ -0,0 +1,23 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This function removes a certain member from a certain organization
* @param {*} membershipId
* @returns
*/
const deleteUserFromOrganization = (membershipId: string) => {
return SecurityClient.fetchCall('/api/v1/membership-org/' + membershipId, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to delete a user from an org');
}
});
};
export default deleteUserFromOrganization;
@@ -0,0 +1,33 @@
import SecurityClient from '~/utilities/SecurityClient';
export interface IIncidentContactOrg {
_id: string;
email: string;
organization: string;
}
/**
* This routes gets all the incident contacts of a certain organization
* @param {*} workspaceId
* @returns
*/
const getIncidentContacts = (
organizationId: string
): Promise<IIncidentContactOrg[]> => {
return SecurityClient.fetchCall(
'/api/v1/organization/' + organizationId + '/incidentContactOrg',
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).incidentContactsOrg;
} else {
console.log('Failed to get incident contacts');
}
});
};
export default getIncidentContacts;
@@ -0,0 +1,22 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us get the all the orgs of a certain user.
* @returns
*/
const getOrganizations = () => {
return SecurityClient.fetchCall('/api/v1/organization', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res?.status == 200) {
return (await res.json()).organizations;
} else {
console.log('Failed to get orgs of a user');
}
});
};
export default getOrganizations;
@@ -0,0 +1,27 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us rename a certain org.
* @param {*} req
* @param {*} res
* @returns
*/
const renameOrg = (orgId: string, newOrgName: string) => {
return SecurityClient.fetchCall('/api/v1/organization/' + orgId + '/name', {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: newOrgName
})
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to rename an organization');
}
});
};
export default renameOrg;
@@ -0,0 +1,57 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Props {
name: string;
workspaceId: string;
environment: string;
expiresIn: number;
encryptedKey: string;
iv: string;
tag: string;
}
/**
* This route adds a service token for a specific user in a project
* @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 = ({
name,
workspaceId,
environment,
expiresIn,
encryptedKey,
iv,
tag
}: Props) => {
return SecurityClient.fetchCall('/api/v2/service-token/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name,
workspaceId,
environment,
expiresIn,
encryptedKey,
iv,
tag
})
}).then(async (res) => {
if (res && res.status == 200) {
return (await res.json());
} else {
console.log('Failed to add service tokens');
}
});
};
export default addServiceToken;
@@ -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;
@@ -0,0 +1,26 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route gets service tokens for a specific user in a project
* @param {*} param0
* @returns
*/
const getServiceTokens = ({ workspaceId }: { workspaceId: string }) => {
return SecurityClient.fetchCall(
'/api/v2/workspace/' + workspaceId + '/service-token-data',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).serviceTokenData;
} else {
console.log('Failed to get service tokens');
}
});
};
export default getServiceTokens;
+21
View File
@@ -0,0 +1,21 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route gets the information about a specific user.
*/
const getUser = () => {
return SecurityClient.fetchCall('/api/v1/user', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res?.status == 200) {
return (await res.json()).user;
} else {
console.log('Failed to get user info');
}
});
};
export default getUser;
@@ -0,0 +1,31 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route registers a certain action for a user
* @param {*} email
* @param {*} workspaceId
* @returns
*/
const checkUserAction = ({ action }: { action: string }) => {
return SecurityClient.fetchCall(
'/api/v1/user-action' +
'?' +
new URLSearchParams({
action
}),
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res && res.status == 200) {
return (await res.json()).userAction;
} else {
console.log('Failed to check a user action');
}
});
};
export default checkUserAction;
@@ -0,0 +1,26 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route registers a certain action for a user
* @param {*} action
* @returns
*/
const registerUserAction = ({ action }: { action: string }) => {
return SecurityClient.fetchCall('/api/v1/user-action', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
action
})
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to register a user action');
}
});
};
export default registerUserAction;
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This function adds a user to a project
* @param {*} email
* @param {*} workspaceId
* @returns
*/
const addUserToWorkspace = (email: string, workspaceId: string) => {
return SecurityClient.fetchCall(
'/api/v1/workspace/' + workspaceId + '/invite-signup',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email
})
}
).then(async (res) => {
if (res && res.status == 200) {
return await res.json();
} else {
console.log('Failed to add a user to project');
}
});
};
export default addUserToWorkspace;
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This function change the access of a user in a certain workspace
* @param {*} membershipId
* @param {*} role
* @returns
*/
const changeUserRoleInWorkspace = (membershipId: string, role: string) => {
return SecurityClient.fetchCall(
'/api/v1/membership/' + membershipId + '/change-role',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
role: role
})
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to change the user role in a project');
}
});
};
export default changeUserRoleInWorkspace;
@@ -0,0 +1,34 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route creates a new workspace for a user within a certain organization.
* @param {string} workspaceName - project Name
* @param {string} organizationId - org ID
* @returns
*/
const createWorkspace = ({
workspaceName,
organizationId
}: {
workspaceName: string;
organizationId: string;
}) => {
return SecurityClient.fetchCall('/api/v1/workspace', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
workspaceName: workspaceName,
organizationId: organizationId
})
}).then(async (res) => {
if (res?.status == 200) {
return (await res.json()).workspace;
} else {
console.log('Failed to create a project');
}
});
};
export default createWorkspace;
@@ -0,0 +1,23 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This function removes a certain member from a certain workspace
* @param {*} membershipId
* @returns
*/
const deleteUserFromWorkspace = (membershipId: string) => {
return SecurityClient.fetchCall('/api/v1/membership/' + membershipId, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to delete a user from a project');
}
});
};
export default deleteUserFromWorkspace;
@@ -0,0 +1,23 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route deletes a specified workspace.
* @param {*} workspaceId
* @returns
*/
const deleteWorkspace = (workspaceId: string) => {
return SecurityClient.fetchCall('/api/v1/workspace/' + workspaceId, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to delete a project');
}
});
};
export default deleteWorkspace;
@@ -0,0 +1,31 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Workspace {
__v: number;
_id: string;
name: string;
organization: string;
environments: Array<{ name: string; slug: string }>;
}
/**
* This route lets us get the workspaces of a certain user
* @returns
*/
const getAWorkspace = (workspaceID:string) => {
return SecurityClient.fetchCall(`/api/v1/workspace/${workspaceID}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}).then(async (res) => {
if (res?.status == 200) {
const data = (await res.json()) as unknown as { workspace: Workspace };
return data.workspace;
}
throw new Error('Failed to get workspace');
});
};
export default getAWorkspace;
@@ -0,0 +1,23 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* Get the latest key pairs from a certain workspace
* @param {string} workspaceId
* @returns
*/
const getLatestFileKey = ({ workspaceId }: { workspaceId: string }) => {
return SecurityClient.fetchCall('/api/v1/key/' + workspaceId + '/latest', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res?.status == 200) {
return await res.json();
} else {
console.log('Failed to get the latest key pairs for a certain project');
}
});
};
export default getLatestFileKey;
@@ -0,0 +1,23 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us get the information of a certain project.
* @param {*} projectId - project ID (we renamed workspaces to projects in the app)
* @returns
*/
const getProjectInfo = ({ projectId }: { projectId: string }) => {
return SecurityClient.fetchCall('/api/v1/workspace/' + projectId, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res?.status == 200) {
return (await res.json()).workspace;
} else {
console.log('Failed to get project info');
}
});
};
export default getProjectInfo;
@@ -0,0 +1,26 @@
import SecurityClient from "~/utilities/SecurityClient";
/**
* This route lets us get the public keys of everyone in your workspace.
* @param {string} workspaceId
* @returns
*/
const getWorkspaceKeys = ({ workspaceId }: { workspaceId: string; }) => {
return SecurityClient.fetchCall(
"/api/v1/workspace/" + workspaceId + "/keys",
{
method: "GET",
headers: {
"Content-Type": "application/json",
},
}
).then(async (res) => {
if (res?.status == 200) {
return (await res.json()).publicKeys;
} else {
console.log("Failed to get the public keys of everyone in the workspace");
}
});
};
export default getWorkspaceKeys;
@@ -0,0 +1,26 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us get all the users in the workspace.
* @param {string} workspaceId - workspace ID
* @returns
*/
const getWorkspaceUsers = ({ workspaceId }: { workspaceId: string }) => {
return SecurityClient.fetchCall(
'/api/v1/workspace/' + workspaceId + '/users',
{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}
).then(async (res) => {
if (res?.status == 200) {
return (await res.json()).users;
} else {
console.log('Failed to get Project Users');
}
});
};
export default getWorkspaceUsers;
@@ -0,0 +1,31 @@
import SecurityClient from '~/utilities/SecurityClient';
interface Workspace {
__v: number;
_id: string;
name: string;
organization: string;
environments: Array<{name:string, slug:string}>
}
/**
* This route lets us get the workspaces of a certain user
* @returns
*/
const getWorkspaces = () => {
return SecurityClient.fetchCall('/api/v1/workspace', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(async (res) => {
if (res?.status == 200) {
const data = (await res.json()) as unknown as { workspaces: Workspace[] };
return data.workspaces;
}
throw new Error('Failed to get projects');
});
};
export default getWorkspaces;
@@ -0,0 +1,30 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route lets us rename a certain workspace.
* @param {*} req
* @param {*} res
* @returns
*/
const renameWorkspace = (workspaceId: string, newWorkspaceName: string) => {
return SecurityClient.fetchCall(
'/api/v1/workspace/' + workspaceId + '/name',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: newWorkspaceName
})
}
).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to rename a project');
}
});
};
export default renameWorkspace;
@@ -0,0 +1,38 @@
import SecurityClient from '~/utilities/SecurityClient';
/**
* This route uplods the keys in an encrypted format.
* @param {*} workspaceId
* @param {*} userId
* @param {*} encryptedKey
* @param {*} nonce
* @returns
*/
const uploadKeys = (
workspaceId: string,
userId: string,
encryptedKey: string,
nonce: string
) => {
return SecurityClient.fetchCall('/api/v1/key/' + workspaceId, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
key: {
userId: userId,
encryptedKey: encryptedKey,
nonce: nonce
}
})
}).then(async (res) => {
if (res && res.status == 200) {
return res;
} else {
console.log('Failed to upload keys for a new user');
}
});
};
export default uploadKeys;
+34
View File
@@ -0,0 +1,34 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import getWorkspaces from './api/workspace/getWorkspaces';
export default function DashboardRedirect() {
const router = useRouter();
/**
* Here we forward to the default workspace if a user opens this url
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
(async () => {
let userWorkspace;
try {
if (localStorage.getItem('projectData.id')) {
router.push('/dashboard/' + localStorage.getItem('projectData.id'));
} else {
const userWorkspaces = await getWorkspaces();
userWorkspace = userWorkspaces[0]._id;
router.push('/dashboard/' + userWorkspace);
}
} catch (error) {
console.log('Error - Not logged in yet');
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div></div>;
}
DashboardRedirect.requireAuth = true;
+835
View File
@@ -0,0 +1,835 @@
import { Fragment, useCallback, useEffect, useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import getProjectSercetSnapshotsCount from '@app/ee/api/secrets/GetProjectSercetSnapshotsCount';
import performSecretRollback from '@app/ee/api/secrets/PerformSecretRollback';
import PITRecoverySidebar from '@app/ee/components/PITRecoverySidebar';
import {
faArrowDownAZ,
faArrowDownZA,
faArrowLeft,
faCheck,
faClockRotateLeft,
faEye,
faEyeSlash,
faFolderOpen,
faMagnifyingGlass,
faPlus,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from '~/components/basic/buttons/Button';
import ListBox from '~/components/basic/Listbox';
import BottonRightPopup from '~/components/basic/popups/BottomRightPopup';
import { useNotificationContext } from '~/components/context/Notifications/NotificationProvider';
import DownloadSecretMenu from '~/components/dashboard/DownloadSecretsMenu';
import DropZone from '~/components/dashboard/DropZone';
import KeyPair from '~/components/dashboard/KeyPair';
import SideBar from '~/components/dashboard/SideBar';
import NavHeader from '~/components/navigation/NavHeader';
import encryptSecrets from '~/components/utilities/secrets/encryptSecrets';
import getSecretsForProject from '~/components/utilities/secrets/getSecretsForProject';
import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
import guidGenerator from '~/utilities/randomId';
import addSecrets from '../api/files/AddSecrets';
import deleteSecrets from '../api/files/DeleteSecrets';
import updateSecrets from '../api/files/UpdateSecrets';
import getUser from '../api/user/getUser';
import checkUserAction from '../api/userActions/checkUserAction';
import registerUserAction from '../api/userActions/registerUserAction';
import getWorkspaces from '../api/workspace/getWorkspaces';
type WorkspaceEnv = {
name: string;
slug: string;
};
interface SecretDataProps {
pos: number;
key: string;
value: string;
valueOverride: string | undefined;
id: string;
idOverride: string | undefined;
comment: string;
}
interface overrideProps {
id: string;
keyName: string;
value: string;
pos: number;
comment: string;
}
interface SnapshotProps {
id: string;
createdAt: string;
version: number;
secretVersions: {
id: string;
pos: number;
environment: string;
key: string;
value: string;
valueOverride: string;
comment: string;
}[];
}
/**
* this function finds the teh duplicates in an array
* @param arr - array of anything (e.g., with secret keys and types (personal/shared))
* @returns - a list with duplicates
*/
function findDuplicates(arr: any[]) {
const map = new Map();
return arr.filter((item) => {
if (map.has(item)) {
map.set(item, false);
return true;
} else {
map.set(item, true);
return false;
}
});
}
/**
* This is the main component for the dashboard (aka the screen with all the encironemnt variable & secrets)
* @returns
*/
export default function Dashboard() {
const [data, setData] = useState<SecretDataProps[] | null>();
const [initialData, setInitialData] = useState<SecretDataProps[] | null | undefined>([]);
const [buttonReady, setButtonReady] = useState(false);
const router = useRouter();
const [blurred, setBlurred] = useState(true);
const [isKeyAvailable, setIsKeyAvailable] = useState(true);
const [isNew, setIsNew] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [searchKeys, setSearchKeys] = useState('');
const [errorDragAndDrop, setErrorDragAndDrop] = 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 [saveLoading, setSaveLoading] = useState(false);
const { t } = useTranslation();
const { createNotification } = useNotificationContext();
const workspaceId = router.query.id as string;
const [workspaceEnvs, setWorkspaceEnvs] = useState<WorkspaceEnv[]>([]);
const [selectedSnapshotEnv, setSelectedSnapshotEnv] =
useState<WorkspaceEnv>();
const [selectedEnv, setSelectedEnv] = useState<WorkspaceEnv>({
name: '',
slug: '',
});
// #TODO: fix save message for changing reroutes
// const beforeRouteHandler = (url) => {
// const warningText =
// "Do you want to save your results bfore leaving this page?";
// if (!buttonReady) return;
// if (router.asPath !== url && !confirm(warningText)) {
// // router.events.emit('routeChangeError');
// // setData(data)
// savePush();
// throw `Route change to "${url}" was aborted (this error can be safely ignored).`;
// } else {
// setButtonReady(false);
// }
// };
// prompt the user if they try and leave with unsaved changes
useEffect(() => {
const warningText =
'Do you want to save your results before leaving this page?';
const handleWindowClose = (e: any) => {
if (!buttonReady) return;
e.preventDefault();
return (e.returnValue = warningText);
};
window.addEventListener('beforeunload', handleWindowClose);
// router.events.on('routeChangeStart', beforeRouteHandler);
return () => {
window.removeEventListener('beforeunload', handleWindowClose);
// router.events.off('routeChangeStart', beforeRouteHandler);
};
}, [buttonReady]);
/**
* Reorder rows alphabetically or in the opprosite order
*/
const reorderRows = (dataToReorder: SecretDataProps[] | 1) => {
setSortMethod((prevSort) =>
prevSort == 'alphabetical' ? '-alphabetical' : 'alphabetical'
);
sortValuesHandler(dataToReorder, undefined);
};
useEffect(() => {
(async () => {
try {
const tempNumSnapshots = await getProjectSercetSnapshotsCount({
workspaceId,
});
setNumSnapshots(tempNumSnapshots);
const userWorkspaces = await getWorkspaces();
const workspace = userWorkspaces.find(
(workspace) => workspace._id === workspaceId
);
if (!workspace) {
router.push('/dashboard/' + userWorkspaces?.[0]?._id);
}
setWorkspaceEnvs(workspace?.environments || []);
// set env
const env = workspace?.environments?.[0] || {
name: 'unknown',
slug: 'unkown',
};
setSelectedEnv(env);
setSelectedSnapshotEnv(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);
}
})();
}, [workspaceId]);
useEffect(() => {
(async () => {
try {
setIsLoading(true);
setBlurred(true);
// ENV
const dataToSort = await getSecretsForProject({
env: selectedEnv.slug,
setIsKeyAvailable,
setData,
workspaceId,
});
setInitialData(dataToSort);
reorderRows(dataToSort);
setTimeout(
() => setIsLoading(false)
, 700);
} catch (error) {
console.log('Error', error);
setData(undefined);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedEnv]);
const addRow = () => {
setIsNew(false);
setData([
...data!,
{
id: guidGenerator(),
idOverride: guidGenerator(),
pos: data!.length,
key: '',
value: '',
valueOverride: undefined,
comment: '',
},
]);
};
const deleteRow = ({ ids, secretName }: { ids: string[]; secretName: string; }) => {
setButtonReady(true);
toggleSidebar('None');
createNotification({
text: `${secretName} has been deleted. Remember to save changes.`,
type: 'error',
});
sortValuesHandler(
data!.filter((row: SecretDataProps) => !ids.includes(row.id)),
sortMethod == 'alhpabetical' ? '-alphabetical' : 'alphabetical'
);
};
const modifyValue = (value: string, pos: number) => {
setData((oldData) => {
oldData![pos].value = value;
return [...oldData!];
});
setButtonReady(true);
};
const modifyValueOverride = (value: string | undefined, pos: number) => {
setData((oldData) => {
oldData![pos].valueOverride = value;
return [...oldData!];
});
setButtonReady(true);
};
const modifyKey = (value: string, pos: number) => {
setData((oldData) => {
oldData![pos].key = value;
return [...oldData!];
});
setButtonReady(true);
};
const modifyComment = (value: string, pos: number) => {
setData((oldData) => {
oldData![pos].comment = value;
return [...oldData!];
});
setButtonReady(true);
};
// For speed purposes and better perforamance, we are using useCallback
const listenChangeValue = useCallback((value: string, pos: number) => {
modifyValue(value, pos);
}, []);
const listenChangeValueOverride = useCallback((value: string | undefined, pos: number) => {
modifyValueOverride(value, pos);
}, []);
const listenChangeKey = useCallback((value: string, pos: number) => {
modifyKey(value, pos);
}, []);
const listenChangeComment = useCallback((value: string, pos: number) => {
modifyComment(value, pos);
}, []);
/**
* Save the changes of environment variables and push them to the database
*/
const savePush = async (dataToPush?: SecretDataProps[]) => {
setSaveLoading(true);
let newData: SecretDataProps[] | null | undefined;
// dataToPush is mostly used for rollbacks, otherwise we always take the current state data
if ((dataToPush ?? [])?.length > 0) {
newData = dataToPush;
} else {
newData = data;
}
// Checking if any of the secret keys start with a number - if so, don't do anything
const nameErrors = !newData!
.map((secret) => !isNaN(Number(secret.key.charAt(0))))
.every((v) => v === false);
const duplicatesExist = findDuplicates(data!.map((item: SecretDataProps) => item.key)).length > 0;
if (nameErrors) {
return createNotification({
text: 'Solve all name errors before saving secrets.',
type: 'error',
});
}
if (duplicatesExist) {
return createNotification({
text: 'Remove duplicated secret names before saving.',
type: 'error',
});
}
// Once "Save changes" is clicked, disable that button
setButtonReady(false);
const secretsToBeDeleted
= initialData!
.filter(initDataPoint => !newData!.map(newDataPoint => newDataPoint.id).includes(initDataPoint.id))
.map(secret => secret.id);
console.log('delete', secretsToBeDeleted.length)
const secretsToBeAdded
= newData!
.filter(newDataPoint => !initialData!.map(initDataPoint => initDataPoint.id).includes(newDataPoint.id));
console.log('add', secretsToBeAdded.length)
const secretsToBeUpdated
= newData!.filter(newDataPoint => initialData!
.filter(initDataPoint => newData!.map(newDataPoint => newDataPoint.id).includes(initDataPoint.id)
&& (newData!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].value != initDataPoint.value
|| newData!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].key != initDataPoint.key
|| newData!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].comment != initDataPoint.comment))
.map(secret => secret.id).includes(newDataPoint.id));
console.log('update', secretsToBeUpdated.length)
const newOverrides = newData!.filter(newDataPoint => newDataPoint.valueOverride != undefined)
const initOverrides = initialData!.filter(initDataPoint => initDataPoint.valueOverride != undefined)
const overridesToBeDeleted
= initOverrides
.filter(initDataPoint => !newOverrides!.map(newDataPoint => newDataPoint.id).includes(initDataPoint.id))
.map(secret => String(secret.idOverride));
console.log('override delete', overridesToBeDeleted.length)
const overridesToBeAdded
= newOverrides!
.filter(newDataPoint => !initOverrides.map(initDataPoint => initDataPoint.id).includes(newDataPoint.id))
.map(override => ({pos: override.pos, key: override.key, value: String(override.valueOverride), valueOverride: override.valueOverride, comment: '', id: String(override.idOverride), idOverride: String(override.idOverride)}));
console.log('override add', overridesToBeAdded.length)
const overridesToBeUpdated
= newOverrides!.filter(newDataPoint => initOverrides
.filter(initDataPoint => newOverrides!.map(newDataPoint => newDataPoint.id).includes(initDataPoint.id)
&& (newOverrides!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].valueOverride != initDataPoint.valueOverride
|| newOverrides!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].key != initDataPoint.key
|| newOverrides!.filter(newDataPoint => newDataPoint.id == initDataPoint.id)[0].comment != initDataPoint.comment))
.map(secret => secret.id).includes(newDataPoint.id))
.map(override => ({pos: override.pos, key: override.key, value: String(override.valueOverride), valueOverride: override.valueOverride, comment: '', id: String(override.idOverride), idOverride: String(override.idOverride)}));
console.log('override update', overridesToBeUpdated.length)
if (secretsToBeDeleted.concat(overridesToBeDeleted).length > 0) {
await deleteSecrets({ secretIds: secretsToBeDeleted.concat(overridesToBeDeleted) });
}
if (secretsToBeAdded.concat(overridesToBeAdded).length > 0) {
const secrets = await encryptSecrets({ secretsToEncrypt: secretsToBeAdded.concat(overridesToBeAdded), workspaceId, env: selectedEnv.slug });
secrets && await addSecrets({ secrets, env: selectedEnv.slug, workspaceId });
}
if (secretsToBeUpdated.concat(overridesToBeUpdated).length > 0) {
const secrets = await encryptSecrets({ secretsToEncrypt: secretsToBeUpdated.concat(overridesToBeUpdated), workspaceId, env: selectedEnv.slug });
secrets && await updateSecrets({ secrets });
}
setInitialData(structuredClone(newData));
// 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);
setSaveLoading(false);
};
const addData = (newData: SecretDataProps[]) => {
setData(data!.concat(newData));
setButtonReady(true);
};
const changeBlurred = () => {
setBlurred(!blurred);
};
const sortValuesHandler = (
dataToSort: SecretDataProps[] | 1,
specificSortMethod?: 'alphabetical' | '-alphabetical'
) => {
const howToSort =
specificSortMethod == undefined ? sortMethod : specificSortMethod;
const sortedData = (dataToSort != 1 ? dataToSort : data)!
.sort((a, b) =>
howToSort == 'alphabetical'
? a.key.localeCompare(b.key)
: b.key.localeCompare(a.key)
)
.map((item: SecretDataProps, index: number) => {
return {
...item,
pos: index,
};
});
setData(sortedData);
};
const deleteCertainRow = ({
ids,
secretName,
}: {
ids: string[];
secretName: string;
}) => {
deleteRow({ ids, secretName });
};
return data ? (
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<Head>
<title>{t('common:head-title', { title: t('dashboard:title') })}</title>
<link rel='icon' href='/infisical.ico' />
<meta property='og:image' content='/images/message.png' />
<meta property='og:title' content={String(t('dashboard:og-title'))} />
<meta
name='og:description'
content={String(t('dashboard:og-description'))}
/>
</Head>
<div className="flex flex-row">
{sidebarSecretId != "None" && <SideBar
toggleSidebar={toggleSidebar}
data={data.filter((row: SecretDataProps) => row.key == data.filter(row => row.id == sidebarSecretId)[0]?.key)}
modifyKey={listenChangeKey}
modifyValue={listenChangeValue}
modifyValueOverride={listenChangeValueOverride}
modifyComment={listenChangeComment}
buttonReady={buttonReady}
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} />
{checkDocsPopUpVisible && (
<BottonRightPopup
buttonText={t('dashboard:check-docs.button')}
buttonLink='https://infisical.com/docs/getting-started/introduction'
titleText={t('dashboard:check-docs.title')}
emoji='🎉'
textLine1={t('dashboard:check-docs.line1')}
textLine2={t('dashboard:check-docs.line2')}
setCheckDocsPopUpVisible={setCheckDocsPopUpVisible}
/>
)}
<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'>
<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={selectedEnv.name}
data={workspaceEnvs.map(({ name }) => name)}
onChange={(envName) =>
setSelectedEnv(
workspaceEnvs.find(({ name }) => envName === name) || {
name: 'unknown',
slug: 'unknown',
}
)
}
/>
)}
</div>
<div className='flex flex-row'>
<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) && !snapshotData && (
<div className={`flex justify-start max-w-sm mt-1`}>
<Button
text={String(t('common:save-changes'))}
onButtonPressed={savePush}
color='primary'
size='md'
active={buttonReady}
iconDisabled={faCheck}
textDisabled={String(t("common:saved"))}
loading={saveLoading}
/>
</div>
)}
{snapshotData && <div className={`flex justify-start max-w-sm mt-1`}>
<Button
text={String(t("Rollback to this snapshot"))}
onButtonPressed={async () => {
// Update secrets in the state only for the current environment
const rolledBackSecrets = snapshotData.secretVersions
.filter(row => row.environment == selectedEnv.slug)
.map((sv, position) => {
return {
id: sv.id, idOverride: sv.id, pos: position, valueOverride: sv.valueOverride, key: sv.key, value: sv.value, comment: ''
}
});
setData(rolledBackSecrets);
// Perform the rollback globally
performSecretRollback({ workspaceId, version: snapshotData.version })
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'>
{(snapshotData || data?.length !== 0) && (
<>
{!snapshotData ? (
<ListBox
selected={selectedEnv.name}
data={workspaceEnvs.map(({ name }) => name)}
onChange={(envName) =>
setSelectedEnv(
workspaceEnvs.find(
({ name }) => envName === name
) || {
name: 'unknown',
slug: 'unknown',
}
)
}
/>
) : (
<ListBox
selected={selectedSnapshotEnv?.name || ''}
data={workspaceEnvs.map(({ name }) => name)}
onChange={(envName) =>
setSelectedSnapshotEnv(
workspaceEnvs.find(
({ name }) => envName === name
) || {
name: 'unknown',
slug: 'unknown',
}
)
}
/>
)}
<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'
icon={faMagnifyingGlass}
/>
<input
className='pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none'
value={searchKeys}
onChange={(e) => setSearchKeys(e.target.value)}
placeholder={String(t('dashboard:search-keys'))}
/>
</div>
{!snapshotData && (
<div className='ml-2 min-w-max flex flex-row items-start justify-start'>
<Button
onButtonPressed={() => reorderRows(1)}
color='mineshaft'
size='icon-md'
icon={
sortMethod == 'alphabetical'
? faArrowDownAZ
: faArrowDownZA
}
/>
</div>
)}
{!snapshotData && (
<div className='ml-2 min-w-max flex flex-row items-start justify-start'>
<DownloadSecretMenu
data={data}
env={selectedEnv.slug}
/>
</div>
)}
<div className='ml-2 min-w-max flex flex-row items-start justify-start'>
<Button
onButtonPressed={changeBlurred}
color='mineshaft'
size='icon-md'
icon={blurred ? faEye : faEyeSlash}
/>
</div>
{!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}
color='mineshaft'
icon={faPlus}
size='md'
/>
{isNew && (
<span className='absolute right-0 flex h-3 w-3 items-center justify-center ml-4 mb-4'>
<span className='animate-ping absolute inline-flex h-full w-full rounded-full bg-primary/50 opacity-75 h-4 w-4'></span>
<span className='relative inline-flex rounded-full h-3 w-3 bg-primary'></span>
</span>
)}
</div>
)}
</>
)}
</div>
</div>
{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">
{!snapshotData && data?.filter(row => row.key?.toUpperCase().includes(searchKeys.toUpperCase()))
.filter(row => !sharedToHide.includes(row.id)).map((keyPair) => (
<KeyPair
key={keyPair.id}
keyPair={keyPair}
modifyValue={listenChangeValue}
modifyValueOverride={listenChangeValueOverride}
modifyKey={listenChangeKey}
isBlurred={blurred}
isDuplicate={findDuplicates(
data?.map((item) => item.key)
)?.includes(keyPair.key)}
toggleSidebar={toggleSidebar}
sidebarSecretId={sidebarSecretId}
isSnapshot={false}
/>
))}
{snapshotData && snapshotData.secretVersions?.sort((a, b) => a.key.localeCompare(b.key))
.filter(row => row.environment == selectedSnapshotEnv?.slug)
.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)))?.map((item) => item.id).includes(row.id))
)
.map((keyPair) => (
<KeyPair
key={keyPair.id}
keyPair={keyPair}
modifyValue={listenChangeValue}
modifyValueOverride={listenChangeValueOverride}
modifyKey={listenChangeKey}
isBlurred={blurred}
isDuplicate={findDuplicates(
data?.map((item) => item.key)
)?.includes(keyPair.key)}
toggleSidebar={toggleSidebar}
sidebarSecretId={sidebarSecretId}
isSnapshot={true}
/>
))}
</div>
{!snapshotData && (
<div className='w-full max-w-5xl px-2 pt-3'>
<DropZone
setData={addData}
setErrorDragAndDrop={setErrorDragAndDrop}
createNewFile={addRow}
errorDragAndDrop={errorDragAndDrop}
setButtonReady={setButtonReady}
keysExist={true}
numCurrentRows={data.length}
/>
</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 && !snapshotData && (
<DropZone
setData={setData}
setErrorDragAndDrop={setErrorDragAndDrop}
createNewFile={addRow}
errorDragAndDrop={errorDragAndDrop}
setButtonReady={setButtonReady}
numCurrentRows={data.length}
keysExist={false}
/>
)}
{!isKeyAvailable && (
<>
<FontAwesomeIcon
className='text-7xl mt-20 mb-8'
icon={faFolderOpen}
/>
<p>
To view this file, contact your administrator for
permission.
</p>
<p className='mt-1'>
They need to grant you access in the team tab.
</p>
</>
)}
</div>
)}
</div>
</div>
</div>
</div>
) : (
<div className='relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center'>
<div className='absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full'></div>
<Image
src='/images/loading/loading.gif'
height={70}
width={120}
alt='loading animation'
></Image>
</div>
);
}
Dashboard.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps(['dashboard']);
+22
View File
@@ -0,0 +1,22 @@
import React from 'react';
import Head from 'next/head';
export default function EmailNotFeriviedPage() {
return (
<div className="bg-bunker-800 md:h-screen flex flex-col justify-between">
<Head>
<title>Request a New Invite</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<div className="flex flex-col items-center justify-center text-gray-200 h-screen w-screen">
<p className="text-6xl">Oops.</p>
<p className="mt-2 mb-1 text-xl">Your email was not verified. </p>
<p className="text-xl">Please try again.</p>
<p className="text-md mt-8 text-gray-600 max-w-sm text-center">
Note: If it still {"doesn't work"}, please reach out to us at
support@infisical.com
</p>
</div>
</div>
);
}
+41
View File
@@ -0,0 +1,41 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import queryString from 'query-string';
import AuthorizeIntegration from './api/integrations/authorizeIntegration';
export default function Github() {
const router = useRouter();
const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
const code = parsedUrl.code;
const state = parsedUrl.state;
/**
* Here we forward to the default workspace if a user opens this url
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
(async () => {
try {
if (state === localStorage.getItem('latestCSRFToken')) {
localStorage.removeItem('latestCSRFToken');
await AuthorizeIntegration({
workspaceId: localStorage.getItem('projectData.id') as string,
code: code as string,
integration: 'github',
});
router.push(
'/integrations/' + localStorage.getItem('projectData.id')
);
}
} catch (error) {
console.error('Github integration error: ', error);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div></div>;
}
Github.requireAuth = true;
+41
View File
@@ -0,0 +1,41 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import queryString from 'query-string';
import AuthorizeIntegration from './api/integrations/authorizeIntegration';
export default function Heroku() {
const router = useRouter();
const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
const code = parsedUrl.code;
const state = parsedUrl.state;
/**
* Here we forward to the default workspace if a user opens this url
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
(async () => {
try {
if (state === localStorage.getItem('latestCSRFToken')) {
localStorage.removeItem('latestCSRFToken');
await AuthorizeIntegration({
workspaceId: localStorage.getItem('projectData.id') as string,
code: code as string,
integration: 'heroku',
});
router.push(
'/integrations/' + localStorage.getItem('projectData.id')
);
}
} catch (error) {
console.error('Heroku integration error: ', error);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div></div>;
}
Heroku.requireAuth = true;
+234
View File
@@ -0,0 +1,234 @@
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 {
faCheckCircle,
faHandPeace,
faNetworkWired,
faPlug,
faPlus,
faStar,
faUserPlus
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import onboardingCheck from '~/components/utilities/checks/OnboardingCheck';
import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
import registerUserAction from '../api/userActions/registerUserAction';
type ItemProps = {
text: string;
subText: string;
complete: boolean;
icon: IconProp;
time: string;
userAction?: string;
link?: string;
};
const learningItem = ({
text,
subText,
complete,
icon,
time,
userAction,
link
}: ItemProps): JSX.Element => {
if (link) {
return (
<Link href={link}>
<a
target={`${link.includes('https') ? '_blank' : '_self'}`}
rel="noopener noreferrer"
className="w-full"
>
<div
onClick={async () => {
if (userAction && userAction != 'first_time_secrets_pushed') {
await registerUserAction({
action: userAction
});
}
}}
className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer"
>
<div className="flex flex-row items-center mr-4">
<FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
{complete && (
<div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
<FontAwesomeIcon
icon={faCheckCircle}
className="text-4xl w-5 h-5 text-green"
/>
</div>
)}
<div className="flex flex-col items-start">
<div className="text-xl font-semibold mt-0.5">{text}</div>
<div className="text-sm font-normal">{subText}</div>
</div>
</div>
<div
className={`pr-4 font-semibold text-sm w-28 text-right ${
complete && 'text-green'
}`}
>
{complete ? 'Complete!' : 'About ' + time}
</div>
{complete && (
<div className="absolute bottom-0 left-0 h-1 w-full bg-green"></div>
)}
</div>
</a>
</Link>
);
} else {
return (
<div
onClick={async () => {
if (userAction) {
await registerUserAction({
action: userAction
});
}
}}
className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer"
>
<div className="flex flex-row items-center mr-4">
<FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
{complete && (
<div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-11 top-10">
<FontAwesomeIcon
icon={faCheckCircle}
className="absolute text-4xl left-12 top-16 w-5 h-5 text-green"
/>
</div>
)}
<div className="flex flex-col items-start">
<div className="text-xl font-semibold mt-0.5">{text}</div>
<div className="text-sm font-normal mt-0.5">{subText}</div>
</div>
</div>
<div
className={`pr-4 font-semibold text-sm w-28 text-right ${
complete && 'text-green'
}`}
>
{complete ? 'Complete!' : 'About ' + time}
</div>
{complete && (
<div className="absolute bottom-0 left-0 h-1 w-full bg-green"></div>
)}
</div>
);
}
};
/**
* This tab is called Home because in the future it will include some company news,
* updates, roadmap, relavant blogs, etc. Currently it only has the setup instruction
* for the new users
*/
export default function Home() {
const router = useRouter();
const [hasUserClickedSlack, setHasUserClickedSlack] = useState(false);
const [hasUserClickedIntro, setHasUserClickedIntro] = useState(false);
const [hasUserStarred, setHasUserStarred] = useState(false);
const [hasUserPushedSecrets, setHasUserPushedSecrets] = useState(false);
const [usersInOrg, setUsersInOrg] = useState(false);
const { t } = useTranslation();
useEffect(() => {
onboardingCheck({
setHasUserClickedIntro,
setHasUserClickedSlack,
setHasUserPushedSecrets,
setHasUserStarred,
setUsersInOrg
});
}, []);
return (
<div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-20 h-screen">
<div className="flex flex-col items-center text-gray-300 text-lg mx-auto max-w-2xl lg:max-w-3xl xl:max-w-4xl py-6">
<div className="text-3xl font-bold text-left w-full">
Your quick start guide
</div>
<div className="text-md text-left w-full pt-2 pb-4 text-bunker-300">
Click on the items below and follow the instructions.
</div>
{learningItem({
text: 'Get to know Infisical',
subText: '',
complete: hasUserClickedIntro,
icon: faHandPeace,
time: '3 min',
userAction: 'intro_cta_clicked',
link: 'https://www.youtube.com/watch?v=JS3OKYU2078'
})}
{learningItem({
text: 'Add your secrets',
subText: 'Click to see example secrets, and add your own.',
complete: hasUserPushedSecrets,
icon: faPlus,
time: '2 min',
userAction: 'first_time_secrets_pushed',
link: '/dashboard/' + router.query.id
})}
{learningItem({
text: 'Inject secrets locally',
subText:
'Replace .env files with a more secure an efficient alternative.',
complete: false,
icon: faNetworkWired,
time: '8 min',
link: 'https://infisical.com/docs/getting-started/quickstart'
})}
{learningItem({
text: 'Integrate Infisical with your infrastructure',
subText:
'Only a few integrations are currently available. Many more coming soon!',
complete: false,
icon: faPlug,
time: '15 min',
link: 'https://infisical.com/docs/integrations/overview'
})}
{learningItem({
text: 'Invite your teammates',
subText: '',
complete: usersInOrg,
icon: faUserPlus,
time: '2 min',
link: '/settings/org/' + router.query.id + '?invite'
})}
{learningItem({
text: 'Join Infisical Slack',
subText: 'Have any questions? Ask us!',
complete: hasUserClickedSlack,
icon: faSlack,
time: '1 min',
userAction: 'slack_cta_clicked',
link: 'https://join.slack.com/t/infisical-users/shared_invite/zt-1kdbk07ro-RtoyEt_9E~fyzGo_xQYP6g'
})}
{learningItem({
text: 'Star Infisical on GitHub',
subText: "Like what we're doing? You know what to do! :)",
complete: hasUserStarred,
icon: faStar,
time: '1 min',
userAction: 'star_cta_clicked',
link: 'https://github.com/Infisical/infisical'
})}
</div>
</div>
);
}
Home.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps(["home"]);
+13
View File
@@ -0,0 +1,13 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
export default function Home() {
const router = useRouter();
useEffect(() => {
router.push("/login");
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div className="bg-bunker-800 w-screen"></div>;
}
+263
View File
@@ -0,0 +1,263 @@
import crypto from 'crypto';
import { useEffect, useState } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import frameworkIntegrationOptions from 'public/json/frameworkIntegrations.json';
import ActivateBotDialog from '~/components/basic/dialog/ActivateBotDialog';
import CloudIntegrationSection from '~/components/integrations/CloudIntegrationSection';
import FrameworkIntegrationSection from '~/components/integrations/FrameworkIntegrationSection';
import IntegrationSection from '~/components/integrations/IntegrationSection';
import NavHeader from '~/components/navigation/NavHeader';
import { getTranslatedServerSideProps } from '~/utilities/withTranslateProps';
import {
decryptAssymmetric,
encryptAssymmetric,
} from '../../components/utilities/cryptography/crypto';
import getBot from '../api/bot/getBot';
import setBotActiveStatus from '../api/bot/setBotActiveStatus';
import getIntegrationOptions from '../api/integrations/GetIntegrationOptions';
import getWorkspaceAuthorizations from '../api/integrations/getWorkspaceAuthorizations';
import getWorkspaceIntegrations from '../api/integrations/getWorkspaceIntegrations';
import getAWorkspace from '../api/workspace/getAWorkspace';
import getLatestFileKey from '../api/workspace/getLatestFileKey';
export default function Integrations() {
const [cloudIntegrationOptions, setCloudIntegrationOptions] = useState([]);
const [integrationAuths, setIntegrationAuths] = useState([]);
const [environments, setEnvironments] = useState<
{
name: string;
slug: string;
}[]
>([]);
const [integrations, setIntegrations] = useState([]);
// TODO: These will have its type when migratiing towards react-query
const [bot, setBot] = useState<any>(null);
const [isActivateBotDialogOpen, setIsActivateBotDialogOpen] = useState(false);
// const [isIntegrationAccessTokenDialogOpen, setIntegrationAccessTokenDialogOpen] = useState(true);
const [selectedIntegrationOption, setSelectedIntegrationOption] =
useState(null);
const router = useRouter();
const workspaceId = router.query.id as string;
const { t } = useTranslation();
useEffect(() => {
(async () => {
try {
const workspace = await getAWorkspace(workspaceId);
setEnvironments(workspace.environments);
// get cloud integration options
setCloudIntegrationOptions(await getIntegrationOptions());
// get project integration authorizations
setIntegrationAuths(
await getWorkspaceAuthorizations({
workspaceId,
})
);
// get project integrations
setIntegrations(
await getWorkspaceIntegrations({
workspaceId,
})
);
// get project bot
setBot(await getBot({ workspaceId }));
} catch (err) {
console.log(err);
}
})();
}, []);
/**
* Activate bot for project by performing the following steps:
* 1. Get the (encrypted) project key
* 2. Decrypt project key with user's private key
* 3. Encrypt project key with bot's public key
* 4. Send encrypted project key to backend and set bot status to active
*/
const handleBotActivate = async () => {
let botKey;
try {
if (bot) {
// case: there is a bot
const key = await getLatestFileKey({ workspaceId });
const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
if (!PRIVATE_KEY) {
throw new Error('Private Key missing');
}
const WORKSPACE_KEY = decryptAssymmetric({
ciphertext: key.latestKey.encryptedKey,
nonce: key.latestKey.nonce,
publicKey: key.latestKey.sender.publicKey,
privateKey: PRIVATE_KEY,
});
const { ciphertext, nonce } = encryptAssymmetric({
plaintext: WORKSPACE_KEY,
publicKey: bot.publicKey,
privateKey: PRIVATE_KEY,
});
botKey = {
encryptedKey: ciphertext,
nonce,
};
setBot(
(
await setBotActiveStatus({
botId: bot._id,
isActive: bot.isActive ? false : true,
botKey,
})
).bot
);
}
} catch (err) {
console.error(err);
}
};
/**
* Start integration for a given integration option [integrationOption]
* @param {Object} obj
* @param {Object} obj.integrationOption - an integration option
* @param {String} obj.name
* @param {String} obj.type
* @param {String} obj.docsLink
* @returns
*/
const handleIntegrationOption = async ({
integrationOption,
}: {
integrationOption: any;
}) => {
try {
// generate CSRF token for OAuth2 code-token exchange integrations
const state = crypto.randomBytes(16).toString('hex');
localStorage.setItem('latestCSRFToken', state);
switch (integrationOption.name) {
case 'Heroku':
window.location.assign(
`https://id.heroku.com/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=write-protected&state=${state}`
);
break;
case 'Vercel':
window.location.assign(
`https://vercel.com/integrations/${integrationOption.clientSlug}/new?state=${state}`
);
break;
case 'Netlify':
window.location.assign(
`https://app.netlify.com/authorize?client_id=${integrationOption.clientId}&response_type=code&state=${state}&redirect_uri=${window.location.origin}/netlify`
);
break;
case 'GitHub':
window.location.assign(
`https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/github&state=${state}`
);
break;
// case 'Fly.io':
// console.log('fly.io');
// setIntegrationAccessTokenDialogOpen(true);
// break;
}
} catch (err) {
console.log(err);
}
};
/**
* Open dialog to activate bot if bot is not active.
* Otherwise, start integration [integrationOption]
* @param {Object} integrationOption - an integration option
* @param {String} integrationOption.name
* @param {String} integrationOption.type
* @param {String} integrationOption.docsLink
* @returns
*/
const integrationOptionPress = (integrationOption: any) => {
try {
if (bot.isActive) {
// case: bot is active -> proceed with integration
handleIntegrationOption({ integrationOption });
return;
}
// case: bot is not active -> open modal to activate bot
setIsActivateBotDialogOpen(true);
} catch (err) {
console.error(err);
}
};
return (
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<Head>
<title>
{t('common:head-title', { title: t('integrations:title') })}
</title>
<link rel='icon' href='/infisical.ico' />
<meta property='og:image' content='/images/message.png' />
<meta property='og:title' content='Manage your .env files in seconds' />
<meta
name='og:description'
content={t('integrations:description') as string}
/>
</Head>
<div className='w-full pb-2 h-screen max-h-[calc(100vh-10px)] overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar'>
<NavHeader pageName={t('integrations:title')} isProjectRelated={true} />
<ActivateBotDialog
isOpen={isActivateBotDialogOpen}
closeModal={() => setIsActivateBotDialogOpen(false)}
selectedIntegrationOption={selectedIntegrationOption}
handleBotActivate={handleBotActivate}
handleIntegrationOption={handleIntegrationOption}
/>
{/* <IntegrationAccessTokenDialog
isOpen={isIntegrationAccessTokenDialogOpen}
closeModal={() => setIntegrationAccessTokenDialogOpen(false)}
selectedIntegrationOption={selectedIntegrationOption}
handleBotActivate={handleBotActivate}
handleIntegrationOption={handleIntegrationOption}
/> */}
<IntegrationSection
integrations={integrations}
environments={environments}
/>
{cloudIntegrationOptions.length > 0 && bot ? (
<CloudIntegrationSection
cloudIntegrationOptions={cloudIntegrationOptions}
setSelectedIntegrationOption={setSelectedIntegrationOption as any}
integrationOptionPress={integrationOptionPress as any}
integrationAuths={integrationAuths}
/>
) : (
<div></div>
)}
<FrameworkIntegrationSection
frameworks={frameworkIntegrationOptions as any}
/>
</div>
</div>
);
}
Integrations.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
'integrations',
]);
+177
View File
@@ -0,0 +1,177 @@
import { useEffect, useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Button from "~/components/basic/buttons/Button";
import Error from "~/components/basic/Error";
import InputField from "~/components/basic/InputField";
import ListBox from "~/components/basic/Listbox";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
import attemptLogin from "~/utilities/attemptLogin";
import getWorkspaces from "./api/workspace/getWorkspaces";
export default function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errorLogin, setErrorLogin] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const { t } = useTranslation();
const lang = router.locale ?? "en";
const setLanguage = async (to: string) => {
router.push("/login", "/login", { locale: to });
localStorage.setItem("lang", to);
};
useEffect(() => {
const redirectToDashboard = async () => {
let userWorkspace;
try {
const userWorkspaces = await getWorkspaces();
userWorkspace = userWorkspaces[0]._id;
router.push("/dashboard/" + userWorkspace);
} catch (error) {
console.log("Error - Not logged in yet");
}
};
redirectToDashboard();
}, []);
/**
* This function check if the user entered the correct credentials and should be allowed to log in.
*/
const loginCheck = async () => {
if (!email || !password) {
return;
}
setIsLoading(true);
await attemptLogin(
email,
password,
setErrorLogin,
router,
false,
true
).then(() => {
setTimeout(function () {
setIsLoading(false);
}, 2000);
});
};
return (
<div className="bg-bunker-800 h-screen flex flex-col justify-start px-6">
<Head>
<title>{t("common:head-title", { title: t("login:title") })}</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
<meta property="og:title" content={t("login:og-title") ?? ""} />
<meta name="og:description" content={t("login:og-description") ?? ""} />
</Head>
<Link href="/">
<div className="flex justify-center mb-8 mt-20 cursor-pointer">
<Image
src="/images/biglogo.png"
height={90}
width={120}
alt="long logo"
/>
</div>
</Link>
<form
onChange={() => setErrorLogin(false)}
onSubmit={(e) => e.preventDefault()}
>
<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
<p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
{t("login:login")}
</p>
<div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
<InputField
label={t("common:email")}
onChangeHandler={setEmail}
type="email"
value={email}
placeholder=""
isRequired
autoComplete="username"
/>
</div>
<div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
<InputField
label={t("common:password")}
onChangeHandler={setPassword}
type="password"
value={password}
placeholder=""
isRequired
autoComplete="current-password"
id="current-password"
/>
<div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
<Link href="/verify-email">
<button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
{t("login:forgot-password")}
</button>
</Link>
</div>
</div>
{!isLoading && errorLogin && (
<Error text={t("login:error-login") ?? ""} />
)}
<div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
<div className="text-l mt-6 m-8 px-8 py-3 text-lg">
<Button
type="submit"
text={t("login:login") ?? ""}
onButtonPressed={loginCheck}
loading={isLoading}
size="lg"
/>
</div>
</div>
{/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
<p className="text-gray-400">I may have <Link href="/login"><u className="text-sky-500 cursor-pointer">forgotten my password.</u></Link></p>
</div> */}
</div>
{false && (
<div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
{t("common:maintenance-alert")}
</div>
)}
<div className="flex flex-row items-center justify-center md:pb-4 mt-4">
<p className="text-sm flex justify-center text-gray-400 w-max">
{t("login:need-account")}
</p>
<Link href="/signup">
<button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
{t("login:create-account")}
</button>
</Link>
</div>
</form>
<div className="absolute right-4 top-0 mt-4 flex items-center justify-center">
<div className="w-48 mx-auto">
<ListBox
selected={lang}
onChange={setLanguage}
data={["en", "ko", "fr", "pt-BR"]}
isFull
text={`${t("common:language")}: `}
/>
</div>
</div>
</div>
);
}
export const getStaticProps = getTranslatedStaticProps(["auth", "login"]);
+46
View File
@@ -0,0 +1,46 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import queryString from 'query-string';
import AuthorizeIntegration from './api/integrations/authorizeIntegration';
export default function Netlify() {
const router = useRouter();
const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
const code = parsedUrl.code;
const state = parsedUrl.state;
// modify comment here
/**
* Here we forward to the default workspace if a user opens this url
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
(async () => {
try {
if (!code) throw new Error('Code not found');
if (state === localStorage.getItem('latestCSRFToken')) {
localStorage.removeItem('latestCSRFToken');
await AuthorizeIntegration({
workspaceId: localStorage.getItem('projectData.id') as string,
code: code as string,
integration: 'netlify',
});
router.push(
'/integrations/' + localStorage.getItem('projectData.id')
);
}
} catch (err) {
console.error('Netlify integration error: ', err);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div></div>;
}
Netlify.requireAuth = true;
+32
View File
@@ -0,0 +1,32 @@
import Image from 'next/image';
import { getTranslatedServerSideProps } from '~/utilities/withTranslateProps';
export default function NoProjects() {
return (
<div className='h-full flex flex-col items-center justify-center text-gray-300 text-lg text-center w-11/12 mr-auto'>
<div className='mb-4 mr-16'>
<Image
src='/images/dragon-cant-find.png'
height={270}
width={436}
alt='google logo'
></Image>
</div>
<div className='p-4 rounded-md bg-bunker-500 mb-8 text-bunker-300 shadow-xl'>
<div className='max-w-md'>
You are not part of any projects in this organization yet. When you
do, they will appear here.
</div>
<div className='max-w-md mt-4'>
Create a new project, or ask other organization members to give you
neccessary permissions.
</div>
</div>
</div>
);
}
NoProjects.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps(['noprojects']);
+291
View File
@@ -0,0 +1,291 @@
import { useState } from 'react';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import jsrp from 'jsrp';
import queryString from 'query-string';
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';
const client = new jsrp.client();
export default function PasswordReset() {
const [verificationToken, setVerificationToken] = useState('');
const [step, setStep] = useState(1);
const [backupKey, setBackupKey] = useState('');
const [privateKey, setPrivateKey] = useState('');
const [newPassword, setNewPassword] = useState('');
const [backupKeyError, setBackupKeyError] = useState(false);
const [passwordErrorLength, setPasswordErrorLength] = useState(false);
const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
const router = useRouter();
const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
const token = parsedUrl.token as string;
const email = (parsedUrl.to as string)?.replace(' ', '+').trim();
// Unencrypt the private key with a backup key
const getEncryptedKeyHandler = async () => {
try {
const result = await getBackupEncryptedPrivateKey({ verificationToken });
setPrivateKey(
Aes256Gcm.decrypt({
ciphertext: result.encryptedPrivateKey,
iv: result.iv,
tag: result.tag,
secret: backupKey,
})
);
setStep(3);
} catch {
setBackupKeyError(true);
}
};
// If everything is correct, reset the password
const resetPasswordHandler = async () => {
const errorCheck = passwordCheck({
password: newPassword,
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
errorCheck: false,
});
if (!errorCheck) {
// Generate a random pair of a public and a private key
const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
text: privateKey,
secret: newPassword
.slice(0, 32)
.padStart(
32 +
(newPassword.slice(0, 32).length - new Blob([newPassword]).size),
'0'
),
}) as { ciphertext: string; iv: string; tag: string };
client.init(
{
username: email,
password: newPassword,
},
async () => {
client.createVerifier(
async (err: any, result: { salt: string; verifier: string }) => {
const response = await resetPasswordOnAccountRecovery({
verificationToken,
encryptedPrivateKey: ciphertext,
iv,
tag,
salt: result.salt,
verifier: result.verifier,
});
// if everything works, go the main dashboard page.
if (response?.status === 200) {
router.push('/login');
}
}
);
}
);
}
};
// Click a button to confirm email
const stepConfirmEmail = (
<div className='bg-bunker flex flex-col items-center w-full py-6 max-w-xs md:max-w-lg mx-auto my-32 px-4 md:px-6 mx-1 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'>
Confirm your email
</p>
<Image
src='/images/envelope.svg'
height={262}
width={410}
alt='verify email'
></Image>
<div className='flex 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'>
<Button
text='Confirm Email'
onButtonPressed={async () => {
const response = await EmailVerifyOnPasswordReset({
email,
code: token,
});
if (response.status == 200) {
setVerificationToken((await response.json()).token);
setStep(2);
} else {
console.log('ERROR', response);
router.push('/email-not-verified');
}
}}
size='lg'
/>
</div>
</div>
);
// Input backup key
const stepInputBackupKey = (
<div className='bg-bunker flex flex-col items-center w-full pt-6 pb-3 max-w-xs md:max-w-lg mx-auto my-32 px-4 md:px-6 mx-1 rounded-xl drop-shadow-xl'>
<p className='text-2xl md:text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-4'>
Enter your backup key
</p>
<div className='flex flex-row items-center justify-center md:pb-4 mt-4 md:mx-2'>
<p className='text-sm flex justify-center text-gray-400 w-max max-w-md'>
You can find it in your emrgency kit. You had to download the enrgency
kit during signup.
</p>
</div>
<div className='flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28'>
<InputField
label='Backup Key'
onChangeHandler={setBackupKey}
type='password'
value={backupKey}
placeholder=''
isRequired
error={backupKeyError}
errorText='Something is wrong with the backup key'
/>
</div>
<div className='flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm'>
<div className='text-l mt-6 m-8 px-8 py-3 text-lg'>
<Button
text='Submit Backup Key'
onButtonPressed={() => getEncryptedKeyHandler()}
size='lg'
/>
</div>
</div>
</div>
);
// Enter new password
const stepEnterNewPassword = (
<div className='bg-bunker flex flex-col items-center w-full pt-6 pb-3 max-w-xs md:max-w-lg mx-auto my-32 px-4 md:px-6 mx-1 rounded-xl drop-shadow-xl'>
<p className='text-2xl md:text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100'>
Enter new password
</p>
<div className='flex flex-row items-center justify-center md:pb-4 mt-1 md:mx-2'>
<p className='text-sm flex justify-center text-gray-400 w-max max-w-md'>
Make sure you save it somewhere save.
</p>
</div>
<div className='flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28'>
<InputField
label='New Password'
onChangeHandler={(password) => {
setNewPassword(password);
passwordCheck({
password,
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
errorCheck: false,
});
}}
type='password'
value={newPassword}
isRequired
error={
passwordErrorLength && passwordErrorLowerCase && passwordErrorNumber
}
autoComplete='new-password'
id='new-password'
/>
</div>
{passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber ? (
<div className='w-full mt-3 bg-white/5 px-2 mx-2 flex flex-col items-start py-2 rounded-md max-w-md mb-2'>
<div className={`text-gray-400 text-sm mb-1`}>
Password should contain at least:
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorLength ? (
<FontAwesomeIcon icon={faX} className='text-md text-red mr-2.5' />
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorLength ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
14 characters
</div>
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorLowerCase ? (
<FontAwesomeIcon icon={faX} className='text-md text-red mr-2.5' />
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
1 lowercase character
</div>
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorNumber ? (
<FontAwesomeIcon icon={faX} className='text-md text-red mr-2.5' />
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
1 number
</div>
</div>
</div>
) : (
<div className='py-2'></div>
)}
<div className='flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm'>
<div className='text-l mt-6 m-8 px-8 py-3 text-lg'>
<Button
text='Submit New Password'
onButtonPressed={() => resetPasswordHandler()}
size='lg'
/>
</div>
</div>
</div>
);
return (
<div className='bg-bunker-800 h-screen w-full flex flex-col items-center justify-center'>
{step === 1 && stepConfirmEmail}
{step === 2 && stepInputBackupKey}
{step === 3 && stepEnterNewPassword}
</div>
);
}
export const getServerSideProps = getTranslatedStaticProps([]);
+38
View File
@@ -0,0 +1,38 @@
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'>
<Head>
<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-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=''>
<Image
src='/images/invitation-expired.svg'
height={500}
width={800}
alt='google logo'
></Image>
</div>
</div>
</div>
);
}
@@ -0,0 +1,123 @@
import { useEffect, useState } from 'react';
import Head from 'next/head';
import { useTranslation } from 'next-i18next';
import Plan from '~/components/billing/Plan';
import NavHeader from '~/components/navigation/NavHeader';
import { STRIPE_PRODUCT_PRO, STRIPE_PRODUCT_STARTER } from '~/utilities/config';
import { getTranslatedServerSideProps } from '~/utilities/withTranslateProps';
import getOrganizationSubscriptions from '../../api/organization/GetOrgSubscription';
import getOrganizationUsers from '../../api/organization/GetOrgUsers';
export default function SettingsBilling() {
const [currentPlan, setCurrentPlan] = useState('');
const [numUsers, setNumUsers] = useState(0);
const { t } = useTranslation();
const plans = [
{
key: 1,
name: t('billing:starter.name')!,
price: t('billing:free')!,
priceExplanation: t('billing:starter.price-explanation')!,
text: t('billing:starter.text')!,
subtext: t('billing:starter.subtext')!,
buttonTextMain: t('billing:downgrade')!,
buttonTextSecondary: t('billing:learn-more')!,
current: currentPlan == STRIPE_PRODUCT_STARTER,
},
{
key: 2,
name: t('billing:professional.name')!,
price: '$9',
priceExplanation: t('billing:professional.price-explanation')!,
subtext: t('billing:professional.subtext')!,
text: t('billing:professional.text')!,
buttonTextMain: t('billing:upgrade')!,
buttonTextSecondary: t('billing:learn-more')!,
current: currentPlan == STRIPE_PRODUCT_PRO,
},
{
key: 3,
name: t('billing:enterprise.name')!,
price: t('billing:custom-pricing')!,
text: t('billing:enterprise.text')!,
buttonTextMain: t('billing:schedule-demo')!,
buttonTextSecondary: t('billing:learn-more')!,
current: false,
},
];
useEffect(() => {
(async () => {
const orgId = localStorage.getItem('orgData.id') as string;
const subscriptions = await getOrganizationSubscriptions({
orgId,
});
setCurrentPlan(subscriptions.data[0].plan.id);
const orgUsers = await getOrganizationUsers({
orgId,
});
setNumUsers(orgUsers.length);
})();
}, []);
return (
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<Head>
<title>{t('common:head-title', { title: t('billing:title') })}</title>
<link rel='icon' href='/infisical.ico' />
</Head>
<div className='flex flex-row'>
<div className='w-full max-h-screen pb-2 overflow-y-auto'>
<NavHeader pageName={t('billing:title')} />
<div className='flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl'>
<div className='flex flex-col justify-start items-start text-3xl'>
<p className='font-semibold mr-4 text-gray-200'>
{t('billing:title')}
</p>
<p className='font-normal mr-4 text-gray-400 text-base'>
{t('billing:description')}
</p>
</div>
</div>
<div className='flex flex-col ml-6 text-mineshaft-50'>
<p className='text-xl font-semibold'>{t('billing:subscription')}</p>
<div className='flex flex-row mt-4 overflow-x-auto'>
{plans.map((plan) => (
<Plan key={plan.name} plan={plan} />
))}
</div>
<p className='text-xl font-bold mt-12'>
{t('billing:current-usage')}
</p>
<div className='flex flex-row'>
<div className='mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col'>
<p className='text-6xl font-bold'>{numUsers}</p>
<p className='text-gray-300'>
{numUsers > 1
? 'Organization members'
: 'Organization member'}
</p>
</div>
{/* <div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
<p className="text-6xl font-bold">1 </p>
<p className="text-gray-300">Organization projects</p>
</div> */}
</div>
</div>
</div>
</div>
</div>
);
}
SettingsBilling.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
'settings',
'billing',
]);
+398
View File
@@ -0,0 +1,398 @@
import { useEffect, useState } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import {
faMagnifyingGlass,
faPlus,
faX,
} from '@fortawesome/free-solid-svg-icons';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from '~/components/basic/buttons/Button';
import AddIncidentContactDialog from '~/components/basic/dialog/AddIncidentContactDialog';
import AddUserDialog from '~/components/basic/dialog/AddUserDialog';
import InputField from '~/components/basic/InputField';
import UserTable from '~/components/basic/table/UserTable';
import NavHeader from '~/components/navigation/NavHeader';
import guidGenerator from '~/utilities/randomId';
import { getTranslatedServerSideProps } from '~/utilities/withTranslateProps';
import addUserToOrg from '../../api/organization/addUserToOrg';
import deleteIncidentContact from '../../api/organization/deleteIncidentContact';
import getIncidentContacts from '../../api/organization/getIncidentContacts';
import getOrganization from '../../api/organization/GetOrg';
import getOrganizationSubscriptions from '../../api/organization/GetOrgSubscription';
import getOrganizationUsers from '../../api/organization/GetOrgUsers';
import renameOrg from '../../api/organization/renameOrg';
import getUser from '../../api/user/getUser';
import deleteWorkspace from '../../api/workspace/deleteWorkspace';
import getWorkspaces from '../../api/workspace/getWorkspaces';
export default function SettingsOrg() {
const [buttonReady, setButtonReady] = useState(false);
const router = useRouter();
const [orgName, setOrgName] = useState('');
const [emailUser, setEmailUser] = useState('');
const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
const [searchUsers, setSearchUsers] = useState('');
const [isAddIncidentContactOpen, setIsAddIncidentContactOpen] =
useState(false);
const [isAddUserOpen, setIsAddUserOpen] = useState(
router.asPath.split('?')[1] == 'invite'
);
const [incidentContacts, setIncidentContacts] = useState<string[]>([]);
const [searchIncidentContact, setSearchIncidentContact] = useState('');
const [userList, setUserList] = useState<any[]>([]);
const [personalEmail, setPersonalEmail] = useState('');
const [email, setEmail] = useState('');
const [currentPlan, setCurrentPlan] = useState('');
const workspaceId = router.query.id as string;
const { t } = useTranslation();
useEffect(() => {
(async () => {
const orgId = localStorage.getItem('orgData.id') as string;
const org = await getOrganization({
orgId,
});
setOrgName(org.name);
const incidentContactsData = await getIncidentContacts(
localStorage.getItem('orgData.id') as string
);
setIncidentContacts(
incidentContactsData?.map((contact) => contact.email)
);
const user = await getUser();
setPersonalEmail(user.email);
const orgUsers = await getOrganizationUsers({
orgId,
});
setUserList(
orgUsers.map((user) => ({
key: guidGenerator(),
firstName: user.user?.firstName,
lastName: user.user?.lastName,
email: user.user?.email == null ? user.inviteEmail : user.user?.email,
role: user?.role,
status: user?.status,
userId: user.user?._id,
membershipId: user._id,
publicKey: user.user?.publicKey,
}))
);
const subscriptions = await getOrganizationSubscriptions({
orgId,
});
setCurrentPlan(subscriptions.data[0].plan.product);
})();
}, []);
const modifyOrgName = (newName: string) => {
setButtonReady(true);
setOrgName(newName);
};
const submitChanges = (newOrgName: string) => {
renameOrg(localStorage.getItem('orgData.id') as string, newOrgName);
setButtonReady(false);
};
function closeAddUserModal() {
setIsAddUserOpen(false);
}
function closeAddIncidentContactModal() {
setIsAddIncidentContactOpen(false);
}
function openAddUserModal() {
setIsAddUserOpen(true);
}
function openAddIncidentContactModal() {
setIsAddIncidentContactOpen(true);
}
async function submitAddUserModal(email: string) {
await addUserToOrg(email, localStorage.getItem('orgData.id') as string);
setEmail('');
setIsAddUserOpen(false);
router.reload();
}
const deleteIncidentContactFully = (incidentContact: string) => {
setIncidentContacts(
incidentContacts.filter((contact) => contact != incidentContact)
);
deleteIncidentContact(
localStorage.getItem('orgData.id') as string,
incidentContact
);
};
/**
* This function deleted a workspace.
* It first checks if there is more than one workspace aviable. Otherwise, it doesn't delete
* It then checks if the name of the workspace to be deleted is correct. Otherwise, it doesn't delete.
* It then deletes the workspace and forwards the user to another aviable workspace.
*/
const executeDeletingWorkspace = async () => {
const userWorkspaces = await getWorkspaces();
if (userWorkspaces.length > 1) {
if (
userWorkspaces.filter((workspace) => workspace._id == workspaceId)[0]
.name == workspaceToBeDeletedName
) {
await deleteWorkspace(workspaceId);
const userWorkspaces = await getWorkspaces();
router.push('/dashboard/' + userWorkspaces[0]._id);
}
}
};
return (
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<Head>
<title>
{t('common:head-title', { title: t('settings-org:title') })}
</title>
<link rel='icon' href='/infisical.ico' />
</Head>
<div className='flex flex-row'>
<div className='w-full max-h-screen pb-2 overflow-y-auto'>
<NavHeader pageName={t('settings-org:title')} />
<AddIncidentContactDialog
isOpen={isAddIncidentContactOpen}
closeModal={closeAddIncidentContactModal}
workspaceId={workspaceId}
incidentContacts={incidentContacts}
setIncidentContacts={setIncidentContacts}
/>
<div className='flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl'>
<div className='flex flex-col justify-start items-start text-3xl'>
<p className='font-semibold mr-4 text-gray-200'>
{t('settings-org:title')}
</p>
<p className='font-normal mr-4 text-gray-400 text-base'>
{t('settings-org:description')}
</p>
</div>
</div>
<div className='flex flex-col ml-6 text-mineshaft-50 mr-6 max-w-5xl'>
<div className='flex flex-col'>
<div className='min-w-md mt-2 flex flex-col items-end pb-4'>
<div className='bg-white/5 rounded-md px-6 py-4 flex flex-col items-start w-full mb-6'>
<div className='max-h-28 w-full max-w-md mr-auto'>
<p className='font-semibold mr-4 text-gray-200 text-xl mb-2'>
{t('common:display-name')}
</p>
<InputField
label=''
// label="Organization Name"
onChangeHandler={modifyOrgName}
type='varName'
value={orgName}
placeholder=''
isRequired
/>
</div>
<div className='flex justify-start w-full'>
<div className={`flex justify-start max-w-sm mt-4 mb-2`}>
<Button
text={t('common:save-changes') as string}
onButtonPressed={() => submitChanges(orgName)}
color='mineshaft'
size='md'
active={buttonReady}
iconDisabled={faCheck}
textDisabled={t('common:saved') as string}
/>
</div>
</div>
</div>
</div>
</div>
<div className='bg-white/5 rounded-md px-6 pt-6 pb-2 flex flex-col items-start w-full mb-6'>
<p className='font-semibold mr-4 text-white text-xl'>
{t('section-members:org-members')}
</p>
<p className='mr-4 text-gray-400 mt-2 mb-2'>
{t('section-members:org-members-description')}
</p>
<AddUserDialog
isOpen={isAddUserOpen}
closeModal={closeAddUserModal}
submitModal={submitAddUserModal}
email={emailUser}
workspaceId={workspaceId}
setEmail={setEmailUser}
currentPlan={currentPlan}
orgName={orgName}
/>
{/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */}
<div className='pb-1 w-full flex flex-row items-start max-w-6xl'>
<div className='h-10 w-full bg-white/5 mt-2 flex items-center rounded-md flex-row '>
<FontAwesomeIcon
className='bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400'
icon={faMagnifyingGlass}
/>
<input
className='pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none'
value={searchUsers}
onChange={(e) => setSearchUsers(e.target.value)}
placeholder={t('section-members:search-members') as string}
/>
</div>
<div className='mt-2 ml-2 min-w-max flex flex-row items-start justify-start'>
<Button
text={t('section-members:add-member') as string}
onButtonPressed={openAddUserModal}
color='mineshaft'
size='md'
icon={faPlus}
/>
</div>
</div>
{userList && (
<div className='overflow-y-auto max-w-6xl w-full'>
<UserTable
userData={userList}
changeData={setUserList}
myUser={personalEmail}
filter={searchUsers.toLowerCase()}
resendInvite={submitAddUserModal}
isOrg={true}
// onClick={openDeleteModal}
// deleteUser={deleteMembership}
// setUserIdToBeDeleted={setUserIdToBeDeleted}
className='w-full'
/>
</div>
)}
</div>
<div className='bg-white/5 rounded-md px-6 pt-6 pb-6 flex flex-col items-start w-full mb-6 mt-4'>
<div className='flex flex-row max-w-5xl justify-between items-center w-full'>
<div className='flex flex-col justify-between w-full max-w-3xl'>
<p className='text-xl font-semibold mb-3 min-w-max'>
{t('section-incident:incident-contacts')}
</p>
<p className='text-xs text-gray-500 mb-2 min-w-max'>
{t('section-incident:incident-contacts-description')}
</p>
</div>
<div className='mt-4 mb-2 min-w-max flex flex-row items-end justify-center'>
<Button
text={t('section-incident:add-contact') as string}
onButtonPressed={openAddIncidentContactModal}
color='mineshaft'
size='md'
icon={faPlus}
/>
</div>
</div>
<div className='h-12 w-full max-w-5xl bg-white/5 mt-2 flex items-center rounded-t-md flwex-row'>
<FontAwesomeIcon
className='bg-white/5 rounded-tl-md py-4 pl-4 pr-2 text-gray-400'
icon={faMagnifyingGlass}
/>
<input
className='pl-2 text-gray-400 rounded-tr-md bg-white/5 w-full h-full outline-none'
value={searchIncidentContact}
onChange={(e) => setSearchIncidentContact(e.target.value)}
placeholder={t('common:search') as string}
/>
</div>
{incidentContacts?.filter((email) =>
email.includes(searchIncidentContact)
).length > 0 ? (
incidentContacts
.filter((email) => email.includes(searchIncidentContact))
.map((contact) => (
<div
key={guidGenerator()}
className='flex flex-row items-center justify-between max-w-5xl px-4 py-3 hover:bg-white/5 border-t border-gray-600 w-full'
>
<p className='text-gray-300'>{contact}</p>
<div className='opacity-50 hover:opacity-100 duration-200'>
<Button
onButtonPressed={() =>
deleteIncidentContactFully(contact)
}
color='red'
size='icon-sm'
icon={faX}
/>
</div>
</div>
))
) : (
<div className='w-full flex flex-row justify-center mt-6 max-w-4xl ml-6'>
<p className='text-gray-400'>
{t('section-incident:no-incident-contacts')}
</p>
</div>
)}
</div>
{/* <div className="border-l border-red pb-4 pl-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pt-2 max-w-6xl">
<p className="text-xl font-bold text-red">
Danger Zone
</p>
<p className="mt-4 text-md text-gray-400">
As soon as you delete an organization, you will
not be able to undo it. This will immediately
remove all organization members and cancel your
subscription. If you still want to do that,
please enter the name of the organization below.
</p>
<div className="max-h-28 w-full max-w-xl mr-auto mt-8 max-w-xl">
<InputField
label="Organization to be Deleted"
onChangeHandler={
setWorkspaceToBeDeletedName
}
type="varName"
value={workspaceToBeDeletedName}
placeholder=""
isRequired
/>
</div>
<button
type="button"
className="mt-6 w-full max-w-xl inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-bold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={executeDeletingWorkspace}
>
Delete Project
</button>
<p className="mt-0.5 ml-1 text-xs text-gray-500">
Note: You can only delete a project in case you
have more than one.
</p>
</div> */}
</div>
</div>
</div>
</div>
);
}
SettingsOrg.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
'settings',
'settings-org',
'section-incident',
'section-members',
]);
@@ -0,0 +1,370 @@
import { useEffect, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faCheck, faPlus, faX } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import Button from "~/components/basic/buttons/Button";
import InputField from "~/components/basic/InputField";
import ListBox from "~/components/basic/Listbox";
import ApiKeyTable from "~/components/basic/table/ApiKeyTable";
import NavHeader from "~/components/navigation/NavHeader";
import changePassword from "~/components/utilities/cryptography/changePassword";
import issueBackupKey from "~/components/utilities/cryptography/issueBackupKey";
import passwordCheck from "~/utilities/checks/PasswordCheck";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import AddApiKeyDialog from "../../../components/basic/dialog/AddApiKeyDialog";
import getAPIKeys from "../../api/apiKey/getAPIKeys";
import getUser from "../../api/user/getUser";
export default function PersonalSettings() {
const [personalEmail, setPersonalEmail] = useState('');
const [personalName, setPersonalName] = useState('');
const [passwordErrorLength, setPasswordErrorLength] = useState(false);
const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
const [currentPasswordError, setCurrentPasswordError] = useState(false);
const [currentPassword, setCurrentPassword] = useState('');
const [newPassword, setNewPassword] = useState('');
const [backupPassword, setBackupPassword] = useState('');
const [passwordChanged, setPasswordChanged] = useState(false);
const [backupKeyIssued, setBackupKeyIssued] = useState(false);
const [backupKeyError, setBackupKeyError] = useState(false);
const [isAddApiKeyDialogOpen, setIsAddApiKeyDialogOpen] = useState(false)
const [apiKeys, setApiKeys] = useState<any[]>([]);
const { t } = useTranslation();
const router = useRouter();
const lang = router.locale ?? 'en';
const setLanguage = async (to: string) => {
router.push(router.asPath, router.asPath, { locale: to });
localStorage.setItem('lang', to);
};
useEffect(() => {
const load = async () => {
try {
const user = await getUser();
setApiKeys(
await getAPIKeys()
);
setPersonalEmail(user.email);
setPersonalName(user.firstName + " " + user.lastName);
} catch (err) {
console.error(err);
}
}
load();
}, []);
const closeAddApiKeyModal = () => {
setIsAddApiKeyDialogOpen(false);
};
return (
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<Head>
<title>
{t('common:head-title', { title: t('settings-personal:title') })}
</title>
<link rel='icon' href='/infisical.ico' />
</Head>
<AddApiKeyDialog
isOpen={isAddApiKeyDialogOpen}
closeModal={closeAddApiKeyModal}
apiKeys={apiKeys}
setApiKeys={setApiKeys}
/>
<div className="flex flex-row">
<div className="w-full max-h-screen pb-2 overflow-y-auto">
<NavHeader
pageName={t('settings-personal:title')}
isProjectRelated={false}
/>
<div className='flex flex-row justify-between items-center ml-6 mt-8 mb-6 text-xl max-w-5xl'>
<div className='flex flex-col justify-start items-start text-3xl'>
<p className='font-semibold mr-4 text-gray-200'>
{t('settings-personal:title')}
</p>
<p className='font-normal mr-4 text-gray-400 text-base'>
{t('settings-personal:description')}
</p>
</div>
</div>
<div className="flex flex-col ml-6 text-mineshaft-50 mr-6 max-w-5xl">
<div className="bg-white/5 rounded-md px-6 pt-6 pb-6 flex flex-col items-start w-full mb-6 mt-4">
<p className="text-xl font-semibold self-start">
{t("settings-personal:change-language")}
</p>
<div className='max-h-28 w-ful mt-4'>
<ListBox
selected={lang}
onChange={setLanguage}
data={['en', 'ko', 'fr']}
text={`${t('common:language')}: `}
/>
</div>
</div>
<div className="bg-white/5 rounded-md px-6 flex flex-col items-start w-full mt-2 mb-8 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("settings-personal:api-keys.title")}
</p>
<p className="text-sm text-gray-400">
{t("settings-personal:api-keys.description")}
</p>
</div>
<div className="w-48 mt-2">
<Button
text={String(t("settings-personal:api-keys.add-new"))}
onButtonPressed={() => {
setIsAddApiKeyDialogOpen(true);
}}
color="mineshaft"
icon={faPlus}
size="md"
/>
</div>
</div>
<ApiKeyTable
data={apiKeys}
setApiKeys={setApiKeys as any}
/>
</div>
<div className='bg-white/5 rounded-md px-6 pt-5 pb-6 flex flex-col items-start w-full mb-6'>
<div className='flex flex-row max-w-5xl justify-between items-center w-full'>
<div className='flex flex-col justify-between w-full max-w-3xl'>
<p className='text-xl font-semibold mb-3 min-w-max'>
{t('section-password:change')}
</p>
</div>
</div>
<div className='max-w-xl w-full'>
<InputField
label={t('section-password:current') as string}
onChangeHandler={(password) => {
setCurrentPassword(password);
}}
type='password'
value={currentPassword}
isRequired
error={currentPasswordError}
errorText={t('section-password:current-wrong') as string}
autoComplete='current-password'
id='current-password'
/>
<div className='py-2'></div>
<InputField
label={t('section-password:new') as string}
onChangeHandler={(password) => {
setNewPassword(password);
passwordCheck({
password,
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
errorCheck: false,
});
}}
type='password'
value={newPassword}
isRequired
error={
passwordErrorLength &&
passwordErrorLowerCase &&
passwordErrorNumber
}
autoComplete='new-password'
id='new-password'
/>
</div>
{passwordErrorLength ||
passwordErrorLowerCase ||
passwordErrorNumber ? (
<div className='w-full mt-3 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md max-w-xl mb-2'>
<div className={`text-gray-400 text-sm mb-1`}>
{t('section-password:validate-base')}
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorLength ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorLength ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
{t('section-password:validate-length')}
</div>
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorLowerCase ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorLowerCase
? 'text-gray-400'
: 'text-gray-600'
} text-sm`}
>
{t('section-password:validate-case')}
</div>
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorNumber ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
{t('section-password:validate-number')}
</div>
</div>
</div>
) : (
<div className='py-2'></div>
)}
<div className='flex flex-row items-center mt-3 w-52 pr-3'>
<Button
text={t('section-password:change') as string}
onButtonPressed={() => {
if (
!passwordErrorLength &&
!passwordErrorLowerCase &&
!passwordErrorNumber
) {
changePassword(
personalEmail,
currentPassword,
newPassword,
setCurrentPasswordError,
setPasswordChanged,
setCurrentPassword,
setNewPassword
);
}
}}
color='mineshaft'
size='md'
active={
newPassword != '' &&
currentPassword != '' &&
!(
passwordErrorLength ||
passwordErrorLowerCase ||
passwordErrorNumber
)
}
textDisabled={t('section-password:change') as string}
/>
<FontAwesomeIcon
icon={faCheck}
className={`ml-4 text-primary text-3xl ${
passwordChanged ? 'opacity-100' : 'opacity-0'
} duration-300`}
/>
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-5 pb-6 mt-2 flex flex-col items-start flex flex-col items-start w-full mb-6">
<div className="flex flex-row max-w-5xl justify-between items-center w-full">
<div className="flex flex-col justify-between w-full max-w-3xl">
<p className="text-xl font-semibold mb-3 min-w-max">
{t("settings-personal:emergency.name")}
</p>
<p className='text-sm text-mineshaft-300 min-w-max'>
{t('settings-personal:emergency.text1')}
</p>
<p className='text-sm text-mineshaft-300 mb-5 min-w-max'>
{t('settings-personal:emergency.text2')}
</p>
</div>
</div>
<div className='w-full max-w-xl mb-4'>
<InputField
label={t('section-password:current') as string}
onChangeHandler={setBackupPassword}
type='password'
value={backupPassword}
isRequired
error={backupKeyError}
errorText={t('section-password:current-wrong') as string}
autoComplete='current-password'
id='current-password'
/>
</div>
<div className='flex flex-row items-center mt-3 w-60'>
<Button
text={t('settings-personal:emergency.download') as string}
onButtonPressed={() => {
issueBackupKey({
email: personalEmail,
password: backupPassword,
personalName,
setBackupKeyError,
setBackupKeyIssued,
});
}}
color='mineshaft'
size='md'
active={backupPassword != ''}
textDisabled={
t('settings-personal:emergency.download') as string
}
/>
<FontAwesomeIcon
icon={faCheck}
className={`ml-4 text-primary text-3xl ${
backupKeyIssued ? 'opacity-100' : 'opacity-0'
} duration-300`}
/>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
PersonalSettings.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"settings-personal",
"section-password",
"section-api-key"
]);
@@ -0,0 +1,357 @@
import { useEffect, useState } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
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 EnvironmentTable from '~/components/basic/table/EnvironmentsTable';
import ServiceTokenTable from '~/components/basic/table/ServiceTokenTable';
import NavHeader from '~/components/navigation/NavHeader';
import deleteEnvironment from '~/pages/api/environments/deleteEnvironment';
import updateEnvironment from '~/pages/api/environments/updateEnvironment';
import { getTranslatedServerSideProps } from '~/utilities/withTranslateProps';
import createEnvironment from '../../api/environments/createEnvironment';
import getServiceTokens from '../../api/serviceToken/getServiceTokens';
import deleteWorkspace from '../../api/workspace/deleteWorkspace';
import getWorkspaces from '../../api/workspace/getWorkspaces';
import renameWorkspace from '../../api/workspace/renameWorkspace';
type EnvData = {
name: string;
slug: string;
};
export default function SettingsBasic() {
const [buttonReady, setButtonReady] = useState(false);
const router = useRouter();
const [workspaceName, setWorkspaceName] = useState('');
const [serviceTokens, setServiceTokens] = useState<any[]>([]);
const [environments, setEnvironments] = useState<Array<EnvData>>([]);
const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
const [isAddOpen, setIsAddOpen] = useState(false);
const [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] =
useState(false);
const [projectIdCopied, setProjectIdCopied] = useState(false);
const workspaceId = router.query.id as string;
const { t } = useTranslation();
/**
* 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);
}
}
useEffect(() => {
const load = async () => {
const userWorkspaces = await getWorkspaces();
userWorkspaces.forEach((userWorkspace) => {
if (userWorkspace._id == workspaceId) {
setWorkspaceName(userWorkspace.name);
setEnvironments(userWorkspace.environments);
}
});
const tempServiceTokens = await getServiceTokens({
workspaceId,
});
setServiceTokens(tempServiceTokens);
};
load();
}, []);
const modifyWorkspaceName = (newName: string) => {
setButtonReady(true);
setWorkspaceName(newName);
};
const submitChanges = (newWorkspaceName: string) => {
renameWorkspace(workspaceId, newWorkspaceName);
setButtonReady(false);
};
const closeAddServiceTokenModal = () => {
setIsAddServiceTokenDialogOpen(false);
};
/**
* This function deleted a workspace.
* It first checks if there is more than one workspace aviable. Otherwise, it doesn't delete
* It then checks if the name of the workspace to be deleted is correct. Otherwise, it doesn't delete.
* It then deletes the workspace and forwards the user to another aviable workspace.
*/
const executeDeletingWorkspace = async () => {
const userWorkspaces = await getWorkspaces();
if (userWorkspaces.length > 1) {
if (
userWorkspaces.filter((workspace) => workspace._id === workspaceId)[0]
.name == workspaceToBeDeletedName
) {
await deleteWorkspace(workspaceId);
const userWorkspaces = await getWorkspaces();
router.push('/dashboard/' + userWorkspaces[0]._id);
}
}
};
const onCreateEnvironment = async ({ name, slug }: EnvData) => {
const res = await createEnvironment(workspaceId, {
environmentName: name,
environmentSlug: slug,
});
if (res) {
// TODO: on react-query migration do an api call to resync
setEnvironments((env) => [...env, { name, slug }]);
}
};
const onUpdateEnvironment = async (
oldSlug: string,
{ name, slug }: EnvData
) => {
const res = await updateEnvironment(workspaceId, {
oldEnvironmentSlug: oldSlug,
environmentName: name,
environmentSlug: slug,
});
// TODO: on react-query migration do an api call to resync
if (res) {
setEnvironments((env) =>
env.map((el) => (el.slug === oldSlug ? { name, slug } : el))
);
}
};
const onDeleteEnvironment = async (slugToBeDelete: string) => {
const res = await deleteEnvironment(workspaceId, slugToBeDelete);
// TODO: on react-query migration do an api call to resync
if (res) {
setEnvironments((env) =>
env.filter(({ slug }) => slug !== slugToBeDelete)
);
}
};
return (
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<Head>
<title>
{t('common:head-title', { title: t('settings-project:title') })}
</title>
<link rel='icon' href='/infisical.ico' />
</Head>
<AddServiceTokenDialog
isOpen={isAddServiceTokenDialogOpen}
workspaceId={workspaceId}
environments={environments}
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'>
<NavHeader
pageName={t('settings-project:title')}
isProjectRelated={true}
/>
<div className='flex flex-row justify-between items-center ml-6 my-8 text-xl max-w-5xl'>
<div className='flex flex-col justify-start items-start text-3xl'>
<p className='font-semibold mr-4 text-gray-200'>
{t('settings-project:title')}
</p>
<p className='font-normal mr-4 text-gray-400 text-base'>
{t('settings-project:description')}
</p>
</div>
</div>
<div className='flex flex-col ml-6 text-mineshaft-50'>
<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 mt-2'>
{t('common:display-name')}
</p>
<div className='max-h-28 w-full max-w-md mr-auto'>
<InputField
label=''
onChangeHandler={modifyWorkspaceName}
type='varName'
value={workspaceName}
placeholder=''
isRequired
/>
</div>
<div className='flex justify-start w-full'>
<div className={`flex justify-start max-w-sm mt-4 mb-2`}>
<Button
text={t('common:save-changes') as string}
onButtonPressed={() => submitChanges(workspaceName)}
color='mineshaft'
size='md'
active={buttonReady}
iconDisabled={faCheck}
textDisabled='Saved'
/>
</div>
</div>
</div>
<div className='bg-white/5 rounded-md px-6 pt-4 pb-2 flex flex-col items-start w-full mb-6 mt-4'>
<p className='text-xl font-semibold self-start'>
{t('common:project-id')}
</p>
<p className='text-base text-gray-400 font-normal self-start mt-4'>
{t('settings-project:project-id-description')}
</p>
<p className='text-base text-gray-400 font-normal self-start'>
{t('settings-project:project-id-description2')}
{/* eslint-disable-next-line react/jsx-no-target-blank */}
<a
href='https://infisical.com/docs/getting-started/introduction'
target='_blank'
rel='noopener'
className='text-primary hover:opacity-80 duration-200'
>
{t('settings-project:docs')}
</a>
</p>
<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 w-full mt-4 mb-4'>
<EnvironmentTable
data={environments}
onCreateEnv={onCreateEnvironment}
onUpdateEnv={onUpdateEnvironment}
onDeleteEnv={onDeleteEnvironment}
/>
</div>
<div className='bg-white/5 rounded-md px-6 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-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 mt-2'>
<Button
text={t('section-token:add-new') as string}
onButtonPressed={() => {
setIsAddServiceTokenDialogOpen(true);
}}
color='mineshaft'
icon={faPlus}
size='md'
/>
</div>
</div>
<ServiceTokenTable
data={serviceTokens}
workspaceName={workspaceName}
setServiceTokens={setServiceTokens as any}
/>
</div>
</div>
</div>
<div className='bg-white/5 rounded-md px-6 border-l border-red pl-6 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>
<p className='mt-2 text-md text-gray-400'>
{t('settings-project:danger-zone-note')}
</p>
<div className='max-h-28 w-full max-w-md mr-auto mt-4'>
<InputField
label={t('settings-project:project-to-delete') as string}
onChangeHandler={setWorkspaceToBeDeletedName}
type='varName'
value={workspaceToBeDeletedName}
placeholder=''
isRequired
/>
</div>
<button
type='button'
className='max-w-md mt-6 w-full inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-semibold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
onClick={executeDeletingWorkspace}
>
{t('settings-project:delete-project')}
</button>
<p className='mt-0.5 ml-1 text-xs text-gray-500'>
{t('settings-project:delete-project-note')}
</p>
</div>
</div>
</div>
</div>
</div>
);
}
SettingsBasic.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
'settings',
'settings-project',
'section-token',
]);
+109
View File
@@ -0,0 +1,109 @@
import { useEffect, useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import CodeInputStep from "~/components/signup/CodeInputStep";
import DownloadBackupPDF from "~/components/signup/DonwloadBackupPDFStep";
import EnterEmailStep from "~/components/signup/EnterEmailStep";
import TeamInviteStep from "~/components/signup/TeamInviteStep";
import UserInfoStep from "~/components/signup/UserInfoStep";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
import checkEmailVerificationCode from "./api/auth/CheckEmailVerificationCode";
import getWorkspaces from "./api/workspace/getWorkspaces";
/**
* @returns the signup page
*/
export default function SignUp() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [code, setCode] = useState("");
const [codeError, setCodeError] = useState(false);
const [step, setStep] = useState(1);
const router = useRouter();
const [verificationToken, setVerificationToken] = useState("");
const { t } = useTranslation();
useEffect(() => {
const tryAuth = async () => {
try {
const userWorkspaces = await getWorkspaces();
router.push("/dashboard/" + userWorkspaces[0]._id);
} catch (error) {
console.log("Error - Not logged in yet");
}
};
tryAuth();
}, []);
/**
* Goes to the following step (out of 5) of the signup process.
* Step 1 is submitting your email
* Step 2 is Verifying your email with the code that you received
* Step 3 is asking the final info.
* Step 4 is downloading a backup pdf
* Step 5 is inviting users
*/
const incrementStep = async () => {
if (step == 1 || step == 3 || step == 4) {
setStep(step + 1);
} else if (step == 2) {
// Checking if the code matches the email.
const response = await checkEmailVerificationCode({ email, code });
if (response.status === 200) {
setVerificationToken((await response.json()).token);
setStep(3);
} else {
setCodeError(true);
}
}
};
return (
<div className="bg-bunker-800 h-screen flex flex-col items-center justify-center">
<Head>
<title>{t("common:head-title", { title: t("signup:title") })}</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
<meta property="og:title" content={t("signup:og-title") as string} />
<meta
name="og:description"
content={t("signup:og-description") as string}
/>
</Head>
<div className="flex flex-col justify-center items-center">
<Link href="/">
<div className="flex justify-center mb-2 md:mb-8 cursor-pointer">
<Image
src="/images/biglogo.png"
height={90}
width={120}
alt="Infisical Wide Logo"
/>
</div>
</Link>
<form onSubmit={(e) => e.preventDefault()}>
{step == 1 ? <EnterEmailStep email={email} setEmail={setEmail} incrementStep={incrementStep} />
: step == 2 ? <CodeInputStep email={email} incrementStep={incrementStep} setCode={setCode} codeError={codeError}/>
: step == 3 ? <UserInfoStep verificationToken={verificationToken} incrementStep={incrementStep} email={email} password={password} setPassword={setPassword} firstName={firstName} setFirstName={setFirstName} lastName={lastName} setLastName={setLastName}/>
: step == 4 ? <DownloadBackupPDF incrementStep={incrementStep} email={email} password={password} name={firstName + " " + lastName} />
: <TeamInviteStep/>}
</form>
</div>
</div>
);
}
export const getStaticProps = getTranslatedStaticProps([
"auth",
"signup",
"section-password",
]);
+392
View File
@@ -0,0 +1,392 @@
import { useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { faCheck, faWarning, faX } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import jsrp from 'jsrp';
import queryString from 'query-string';
import nacl from 'tweetnacl';
import { encodeBase64 } from 'tweetnacl-util';
import Button from '~/components/basic/buttons/Button';
import InputField from '~/components/basic/InputField';
import Aes256Gcm from '~/components/utilities/cryptography/aes-256-gcm';
import issueBackupKey from '~/components/utilities/cryptography/issueBackupKey';
import attemptLogin from '~/utilities/attemptLogin';
import passwordCheck from '~/utilities/checks/PasswordCheck';
import completeAccountInformationSignupInvite from './api/auth/CompleteAccountInformationSignupInvite';
import verifySignupInvite from './api/auth/VerifySignupInvite';
const client = new jsrp.client();
export default function SignupInvite() {
const [password, setPassword] = useState('');
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [firstNameError, setFirstNameError] = useState(false);
const [lastNameError, setLastNameError] = useState(false);
const [passwordErrorLength, setPasswordErrorLength] = useState(false);
const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false);
const [errorLogin, setErrorLogin] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [step, setStep] = useState(1);
const [backupKeyError, setBackupKeyError] = useState(false);
const [verificationToken, setVerificationToken] = useState('');
const [backupKeyIssued, setBackupKeyIssued] = useState(false);
const router = useRouter();
const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
const token = parsedUrl.token as string;
const email = (parsedUrl.to as string)?.replace(' ', '+').trim();
// Verifies if the information that the users entered (name, workspace) is there, and if the password matched the criteria.
const signupErrorCheck = async () => {
setIsLoading(true);
let errorCheck = false;
if (!firstName) {
setFirstNameError(true);
errorCheck = true;
} else {
setFirstNameError(false);
}
if (!lastName) {
setLastNameError(true);
errorCheck = true;
} else {
setLastNameError(false);
}
errorCheck = passwordCheck({
password,
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
errorCheck,
});
if (!errorCheck) {
// Generate a random pair of a public and a private key
const pair = nacl.box.keyPair();
const secretKeyUint8Array = pair.secretKey;
const publicKeyUint8Array = pair.publicKey;
const PRIVATE_KEY = encodeBase64(secretKeyUint8Array);
const PUBLIC_KEY = encodeBase64(publicKeyUint8Array);
const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
text: PRIVATE_KEY,
secret: password
.slice(0, 32)
.padStart(
32 + (password.slice(0, 32).length - new Blob([password]).size),
'0'
),
});
localStorage.setItem('PRIVATE_KEY', PRIVATE_KEY);
client.init(
{
username: email,
password: password,
},
async () => {
client.createVerifier(async (err, result) => {
let response = await completeAccountInformationSignupInvite({
email,
firstName,
lastName,
publicKey: PUBLIC_KEY,
ciphertext,
iv,
tag,
salt: result.salt,
verifier: result.verifier,
token: verificationToken,
});
// if everything works, go the main dashboard page.
if (!errorCheck && response.status == 200) {
response = await response.json();
localStorage.setItem('publicKey', PUBLIC_KEY);
localStorage.setItem('encryptedPrivateKey', ciphertext);
localStorage.setItem('iv', iv);
localStorage.setItem('tag', tag);
try {
await attemptLogin(
email,
password,
setErrorLogin,
router,
false,
false
);
setStep(3);
} catch (error) {
setIsLoading(false);
console.log('Error', error);
}
}
});
}
);
} else {
setIsLoading(false);
}
};
// 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-6 flex justify-center text-primary-100'>
Confirm your email
</p>
<Image
src='/images/dragon-signupinvite.svg'
height={262}
width={410}
alt='verify email'
></Image>
<div className='flex 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 () => {
const response = await verifySignupInvite({
email,
code: token,
});
if (response.status == 200) {
const res = await response.json();
// user will have temp token if doesn't have an account
// then continue with account setup workflow
if (res?.token) {
setVerificationToken(res.token);
setStep(2);
} else {
// user will be redirected to dashboard
// if not logged in gets kicked out to login
router.push('/dashboard');
}
} else {
console.log('ERROR', response);
router.push('/requestnewinvite');
}
}}
size='lg'
/>
</div>
</div>
);
// Because this is the invite signup - we directly go to the last step of signup (email is already verified)
const main = (
<div className='bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-32 md:mb-16'>
<p className='text-4xl font-bold flex justify-center mb-6 text-gray-400 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary'>
Almost there!
</p>
<div className='relative z-0 flex items-center justify-end w-full md:p-2 rounded-lg max-h-24'>
<InputField
label='First Name'
onChangeHandler={setFirstName}
type='name'
value={firstName}
isRequired
errorText='Please input your first name.'
error={firstNameError}
autoComplete='given-name'
/>
</div>
<div className='flex items-center justify-center w-full md:p-2 rounded-lg max-h-24'>
<InputField
label='Last Name'
onChangeHandler={setLastName}
type='name'
value={lastName}
isRequired
errorText='Please input your last name.'
error={lastNameError}
autoComplete='family-name'
/>
</div>
<div className='mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60'>
<InputField
label='Password'
onChangeHandler={(password) => {
setPassword(password);
passwordCheck({
password,
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
errorCheck: false,
});
}}
type='password'
value={password}
isRequired
error={
passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase
}
autoComplete='new-password'
id='new-password'
/>
{passwordErrorLength ||
passwordErrorLowerCase ||
passwordErrorNumber ? (
<div className='w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md'>
<div className={`text-gray-400 text-sm mb-1`}>
Password should contain at least:
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorLength ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorLength ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
14 characters
</div>
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorLowerCase ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
1 lowercase character
</div>
</div>
<div className='flex flex-row justify-start items-center ml-1'>
{passwordErrorNumber ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
)}
<div
className={`${
passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
1 number
</div>
</div>
</div>
) : (
<div className='py-2'></div>
)}
</div>
<div className='flex flex-col items-center justify-center md:px-4 md:py-5 mt-2 px-2 py-3 max-h-24 max-w-max mx-auto text-lg'>
<Button
text='Sign Up'
onButtonPressed={() => {
signupErrorCheck();
}}
loading={isLoading}
size='lg'
/>
</div>
</div>
);
// Step 4 of the sign up process (download the emergency kit pdf)
const step4 = (
<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 flex justify-center text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary'>
Save your Emergency Kit
</p>
<div className='flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2'>
<div>
If you get locked out of your account, your Emergency Kit is the only
way to sign in.
</div>
<div className='mt-3'>
We recommend you download it and keep it somewhere safe.
</div>
</div>
<div className='w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4'>
<FontAwesomeIcon icon={faWarning} className='ml-2 mr-4 text-4xl' />
It contains your Secret Key which we cannot access or recover for you if
you lose it.
</div>
<div className='flex flex-col items-center justify-center md:px-4 md:py-5 mt-2 px-2 py-3 max-h-24 max-w-max mx-auto text-lg'>
<Button
text='Download PDF'
onButtonPressed={async () => {
await issueBackupKey({
email,
password,
personalName: firstName + ' ' + lastName,
setBackupKeyError,
setBackupKeyIssued,
});
router.push('/noprojects/');
}}
size='lg'
/>
{/* <div
className="text-l mt-4 text-lg text-gray-400 hover:text-gray-300 duration-200 bg-white/5 px-8 hover:bg-white/10 py-3 rounded-md cursor-pointer"
onClick={() => {
if (localStorage.getItem("projectData.id")) {
router.push("/dashboard/" + localStorage.getItem("projectData.id"));
} else {
router.push("/noprojects")
}
}}
>
Later
</div> */}
</div>
</div>
);
return (
<div className='bg-bunker-800 h-screen flex flex-col items-center justify-center'>
<Head>
<title>Sign Up</title>
<link rel='icon' href='/infisical.ico' />
</Head>
<Link href='/'>
<div className='flex justify-center mb-2 md:mb-4 opacity-80 cursor-pointer'>
<Image
src='/images/biglogo.png'
height={90}
width={120}
alt='Infisical Wide Logo'
/>
</div>
</Link>
{step == 1 ? stepConfirmEmail : step == 2 ? main : step4}
</div>
);
}
+256
View File
@@ -0,0 +1,256 @@
import { useEffect, useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import { faMagnifyingGlass, faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from '~/components/basic/buttons/Button';
import AddProjectMemberDialog from '~/components/basic/dialog/AddProjectMemberDialog';
import UserTable from '~/components/basic/table/UserTable';
import NavHeader from '~/components/navigation/NavHeader';
import guidGenerator from '~/utilities/randomId';
import { getTranslatedServerSideProps } from '~/utilities/withTranslateProps';
import getOrganizationUsers from '../api/organization/GetOrgUsers';
import getUser from '../api/user/getUser';
// import DeleteUserDialog from '~/components/basic/dialog/DeleteUserDialog';
import addUserToWorkspace from '../api/workspace/addUserToWorkspace';
import getWorkspaceUsers from '../api/workspace/getWorkspaceUsers';
import uploadKeys from '../api/workspace/uploadKeys';
interface UserProps {
firstName: string;
lastName: string;
email: string;
_id: string;
publicKey: string;
}
interface MembershipProps {
user: UserProps;
inviteEmail: string;
role: string;
status: string;
_id: string;
}
// #TODO: Update all the workspaceIds
const crypto = require('crypto');
const {
decryptAssymmetric,
encryptAssymmetric,
} = require('../../components/utilities/cryptography/crypto');
const nacl = require('tweetnacl');
nacl.util = require('tweetnacl-util');
export default function Users() {
const [isAddOpen, setIsAddOpen] = useState(false);
// let [isDeleteOpen, setIsDeleteOpen] = useState(false);
// let [userIdToBeDeleted, setUserIdToBeDeleted] = useState(false);
const [email, setEmail] = useState('');
const [personalEmail, setPersonalEmail] = useState('');
const [searchUsers, setSearchUsers] = useState('');
const { t } = useTranslation();
const router = useRouter();
let workspaceId;
function closeAddModal() {
setIsAddOpen(false);
}
// function closeDeleteModal() {
// setIsDeleteOpen(false);
// }
// function deleteMembership(userId) {
// deleteUserFromWorkspace(userId, router.query.id)
// }
// function openDeleteModal() {
// setIsDeleteOpen(true);
// }
async function submitAddModal() {
const result = await addUserToWorkspace(email, String(router.query.id));
if (result?.invitee && result?.latestKey) {
const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
// assymmetrically decrypt symmetric key with local private key
const key = decryptAssymmetric({
ciphertext: result.latestKey.encryptedKey,
nonce: result.latestKey.nonce,
publicKey: result.latestKey.sender.publicKey,
privateKey: PRIVATE_KEY,
});
const { ciphertext, nonce } = encryptAssymmetric({
plaintext: key,
publicKey: result.invitee.publicKey,
privateKey: PRIVATE_KEY,
});
uploadKeys(
String(router.query.id),
result.invitee._id,
ciphertext,
nonce
);
}
setEmail('');
setIsAddOpen(false);
router.reload();
}
function openAddModal() {
setIsAddOpen(true);
}
const [userList, setUserList] = useState([]);
const [orgUserList, setOrgUserList] = useState<any[]>([]);
useEffect(() => {
(async () => {
const user = await getUser();
setPersonalEmail(user.email);
// This part quiries the current users of a project
const workspaceUsers = await getWorkspaceUsers({
workspaceId: String(router.query.id),
});
const tempUserList = workspaceUsers.map(
(membership: MembershipProps) => ({
key: guidGenerator(),
firstName: membership.user?.firstName,
lastName: membership.user?.lastName,
email:
membership.user?.email == null
? membership.inviteEmail
: membership.user?.email,
role: membership?.role,
status: membership?.status,
userId: membership.user?._id,
membershipId: membership._id,
publicKey: membership.user?.publicKey,
})
);
setUserList(tempUserList);
// This is needed to know wha users from an org (if any), we are able to add to a certain project
const orgUsers = await getOrganizationUsers({
orgId: String(localStorage.getItem('orgData.id')),
});
setOrgUserList(orgUsers);
setEmail(
orgUsers
?.filter(
(membership: MembershipProps) => membership.status == 'accepted'
)
.map((membership: MembershipProps) => membership.user.email)
.filter(
(email: string) =>
!tempUserList
?.map((user1: UserProps) => user1.email)
.includes(email)
)[0]
);
})();
}, []);
return userList ? (
<div className='bg-bunker-800 md:h-screen flex flex-col justify-start'>
<Head>
<title>
{t('common:head-title', { title: t('settings-members:title') })}
</title>
<link rel='icon' href='/infisical.ico' />
</Head>
<NavHeader
pageName={t('settings-members:title')}
isProjectRelated={true}
/>
<div className='flex flex-col justify-start items-start px-6 py-6 pb-4 text-3xl'>
<p className='font-semibold mr-4 text-white'>
{t('settings-members:title')}
</p>
<p className='mr-4 text-base text-gray-400'>
{t('settings-members:description')}
</p>
</div>
<AddProjectMemberDialog
isOpen={isAddOpen}
closeModal={closeAddModal}
submitModal={submitAddModal}
email={email}
data={orgUserList
?.filter(
(membership: MembershipProps) => membership.status == 'accepted'
)
.map((membership: MembershipProps) => membership.user.email)
.filter(
(email) =>
!userList?.map((user1: UserProps) => user1.email).includes(email)
)}
setEmail={setEmail}
/>
{/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */}
<div className='px-6 pb-1 w-full flex flex-row items-start min-w-6xl max-w-6xl'>
<div className='h-10 w-full bg-white/5 mt-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'
icon={faMagnifyingGlass}
/>
<input
className='pl-2 text-gray-400 rounded-r-md bg-white/5 w-full h-full outline-none'
value={searchUsers}
onChange={(e) => setSearchUsers(e.target.value)}
placeholder={String(t('section-members:search-members'))}
/>
</div>
<div className='mt-2 ml-2 min-w-max flex flex-row items-start justify-start'>
<Button
text={String(t('section-members:add-member'))}
onButtonPressed={openAddModal}
color='mineshaft'
size='md'
icon={faPlus}
/>
</div>
</div>
<div className='block overflow-y-auto min-w-6xl max-w-6xl px-6'>
<UserTable
userData={userList}
changeData={setUserList}
myUser={personalEmail}
filter={searchUsers}
resendInvite={submitAddModal}
isOrg={false}
// onClick={openDeleteModal}
// deleteUser={deleteMembership}
// setUserIdToBeDeleted={setUserIdToBeDeleted}
/>
</div>
</div>
) : (
<div className='relative z-10 w-10/12 mr-auto h-full ml-2 bg-bunker-800 flex flex-col items-center justify-center'>
<div className='absolute top-0 bg-bunker h-14 border-b border-mineshaft-700 w-full'></div>
<Image
src='/images/loading/loading.gif'
height={70}
width={120}
alt='loading animation'
></Image>
</div>
);
}
Users.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
'settings',
'settings-members',
'section-members',
]);
+46
View File
@@ -0,0 +1,46 @@
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import queryString from 'query-string';
import AuthorizeIntegration from './api/integrations/authorizeIntegration';
export default function Vercel() {
const router = useRouter();
const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
const code = parsedUrl.code;
const state = parsedUrl.state;
/**
* Here we forward to the default workspace if a user opens this url
*/
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
(async () => {
try {
// type check
if (!code) throw new Error('Code not found');
if (state === localStorage.getItem('latestCSRFToken')) {
localStorage.removeItem('latestCSRFToken');
await AuthorizeIntegration({
workspaceId: localStorage.getItem('projectData.id') as string,
code: code as string,
integration: 'vercel',
});
router.push(
'/integrations/' + localStorage.getItem('projectData.id')
);
}
} catch (err) {
console.error('Vercel integration error: ', err);
}
})();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div></div>;
}
Vercel.requireAuth = true;
+97
View File
@@ -0,0 +1,97 @@
import { useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import Button from "~/components/basic/buttons/Button";
import InputField from "~/components/basic/InputField";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
import SendEmailOnPasswordReset from "./api/auth/SendEmailOnPasswordReset";
export default function VerifyEmail() {
const [email, setEmail] = useState("");
const [step, setStep] = useState(1);
/**
* This function sends the verification email and forwards a user to the next step.
*/
const sendVerificationEmail = async () => {
if (email) {
await SendEmailOnPasswordReset({ email });
setStep(2);
}
};
return (
<div className="bg-bunker-800 h-screen flex flex-col justify-start px-6">
<Head>
<title>Login</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
<meta property="og:title" content="Log In to Infisical" />
<meta
name="og:description"
content="Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
/>
</Head>
<Link href="/">
<div className="flex justify-center mb-8 mt-20 cursor-pointer">
<Image
src="/images/biglogo.png"
height={90}
width={120}
alt="long logo"
/>
</div>
</Link>
{step == 1 && (
<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
<p className="text-2xl md:text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
Forgot your password?
</p>
<div className="flex flex-row items-center justify-center md:pb-4 mt-4 md:mx-2">
<p className="text-sm flex justify-center text-gray-400 w-max">
You will need your emergency kit. Enter your email to start
account recovery.
</p>
</div>
<div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
<InputField
label="Email"
onChangeHandler={setEmail}
type="email"
value={email}
placeholder=""
isRequired
autoComplete="username"
/>
</div>
<div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
<div className="text-l mt-6 m-8 px-8 py-3 text-lg">
<Button
text="Continue"
onButtonPressed={sendVerificationEmail}
size="lg"
/>
</div>
</div>
</div>
)}
{step == 2 && (
<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
<p className="text-xl md:text-2xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
Look for an email in your inbox.
</p>
<div className="flex flex-row items-center justify-center md:pb-4 mt-4 md:mx-2">
<p className="text-sm flex justify-center text-gray-400 w-max text-center">
An email with instructions has been sent to {email}.
</p>
</div>
</div>
)}
</div>
);
}
export const getServerSideProps = getTranslatedStaticProps([]);