mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-14 07:30:20 +00:00
chore(frontend): changed source code to src folder from root
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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> */
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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']);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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"]);
|
||||
@@ -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>;
|
||||
}
|
||||
@@ -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',
|
||||
]);
|
||||
@@ -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"]);
|
||||
@@ -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;
|
||||
@@ -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']);
|
||||
@@ -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([]);
|
||||
@@ -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',
|
||||
]);
|
||||
@@ -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',
|
||||
]);
|
||||
@@ -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",
|
||||
]);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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',
|
||||
]);
|
||||
@@ -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;
|
||||
@@ -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([]);
|
||||
Reference in New Issue
Block a user