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

Merge branch 'main' into feature/google-sign

Browse Source
This commit is contained in:
Sheen Capadngan
2023-05-10 21:11:42 +08:00
parent 1fce8cc769 9cb4d5abb7
commit 32cef27e8e
341 changed files with 12153 additions and 54369 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/basic/EventFilter.tsx
+10 -10
View File
@@ -1,5 +1,5 @@
import React, { Fragment } from 'react';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import {
faAngleDown,
faEye,
@@ -45,16 +45,16 @@ const EventFilter = ({ selected, select }: ListBoxProps): JSX.Element => {
const { t } = useTranslation();
return (
<Listbox value={t(`activity:event.${selected}`)} onChange={select}>
<Listbox value={t(`activity.event.${selected}`)} onChange={select}>
<div className="relative">
<Listbox.Button className="bg-mineshaft-800 hover:bg-mineshaft-700 duration-200 cursor-pointer rounded-md h-10 flex items-center justify-between pl-4 pr-2 w-52 text-bunker-200 text-sm">
<Listbox.Button className="flex h-10 w-52 cursor-pointer items-center justify-between rounded-md bg-mineshaft-800 pl-4 pr-2 text-sm text-bunker-200 duration-200 hover:bg-mineshaft-700">
{selected !== '' ? (
<p className="select-none text-bunker-100">{t(`activity:event.${selected}`)}</p>
<p className="select-none text-bunker-100">{t(`activity.event.${selected}`)}</p>
) : (
<p className="select-none">{String(t('common:select-event'))}</p>
<p className="select-none">{String(t('common.select-event'))}</p>
)}
{selected !== '' ? (
<FontAwesomeIcon icon={faX} className="pl-2 w-2 p-2" onClick={() => select('')} />
<FontAwesomeIcon icon={faX} className="w-2 p-2 pl-2" onClick={() => select('')} />
) : (
<FontAwesomeIcon icon={faAngleDown} className="pl-4 pr-2" />
)}
@@ -65,12 +65,12 @@ const EventFilter = ({ selected, select }: ListBoxProps): JSX.Element => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="border border-mineshaft-700 z-50 w-52 p-1 absolute mt-1 max-h-60 overflow-auto rounded-md bg-bunker text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<Listbox.Options className="absolute z-50 mt-1 max-h-60 w-52 overflow-auto rounded-md border border-mineshaft-700 bg-bunker p-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
{eventOptions.map((event, id) => (
<Listbox.Option
key={`${event.name}.${id + 1}`}
className={`px-4 h-10 flex items-center text-sm cursor-pointer hover:bg-mineshaft-700 text-bunker-200 rounded-md ${
selected === t(`activity:event.${event.name}`) && 'bg-mineshaft-700'
className={`flex h-10 cursor-pointer items-center rounded-md px-4 text-sm text-bunker-200 hover:bg-mineshaft-700 ${
selected === t(`activity.event.${event.name}`) && 'bg-mineshaft-700'
}`}
value={event.name}
>
@@ -79,7 +79,7 @@ const EventFilter = ({ selected, select }: ListBoxProps): JSX.Element => {
className={`block truncate ${isSelected ? 'font-semibold' : 'font-normal'}`}
>
<FontAwesomeIcon icon={event.icon} className="pr-4" />{' '}
{t(`activity:event.${event.name}`)}
{t(`activity.event.${event.name}`)}
</span>
)}
</Listbox.Option>
frontend/src/components/basic/Layout.tsx
+7 -7
View File
@@ -4,9 +4,9 @@
import crypto from 'crypto';
import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import {
faBookOpen,
faFileLines,
@@ -147,17 +147,17 @@ const Layout = ({ children }: LayoutProps) => {
() => [
{
href: `/dashboard/${workspaceMapping[workspaceSelected as any]}`,
title: t('nav:menu.secrets'),
title: t('nav.menu.secrets'),
emoji: <FontAwesomeIcon icon={faKey} />
},
{
href: `/users/${workspaceMapping[workspaceSelected as any]}`,
title: t('nav:menu.members'),
title: t('nav.menu.members'),
emoji: <FontAwesomeIcon icon={faUser} />
},
{
href: `/integrations/${workspaceMapping[workspaceSelected as any]}`,
title: t('nav:menu.integrations'),
title: t('nav.menu.integrations'),
emoji: <FontAwesomeIcon icon={faPlug} />
},
{
@@ -167,7 +167,7 @@ const Layout = ({ children }: LayoutProps) => {
},
{
href: `/settings/project/${workspaceMapping[workspaceSelected as any]}`,
title: t('nav:menu.project-settings'),
title: t('nav.menu.project-settings'),
emoji: <FontAwesomeIcon icon={faGear} />
}
],
@@ -256,7 +256,7 @@ const Layout = ({ children }: LayoutProps) => {
<div>
<div className="mt-6 mb-6 flex h-20 w-full flex-col items-center justify-center bg-bunker-600 px-4">
<div className="ml-1 mb-1 self-start text-xs font-semibold tracking-wide text-gray-400">
{t('nav:menu.project')}
{t('nav.menu.project')}
</div>
{Object.keys(workspaceMapping).length > 0 ? (
<Listbox
@@ -375,7 +375,7 @@ const Layout = ({ children }: LayoutProps) => {
<div className="flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 z-[200] md:hidden">
<FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
<p className="max-w-sm px-6 text-center text-lg text-gray-200">
{` ${t('common:no-mobile')} `}
{` ${t('common.no-mobile')} `}
</p>
</div>
</>
frontend/src/components/basic/dialog/ActivateBotDialog.tsx
+6 -7
View File
@@ -1,5 +1,5 @@
import { Fragment } from 'react';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import { Dialog, Transition } from '@headlessui/react';
import Button from '../buttons/Button';
@@ -34,10 +34,9 @@ const ActivateBotDialog = ({
try {
// type check
if (!selectedIntegrationOption) return;
// start integration or probe for PAT
integrationOptionPress(selectedIntegrationOption);
} catch (err) {
console.log(err);
}
@@ -71,20 +70,20 @@ const ActivateBotDialog = ({
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.Panel className="w-full max-w-md transform overflow-hidden rounded-md border border-gray-700 bg-bunker-800 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')}
{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')}
{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}
text={t('integrations.grant-access-button') as string}
size="md"
/>
</div>
frontend/src/components/basic/dialog/AddApiKeyDialog.tsx
+66 -84
View File
@@ -1,5 +1,5 @@
import { Fragment, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Dialog, Transition } from '@headlessui/react';
@@ -15,7 +15,7 @@ const expiryMapping = {
'7 days': 604800,
'1 month': 2592000,
'6 months': 15552000,
'12 months': 31104000,
'12 months': 31104000
};
type Props = {
@@ -27,12 +27,7 @@ type Props = {
};
// TODO: convert to TS
const AddApiKeyDialog = ({
isOpen,
closeModal,
apiKeys,
setApiKeys,
}: Props) => {
const AddApiKeyDialog = ({ isOpen, closeModal, apiKeys, setApiKeys }: Props) => {
const [apiKey, setApiKey] = useState('');
const [apiKeyName, setApiKeyName] = useState('');
const [apiKeyExpiresIn, setApiKeyExpiresIn] = useState('1 day');
@@ -42,7 +37,7 @@ const AddApiKeyDialog = ({
const generateAPIKey = async () => {
const newApiKey = await addAPIKey({
name: apiKeyName,
expiresIn: expiryMapping[apiKeyExpiresIn as keyof typeof expiryMapping],
expiresIn: expiryMapping[apiKeyExpiresIn as keyof typeof expiryMapping]
});
setApiKeys([...apiKeys, newApiKey.apiKeyData]);
@@ -73,143 +68,130 @@ const AddApiKeyDialog = ({
};
return (
<div className='z-50'>
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as='div' className='relative' onClose={closeModal}>
<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'
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' />
<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'>
<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'
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.Panel className="w-full max-w-md transform rounded-md border border-gray-700 bg-bunker-800 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'
as="h3"
className="z-50 text-lg font-medium leading-6 text-gray-400"
>
{t('section-api-key:add-dialog.title')}
{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')}
<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'>
<div className="mb-2 max-h-28">
<InputField
label={t('section-api-key:add-dialog.name')}
label={t('section.api-key.add-dialog.name')}
onChangeHandler={setApiKeyName}
type='varName'
type="varName"
value={apiKeyName}
placeholder=''
placeholder=""
isRequired
/>
</div>
<div className='max-h-28'>
<div className="max-h-28">
<ListBox
isSelected={apiKeyExpiresIn}
onChange={setApiKeyExpiresIn}
data={[
'1 day',
'7 days',
'1 month',
'6 months',
'12 months',
]}
data={['1 day', '7 days', '1 month', '6 months', '12 months']}
isFull
text={`${t('common:expired-in')}: `}
text={`${t('common.expired-in')}: `}
/>
</div>
<div className='max-w-max'>
<div className='mt-6 flex flex-col justify-start w-max'>
<div className="max-w-max">
<div className="mt-6 flex w-max flex-col justify-start">
<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'
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 !== ''}
/>
</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.Panel className="w-full max-w-md transform rounded-md border border-gray-700 bg-bunker-800 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'
as="h3"
className="z-50 text-lg font-medium leading-6 text-gray-400"
>
{t('section-api-key:add-dialog.copy-service-token')}
{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'
)}
<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'>
<div className="w-full">
<div className="mt-2 mr-2 flex h-20 w-full items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400">
<input
type='text'
type="text"
value={apiKey}
disabled
id='apiKey'
className='invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none'
/>
<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'>
id="apiKey"
className="invisible w-full min-w-full bg-white/0 py-2 px-2 text-gray-400 outline-none"
/>
<div className="w-full max-w-md break-words bg-white/0 py-2 pl-14 pr-2 text-sm text-gray-400 outline-none">
{apiKey}
</div>
<div className='group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200'>
<div className="group relative inline-block h-full font-normal text-gray-400 underline duration-200 hover:text-primary">
<button
type="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'
className="h-full border-l border-white/20 py-2 pl-3.5 pr-4 duration-200 hover:bg-white/[0.12]"
>
{apiKeyCopied ? (
<FontAwesomeIcon
icon={faCheck}
className='pr-0.5'
/>
<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 className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-chicago-900 px-3 py-2 text-center text-sm text-gray-400 duration-300 group-hover:flex group-hover:animate-popup">
{t('common.click-to-copy')}
</span>
</div>
</div>
</div>
<div className='mt-6 flex flex-col justify-start w-max'>
<div className="mt-6 flex w-max flex-col justify-start">
<Button
onButtonPressed={() => closeAddApiKeyModal()}
color='mineshaft'
text='Close'
size='md'
color="mineshaft"
text="Close"
size="md"
/>
</div>
</Dialog.Panel>
frontend/src/components/basic/dialog/AddIncidentContactDialog.tsx
+33 -41
View File
@@ -1,5 +1,5 @@
import { Fragment, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import { Dialog, Transition } from '@headlessui/react';
import addIncidentContact from '@app/pages/api/organization/addIncidentContact';
@@ -18,7 +18,7 @@ const AddIncidentContactDialog = ({
isOpen,
closeModal,
incidentContacts,
setIncidentContacts,
setIncidentContacts
}: Props) => {
const [incidentContactEmail, setIncidentContactEmail] = useState('');
const { t } = useTranslation();
@@ -29,69 +29,61 @@ const AddIncidentContactDialog = ({
? incidentContacts.concat([incidentContactEmail])
: [incidentContactEmail]
);
addIncidentContact(
localStorage.getItem('orgData.id') as string,
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}>
<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'
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' />
<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'>
<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'
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.Panel className="w-full max-w-md transform overflow-hidden rounded-md border border-gray-700 bg-bunker-800 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')}
<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'>
<div className="max-h-28">
<InputField
label={t('common:email')}
label={t('common.email')}
onChangeHandler={setIncidentContactEmail}
type='varName'
type="varName"
value={incidentContactEmail}
placeholder=''
placeholder=""
isRequired
/>
</div>
<div className='mt-6 max-w-max'>
<div className="mt-6 max-w-max">
<Button
onButtonPressed={submit}
color='mineshaft'
text={
t('section-incident:add-dialog.add-incident') as string
}
size='md'
color="mineshaft"
text={t('section.incident.add-dialog.add-incident') as string}
size="md"
/>
</div>
</Dialog.Panel>
frontend/src/components/basic/dialog/AddProjectMemberDialog.tsx
+19 -14
View File
@@ -1,6 +1,6 @@
import { Fragment } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useRouter } from 'next/router';
import { Trans, useTranslation } from 'next-i18next';
import { Dialog, Transition } from '@headlessui/react';
import Button from '../buttons/Button';
@@ -21,7 +21,7 @@ const AddProjectMemberDialog = ({
submitModal,
data,
email,
setEmail,
setEmail
}: Props) => {
const router = useRouter();
const { t } = useTranslation();
@@ -53,31 +53,31 @@ const AddProjectMemberDialog = ({
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">
<Dialog.Panel className="w-full max-w-md transform rounded-md border border-gray-700 bg-bunker-800 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"
className="z-50 text-lg font-medium leading-6 text-gray-400"
>
{t('section-members:add-dialog.add-member-to-project')}
{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"
className="z-50 text-lg font-medium leading-6 text-gray-400"
>
{t('section-members:add-dialog.already-all-invited')}
{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')}
{t('section.members.add-dialog.user-will-email')}
</p>
<div className="">
<Trans
i18nKey="section-members:add-dialog.looking-add"
i18nKey="section.members.add-dialog.looking-add"
components={[
// eslint-disable-next-line react/jsx-key
<button
@@ -101,22 +101,27 @@ const AddProjectMemberDialog = ({
</div>
) : (
<p className="text-sm text-gray-500">
{t('section-members:add-dialog.add-user-org-first')}
{t('section.members.add-dialog.add-user-org-first')}
</p>
)}
</div>
<div className="max-h-28">
{data?.length > 0 && (
<ListBox isSelected={email || data[0]} onChange={setEmail} data={data} isFull />
<ListBox
isSelected={email || data[0]}
onChange={setEmail}
data={data}
isFull
/>
)}
</div>
<div className="max-w-max">
{data?.length > 0 ? (
<div className="mt-6 flex flex-col justify-start w-max">
<div className="mt-6 flex w-max flex-col justify-start">
<Button
onButtonPressed={submitModal}
color="mineshaft"
text={t('section-members:add-member') as string}
text={t('section.members.add-member') as string}
size="md"
/>
</div>
@@ -124,7 +129,7 @@ const AddProjectMemberDialog = ({
<Button
onButtonPressed={() => router.push(`/settings/org/${router.query.id}`)}
color="mineshaft"
text={t('section-members:add-dialog.add-user-to-org') as string}
text={t('section.members.add-dialog.add-user-to-org') as string}
size="md"
/>
)}
frontend/src/components/basic/dialog/AddServiceTokenDialog.tsx
+85 -105
View File
@@ -1,7 +1,7 @@
import crypto from 'crypto';
import { Fragment, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Dialog, Transition } from '@headlessui/react';
@@ -9,10 +9,7 @@ import { Dialog, Transition } from '@headlessui/react';
import addServiceToken from '@app/pages/api/serviceToken/addServiceToken';
import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
import {
decryptAssymmetric,
encryptSymmetric,
} from '../../utilities/cryptography/crypto';
import { decryptAssymmetric, encryptSymmetric } from '../../utilities/cryptography/crypto';
import Button from '../buttons/Button';
import InputField from '../InputField';
import ListBox from '../Listbox';
@@ -22,7 +19,7 @@ const expiryMapping = {
'7 days': 604800,
'1 month': 2592000,
'6 months': 15552000,
'12 months': 31104000,
'12 months': 31104000
};
type Props = {
@@ -42,13 +39,11 @@ const AddServiceTokenDialog = ({
workspaceName,
serviceTokens,
environments,
setServiceTokens,
setServiceTokens
}: Props) => {
const [serviceToken, setServiceToken] = useState('');
const [serviceTokenName, setServiceTokenName] = useState('');
const [selectedServiceTokenEnv, setSelectedServiceTokenEnv] = useState(
environments?.[0]
);
const [selectedServiceTokenEnv, setSelectedServiceTokenEnv] = useState(environments?.[0]);
const [serviceTokenExpiresIn, setServiceTokenExpiresIn] = useState('1 day');
const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
const { t } = useTranslation();
@@ -60,40 +55,40 @@ const AddServiceTokenDialog = ({
ciphertext: latestFileKey.latestKey.encryptedKey,
nonce: latestFileKey.latestKey.nonce,
publicKey: latestFileKey.latestKey.sender.publicKey,
privateKey: localStorage.getItem('PRIVATE_KEY') as string,
privateKey: localStorage.getItem('PRIVATE_KEY') as string
});
const randomBytes = crypto.randomBytes(16).toString('hex');
const { ciphertext, iv, tag } = encryptSymmetric({
plaintext: key,
key: randomBytes,
key: randomBytes
});
console.log(1234, selectedServiceTokenEnv, environments, selectedServiceTokenEnv?.slug
? selectedServiceTokenEnv.slug
: environments[0]?.slug)
console.log(
1234,
selectedServiceTokenEnv,
environments,
selectedServiceTokenEnv?.slug ? selectedServiceTokenEnv.slug : environments[0]?.slug
);
const newServiceToken = await addServiceToken({
name: serviceTokenName,
workspaceId,
environment: selectedServiceTokenEnv?.slug
? selectedServiceTokenEnv.slug
: environments[0]?.slug,
expiresIn:
expiryMapping[serviceTokenExpiresIn as keyof typeof expiryMapping],
expiresIn: expiryMapping[serviceTokenExpiresIn as keyof typeof expiryMapping],
encryptedKey: ciphertext,
iv,
tag,
tag
});
setServiceTokens(serviceTokens.concat([newServiceToken.serviceTokenData]));
setServiceToken(`${newServiceToken.serviceToken }.${ randomBytes}`);
setServiceToken(`${newServiceToken.serviceToken}.${randomBytes}`);
};
function copyToClipboard() {
// Get the text field
const copyText = document.getElementById(
'serviceToken'
) as HTMLInputElement;
const copyText = document.getElementById('serviceToken') as HTMLInputElement;
// Select the text field
copyText.select();
@@ -115,60 +110,60 @@ const AddServiceTokenDialog = ({
};
return (
<div className='z-50'>
<div className="z-50">
<Transition appear show={isOpen} as={Fragment}>
<Dialog as='div' className='relative' onClose={closeModal}>
<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'
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' />
<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'>
<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'
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"
>
{serviceToken === '' ? (
<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.Panel className="w-full max-w-md transform rounded-md border border-gray-700 bg-bunker-800 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'
as="h3"
className="z-50 text-lg font-medium leading-6 text-gray-400"
>
{t('section-token:add-dialog.title', {
target: workspaceName,
{t('section.token.add-dialog.title', {
target: workspaceName
})}
</Dialog.Title>
<div className='mt-2 mb-4'>
<div className='flex flex-col'>
<p className='text-sm text-gray-500'>
{t('section-token:add-dialog.description')}
<div className="mt-2 mb-4">
<div className="flex flex-col">
<p className="text-sm text-gray-500">
{t('section.token.add-dialog.description')}
</p>
</div>
</div>
<div className='max-h-28 mb-2'>
<div className="mb-2 max-h-28">
<InputField
label={t('section-token:add-dialog.name')}
label={t('section.token.add-dialog.name')}
onChangeHandler={setServiceTokenName}
type='varName'
type="varName"
value={serviceTokenName}
placeholder=''
placeholder=""
isRequired
/>
</div>
<div className='max-h-28 mb-2'>
<div className="mb-2 max-h-28">
<ListBox
isSelected={
selectedServiceTokenEnv?.name
@@ -178,103 +173,88 @@ const AddServiceTokenDialog = ({
data={environments.map(({ name }) => name)}
onChange={(envName) =>
setSelectedServiceTokenEnv(
environments.find(
({ name }) => envName === name
) || {
environments.find(({ name }) => envName === name) || {
name: 'unknown',
slug: 'unknown',
slug: 'unknown'
}
)
}
isFull
text={`${t('common:environment')}: `}
text={`${t('common.environment')}: `}
/>
</div>
<div className='max-h-28'>
<div className="max-h-28">
<ListBox
isSelected={serviceTokenExpiresIn}
onChange={setServiceTokenExpiresIn}
data={[
'1 day',
'7 days',
'1 month',
'6 months',
'12 months',
]}
data={['1 day', '7 days', '1 month', '6 months', '12 months']}
isFull
text={`${t('common:expired-in')}: `}
text={`${t('common.expired-in')}: `}
/>
</div>
<div className='max-w-max'>
<div className='mt-6 flex flex-col justify-start w-max'>
<div className="max-w-max">
<div className="mt-6 flex w-max flex-col justify-start">
<Button
onButtonPressed={() => generateServiceToken()}
color='mineshaft'
text={t('section-token:add-dialog.add') as string}
textDisabled={
t('section-token:add-dialog.add') as string
}
size='md'
color="mineshaft"
text={t('section.token.add-dialog.add') as string}
textDisabled={t('section.token.add-dialog.add') as string}
size="md"
active={serviceTokenName !== ''}
/>
</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.Panel className="w-full max-w-md transform rounded-md border border-gray-700 bg-bunker-800 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'
as="h3"
className="z-50 text-lg font-medium leading-6 text-gray-400"
>
{t('section-token:add-dialog.copy-service-token')}
{t('section.token.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-token:add-dialog.copy-service-token-description'
)}
<div className="mt-2 mb-4">
<div className="flex flex-col">
<p className="text-sm text-gray-500">
{t('section.token.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'>
<div className="w-full">
<div className="mt-2 mr-2 flex h-20 w-full items-center justify-end rounded-md bg-white/[0.07] text-base text-gray-400">
<input
type='text'
type="text"
value={serviceToken}
id='serviceToken'
className='invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none'
/>
<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'>
id="serviceToken"
className="invisible w-full min-w-full bg-white/0 py-2 px-2 text-gray-400 outline-none"
/>
<div className="w-full max-w-md break-words bg-white/0 py-2 pl-14 pr-2 text-sm text-gray-400 outline-none">
{serviceToken}
</div>
<div className='group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200'>
<div className="group relative inline-block h-full font-normal text-gray-400 underline duration-200 hover:text-primary">
<button
onClick={copyToClipboard}
type="button"
className='h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200'
className="h-full border-l border-white/20 py-2 pl-3.5 pr-4 duration-200 hover:bg-white/[0.12]"
>
{serviceTokenCopied ? (
<FontAwesomeIcon
icon={faCheck}
className='pr-0.5'
/>
<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 className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-chicago-900 px-3 py-2 text-center text-sm text-gray-400 duration-300 group-hover:flex group-hover:animate-popup">
{t('common.click-to-copy')}
</span>
</div>
</div>
</div>
<div className='mt-6 flex flex-col justify-start w-max'>
<div className="mt-6 flex w-max flex-col justify-start">
<Button
onButtonPressed={() => closeAddServiceTokenModal()}
color='mineshaft'
text='Close'
size='md'
color="mineshaft"
text="Close"
size="md"
/>
</div>
</Dialog.Panel>
frontend/src/components/dashboard/CommentField.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
/**
* This is the text field where people can add comments to particular secrets.
@@ -16,9 +16,9 @@ const CommentField = ({
return (
<div className="relative mt-4 px-4 pt-6">
<p className="text-sm text-bunker-300 pl-0.5">{t('dashboard:sidebar.comments')}</p>
<p className="pl-0.5 text-sm text-bunker-300">{t('dashboard.sidebar.comments')}</p>
<textarea
className="placeholder:text-bunker-400 dark:[color-scheme:dark] h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
className="h-32 w-full rounded-md border border-mineshaft-500 bg-bunker-800 px-2 py-1.5 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2 dark:[color-scheme:dark]"
value={comment}
onChange={(e) => modifyComment(e.target.value, id)}
placeholder="Leave any comments here..."
frontend/src/components/dashboard/DropZone.tsx
+16 -16
View File
@@ -1,7 +1,7 @@
/* eslint-disable no-nested-ternary */
import { type ChangeEvent, type DragEvent, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Image from 'next/image';
import { useTranslation } from 'next-i18next';
import { faUpload } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { parseDocument, Scalar, YAMLMap } from 'yaml';
@@ -148,7 +148,7 @@ const DropZone = ({
setData(newData);
setButtonReady(true);
} catch (error) {
console.log("Error while dropping the file: ", error)
console.log('Error while dropping the file: ', error);
}
};
@@ -181,12 +181,12 @@ const DropZone = ({
};
return loading ? (
<div className="flex items-center justify-center pt-16 mb-16">
<div className="mb-16 flex items-center justify-center pt-16">
<Image src="/images/loading/loading.gif" height={70} width={120} alt="google logo" />
</div>
) : keysExist ? (
<div
className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-4 mx-auto mt-1 py-8 px-2"
className="relative mx-auto mb-4 mt-1 flex w-full max-w-[calc(100%-1rem)] flex-col items-center justify-center rounded-md bg-mineshaft-900 py-8 px-2 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100"
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
@@ -195,14 +195,14 @@ const DropZone = ({
<input
id="fileSelect"
type="file"
className="opacity-0 absolute w-full h-full"
className="absolute h-full w-full opacity-0"
accept=""
onChange={handleFileSelect}
/>
{errorDragAndDrop ? <div className="my-3 max-w-xl opacity-80" /> : <div className="" />}
<div className="flex flex-row">
<FontAwesomeIcon icon={faUpload} className="text-bunker-300 text-3xl mr-6" />
<p className="text-bunker-300 mt-1">{t('common:drop-zone-keys')}</p>
<FontAwesomeIcon icon={faUpload} className="mr-6 text-3xl text-bunker-300" />
<p className="mt-1 text-bunker-300">{t('common.drop-zone-keys')}</p>
</div>
{errorDragAndDrop && (
<div className="mt-8 max-w-xl opacity-80">
@@ -212,30 +212,30 @@ const DropZone = ({
</div>
) : (
<div
className="opacity-80 hover:opacity-100 duration-200 relative bg-bunker max-w-2xl w-full outline-dashed outline-gray-700 rounded-md outline-2 flex flex-col items-center justify-center pt-16 mb-16 px-4"
className="relative mb-16 flex w-full max-w-2xl flex-col items-center justify-center rounded-md bg-bunker px-4 pt-16 opacity-80 outline-dashed outline-2 outline-gray-700 duration-200 hover:opacity-100"
onDragEnter={handleDragEnter}
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
>
<FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
<p className="">{t('common:drop-zone')}</p>
<FontAwesomeIcon icon={faUpload} className="mb-8 text-7xl" />
<p className="">{t('common.drop-zone')}</p>
<input
id="fileSelect"
type="file"
className="opacity-0 absolute w-full h-full"
className="absolute h-full w-full opacity-0"
accept=".txt,.env,.yml"
onChange={handleFileSelect}
/>
<div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
<div className="border-t border-gray-700 w-1/5" />
<p className="text-gray-400 text-xs mx-4">OR</p>
<div className="border-t border-gray-700 w-1/5" />
<div className="mb-6 mt-5 flex w-full flex-row items-center justify-center">
<div className="w-1/5 border-t border-gray-700" />
<p className="mx-4 text-xs text-gray-400">OR</p>
<div className="w-1/5 border-t border-gray-700" />
</div>
<div className="z-10 mb-6">
<Button
color="mineshaft"
text={String(t('dashboard:add-secret'))}
text={String(t('dashboard.add-secret'))}
onButtonPressed={createNewFile}
size="md"
/>
frontend/src/components/dashboard/GenerateSecretMenu.tsx
+13 -13
View File
@@ -1,5 +1,5 @@
import { Fragment, useState } from 'react';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import { faShuffle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Menu, Transition } from '@headlessui/react';
@@ -21,8 +21,8 @@ const GenerateSecretMenu = ({
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="inline-flex w-full justify-center text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
<div className="py-1 px-2 rounded-md bg-bunker-800 hover:bg-bunker-500">
<Menu.Button className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
<div className="rounded-md bg-bunker-800 py-1 px-2 hover:bg-bunker-500">
<FontAwesomeIcon icon={faShuffle} className="text-bunker-300" />
</div>
</Menu.Button>
@@ -36,7 +36,7 @@ const GenerateSecretMenu = ({
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[20rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none px-1 py-1">
<Menu.Items className="absolute right-0 z-50 mt-0.5 w-[20rem] origin-top-right rounded-md border border-mineshaft-500 bg-bunker px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 drop-shadow-xl focus:outline-none">
<div
onKeyDown={() => null}
role="button"
@@ -55,20 +55,20 @@ const GenerateSecretMenu = ({
);
}
}}
className="relative flex flex-row justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
className="relative flex w-full cursor-pointer select-none flex-row items-center justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/10 hover:text-gray-200"
>
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faShuffle} />
<div className="text-sm justify-between flex flex-row w-full">
<p>{t('dashboard:sidebar.generate-random-hex')}</p>
<p>{t('dashboard:sidebar.digits')}</p>
<FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faShuffle} />
<div className="flex w-full flex-row justify-between text-sm">
<p>{t('dashboard.sidebar.generate-random-hex')}</p>
<p>{t('dashboard.sidebar.digits')}</p>
</div>
</div>
<div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 ">
<div className="absolute bottom-[0.4rem] right-[3.3rem] flex w-16 flex-row rounded-md border border-chicago-700 bg-bunker-800 text-bunker-200 ">
<div
onKeyDown={() => null}
role="button"
tabIndex={0}
className="m-0.5 px-1 cursor-pointer rounded-md hover:bg-chicago-700"
className="m-0.5 cursor-pointer rounded-md px-1 hover:bg-chicago-700"
onClick={() => {
if (randomStringLength > 1) {
setRandomStringLength(randomStringLength - 1);
@@ -80,14 +80,14 @@ const GenerateSecretMenu = ({
<input
onChange={(e) => setRandomStringLength(parseInt(e.target.value, 10))}
value={randomStringLength}
className="text-center z-20 peer text-sm bg-transparent w-full outline-none"
className="peer z-20 w-full bg-transparent text-center text-sm outline-none"
spellCheck="false"
/>
<div
onKeyDown={() => null}
role="button"
tabIndex={0}
className="m-0.5 px-1 pb-0.5 cursor-pointer rounded-md hover:bg-chicago-700"
className="m-0.5 cursor-pointer rounded-md px-1 pb-0.5 hover:bg-chicago-700"
onClick={() => {
if (randomStringLength < 32) {
setRandomStringLength(randomStringLength + 1);
frontend/src/components/dashboard/SideBar.tsx
+27 -31
View File
@@ -1,7 +1,7 @@
/* eslint-disable react/no-unused-prop-types */
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import Image from 'next/image';
import { useTranslation } from 'next-i18next';
import { faXmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -80,9 +80,9 @@ const SideBar = ({
const { t } = useTranslation();
return (
<div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-full min-w-sm max-w-sm sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
<div className="min-w-sm absolute sticky top-0 right-0 z-[70] flex h-full w-full max-w-sm flex-col justify-between border-l border-mineshaft-500 bg-bunker shadow-xl">
{isLoading ? (
<div className="flex items-center justify-center h-full w-full">
<div className="flex h-full w-full items-center justify-center">
<Image
src="/images/loading/loading.gif"
height={60}
@@ -91,9 +91,9 @@ const SideBar = ({
/>
</div>
) : (
<div className="h-min overflow-y-auto w-full">
<div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
<p className="font-semibold text-lg text-bunker-200">{t('dashboard:sidebar.secret')}</p>
<div className="h-min w-full overflow-y-auto">
<div className="flex flex-row items-center justify-between border-b border-mineshaft-500 px-4 py-3">
<p className="text-lg font-semibold text-bunker-200">{t('dashboard.sidebar.secret')}</p>
<div
onKeyDown={() => null}
role="button"
@@ -101,12 +101,12 @@ const SideBar = ({
className="p-1"
onClick={() => toggleSidebar('None')}
>
<FontAwesomeIcon icon={faXmark} className="w-4 h-4 text-bunker-300 cursor-pointer" />
<FontAwesomeIcon icon={faXmark} className="h-4 w-4 cursor-pointer text-bunker-300" />
</div>
</div>
<div className="mt-4 px-4 pointer-events-none">
<p className="text-sm text-bunker-300">{t('dashboard:sidebar.key')}</p>
<div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
<div className="pointer-events-none mt-4 px-4">
<p className="text-sm text-bunker-300">{t('dashboard.sidebar.key')}</p>
<div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
<DashboardInputField
onChangeHandler={modifyKey}
type="varName"
@@ -117,14 +117,14 @@ const SideBar = ({
/>
</div>
</div>
{(data[0]?.value || data[0]?.value === "") ? (
{data[0]?.value || data[0]?.value === '' ? (
<div
className={`relative mt-2 px-4 ${
overrideEnabled && 'opacity-40 pointer-events-none'
overrideEnabled && 'pointer-events-none opacity-40'
} duration-200`}
>
<p className="text-sm text-bunker-300">{t('dashboard:sidebar.value')}</p>
<div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
<p className="text-sm text-bunker-300">{t('dashboard.sidebar.value')}</p>
<div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
<DashboardInputField
onChangeHandler={modifyValue}
type="value"
@@ -134,22 +134,22 @@ const SideBar = ({
blurred
/>
</div>
<div className="absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50">
<div className="absolute right-[1.07rem] top-[1.6rem] z-50 bg-bunker-800">
<GenerateSecretMenu modifyValue={modifyValue} id={data[0]?.id} />
</div>
</div>
) : (
<div className="px-4 text-sm text-bunker-300 pt-4">
<span className="py-0.5 px-1 rounded-md bg-primary-200/10 mr-1">
{t('common:note')}:
<div className="px-4 pt-4 text-sm text-bunker-300">
<span className="mr-1 rounded-md bg-primary-200/10 py-0.5 px-1">
{t('common.note')}:
</span>
{t('dashboard:sidebar.personal-explanation')}
{t('dashboard.sidebar.personal-explanation')}
</div>
)}
<div className="mt-4 px-4">
{(data[0]?.value || data[0]?.value === "") && (
<div className="flex flex-row items-center justify-between my-2 pl-1 pr-2">
<p className="text-sm text-bunker-300">{t('dashboard:sidebar.override')}</p>
{(data[0]?.value || data[0]?.value === '') && (
<div className="my-2 flex flex-row items-center justify-between pl-1 pr-2">
<p className="text-sm text-bunker-300">{t('dashboard.sidebar.override')}</p>
<Toggle
enabled={overrideEnabled}
setEnabled={setOverrideEnabled}
@@ -160,10 +160,10 @@ const SideBar = ({
)}
<div
className={`relative ${
!overrideEnabled && 'opacity-40 pointer-events-none'
!overrideEnabled && 'pointer-events-none opacity-40'
} duration-200`}
>
<div className='rounded-md border overflow-hidden border-mineshaft-600 bg-white/5'>
<div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
<DashboardInputField
onChangeHandler={modifyValueOverride}
type="value"
@@ -179,14 +179,10 @@ const SideBar = ({
</div>
</div>
<SecretVersionList secretId={data[0]?.id} />
<CommentField
comment={data[0]?.comment}
modifyComment={modifyComment}
id={data[0]?.id}
/>
<CommentField comment={data[0]?.comment} modifyComment={modifyComment} id={data[0]?.id} />
</div>
)}
<div className="mt-full w-96 mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
<div className="mt-full mt-4 mb-4 flex w-96 max-w-sm flex-col justify-start space-y-2 px-4">
<div>
<Button
text="Compare secret across environments"
@@ -205,7 +201,7 @@ const SideBar = ({
</div>
<div className="flex">
<Button
text={String(t('common:save-changes'))}
text={String(t('common.save-changes'))}
onButtonPressed={savePush}
color="primary"
size="md"
frontend/src/components/integrations/CloudIntegrationSection.tsx
+5 -11
View File
@@ -1,4 +1,4 @@
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import CloudIntegration from './CloudIntegration';
@@ -40,17 +40,11 @@ const CloudIntegrationSection = ({
return (
<>
<div
className="flex flex-col justify-between items-start m-4 mt-7 text-xl max-w-5xl px-2"
>
<h1 className='font-semibold text-3xl'>
{t('integrations:cloud-integrations')}
</h1>
<p className='text-base text-gray-400'>
{t('integrations:click-to-start')}
</p>
<div className="m-4 mt-7 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
<h1 className="text-3xl font-semibold">{t('integrations.cloud-integrations')}</h1>
<p className="text-base text-gray-400">{t('integrations.click-to-start')}</p>
</div>
<div className='grid gap-4 grid-cols-4 grid-rows-2 mx-6 max-w-5xl'>
<div className="mx-6 grid max-w-5xl grid-cols-4 grid-rows-2 gap-4">
{cloudIntegrationOptions.map((cloudIntegrationOption) => (
<CloudIntegration
cloudIntegrationOption={cloudIntegrationOption}
frontend/src/components/integrations/FrameworkIntegrationSection.tsx
+5 -9
View File
@@ -1,4 +1,4 @@
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import FrameworkIntegration from './FrameworkIntegration';
@@ -19,15 +19,11 @@ const FrameworkIntegrationSection = ({ frameworks }: Props) => {
return (
<>
<div className='flex flex-col justify-between items-start mx-4 mt-12 mb-4 text-xl max-w-5xl px-2'>
<h1 className='font-semibold text-3xl'>
{t('integrations:framework-integrations')}
</h1>
<p className='text-base text-gray-400'>
{t('integrations:click-to-setup')}
</p>
<div className="mx-4 mt-12 mb-4 flex max-w-5xl flex-col items-start justify-between px-2 text-xl">
<h1 className="text-3xl font-semibold">{t('integrations.framework-integrations')}</h1>
<p className="text-base text-gray-400">{t('integrations.click-to-setup')}</p>
</div>
<div className='grid gap-4 grid-cols-7 grid-rows-2 mx-6 mt-4 max-w-5xl'>
<div className="mx-6 mt-4 grid max-w-5xl grid-cols-7 grid-rows-2 gap-4">
{frameworks.map((framework) => (
<FrameworkIntegration
framework={framework}
frontend/src/components/login/LoginStep.tsx
+102 -105
View File
@@ -1,13 +1,12 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
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 Error from '@app/components/basic/Error';
import attemptLogin from '@app/components/utilities/attemptLogin';
import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
import { Button, Input } from '../v2';
@@ -21,116 +20,114 @@ import { Button, Input } from '../v2';
* @param {Function} obj.setStep - function to set the login flow step
* @returns
*/
export default function LoginStep ({
email,
setEmail,
password,
setPassword,
setStep
export default function LoginStep({
email,
setEmail,
password,
setPassword,
setStep
}: {
email: string;
setEmail: (email: string) => void;
password: string;
setPassword: (password: string) => void;
setStep: (step: number) => void;
email: string;
setEmail: (email: string) => void;
password: string;
setPassword: (password: string) => void;
setStep: (step: number) => void;
}) {
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [loginError, setLoginError] = useState(false);
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [loginError, setLoginError] = useState(false);
const { t } = useTranslation();
const { t } = useTranslation();
const handleLogin = async () => {
try {
if (!email || !password) {
return;
}
setIsLoading(true);
const isLoginSuccessful = await attemptLogin({
email,
password,
});
if (isLoginSuccessful && isLoginSuccessful.success) {
// case: login was successful
const handleLogin = async () => {
try {
if (!email || !password) {
return;
}
if (isLoginSuccessful.mfaEnabled) {
// case: login requires MFA step
setStep(2);
setIsLoading(false);
return;
}
setIsLoading(true);
const isLoginSuccessful = await attemptLogin({
email,
password,
});
if (isLoginSuccessful && isLoginSuccessful.success) {
// case: login was successful
// case: login does not require MFA step
router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
}
} catch (err) {
setLoginError(true);
if (isLoginSuccessful.mfaEnabled) {
// case: login requires MFA step
setStep(2);
setIsLoading(false);
return;
}
setIsLoading(false);
// case: login does not require MFA step
router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
}
} catch (err) {
setLoginError(true);
}
return (
<form onSubmit={(e) => e.preventDefault()}>
<div className="w-full mx-auto h-full px-6">
<p className="text-xl w-max mx-auto flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 mb-6">
Enter your email and password
</p>
<div className="flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
<Input
value={email}
onChange={(e) => setEmail(e.target.value)}
type="email"
placeholder="Enter your email..."
isRequired
autoComplete="username"
className="h-12"
/>
</div>
<div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
<div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
<Input
value={password}
onChange={(e) => setPassword(e.target.value)}
type="password"
placeholder="Enter your password..."
isRequired
autoComplete="current-password"
id="current-password"
className="h-12"
/>
</div>
</div>
{!isLoading && loginError && <Error text={t('login:error-login') ?? ''} />}
<div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] px-2 mt-4 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
<div className="text-l py-1 text-lg w-full">
<Button
onClick={async () => handleLogin()}
size="sm"
isFullWidth
className='h-14'
colorSchema="primary"
variant="outline_bg"
isLoading={isLoading}
> {String(t('login:login'))} </Button>
</div>
</div>
</div>
<div className="text-bunker-400 text-sm flex flex-row w-max mx-auto">
<Link href="/verify-email">
<span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('login:forgot-password')}</span>
</Link>
</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>
)}
</form>
);
}
setIsLoading(false);
}
export const getStaticProps = getTranslatedStaticProps(['auth', 'login']);
return (
<form onSubmit={(e) => e.preventDefault()}>
<div className="w-full mx-auto h-full px-6">
<p className="text-xl w-max mx-auto flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200 mb-6">
{t('login.login')}
</p>
<div className="flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
<Input
value={email}
onChange={(e) => setEmail(e.target.value)}
type="email"
placeholder="Enter your email..."
isRequired
autoComplete="username"
className="h-12"
/>
</div>
<div className="relative flex items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] mx-auto w-full rounded-lg max-h-24 md:max-h-28">
<div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
<Input
value={password}
onChange={(e) => setPassword(e.target.value)}
type="password"
placeholder="Enter your password..."
isRequired
autoComplete="current-password"
id="current-password"
className="h-12"
/>
</div>
</div>
{!isLoading && loginError && <Error text={t('login.error-login') ?? ''} />}
<div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[22rem] px-2 mt-4 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
<div className="text-l py-1 text-lg w-full">
<Button
onClick={async () => handleLogin()}
size="sm"
isFullWidth
className='h-14'
colorSchema="primary"
variant="outline_bg"
isLoading={isLoading}
> {String(t('login.login'))} </Button>
</div>
</div>
</div>
<div className="text-bunker-400 text-sm flex flex-row w-max mx-auto">
<Link href="/verify-email">
<span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>{t('login:forgot-password')}</span>
</Link>
</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>
)}
</form>
);
}
frontend/src/components/login/MFAStep.tsx
+22 -30
View File
@@ -1,11 +1,10 @@
/* eslint-disable react/jsx-props-no-spreading */
import React, { useState } from 'react';
import ReactCodeInput from 'react-code-input';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import attemptLoginMfa from '@app/components/utilities/attemptLoginMfa';
import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
import { useSendMfaToken } from '@app/hooks/api/auth';
import Button from '../basic/buttons/Button';
@@ -37,10 +36,10 @@ interface VerifyMfaTokenError {
context: {
code: string;
triesLeft: number;
}
},
};
};
status: number;
}
};
}
/**
@@ -73,7 +72,7 @@ export default function MFAStep({
if (mfaCode.length !== 6) {
return;
}
setIsLoading(true);
const isLoginSuccessful = await attemptLoginMfa({
email,
@@ -85,10 +84,9 @@ export default function MFAStep({
setIsLoading(false);
router.push(`/dashboard/${localStorage.getItem('projectData.id')}`);
}
} catch (err) {
const error = err as VerifyMfaTokenError;
if (error?.response?.status === 500) {
window.location.reload();
} else if (error?.response?.data?.context?.triesLeft) {
@@ -100,8 +98,8 @@ export default function MFAStep({
setIsLoading(false);
}
}
};
const handleResendMfaCode = async () => {
try {
setIsLoadingResend(true);
@@ -111,12 +109,12 @@ export default function MFAStep({
console.error(err);
setIsLoadingResend(false);
}
}
};
return (
<form className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
<p className="text-l flex justify-center text-bunker-300">{t('mfa:step2-message')}</p>
<p className="text-l flex justify-center font-semibold my-2 text-bunker-300">{email} </p>
<form className="h-7/12 mx-auto mb-64 w-max rounded-xl bg-bunker px-8 pt-10 pb-4 drop-shadow-xl md:mb-16">
<p className="text-l flex justify-center text-bunker-300">{t('mfa.step2-message')}</p>
<p className="text-l my-2 flex justify-center font-semibold text-bunker-300">{email} </p>
<div className="hidden md:block">
<ReactCodeInput
name=""
@@ -128,35 +126,29 @@ export default function MFAStep({
className="mt-6 mb-2"
/>
</div>
{typeof triesLeft === 'number' && <Error text={`${t('mfa:step2-code-error')} ${triesLeft}`} />}
<div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
<Button
text={t('mfa:verify') ?? ''}
onButtonPressed={() => handleLoginMfa()}
size="lg"
/>
{typeof triesLeft === 'number' && (
<Error text={`${t('mfa.step2-code-error')} ${triesLeft}`} />
)}
<div className="min-w-28 mx-auto mt-4 mb-2 flex max-h-24 max-w-max flex-col items-center justify-center px-4 text-lg md:p-2">
<Button text={t('mfa.verify') ?? ''} onButtonPressed={() => handleLoginMfa()} size="lg" />
</div>
<div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
<div className="mx-auto flex max-h-24 w-full max-w-md flex-col items-center justify-center pt-2">
<div className="flex flex-row items-baseline gap-1 text-sm">
<span className="text-bunker-400">{t('mfa:step2-resend-alert')}</span>
<span className="text-bunker-400">{t('mfa.step2-resend-alert')}</span>
<u
className={`font-normal ${
isLoadingResend
? 'text-bunker-400'
: 'text-primary-700 hover:text-primary duration-200'
: 'text-primary-700 duration-200 hover:text-primary'
}`}
>
<button disabled={isLoading} onClick={() => handleResendMfaCode()} type="button">
{isLoadingResend
? t('mfa:step2-resend-progress')
: t('mfa:step2-resend-submit')}
{isLoadingResend ? t('mfa.step2-resend-progress') : t('mfa.step2-resend-submit')}
</button>
</u>
</div>
<p className="text-sm text-bunker-400 pb-2">{t('mfa:step2-spam-alert')}</p>
<p className="pb-2 text-sm text-bunker-400">{t('mfa.step2-spam-alert')}</p>
</div>
</form>
);
}
export const getStaticProps = getTranslatedStaticProps(['auth', 'mfa']);
frontend/src/components/navigation/NavBarDashboard.tsx
+14 -13
View File
@@ -1,9 +1,9 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable react/jsx-key */
import { Fragment, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { TFunction, useTranslation } from 'next-i18next';
import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons';
import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
import {
@@ -17,6 +17,7 @@ import {
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Menu, Transition } from '@headlessui/react';
import {TFunction} from 'i18next'
import logout from '@app/pages/api/auth/Logout';
@@ -28,22 +29,22 @@ import guidGenerator from '../utilities/randomId';
const supportOptions = (t: TFunction) => [
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faSlack} />,
t('nav:support.slack'),
t('nav.support.slack'),
'https://join.slack.com/t/infisical/shared_invite/zt-1dgg63ln8-G7PCNJdCymAT9YF3j1ewVA'
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faBook} />,
t('nav:support.docs'),
'https://infisical.com/docs/getting-started/introduction'
t('nav.support.docs'),
'https://infisical.com/docs/documentation/getting-started/introduction'
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faGithub} />,
t('nav:support.issue'),
t('nav.support.issue'),
'https://github.com/Infisical/infisical-cli/issues'
],
[
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faEnvelope} />,
t('nav:support.email'),
t('nav.support.email'),
'mailto:[email protected]'
]
];
@@ -105,7 +106,7 @@ export default function Navbar() {
</div>
<div className="relative flex justify-start items-center mx-2 z-40">
<a
href="https://infisical.com/docs/getting-started/introduction"
href="https://infisical.com/docs/documentation/getting-started/introduction"
target="_blank"
rel="noopener noreferrer"
className="text-gray-200 hover:bg-white/10 px-3 rounded-md duration-200 text-sm mr-4 py-2 flex items-center"
@@ -168,7 +169,7 @@ export default function Navbar() {
<Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-[999] ring-opacity-5 focus:outline-none">
<div className="px-1 py-1 z-[100]">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t('nav:user.signed-in-as')}
{t('nav.user.signed-in-as')}
</div>
<div
onKeyDown={() => null}
@@ -197,7 +198,7 @@ export default function Navbar() {
</div>
<div className="px-2 pt-2">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t('nav:user.current-organization')}
{t('nav.user.current-organization')}
</div>
<div
onKeyDown={() => null}
@@ -230,7 +231,7 @@ export default function Navbar() {
className="mt-1 relative flex justify-start cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/5 duration-200 hover:text-gray-200"
>
<FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faCoins} />
<div className="text-sm">{t('nav:user.usage-billing')}</div>
<div className="text-sm">{t('nav.user.usage-billing')}</div>
</div>
</button>
<button
@@ -248,14 +249,14 @@ export default function Navbar() {
<span className="rounded-lg absolute inset-y-0 left-0 flex items-center pl-3 pr-4">
<FontAwesomeIcon icon={faPlus} className="ml-1" />
</span>
<div className="text-sm ml-1">{t('nav:user.invite')}</div>
<div className="text-sm ml-1">{t('nav.user.invite')}</div>
</div>
</button>
</div>
{orgs?.length > 1 && (
<div className="px-1 pt-1">
<div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
{t('nav:user.other-organizations')}
{t('nav.user.other-organizations')}
</div>
<div className="flex flex-col items-start px-1 mt-3 mb-2">
{orgs
@@ -300,7 +301,7 @@ export default function Navbar() {
className="text-lg ml-1.5 mr-3"
icon={faRightFromBracket}
/>
{t('common:logout')}
{t('common.logout')}
</div>
</button>
)}
frontend/src/components/navigation/NavHeader.tsx
+38 -27
View File
@@ -1,3 +1,4 @@
import Link from 'next/link';
import { useRouter } from 'next/router';
import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -21,6 +22,7 @@ import { Select, SelectItem, Tooltip } from '../v2';
* @param {string} obj.onEnvChange - the action that happens when an env is changed
* @returns
*/
// TODO(akhilmhdh): simply this header and nav system later
export default function NavHeader({
pageName,
isProjectRelated,
@@ -38,10 +40,10 @@ export default function NavHeader({
}): JSX.Element {
const { currentWorkspace } = useWorkspace();
const { currentOrg } = useOrganization();
const router = useRouter()
const router = useRouter();
return (
<div className="ml-6 flex flex-row items-center pt-8">
<div className="ml-6 flex flex-row items-center pt-6">
<div className="mr-2 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
{currentOrg?.name?.charAt(0)}
</div>
@@ -59,31 +61,40 @@ export default function NavHeader({
</>
)}
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
{pageName === 'Secrets'
? <a className="text-sm font-semibold text-primary/80 hover:text-primary" href={`${router.asPath.split("?")[0]}`}>{pageName}</a>
: <div className="text-sm text-gray-400">{pageName}</div>}
{currentEnv &&
<>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
<div className='pl-3 rounded-md hover:bg-bunker-100/10'>
<Tooltip content="Select environment">
<Select
value={userAvailableEnvs?.filter(uae => uae.name === currentEnv)[0]?.slug}
onValueChange={(value) => {
if (value && onEnvChange) onEnvChange(value);
}}
className="text-sm pl-0 font-medium text-primary/80 hover:text-primary bg-transparent"
dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
>
{userAvailableEnvs?.map(({ name, slug }) => (
<SelectItem value={slug} key={slug}>
{name}
</SelectItem>
))}
</Select>
</Tooltip>
</div>
</>}
{pageName === 'Secrets' ? (
<Link
passHref
legacyBehavior
href={{ pathname: '/dashboard/[id]', query: { id: router.query.id } }}
>
<a className="text-sm font-semibold text-primary/80 hover:text-primary">{pageName}</a>
</Link>
) : (
<div className="text-sm text-gray-400">{pageName}</div>
)}
{currentEnv && (
<>
<FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-xs text-gray-400" />
<div className="rounded-md pl-3 hover:bg-bunker-100/10">
<Tooltip content="Select environment">
<Select
value={userAvailableEnvs?.filter((uae) => uae.name === currentEnv)[0]?.slug}
onValueChange={(value) => {
if (value && onEnvChange) onEnvChange(value);
}}
className="bg-transparent pl-0 text-sm font-medium text-primary/80 hover:text-primary"
dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
>
{userAvailableEnvs?.map(({ name, slug }) => (
<SelectItem value={slug} key={slug}>
{name}
</SelectItem>
))}
</Select>
</Tooltip>
</div>
</>
)}
</div>
);
}
frontend/src/components/signup/CodeInputStep.tsx
+9 -9
View File
@@ -1,7 +1,7 @@
/* eslint-disable react/jsx-props-no-spreading */
import React, { useState } from 'react';
import ReactCodeInput from 'react-code-input';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
@@ -84,7 +84,7 @@ export default function CodeInputStep({
return (
<div className="mx-auto h-full w-full pb-4 px-8">
<p className="text-md flex justify-center text-bunker-200">{t('signup:step2-message')}</p>
<p className="text-md flex justify-center text-bunker-200">{t('signup.step2-message')}</p>
<p className="text-md flex justify-center font-semibold my-1 text-bunker-200">{email} </p>
<div className="hidden md:block w-max min-w-[20rem] mx-auto">
<ReactCodeInput
@@ -108,7 +108,7 @@ export default function CodeInputStep({
className="mt-2 mb-2"
/>
</div>
{codeError && <Error text={t('signup:step2-code-error')} />}
{codeError && <Error text={t('signup.step2-code-error')} />}
<div className="flex flex-col items-center justify-center lg:w-[19%] w-1/4 min-w-[20rem] mt-2 max-w-xs md:max-w-md mx-auto text-sm text-center md:text-left">
<div className="text-l py-1 text-lg w-full">
<Button
@@ -116,25 +116,25 @@ export default function CodeInputStep({
size="sm"
isFullWidth
className='h-14'
colorSchema="primary"
colorSchema="primary"
variant="outline_bg"
> {String(t('signup:verify'))} </Button>
> {String(t('signup.verify'))} </Button>
</div>
</div>
<div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
<div className="flex flex-row items-baseline gap-1 text-sm">
<span className="text-bunker-400">{t('signup:step2-resend-alert')}</span>
<span className="text-bunker-400">{t('signup.step2-resend-alert')}</span>
<div className="mt-2 text-bunker-400 text-md flex flex-row">
<button disabled={isLoading} onClick={resendVerificationEmail} type="button">
<span className='hover:underline hover:underline-offset-4 hover:decoration-primary-700 hover:text-bunker-200 duration-200 cursor-pointer'>
{isResendingVerificationEmail
? t('signup:step2-resend-progress')
: t('signup:step2-resend-submit')}
? t('signup.step2-resend-progress')
: t('signup.step2-resend-submit')}
</span>
</button>
</div>
</div>
<p className="text-sm text-bunker-400 pb-2">{t('signup:step2-spam-alert')}</p>
<p className="text-sm text-bunker-400 pb-2">{t('signup.step2-spam-alert')}</p>
</div>
</div>
);
frontend/src/components/signup/DonwloadBackupPDFStep.tsx
+4 -5
View File
@@ -1,4 +1,4 @@
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import { faWarning } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -32,13 +32,12 @@ export default function DonwloadBackupPDFStep({
return (
<div className="flex flex-col items-center w-full h-full px-4 md:px-6 mx-auto mb-36 md:mb-16">
<p className="text-xl text-center font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
{t('signup:step4-message')}
{t('signup.step4-message')}
</p>
<div className="flex flex-col pb-2 bg-mineshaft-900 border border-mineshaft-700 items-center justify-center text-center lg:w-1/6 w-1/4 min-w-[27rem] mt-4 md:mt-8 max-w-md text-bunker-300 text-md rounded-md">
<div className="w-full px-3 pt-1 mt-8 flex flex-row text-center items-center m-2 text-bunker-300 rounded-md lg:w-1/6 w-1/4 min-w-[26rem] mx-auto">
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-5xl my-2" />
<span className='mb-2'>{t('signup:step4-description1')} {t('signup:step4-description3')}</span>
{/* {t('signup:step4-description2')} */}
<span className='mb-2'>{t('signup.step4-description1')} {t('signup.step4-description3')}</span>
</div>
<div className="flex flex-col items-center justify-center mt-4 mb-4 lg:w-1/6 w-1/4 min-w-[20rem] mt-2 md:max-w-md mx-auto text-sm text-center md:text-left">
<div className="text-l py-1 text-lg w-full">
@@ -56,7 +55,7 @@ export default function DonwloadBackupPDFStep({
size="sm"
isFullWidth
className='h-12'
colorSchema="primary"
colorSchema="primary"
variant="outline_bg"
> Download PDF </Button>
</div>
frontend/src/components/signup/EnterEmailStep.tsx
+14 -4
View File
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import Link from 'next/link';
import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
@@ -53,7 +54,7 @@ export default function EnterEmailStep({
<div>
<div className="w-full md:px-6 mx-auto">
<p className="text-xl font-medium flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
{t('signup:initial-title')}
{t('signup.step1-start')}
</p>
<div className="flex flex-col items-center justify-center lg:w-1/6 w-1/4 min-w-[20rem] m-auto rounded-lg mt-8">
<Input
@@ -73,12 +74,21 @@ export default function EnterEmailStep({
size="sm"
isFullWidth
className='h-14'
colorSchema="primary"
colorSchema="primary"
variant="outline_bg"
> {String(t('signup:step1-submit'))} </Button>
> {String(t('signup.step1-submit'))} </Button>
</div>
</div>
</div>
<div className="mx-auto mb-48 mt-2 flex w-full max-w-md flex-col items-center justify-center pt-2 md:mb-16 md:pb-2">
<Link href="/login">
<button type="button" className="w-max pb-3 duration-200 hover:opacity-90">
<u className="text-sm font-normal text-primary-500">
{t('signup.already-have-account')}
</u>
</button>
</Link>
</div>
</div>
);
}
frontend/src/components/signup/TeamInviteStep.tsx
+9 -11
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
import { usePopUp } from '@app/hooks/usePopUp';
@@ -17,10 +17,8 @@ export default function TeamInviteStep(): JSX.Element {
const [emails, setEmails] = useState('');
const { t } = useTranslation();
const router = useRouter();
const {data: serverDetails } = useFetchServerStatus()
const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
'setUpEmail'
] as const);
const { data: serverDetails } = useFetchServerStatus();
const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(['setUpEmail'] as const);
// Redirect user to the getting started page
const redirectToHome = async () => {
@@ -41,10 +39,10 @@ export default function TeamInviteStep(): JSX.Element {
return (
<div className="w-max mx-auto min-w-lg h-full pb-4 px-8 mb-64 md:mb-32">
<p className="text-2xl font-semibold flex justify-center text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
{t('signup:step5-invite-team')}
{t('signup.step5-invite-team')}
</p>
<p className="text-center flex justify-center text-bunker-400 md:mx-8 mb-6 mt-4">
{t('signup:step5-subtitle')}
{t('signup.step5-subtitle')}
</p>
<div className="bg-mineshaft-800 border border-mineshaft-600 w-max mx-auto pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-32">
<div>
@@ -66,14 +64,14 @@ export default function TeamInviteStep(): JSX.Element {
className="text-md md:text-sm mx-3 text-bunker-300 bg-mineshaft-700 py-3 md:py-3.5 px-5 rounded-md cursor-pointer hover:bg-mineshaft-500 duration-200"
onClick={redirectToHome}
>
{t('signup:step5-skip')}
{t('signup.step5-skip')}
</div>
<Button
text={t('signup:step5-send-invites') ?? ''}
text={t('signup.step5-send-invites') ?? ''}
onButtonPressed={() => {
if(serverDetails?.emailConfigured){
if (serverDetails?.emailConfigured) {
inviteUsers({ emails })
}else{
} else {
handlePopUpOpen('setUpEmail');
}
}}
frontend/src/components/signup/UserInfoStep.tsx
+21 -23
View File
@@ -1,7 +1,7 @@
import crypto from 'crypto';
import React, { useState } from 'react';
import { useTranslation } from 'next-i18next';
import { useTranslation } from 'react-i18next';
import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import jsrp from 'jsrp';
@@ -60,7 +60,7 @@ export default function UserInfoStep({
setName,
organizationName,
setOrganizationName,
attributionSource,
attributionSource,
setAttributionSource,
providerAuthToken,
}: UserInfoStepProps): JSX.Element {
@@ -115,7 +115,6 @@ export default function UserInfoStep({
async () => {
client.createVerifier(async (err: any, result: { salt: string; verifier: string }) => {
try {
// TODO: moduralize into KeyService
const derivedKey = await deriveArgonKey({
password,
@@ -193,7 +192,6 @@ export default function UserInfoStep({
localStorage.setItem('projectData.id', project._id);
incrementStep();
} catch (error) {
setIsLoading(false);
console.error(error);
@@ -207,9 +205,9 @@ export default function UserInfoStep({
};
return (
<div className="w-max mx-auto h-full px-8 mb-36 md:mb-16">
<p className="text-xl font-medium flex justify-center mb-6 mx-8 md:mx-16 text-transparent bg-clip-text bg-gradient-to-b from-white to-bunker-200">
Tell us a bit about yourself
<div className="h-7/12 mx-auto mb-36 w-max rounded-xl bg-bunker py-10 px-8 drop-shadow-xl md:mb-16">
<p className="mx-8 mb-6 flex justify-center text-4xl font-bold text-primary md:mx-16">
{t('signup.step3-message')}
</p>
<div className="relative z-0 flex flex-col items-center justify-end w-full md:p-2 rounded-lg max-h-24">
<p className='text-left w-full text-sm text-bunker-300 mb-1 ml-1 font-medium'>Your Name</p>
@@ -244,9 +242,9 @@ export default function UserInfoStep({
className="h-12"
/>
</div>
<div className="flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
<div className="mt-2 flex max-h-60 w-full flex-col items-center justify-center rounded-lg md:p-2">
<InputField
label={t('section-password:password')}
label={t('section.password.password')}
onChangeHandler={(pass: string) => {
setPassword(pass);
passwordCheck({
@@ -265,38 +263,38 @@ export default function UserInfoStep({
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">{t('section-password:validate-base')}</div>
<div className="flex flex-row justify-start items-center ml-1">
<div className="mt-4 flex w-full flex-col items-start rounded-md bg-white/5 px-2 py-2">
<div className="mb-1 text-sm text-gray-400">{t('section.password.validate-base')}</div>
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorLength ? (
<FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
)}
<div className={`${passwordErrorLength ? 'text-gray-400' : 'text-gray-600'} text-sm`}>
{t('section-password:validate-length')}
{t('section.password.validate-length')}
</div>
</div>
<div className="flex flex-row justify-start items-center ml-1">
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorLowerCase ? (
<FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
)}
<div
className={`${passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'} text-sm`}
>
{t('section-password:validate-case')}
{t('section.password.validate-case')}
</div>
</div>
<div className="flex flex-row justify-start items-center ml-1">
<div className="ml-1 flex flex-row items-center justify-start">
{passwordErrorNumber ? (
<FontAwesomeIcon icon={faXmark} className="text-md text-red ml-0.5 mr-2.5" />
) : (
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
<FontAwesomeIcon icon={faCheck} className="text-md mr-2 text-primary" />
)}
<div className={`${passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'} text-sm`}>
{t('section-password:validate-number')}
{t('section.password.validate-number')}
</div>
</div>
</div>
@@ -304,9 +302,9 @@ export default function UserInfoStep({
<div className="py-2" />
)}
</div>
<div className="flex flex-col items-center justify-center md:p-2 max-h-48 max-w-max mx-auto text-lg px-2 py-3">
<div className="mx-auto flex max-h-48 max-w-max flex-col items-center justify-center px-2 py-3 text-lg md:p-2">
<Button
text={t('signup:signup') ?? ''}
text={t('signup.signup') ?? ''}
loading={isLoading}
onButtonPressed={signupErrorCheck}
size="lg"
@@ -314,4 +312,4 @@ export default function UserInfoStep({
</div>
</div>
);
}
}
frontend/src/components/utilities/withTranslateProps.ts
-52
View File
@@ -1,52 +0,0 @@
import { GetServerSideProps, GetStaticProps } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
const DefaultNamespaces = ["common", "nav"];
type GetTranslatedStaticProps = (
namespaces: string[],
getStaticProps?: GetStaticProps<any>
) => GetStaticProps;
type GetTranslatedServerSideProps = (
namespaces: string[],
getStaticProps?: GetServerSideProps<any>
) => GetServerSideProps;
export const getTranslatedStaticProps: GetTranslatedStaticProps =
(namespaces, getStaticProps) =>
async ({ locale, ...context }) => {
let staticProps = { props: {} };
if (typeof getStaticProps === "function") {
staticProps = (await getStaticProps(context)) as any;
}
return {
...staticProps,
props: {
...(await serverSideTranslations(locale ?? "en", [
...DefaultNamespaces,
...namespaces,
])),
...staticProps.props,
},
};
};
export const getTranslatedServerSideProps: GetTranslatedServerSideProps =
(namespaces, getServerSideProps) =>
async ({ locale, ...context }) => {
let staticProps = { props: {} };
if (typeof getServerSideProps === "function") {
staticProps = (await getServerSideProps(context)) as any;
}
return {
...staticProps,
props: {
...(await serverSideTranslations(locale ?? "en", [
...DefaultNamespaces,
...namespaces,
])),
...staticProps.props,
},
};
};
frontend/src/components/v2/Button/Button.tsx
+4 -4
View File
@@ -36,11 +36,11 @@ const buttonVariants = cva(
selected: '',
outline_bg: '',
// a constant color not in use on hover or click goes colorSchema color
star: 'text-bunker-200 bg-mineshaft-500'
star: 'text-bunker-200 bg-mineshaft-700 border-mineshaft-600'
},
isDisabled: {
true: 'bg-mineshaft text-white opacity-50 cursor-not-allowed',
false: ''
true: 'bg-mineshaft-700 border border-mineshaft-600 text-white opacity-50 cursor-not-allowed',
false: 'border border-primary-400'
},
isFullWidth: {
true: 'w-full',
@@ -61,7 +61,7 @@ const buttonVariants = cva(
{
colorSchema: 'primary',
variant: 'star',
className: 'hover:bg-primary hover:text-black'
className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary hover:text-black hover:border-primary-400 duration-100'
},
{
colorSchema: 'primary',
frontend/src/components/v2/IconButton/IconButton.tsx
+7 -1
View File
@@ -30,7 +30,8 @@ const iconButtonVariants = cva(
solid: '',
outline: ['bg-transparent', 'border-2', 'border-solid'],
plain: '',
star: 'text-bunker-200 bg-mineshaft-500'
star: 'text-bunker-200 bg-mineshaft-500',
outline_bg: ''
},
isDisabled: {
true: 'bg-opacity-70 cursor-not-allowed',
@@ -53,6 +54,11 @@ const iconButtonVariants = cva(
variant: 'star',
className: 'hover:bg-primary hover:text-black'
},
{
colorSchema: 'primary',
variant: 'outline_bg',
className: 'bg-mineshaft-700 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60 text-bunker-200 hover:text-bunker-100 duration-100'
},
{
colorSchema: 'danger',
variant: 'star',
frontend/src/components/v2/Menu/Menu.stories.tsx
+6 -9
View File
@@ -1,7 +1,4 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import { faKey, faUser } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
// eslint-disable-next-line import/no-extraneous-dependencies
import { Meta, StoryObj } from '@storybook/react';
import { Menu, MenuGroup, MenuItem } from './Menu';
@@ -74,14 +71,14 @@ export const WithIcons: Story = {
render: (args) => (
<Menu {...args}>
<MenuGroup title="Group 1">
<MenuItem isDisabled icon={<FontAwesomeIcon icon={faKey} />}>
<MenuItem isDisabled icon="system-outline-90-lock-closed">
Secrets
</MenuItem>
<MenuItem icon={<FontAwesomeIcon icon={faUser} />}>Members</MenuItem>
<MenuItem icon="system-outline-96-groups">Members</MenuItem>
</MenuGroup>
<MenuGroup title="Group 2">
<MenuItem icon={<FontAwesomeIcon icon={faKey} />}>Secrets</MenuItem>
<MenuItem icon={<FontAwesomeIcon icon={faKey} />}>Members</MenuItem>
<MenuItem icon="system-outline-90-lock-closed">Secrets</MenuItem>
<MenuItem icon="system-outline-96-groups">Members</MenuItem>
</MenuGroup>
</Menu>
),
@@ -93,12 +90,12 @@ export const WithDescription: Story = {
<Menu {...args}>
<MenuItem
isDisabled
icon={<FontAwesomeIcon icon={faKey} />}
icon="system-outline-90-lock-closed"
description="Some random description"
>
Secrets
</MenuItem>
<MenuItem icon={<FontAwesomeIcon icon={faUser} />} description="Some random description">
<MenuItem icon="system-outline-96-groups" description="Some random description">
Members
</MenuItem>
</Menu>
frontend/src/components/v2/Menu/Menu.tsx
+44 -19
View File
@@ -1,4 +1,9 @@
import { ComponentPropsWithRef, ElementType, ReactNode, Ref } from 'react';
// @ts-nocheck
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable global-require */
import { ComponentPropsWithRef, ElementType, ReactNode, Ref, useRef } from 'react';
import { motion } from 'framer-motion'
import Lottie from 'lottie-react'
import { twMerge } from 'tailwind-merge';
export type MenuProps = {
@@ -14,7 +19,7 @@ export type MenuItemProps<T extends ElementType> = {
// Kudos to https://itnext.io/react-polymorphic-components-with-typescript-f7ce72ea7af2
as?: T;
children: ReactNode;
icon?: ReactNode;
icon?: string;
description?: ReactNode;
isDisabled?: boolean;
isSelected?: boolean;
@@ -33,23 +38,43 @@ export const MenuItem = <T extends ElementType = 'button'>({
// wrapping in forward ref with generic component causes the loss of ts definitions on props
inputRef,
...props
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
<li
className={twMerge(
'px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-600 duration-50',
isSelected && 'bg-mineshaft-500',
isDisabled && 'hover:bg-transparent cursor-not-allowed',
className
)}
>
<Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
<div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
{icon && <span className="mr-3 ml-4 w-5">{icon}</span>}
<span className="flex-grow text-left">{children}</span>
</Item>
{description && <span className="mt-2 text-xs">{description}</span>}
</li>
);
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
const iconRef = useRef()
return(
<a
onMouseEnter={() => iconRef.current?.play()}
onMouseLeave={() => iconRef.current?.stop()}
>
<li
className={twMerge(
'group px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-700 duration-50',
isSelected && 'bg-mineshaft-600 hover:bg-mineshaft-600',
isDisabled && 'hover:bg-transparent cursor-not-allowed',
className
)}
>
<motion.span className="w-full flex flex-row items-center justify-start rounded-sm">
<Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
<div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
{/* {icon && <span className="mr-3 ml-4 w-5 block group-hover:hidden">{icon}</span>} */}
<Lottie
lottieRef={iconRef}
style={{ width: 24, height: 24 }}
// eslint-disable-next-line import/no-dynamic-require
animationData={require(`../../../../public/lotties/${icon}.json`)}
loop={false}
autoplay={false}
className="my-auto ml-3 mr-3"
/>
<span className="flex-grow text-left">{children}</span>
</Item>
{description && <span className="mt-2 text-xs">{description}</span>}
</motion.span>
</li>
</a>
)
};
MenuItem.displayName = 'MenuItem';
frontend/src/components/v2/Popoverv2/Popoverv2.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export const Popover = PopoverPrimitive.Root;
export type PopoverContentProps = {
children?: ReactNode;
hideCloseBtn?: boolean;
} & PopoverPrimitive.PopperContentProps;
} & PopoverPrimitive.PopoverContentProps;
export const PopoverContent = ({
children,