awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 18:27:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(frontend): migrated to ts completed.

Browse Source
This commit is contained in:
akhilmhdh
2023-01-15 21:34:54 +05:30
parent f19db530b1
commit ffc3562709
22 changed files with 887 additions and 792 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/RouteGuard.tsx
+16 -16
View File
@@ -1,8 +1,8 @@
import { ReactNode, useEffect, useState } from "react"; import { ReactNode, useEffect, useState } from 'react';
import { useRouter } from "next/router"; import { useRouter } from 'next/router';
import { publicPaths } from "~/const"; import { publicPaths } from '~/const';
import checkAuth from "~/pages/api/auth/CheckAuth"; import checkAuth from '~/pages/api/auth/CheckAuth';
// #TODO: finish spinner only when the data loads fully // #TODO: finish spinner only when the data loads fully
// #TODO: Redirect somewhere if the page does not exist // #TODO: Redirect somewhere if the page does not exist
@@ -11,7 +11,7 @@ type Prop = {
children: ReactNode; children: ReactNode;
}; };
export default function RouteGuard({ children }: Prop) { export default function RouteGuard({ children }: Prop): JSX.Element {
const router = useRouter(); const router = useRouter();
const [authorized, setAuthorized] = useState(false); const [authorized, setAuthorized] = useState(false);
@@ -25,16 +25,16 @@ export default function RouteGuard({ children }: Prop) {
// #TODO: add the loading page when not yet authorized. // #TODO: add the loading page when not yet authorized.
const hideContent = () => setAuthorized(false); const hideContent = () => setAuthorized(false);
// const onError = () => setAuthorized(true) // const onError = () => setAuthorized(true)
router.events.on("routeChangeStart", hideContent); router.events.on('routeChangeStart', hideContent);
// router.events.on("routeChangeError", onError); // router.events.on("routeChangeError", onError);
// on route change complete - run auth check // on route change complete - run auth check
router.events.on("routeChangeComplete", authCheck); router.events.on('routeChangeComplete', authCheck);
// unsubscribe from events in useEffect return function // unsubscribe from events in useEffect return function
return () => { return () => {
router.events.off("routeChangeStart", hideContent); router.events.off('routeChangeStart', hideContent);
router.events.off("routeChangeComplete", authCheck); router.events.off('routeChangeComplete', authCheck);
// router.events.off("routeChangeError", onError); // router.events.off("routeChangeError", onError);
}; };
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -43,9 +43,9 @@ export default function RouteGuard({ children }: Prop) {
/** /**
* redirect to login page if accessing a private page and not logged in * redirect to login page if accessing a private page and not logged in
*/ */
async function authCheck(url:string) { async function authCheck(url: string) {
// Make sure that we don't redirect when the user is on the following pages. // Make sure that we don't redirect when the user is on the following pages.
const path = "/" + url.split("?")[0].split("/")[1]; const path = '/' + url.split('?')[0].split('/')[1];
// Check if the user is authenticated // Check if the user is authenticated
const response = await checkAuth(); const response = await checkAuth();
@@ -54,21 +54,21 @@ export default function RouteGuard({ children }: Prop) {
if (!publicPaths.includes(path)) { if (!publicPaths.includes(path)) {
try { try {
if (response.status !== 200) { if (response.status !== 200) {
router.push("/login"); router.push('/login');
console.log("Unauthorized to access."); console.log('Unauthorized to access.');
setAuthorized(false); setAuthorized(false);
} else { } else {
setAuthorized(true); setAuthorized(true);
console.log("Authorized to access."); console.log('Authorized to access.');
} }
} catch (error) { } catch (error) {
console.log( console.log(
"Error (probably the authCheck route is stuck again...):", 'Error (probably the authCheck route is stuck again...):',
error error
); );
} }
} }
} }
return children; return children as JSX.Element;
} }
frontend/components/basic/dialog/ActivateBotDialog.js
-88
View File
@@ -1,88 +0,0 @@
import { Fragment } from "react";
import { useTranslation } from "next-i18next";
import { Dialog, Transition } from "@headlessui/react";
import Button from "../buttons/Button";
const ActivateBotDialog = ({
isOpen,
closeModal,
selectedIntegrationOption,
handleBotActivate,
handleIntegrationOption
}) => {
const { t } = useTranslation();
const submit = async () => {
try {
// 1. activate bot
await handleBotActivate();
// 2. start integration
await handleIntegrationOption({
integrationOption: selectedIntegrationOption
});
} catch (err) {
console.log(err);
}
closeModal();
}
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400"
>
{t("integrations:grant-access-to-secrets")}
</Dialog.Title>
<div className="mt-2 mb-2">
<p className="text-sm text-gray-500">
{t("integrations:why-infisical-needs-access")}
</p>
</div>
<div className="mt-6 max-w-max">
<Button
onButtonPressed={submit}
color="mineshaft"
text={t("integrations:grant-access-button")}
size="md"
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
}
export default ActivateBotDialog;
frontend/components/basic/dialog/ActivateBotDialog.tsx
+98
View File
@@ -0,0 +1,98 @@
import { Fragment } from 'react';
import { useTranslation } from 'next-i18next';
import { Dialog, Transition } from '@headlessui/react';
import Button from '../buttons/Button';
type Props = {
isOpen: boolean;
closeModal: () => void;
selectedIntegrationOption: never[] | null;
handleBotActivate: () => Promise<void>;
handleIntegrationOption: (arg: { integrationOption: never[] }) => void;
};
const ActivateBotDialog = ({
isOpen,
closeModal,
selectedIntegrationOption,
handleBotActivate,
handleIntegrationOption,
}: Props) => {
const { t } = useTranslation();
const submit = async () => {
try {
// 1. activate bot
await handleBotActivate();
// type check
if (!selectedIntegrationOption) return;
// 2. start integration
await handleIntegrationOption({
integrationOption: selectedIntegrationOption,
});
} catch (err) {
console.log(err);
}
closeModal();
};
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as='div' className='relative z-10' onClose={closeModal}>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<div className='fixed inset-0 bg-black bg-opacity-70' />
</Transition.Child>
<div className='fixed inset-0 overflow-y-auto'>
<div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'
>
<Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-gray-400'
>
{t('integrations:grant-access-to-secrets')}
</Dialog.Title>
<div className='mt-2 mb-2'>
<p className='text-sm text-gray-500'>
{t('integrations:why-infisical-needs-access')}
</p>
</div>
<div className='mt-6 max-w-max'>
<Button
onButtonPressed={submit}
color='mineshaft'
text={t('integrations:grant-access-button') as string}
size='md'
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default ActivateBotDialog;
frontend/components/basic/dialog/AddApiKeyDialog.js
-217
View File
@@ -1,217 +0,0 @@
import { Fragment, useState } from "react";
import { useTranslation } from "next-i18next";
import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Dialog, Transition } from "@headlessui/react";
import addAPIKey from "~/pages/api/apiKey/addAPIKey";
import Button from "../buttons/Button";
import InputField from "../InputField";
import ListBox from "../Listbox";
const expiryMapping = {
"1 day": 86400,
"7 days": 604800,
"1 month": 2592000,
"6 months": 15552000,
"12 months": 31104000,
};
const crypto = require('crypto');
// TODO: convert to TS
const AddApiKeyDialog = ({
isOpen,
closeModal,
apiKeys,
setApiKeys
}) => {
const [apiKey, setApiKey] = useState("");
const [apiKeyName, setApiKeyName] = useState("");
const [apiKeyExpiresIn, setApiKeyExpiresIn] = useState("1 day");
const [apiKeyCopied, setApiKeyCopied] = useState(false);
const { t } = useTranslation();
const generateAPIKey = async () => {
const newApiKey = await addAPIKey({
name: apiKeyName,
expiresIn: expiryMapping[apiKeyExpiresIn]
});
setApiKeys([...apiKeys, newApiKey.apiKeyData])
setApiKey(newApiKey.apiKey);
};
function copyToClipboard() {
// Get the text field
var copyText = document.getElementById("apiKey");
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
setApiKeyCopied(true);
setTimeout(() => setApiKeyCopied(false), 2000);
// Alert the copied text
// alert("Copied the text: " + copyText.value);
}
const closeAddApiKeyModal = () => {
closeModal();
setApiKeyName("");
setApiKey("");
};
return (
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-bunker-700 bg-opacity-80" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
{apiKey == "" ? (
<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
{t("section-api-key:add-dialog.title")}
</Dialog.Title>
<div className="mt-2 mb-4">
<div className="flex flex-col">
<p className="text-sm text-gray-500">
{t("section-api-key:add-dialog.description")}
</p>
</div>
</div>
<div className="max-h-28 mb-2">
<InputField
label={t("section-api-key:add-dialog.name")}
onChangeHandler={setApiKeyName}
type="varName"
value={apiKeyName}
placeholder=""
isRequired
/>
</div>
<div className="max-h-28">
<ListBox
selected={apiKeyExpiresIn}
onChange={setApiKeyExpiresIn}
data={[
"1 day",
"7 days",
"1 month",
"6 months",
"12 months",
]}
isFull={true}
text={`${t("common:expired-in")}: `}
/>
</div>
<div className="max-w-max">
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={() => generateAPIKey()}
color="mineshaft"
text={t("section-api-key:add-dialog.add")}
textDisabled={t("section-api-key:add-dialog.add")}
size="md"
active={apiKeyName == "" ? false : true}
/>
</div>
</div>
</Dialog.Panel>
) : (
<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
{t("section-api-key:add-dialog.copy-service-token")}
</Dialog.Title>
<div className="mt-2 mb-4">
<div className="flex flex-col">
<p className="text-sm text-gray-500">
{t(
"section-api-key:add-dialog.copy-service-token-description"
)}
</p>
</div>
</div>
<div className="w-full">
<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-20">
<input
type="text"
value={apiKey}
disabled={true}
id="apiKey"
className="invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none"
></input>
<div className="bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none">
{apiKey}
</div>
<div className="group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200">
<button
onClick={copyToClipboard}
className="h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
>
{apiKeyCopied ? (
<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 px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm">
{t("common:click-to-copy")}
</span>
</div>
</div>
</div>
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={() => closeAddApiKeyModal()}
color="mineshaft"
text="Close"
size="md"
/>
</div>
</Dialog.Panel>
)}
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddApiKeyDialog;
frontend/components/basic/dialog/AddApiKeyDialog.tsx
+225
View File
@@ -0,0 +1,225 @@
import { Fragment, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Dialog, Transition } from '@headlessui/react';
import addAPIKey from '~/pages/api/apiKey/addAPIKey';
import Button from '../buttons/Button';
import InputField from '../InputField';
import ListBox from '../Listbox';
const expiryMapping = {
'1 day': 86400,
'7 days': 604800,
'1 month': 2592000,
'6 months': 15552000,
'12 months': 31104000,
};
type Props = {
isOpen: boolean;
closeModal: () => void;
// TODO: These never and any will be filled by single folder that contains types and hooks about the API
apiKeys: any[];
setApiKeys: (arg: any[]) => void;
};
// TODO: convert to TS
const AddApiKeyDialog = ({
isOpen,
closeModal,
apiKeys,
setApiKeys,
}: Props) => {
const [apiKey, setApiKey] = useState('');
const [apiKeyName, setApiKeyName] = useState('');
const [apiKeyExpiresIn, setApiKeyExpiresIn] = useState('1 day');
const [apiKeyCopied, setApiKeyCopied] = useState(false);
const { t } = useTranslation();
const generateAPIKey = async () => {
const newApiKey = await addAPIKey({
name: apiKeyName,
expiresIn: expiryMapping[apiKeyExpiresIn as keyof typeof expiryMapping],
});
setApiKeys([...apiKeys, newApiKey.apiKeyData]);
setApiKey(newApiKey.apiKey);
};
function copyToClipboard() {
// Get the text field
const copyText = document.getElementById('apiKey') as HTMLInputElement;
// Select the text field
copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices
// Copy the text inside the text field
navigator.clipboard.writeText(copyText.value);
setApiKeyCopied(true);
setTimeout(() => setApiKeyCopied(false), 2000);
// Alert the copied text
// alert("Copied the text: " + copyText.value);
}
const closeAddApiKeyModal = () => {
closeModal();
setApiKeyName('');
setApiKey('');
};
return (
<div className='z-50'>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as='div' className='relative' onClose={closeModal}>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<div className='fixed inset-0 bg-bunker-700 bg-opacity-80' />
</Transition.Child>
<div className='fixed inset-0 overflow-y-auto'>
<div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'
>
{apiKey == '' ? (
<Dialog.Panel className='w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-gray-400 z-50'
>
{t('section-api-key:add-dialog.title')}
</Dialog.Title>
<div className='mt-2 mb-4'>
<div className='flex flex-col'>
<p className='text-sm text-gray-500'>
{t('section-api-key:add-dialog.description')}
</p>
</div>
</div>
<div className='max-h-28 mb-2'>
<InputField
label={t('section-api-key:add-dialog.name')}
onChangeHandler={setApiKeyName}
type='varName'
value={apiKeyName}
placeholder=''
isRequired
/>
</div>
<div className='max-h-28'>
<ListBox
selected={apiKeyExpiresIn}
onChange={setApiKeyExpiresIn}
data={[
'1 day',
'7 days',
'1 month',
'6 months',
'12 months',
]}
isFull={true}
text={`${t('common:expired-in')}: `}
/>
</div>
<div className='max-w-max'>
<div className='mt-6 flex flex-col justify-start w-max'>
<Button
onButtonPressed={() => generateAPIKey()}
color='mineshaft'
text={t('section-api-key:add-dialog.add') as string}
textDisabled={
t('section-api-key:add-dialog.add') as string
}
size='md'
active={apiKeyName == '' ? false : true}
/>
</div>
</div>
</Dialog.Panel>
) : (
<Dialog.Panel className='w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-gray-400 z-50'
>
{t('section-api-key:add-dialog.copy-service-token')}
</Dialog.Title>
<div className='mt-2 mb-4'>
<div className='flex flex-col'>
<p className='text-sm text-gray-500'>
{t(
'section-api-key:add-dialog.copy-service-token-description'
)}
</p>
</div>
</div>
<div className='w-full'>
<div className='flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-20'>
<input
type='text'
value={apiKey}
disabled={true}
id='apiKey'
className='invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none'
></input>
<div className='bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none'>
{apiKey}
</div>
<div className='group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200'>
<button
onClick={copyToClipboard}
className='h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200'
>
{apiKeyCopied ? (
<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 px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm'>
{t('common:click-to-copy')}
</span>
</div>
</div>
</div>
<div className='mt-6 flex flex-col justify-start w-max'>
<Button
onButtonPressed={() => closeAddApiKeyModal()}
color='mineshaft'
text='Close'
size='md'
/>
</div>
</Dialog.Panel>
)}
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddApiKeyDialog;
frontend/components/basic/dialog/AddIncidentContactDialog.js
-99
View File
@@ -1,99 +0,0 @@
import { Fragment, useState } from "react";
import { useTranslation } from "next-i18next";
import { Dialog, Transition } from "@headlessui/react";
import addIncidentContact from "~/pages/api/organization/addIncidentContact";
import Button from "../buttons/Button";
import InputField from "../InputField";
const AddIncidentContactDialog = ({
isOpen,
closeModal,
workspaceId,
incidentContacts,
setIncidentContacts,
}) => {
let [incidentContactEmail, setIncidentContactEmail] = useState("");
const { t } = useTranslation();
const submit = () => {
setIncidentContacts(
incidentContacts?.length > 0
? incidentContacts.concat([incidentContactEmail])
: [incidentContactEmail]
);
addIncidentContact(
localStorage.getItem("orgData.id"),
incidentContactEmail
);
closeModal();
};
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400"
>
{t("section-incident:add-dialog.title")}
</Dialog.Title>
<div className="mt-2 mb-2">
<p className="text-sm text-gray-500">
{t("section-incident:add-dialog.description")}
</p>
</div>
<div className="max-h-28">
<InputField
label={t("common:email")}
onChangeHandler={setIncidentContactEmail}
type="varName"
value={incidentContactEmail}
placeholder=""
isRequired
/>
</div>
<div className="mt-6 max-w-max">
<Button
onButtonPressed={submit}
color="mineshaft"
text={t("section-incident:add-dialog.add-incident")}
size="md"
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddIncidentContactDialog;
frontend/components/basic/dialog/AddIncidentContactDialog.tsx
+108
View File
@@ -0,0 +1,108 @@
import { Fragment, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { Dialog, Transition } from '@headlessui/react';
import addIncidentContact from '~/pages/api/organization/addIncidentContact';
import Button from '../buttons/Button';
import InputField from '../InputField';
type Props = {
isOpen: boolean;
closeModal: () => void;
workspaceId: string;
incidentContacts: string[];
setIncidentContacts: (arg: string[]) => void;
};
const AddIncidentContactDialog = ({
isOpen,
closeModal,
incidentContacts,
setIncidentContacts,
}: Props) => {
const [incidentContactEmail, setIncidentContactEmail] = useState('');
const { t } = useTranslation();
const submit = () => {
setIncidentContacts(
incidentContacts?.length > 0
? incidentContacts.concat([incidentContactEmail])
: [incidentContactEmail]
);
addIncidentContact(
localStorage.getItem('orgData.id') as string,
incidentContactEmail
);
closeModal();
};
return (
<div>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as='div' className='relative z-10' onClose={closeModal}>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<div className='fixed inset-0 bg-black bg-opacity-70' />
</Transition.Child>
<div className='fixed inset-0 overflow-y-auto'>
<div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'
>
<Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-gray-400'
>
{t('section-incident:add-dialog.title')}
</Dialog.Title>
<div className='mt-2 mb-2'>
<p className='text-sm text-gray-500'>
{t('section-incident:add-dialog.description')}
</p>
</div>
<div className='max-h-28'>
<InputField
label={t('common:email')}
onChangeHandler={setIncidentContactEmail}
type='varName'
value={incidentContactEmail}
placeholder=''
isRequired
/>
</div>
<div className='mt-6 max-w-max'>
<Button
onButtonPressed={submit}
color='mineshaft'
text={
t('section-incident:add-dialog.add-incident') as string
}
size='md'
/>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddIncidentContactDialog;
frontend/components/basic/dialog/AddProjectMemberDialog.js
-147
View File
@@ -1,147 +0,0 @@
import { Fragment, useState } from "react";
import { useRouter } from "next/router";
import { Trans, useTranslation } from "next-i18next";
import { Dialog, Transition } from "@headlessui/react";
import Button from "../buttons/Button";
import ListBox from "../Listbox";
const AddProjectMemberDialog = ({
isOpen,
closeModal,
submitModal,
data,
email,
workspaceId,
setEmail,
}) => {
const router = useRouter();
const { t } = useTranslation();
return (
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-black bg-opacity-70" />
</Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
{data?.length > 0 ? (
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
{t("section-members:add-dialog.add-member-to-project")}
</Dialog.Title>
) : (
<Dialog.Title
as="h3"
className="text-lg font-medium leading-6 text-gray-400 z-50"
>
{t("section-members:add-dialog.already-all-invited")}
</Dialog.Title>
)}
<div className="mt-2 mb-4">
{data?.length > 0 ? (
<div className="flex flex-col">
<p className="text-sm text-gray-500">
{t("section-members:add-dialog.user-will-email")}
</p>
<div className="">
<Trans
i18nKey="section-members:add-dialog.looking-add"
components={[
// eslint-disable-next-line react/jsx-key
<button
type="button"
className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={() =>
router.push(
"/settings/org/" + router.query.id
)
}
/>,
// eslint-disable-next-line react/jsx-key
<button
type="button"
className="ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={() =>
router.push(
"/settings/org/" +
router.query.id +
"?invite"
)
}
/>,
]}
/>
</div>
</div>
) : (
<p className="text-sm text-gray-500">
{t("section-members:add-dialog.add-user-org-first")}
</p>
)}
</div>
<div className="max-h-28">
{data?.length > 0 && (
<ListBox
selected={email ? email : data[0]}
onChange={setEmail}
data={data}
isFull={true}
/>
)}
</div>
<div className="max-w-max">
{data?.length > 0 ? (
<div className="mt-6 flex flex-col justify-start w-max">
<Button
onButtonPressed={submitModal}
color="mineshaft"
text={t("section-members:add-member")}
size="md"
/>
</div>
) : (
<Button
onButtonPressed={() =>
router.push("/settings/org/" + router.query.id)
}
color="mineshaft"
text={t("section-members:add-dialog.add-user-to-org")}
size="md"
/>
)}
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddProjectMemberDialog;
frontend/components/basic/dialog/AddProjectMemberDialog.tsx
+159
View File
@@ -0,0 +1,159 @@
import { Fragment } from 'react';
import { useRouter } from 'next/router';
import { Trans, useTranslation } from 'next-i18next';
import { Dialog, Transition } from '@headlessui/react';
import Button from '../buttons/Button';
import ListBox from '../Listbox';
type Props = {
isOpen: boolean;
closeModal: () => void;
submitModal: () => void;
data: any;
email: string;
setEmail: (email: string) => void;
};
const AddProjectMemberDialog = ({
isOpen,
closeModal,
submitModal,
data,
email,
setEmail,
}: Props) => {
const router = useRouter();
const { t } = useTranslation();
return (
<div className='z-50'>
<Transition appear show={isOpen} as={Fragment}>
<Dialog as='div' className='relative' onClose={closeModal}>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0'
enterTo='opacity-100'
leave='ease-in duration-200'
leaveFrom='opacity-100'
leaveTo='opacity-0'
>
<div className='fixed inset-0 bg-black bg-opacity-70' />
</Transition.Child>
<div className='fixed inset-0 overflow-y-auto'>
<div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child
as={Fragment}
enter='ease-out duration-300'
enterFrom='opacity-0 scale-95'
enterTo='opacity-100 scale-100'
leave='ease-in duration-200'
leaveFrom='opacity-100 scale-100'
leaveTo='opacity-0 scale-95'
>
<Dialog.Panel className='w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
{data?.length > 0 ? (
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-gray-400 z-50'
>
{t('section-members:add-dialog.add-member-to-project')}
</Dialog.Title>
) : (
<Dialog.Title
as='h3'
className='text-lg font-medium leading-6 text-gray-400 z-50'
>
{t('section-members:add-dialog.already-all-invited')}
</Dialog.Title>
)}
<div className='mt-2 mb-4'>
{data?.length > 0 ? (
<div className='flex flex-col'>
<p className='text-sm text-gray-500'>
{t('section-members:add-dialog.user-will-email')}
</p>
<div className=''>
<Trans
i18nKey='section-members:add-dialog.looking-add'
components={[
// eslint-disable-next-line react/jsx-key
<button
type='button'
className='inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
onClick={() =>
router.push(
'/settings/org/' + router.query.id
)
}
/>,
// eslint-disable-next-line react/jsx-key
<button
type='button'
className='ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
onClick={() =>
router.push(
'/settings/org/' +
router.query.id +
'?invite'
)
}
/>,
]}
/>
</div>
</div>
) : (
<p className='text-sm text-gray-500'>
{t('section-members:add-dialog.add-user-org-first')}
</p>
)}
</div>
<div className='max-h-28'>
{data?.length > 0 && (
<ListBox
selected={email ? email : data[0]}
onChange={setEmail}
data={data}
isFull={true}
/>
)}
</div>
<div className='max-w-max'>
{data?.length > 0 ? (
<div className='mt-6 flex flex-col justify-start w-max'>
<Button
onButtonPressed={submitModal}
color='mineshaft'
text={t('section-members:add-member') as string}
size='md'
/>
</div>
) : (
<Button
onButtonPressed={() =>
router.push('/settings/org/' + router.query.id)
}
color='mineshaft'
text={
t(
'section-members:add-dialog.add-user-to-org'
) as string
}
size='md'
/>
)}
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition>
</div>
);
};
export default AddProjectMemberDialog;
frontend/components/basic/dialog/AddServiceTokenDialog.js → frontend/components/basic/dialog/AddServiceTokenDialog.tsx
+59 -42
View File
@@ -1,31 +1,39 @@
import { Fragment, useState } from "react"; import crypto from 'crypto';
import { useTranslation } from "next-i18next";
import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Dialog, Transition } from "@headlessui/react";
import nacl from "tweetnacl";
import addServiceToken from "~/pages/api/serviceToken/addServiceToken"; import { Fragment, useState } from 'react';
import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey"; import { useTranslation } from 'next-i18next';
import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Dialog, Transition } from '@headlessui/react';
import addServiceToken from '~/pages/api/serviceToken/addServiceToken';
import getLatestFileKey from '~/pages/api/workspace/getLatestFileKey';
import { import {
decryptAssymmetric, decryptAssymmetric,
encryptAssymmetric,
encryptSymmetric, encryptSymmetric,
} from "../../utilities/cryptography/crypto"; } from '../../utilities/cryptography/crypto';
import Button from "../buttons/Button"; import Button from '../buttons/Button';
import InputField from "../InputField"; import InputField from '../InputField';
import ListBox from "../Listbox"; import ListBox from '../Listbox';
const expiryMapping = { const expiryMapping = {
"1 day": 86400, '1 day': 86400,
"7 days": 604800, '7 days': 604800,
"1 month": 2592000, '1 month': 2592000,
"6 months": 15552000, '6 months': 15552000,
"12 months": 31104000, '12 months': 31104000,
}; };
const crypto = require('crypto'); type Props = {
isOpen: boolean;
closeModal: () => void;
workspaceId: string;
workspaceName: string;
serviceTokens: any[];
environments: Array<{ name: string; slug: string }>;
setServiceTokens: (arg: any[]) => void;
};
const AddServiceTokenDialog = ({ const AddServiceTokenDialog = ({
isOpen, isOpen,
@@ -34,12 +42,14 @@ const AddServiceTokenDialog = ({
workspaceName, workspaceName,
serviceTokens, serviceTokens,
environments, environments,
setServiceTokens setServiceTokens,
}) => { }: Props) => {
const [serviceToken, setServiceToken] = useState(""); const [serviceToken, setServiceToken] = useState('');
const [serviceTokenName, setServiceTokenName] = useState(""); const [serviceTokenName, setServiceTokenName] = useState('');
const [selectedServiceTokenEnv, setSelectedServiceTokenEnv] = useState(environments?.[0]); const [selectedServiceTokenEnv, setSelectedServiceTokenEnv] = useState(
const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState("1 day"); environments?.[0]
);
const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState('1 day');
const [serviceTokenCopied, setServiceTokenCopied] = useState(false); const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
@@ -50,36 +60,37 @@ const AddServiceTokenDialog = ({
ciphertext: latestFileKey.latestKey.encryptedKey, ciphertext: latestFileKey.latestKey.encryptedKey,
nonce: latestFileKey.latestKey.nonce, nonce: latestFileKey.latestKey.nonce,
publicKey: latestFileKey.latestKey.sender.publicKey, publicKey: latestFileKey.latestKey.sender.publicKey,
privateKey: localStorage.getItem("PRIVATE_KEY"), privateKey: localStorage.getItem('PRIVATE_KEY') as string,
}); });
const randomBytes = crypto.randomBytes(16).toString('hex'); const randomBytes = crypto.randomBytes(16).toString('hex');
const { const { ciphertext, iv, tag } = encryptSymmetric({
ciphertext,
iv,
tag,
} = encryptSymmetric({
plaintext: key, plaintext: key,
key: randomBytes, key: randomBytes,
}); });
let newServiceToken = await addServiceToken({ const newServiceToken = await addServiceToken({
name: serviceTokenName, name: serviceTokenName,
workspaceId, workspaceId,
environment: selectedServiceTokenEnv?.slug ? selectedServiceTokenEnv.slug : environments[0]?.name, environment: selectedServiceTokenEnv?.slug
expiresIn: expiryMapping[serviceTokenExpiresIn], ? selectedServiceTokenEnv.slug
: environments[0]?.name,
expiresIn:
expiryMapping[serviceTokenExpiresIn as keyof typeof expiryMapping],
encryptedKey: ciphertext, encryptedKey: ciphertext,
iv, iv,
tag tag,
}); });
setServiceTokens(serviceTokens.concat([newServiceToken.serviceTokenData])); setServiceTokens(serviceTokens.concat([newServiceToken.serviceTokenData]));
setServiceToken(newServiceToken.serviceToken + "." + randomBytes); setServiceToken(newServiceToken.serviceToken + '.' + randomBytes);
}; };
function copyToClipboard() { function copyToClipboard() {
// Get the text field // Get the text field
var copyText = document.getElementById("serviceToken"); const copyText = document.getElementById(
'serviceToken'
) as HTMLInputElement;
// Select the text field // Select the text field
copyText.select(); copyText.select();
@@ -96,8 +107,8 @@ const AddServiceTokenDialog = ({
const closeAddServiceTokenModal = () => { const closeAddServiceTokenModal = () => {
closeModal(); closeModal();
setServiceTokenName(""); setServiceTokenName('');
setServiceToken(""); setServiceToken('');
}; };
return ( return (
@@ -156,7 +167,11 @@ const AddServiceTokenDialog = ({
</div> </div>
<div className='max-h-28 mb-2'> <div className='max-h-28 mb-2'>
<ListBox <ListBox
selected={selectedServiceTokenEnv?.name ? selectedServiceTokenEnv?.name : environments[0]?.name} selected={
selectedServiceTokenEnv?.name
? selectedServiceTokenEnv?.name
: environments[0]?.name
}
data={environments.map(({ name }) => name)} data={environments.map(({ name }) => name)}
onChange={(envName) => onChange={(envName) =>
setSelectedServiceTokenEnv( setSelectedServiceTokenEnv(
@@ -192,8 +207,10 @@ const AddServiceTokenDialog = ({
<Button <Button
onButtonPressed={() => generateServiceToken()} onButtonPressed={() => generateServiceToken()}
color='mineshaft' color='mineshaft'
text={t('section-token:add-dialog.add')} text={t('section-token:add-dialog.add') as string}
textDisabled={t('section-token:add-dialog.add')} textDisabled={
t('section-token:add-dialog.add') as string
}
size='md' size='md'
active={serviceTokenName == '' ? false : true} active={serviceTokenName == '' ? false : true}
/> />
frontend/components/basic/dialog/AddUserDialog.js → frontend/components/basic/dialog/AddUserDialog.tsx
+55 -45
View File
@@ -1,105 +1,115 @@
import { Fragment } from "react"; import { Fragment } from 'react';
import { useRouter } from "next/router"; import { useRouter } from 'next/router';
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from '@headlessui/react';
import { STRIPE_PRODUCT_STARTER } from "../../utilities/config"; import { STRIPE_PRODUCT_STARTER } from '../../utilities/config';
import Button from "../buttons/Button"; import Button from '../buttons/Button';
import InputField from "../InputField"; import InputField from '../InputField';
type Props = {
isOpen: boolean;
closeModal: () => void;
submitModal: (email: string) => void;
workspaceId: string;
email: string;
setEmail: (email: string) => void;
currentPlan: string;
orgName: string;
};
const AddUserDialog = ({ const AddUserDialog = ({
isOpen, isOpen,
closeModal, closeModal,
submitModal, submitModal,
email, email,
workspaceId,
setEmail, setEmail,
currentPlan, currentPlan,
orgName, orgName,
}) => { }: Props) => {
const submit = () => { const submit = () => {
submitModal(email); submitModal(email);
}; };
const router = useRouter(); const router = useRouter();
return ( return (
<div className="z-50"> <div className='z-50'>
<Transition appear show={isOpen} as={Fragment}> <Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative" onClose={closeModal}> <Dialog as='div' className='relative' onClose={closeModal}>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0" enterFrom='opacity-0'
enterTo="opacity-100" enterTo='opacity-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100" leaveFrom='opacity-100'
leaveTo="opacity-0" leaveTo='opacity-0'
> >
<div className="fixed inset-0 bg-black bg-opacity-70" /> <div className='fixed inset-0 bg-black bg-opacity-70' />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 overflow-y-auto"> <div className='fixed inset-0 overflow-y-auto'>
<div className="flex min-h-full items-center justify-center p-4 text-center"> <div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0 scale-95" enterFrom='opacity-0 scale-95'
enterTo="opacity-100 scale-100" enterTo='opacity-100 scale-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100 scale-100" leaveFrom='opacity-100 scale-100'
leaveTo="opacity-0 scale-95" leaveTo='opacity-0 scale-95'
> >
<Dialog.Panel className="w-full max-w-lg transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all"> <Dialog.Panel className='w-full max-w-lg transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title <Dialog.Title
as="h3" as='h3'
className="text-lg font-medium leading-6 text-gray-400 z-50" className='text-lg font-medium leading-6 text-gray-400 z-50'
> >
Invite others to {orgName} Invite others to {orgName}
</Dialog.Title> </Dialog.Title>
<div className="mt-2 mb-4"> <div className='mt-2 mb-4'>
<p className="text-sm text-gray-500"> <p className='text-sm text-gray-500'>
An invite is specific to an email address and expires An invite is specific to an email address and expires
after 1 day. For security reasons, you will need to after 1 day. For security reasons, you will need to
separately add members to projects. separately add members to projects.
</p> </p>
</div> </div>
<div className="max-h-28"> <div className='max-h-28'>
<InputField <InputField
label="Email" label='Email'
onChangeHandler={setEmail} onChangeHandler={setEmail}
type="varName" type='varName'
value={email} value={email}
placeholder="" placeholder=''
isRequired isRequired
/> />
</div> </div>
{currentPlan == STRIPE_PRODUCT_STARTER && ( {currentPlan == STRIPE_PRODUCT_STARTER && (
<div className="flex flex-row"> <div className='flex flex-row'>
<button <button
type="button" type='button'
className="inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2" className='inline-flex justify-center rounded-md py-1 text-sm text-gray-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
onClick={() => onClick={() =>
router.push("/settings/billing/" + router.query.id) router.push('/settings/billing/' + router.query.id)
} }
> >
You can add up to 5 members on a Free tier. You can add up to 5 members on a Free tier.
</button> </button>
<button <button
type="button" type='button'
className="ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2" className='ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
onClick={() => onClick={() =>
router.push("/settings/billing/" + router.query.id) router.push('/settings/billing/' + router.query.id)
} }
> >
Upgrade now. Upgrade now.
</button> </button>
</div> </div>
)} )}
<div className="mt-4 max-w-max"> <div className='mt-4 max-w-max'>
<Button <Button
onButtonPressed={submit} onButtonPressed={submit}
color="mineshaft" color='mineshaft'
text="Invite" text='Invite'
size="md" size='md'
/> />
</div> </div>
</Dialog.Panel> </Dialog.Panel>
frontend/components/basic/dialog/AddWorkspaceDialog.js → frontend/components/basic/dialog/AddWorkspaceDialog.tsx
+13 -6
View File
@@ -1,15 +1,23 @@
import { Fragment, useState } from "react"; import { Fragment, useState } from "react";
import Image from "next/image";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import Button from "../buttons/Button"; import Button from "../buttons/Button";
import InputField from "../InputField"; import InputField from "../InputField";
import { Checkbox } from "../table/Checkbox"; import { Checkbox } from "../table/Checkbox";
type Props = {
isOpen: boolean;
closeModal: () => void;
submitModal: (email: string, addAllUser: boolean) => void;
workspaceName: string;
setWorkspaceName: (workspaceName: string) => void;
error: boolean;
loading: boolean;
};
/** /**
* The dialog modal for when the user wants to create a new workspace * The dialog modal for when the user wants to create a new workspace
* @param {*} param0
* @returns
*/ */
const AddWorkspaceDialog = ({ const AddWorkspaceDialog = ({
isOpen, isOpen,
@@ -19,7 +27,7 @@ const AddWorkspaceDialog = ({
setWorkspaceName, setWorkspaceName,
error, error,
loading, loading,
}) => { }:Props) => {
const [addAllUsers, setAddAllUsers] = useState(true); const [addAllUsers, setAddAllUsers] = useState(true);
const submit = () => { const submit = () => {
submitModal(workspaceName, addAllUsers); submitModal(workspaceName, addAllUsers);
@@ -72,8 +80,7 @@ const AddWorkspaceDialog = ({
value={workspaceName} value={workspaceName}
placeholder="" placeholder=""
isRequired isRequired
error={error.length > 0} error={error}
errorText={error}
/> />
</div> </div>
<div className="mt-4 ml-1"> <div className="mt-4 ml-1">
frontend/components/basic/dialog/DeleteUserDialog.js → frontend/components/basic/dialog/DeleteUserDialog.tsx
+36 -31
View File
@@ -1,70 +1,75 @@
import { Fragment, useState } from "react"; import { Fragment } from 'react';
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from '@headlessui/react';
import InputField from "../InputField";
// #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state. // #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.
type Props = {
isOpen: boolean;
closeModal: () => void;
submitModal: (userIdToBeDeleted: string) => void;
userIdToBeDeleted: string;
};
const DeleteUserDialog = ({ const DeleteUserDialog = ({
isOpen, isOpen,
closeModal, closeModal,
submitModal, submitModal,
userIdToBeDeleted, userIdToBeDeleted,
}) => { }: Props) => {
const submit = () => { const submit = () => {
submitModal(userIdToBeDeleted); submitModal(userIdToBeDeleted);
}; };
return ( return (
<div> <div>
<Transition appear show={isOpen} as={Fragment}> <Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={closeModal}> <Dialog as='div' className='relative z-10' onClose={closeModal}>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0" enterFrom='opacity-0'
enterTo="opacity-100" enterTo='opacity-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100" leaveFrom='opacity-100'
leaveTo="opacity-0" leaveTo='opacity-0'
> >
<div className="fixed inset-0 bg-black bg-opacity-25" /> <div className='fixed inset-0 bg-black bg-opacity-25' />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 overflow-y-auto"> <div className='fixed inset-0 overflow-y-auto'>
<div className="flex min-h-full items-center justify-center p-4 text-center"> <div className='flex min-h-full items-center justify-center p-4 text-center'>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter='ease-out duration-300'
enterFrom="opacity-0 scale-95" enterFrom='opacity-0 scale-95'
enterTo="opacity-100 scale-100" enterTo='opacity-100 scale-100'
leave="ease-in duration-200" leave='ease-in duration-200'
leaveFrom="opacity-100 scale-100" leaveFrom='opacity-100 scale-100'
leaveTo="opacity-0 scale-95" leaveTo='opacity-0 scale-95'
> >
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all"> <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
<Dialog.Title <Dialog.Title
as="h3" as='h3'
className="text-lg font-medium leading-6 text-gray-400" className='text-lg font-medium leading-6 text-gray-400'
> >
Are you sure you want to remove this user from the Are you sure you want to remove this user from the
workspace? workspace?
</Dialog.Title> </Dialog.Title>
<div className="mt-2"> <div className='mt-2'>
<p className="text-sm text-gray-500"> <p className='text-sm text-gray-500'>
This action is irrevertible. This action is irrevertible.
</p> </p>
</div> </div>
<div className="mt-6"> <div className='mt-6'>
<button <button
type="button" type='button'
className="inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2" className='inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:bg-alizarin hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
onClick={submit} onClick={submit}
> >
Delete Delete
</button> </button>
<button <button
type="button" type='button'
className="ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2" className='ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-white hover:text-white hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
onClick={submit} onClick={submit}
> >
Cancel Cancel
frontend/components/basic/dialog/IntegrationAccessTokenDialog.js → frontend/components/basic/dialog/IntegrationAccessTokenDialog.tsx
+10 -8
View File
@@ -1,22 +1,24 @@
import { Fragment } from "react"; import { Fragment } from "react";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import setBotActiveStatus from "../../../pages/api/bot/setBotActiveStatus";
import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
import {
decryptAssymmetric,
encryptAssymmetric
} from "../../utilities/cryptography/crypto";
import Button from "../buttons/Button";
import InputField from "../InputField"; import InputField from "../InputField";
type Props = {
isOpen: boolean;
closeModal: () => void;
submitModal: (userIdToBeDeleted: string) => void;
selectedIntegrationOption: string;
handleBotActivate: () => void;
handleIntegrationOption: (arg:{integrationOption:string})=>void;
};
const IntegrationAccessTokenDialog = ({ const IntegrationAccessTokenDialog = ({
isOpen, isOpen,
closeModal, closeModal,
selectedIntegrationOption, selectedIntegrationOption,
handleBotActivate, handleBotActivate,
handleIntegrationOption handleIntegrationOption
}) => { }:Props) => {
const submit = async () => { const submit = async () => {
try { try {
frontend/components/utilities/cryptography/crypto.ts
+6 -4
View File
@@ -78,16 +78,18 @@ type encryptSymmetricProps = {
key: string; key: string;
}; };
type encryptSymmetricReturn = {
ciphertext:string;
iv:string;
tag:string;
};
/** /**
* Return symmetrically encrypted [plaintext] using [key]. * Return symmetrically encrypted [plaintext] using [key].
* @param {Object} obj
* @param {String} obj.plaintext - plaintext to encrypt
* @param {String} obj.key - 16-byte hex key
*/ */
const encryptSymmetric = ({ const encryptSymmetric = ({
plaintext, plaintext,
key, key,
}: encryptSymmetricProps): object => { }: encryptSymmetricProps): encryptSymmetricReturn => {
let ciphertext, iv, tag; let ciphertext, iv, tag;
try { try {
const obj = aes.encrypt({ text: plaintext, secret: key }); const obj = aes.encrypt({ text: plaintext, secret: key });
frontend/next.config.js
+5
View File
@@ -1,3 +1,8 @@
// @ts-check
/**
* @type {import('next').NextConfig}
**/
const { i18n } = require("./next-i18next.config.js"); const { i18n } = require("./next-i18next.config.js");
const ContentSecurityPolicy = ` const ContentSecurityPolicy = `
frontend/pages/_app.js
-81
View File
@@ -1,81 +0,0 @@
import { useEffect } from "react";
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;
const App = ({ Component, pageProps, ...appProps }) => {
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> */
}
frontend/pages/_app.tsx
+90
View File
@@ -0,0 +1,90 @@
import { useEffect } from 'react';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import { appWithTranslation } from 'next-i18next';
import { config } from '@fortawesome/fontawesome-svg-core';
import Layout from '~/components/basic/Layout';
import NotificationProvider from '~/components/context/Notifications/NotificationProvider';
import RouteGuard from '~/components/RouteGuard';
import { publicPaths } from '~/const';
import Telemetry from '~/utilities/telemetry/Telemetry';
import '@fortawesome/fontawesome-svg-core/styles.css';
import '../styles/globals.css';
config.autoAddCss = false;
type NextAppProp = AppProps & {
Component: AppProps['Component'] & { requireAuth: boolean };
};
const App = ({
Component,
pageProps,
...appProps
}: NextAppProp): JSX.Element => {
const router = useRouter();
useEffect(() => {
const storedLang = localStorage.getItem('lang');
if (router.locale ?? 'en' !== storedLang ?? 'en') {
router.push(router.asPath, router.asPath, {
locale: storedLang ?? 'en',
});
}
}, [router.locale, router.pathname]);
useEffect(() => {
// Init for auto capturing
const telemetry = new Telemetry().getInstance();
const handleRouteChange = () => {
if (typeof window !== 'undefined') {
telemetry.capture('$pageview');
}
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router.events]);
// If it's one of these routes, don't add the layout (e.g., these routes are external)
if (
publicPaths.includes('/' + appProps.router.pathname.split('/')[1]) ||
!Component.requireAuth
) {
return <Component {...pageProps} />;
}
return (
<RouteGuard>
<NotificationProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</NotificationProvider>
</RouteGuard>
);
};
export default appWithTranslation(App);
{
/* <Script
src="https://www.googletagmanager.com/gtag/js?id=G-DQ1XLJJGG1"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-DQ1XLJJGG1');
`}
</Script> */
}
frontend/pages/settings/personal/[id].tsx
+3 -3
View File
@@ -33,7 +33,7 @@ export default function PersonalSettings() {
const [backupKeyIssued, setBackupKeyIssued] = useState(false); const [backupKeyIssued, setBackupKeyIssued] = useState(false);
const [backupKeyError, setBackupKeyError] = useState(false); const [backupKeyError, setBackupKeyError] = useState(false);
const [isAddApiKeyDialogOpen, setIsAddApiKeyDialogOpen] = useState(false) const [isAddApiKeyDialogOpen, setIsAddApiKeyDialogOpen] = useState(false)
const [apiKeys, setApiKeys] = useState([]); const [apiKeys, setApiKeys] = useState<any[]>([]);
const { t } = useTranslation(); const { t } = useTranslation();
const router = useRouter(); const router = useRouter();
@@ -96,7 +96,7 @@ export default function PersonalSettings() {
</div> </div>
</div> </div>
<div className="flex flex-col ml-6 text-mineshaft-50 mr-6 max-w-5xl"> <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 flex flex-col items-start w-full mb-6 mt-4"> <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"> <p className="text-xl font-semibold self-start">
{t("settings-personal:change-language")} {t("settings-personal:change-language")}
</p> </p>
@@ -109,7 +109,7 @@ export default function PersonalSettings() {
/> />
</div> </div>
</div> </div>
<div className="bg-white/5 rounded-md px-6 pt-4 flex flex-col items-start flex flex-col items-start w-full mt-2 mb-8 pt-2"> <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-row justify-between w-full">
<div className="flex flex-col w-full"> <div className="flex flex-col w-full">
<p className="text-xl font-semibold mb-3"> <p className="text-xl font-semibold mb-3">
frontend/pages/settings/project/[id].tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export default function SettingsBasic() {
const [buttonReady, setButtonReady] = useState(false); const [buttonReady, setButtonReady] = useState(false);
const router = useRouter(); const router = useRouter();
const [workspaceName, setWorkspaceName] = useState(''); const [workspaceName, setWorkspaceName] = useState('');
const [serviceTokens, setServiceTokens] = useState([]); const [serviceTokens, setServiceTokens] = useState<any[]>([]);
const [environments, setEnvironments] = useState<Array<EnvData>>([]); const [environments, setEnvironments] = useState<Array<EnvData>>([]);
const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState(''); const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
const [isAddOpen, setIsAddOpen] = useState(false); const [isAddOpen, setIsAddOpen] = useState(false);
frontend/pages/users/[id].tsx
-1
View File
@@ -194,7 +194,6 @@ export default function Users() {
(email) => (email) =>
!userList?.map((user1: UserProps) => user1.email).includes(email) !userList?.map((user1: UserProps) => user1.email).includes(email)
)} )}
workspaceId={workspaceId}
setEmail={setEmail} setEmail={setEmail}
/> />
{/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */} {/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */}
frontend/tsconfig.tsbuildinfo
+1 -1
View File
File diff suppressed because one or more lines are too long