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

refactor(ui): changed frontend to normal i18n without SSR

Browse Source
This commit is contained in:
akhilmhdh
2023-05-09 23:28:23 +05:30
parent 420d71d923
commit 3561c589b1
198 changed files with 5008 additions and 5253 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
+110 -116
View File
@@ -1,7 +1,7 @@
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';
@@ -9,7 +9,6 @@ import Button from '@app/components/basic/buttons/Button';
import Error from '@app/components/basic/Error';
import InputField from '@app/components/basic/InputField';
import attemptLogin from '@app/components/utilities/attemptLogin';
import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
/**
* 1st step of login - user enters their username and password
@@ -21,127 +20,122 @@ import { getTranslatedStaticProps } from '@app/components/utilities/withTranslat
* @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="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
<p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
{t('login:login')}
</p>
<div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
<InputField
label={t('common:email')}
onChangeHandler={setEmail}
type="email"
value={email}
placeholder=""
isRequired
autoComplete="username"
/>
</div>
<div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
<InputField
label={t('common:password')}
onChangeHandler={setPassword}
type="password"
value={password}
placeholder=""
isRequired
autoComplete="current-password"
id="current-password"
/>
<div className="absolute top-2 right-3 text-primary-700 hover:text-primary duration-200 cursor-pointer text-sm">
<Link href="/verify-email">
<button
type="button"
className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5"
>
{t('login:forgot-password')}
</button>
</Link>
</div>
</div>
{!isLoading && loginError && <Error text={t('login:error-login') ?? ''} />}
<div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
<div className="text-l mt-6 m-8 px-8 py-3 text-lg">
<Button
type="submit"
text={t('login:login') ?? ''}
onButtonPressed={async () => handleLogin()}
loading={isLoading}
size="lg"
/>
</div>
</div>
</div>
{false && (
<div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
{t('common:maintenance-alert')}
</div>
)}
<div className="flex flex-row items-center justify-center md:pb-4 mt-4">
<p className="text-sm flex justify-center text-gray-400 w-max">
{t('login:need-account')}
</p>
<Link href="/signup">
<button
type="button"
className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5"
>
{t('login:create-account')}
</button>
</Link>
</div>
</form>
);
}
setIsLoading(false);
};
export const getStaticProps = getTranslatedStaticProps(['auth', 'login']);
return (
<form onSubmit={(e) => e.preventDefault()}>
<div className="h-7/12 mx-auto w-full max-w-md rounded-xl bg-bunker py-4 px-6 pt-8 drop-shadow-xl">
<p className="mx-auto mb-6 flex w-max justify-center text-3xl font-semibold text-bunker-100">
{t('login.login')}
</p>
<div className="mt-4 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-0 md:max-h-28 md:p-2">
<InputField
label={t('common.email')}
onChangeHandler={setEmail}
type="email"
value={email}
placeholder=""
isRequired
autoComplete="username"
/>
</div>
<div className="relative mt-6 flex max-h-24 w-full items-center justify-center rounded-lg md:mt-2 md:max-h-28 md:p-2">
<InputField
label={t('common.password')}
onChangeHandler={setPassword}
type="password"
value={password}
placeholder=""
isRequired
autoComplete="current-password"
id="current-password"
/>
<div className="absolute top-2 right-3 cursor-pointer text-sm text-primary-700 duration-200 hover:text-primary">
<Link href="/verify-email">
<button
type="button"
className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
>
{t('login.forgot-password')}
</button>
</Link>
</div>
</div>
{!isLoading && loginError && <Error text={t('login.error-login') ?? ''} />}
<div className="mx-auto mt-4 flex max-h-20 w-full max-w-md flex-col items-center justify-center text-sm md:p-2">
<div className="text-l m-8 mt-6 px-8 py-3 text-lg">
<Button
type="submit"
text={t('login.login') ?? ''}
onButtonPressed={async () => handleLogin()}
loading={isLoading}
size="lg"
/>
</div>
</div>
</div>
{false && (
<div className="mx-auto mt-4 flex w-full max-w-md flex-row items-center rounded-md bg-white/10 p-2 text-gray-300">
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
{t('common.maintenance-alert')}
</div>
)}
<div className="mt-4 flex flex-row items-center justify-center md:pb-4">
<p className="flex w-max justify-center text-sm text-gray-400">{t('login.need-account')}</p>
<Link href="/signup">
<button
type="button"
className="ml-1.5 text-sm font-normal text-primary-700 underline-offset-4 duration-200 hover:text-primary"
>
{t('login.create-account')}
</button>
</Link>
</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
+12 -11
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'),
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]'
]
];
@@ -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/signup/CodeInputStep.tsx
+13 -13
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';
@@ -83,9 +83,9 @@ export default function CodeInputStep({
};
return (
<div 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('signup:step2-message')}</p>
<p className="text-l flex justify-center font-semibold my-2 text-bunker-300">{email} </p>
<div 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('signup.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=""
@@ -108,28 +108,28 @@ export default function CodeInputStep({
className="mt-2 mb-6"
/>
</div>
{codeError && <Error text={t('signup:step2-code-error')} />}
<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('signup:verify') ?? ''} onButtonPressed={incrementStep} size="lg" />
{codeError && <Error text={t('signup.step2-code-error')} />}
<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('signup.verify') ?? ''} onButtonPressed={incrementStep} 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('signup:step2-resend-alert')}</span>
<span className="text-bunker-400">{t('signup.step2-resend-alert')}</span>
<u
className={`font-normal ${
isResendingVerificationEmail
? 'text-bunker-400'
: 'text-primary-700 hover:text-primary duration-200'
: 'text-primary-700 duration-200 hover:text-primary'
}`}
>
<button disabled={isLoading} onClick={resendVerificationEmail} type="button">
{isResendingVerificationEmail
? t('signup:step2-resend-progress')
: t('signup:step2-resend-submit')}
? t('signup.step2-resend-progress')
: t('signup.step2-resend-submit')}
</button>
</u>
</div>
<p className="text-sm text-bunker-400 pb-2">{t('signup:step2-spam-alert')}</p>
<p className="pb-2 text-sm text-bunker-400">{t('signup.step2-spam-alert')}</p>
</div>
</div>
);
frontend/src/components/signup/DonwloadBackupPDFStep.tsx
+10 -10
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';
@@ -30,19 +30,19 @@ export default function DonwloadBackupPDFStep({
const { t } = useTranslation();
return (
<div className="bg-bunker flex flex-col items-center w-full max-w-xs md:max-w-lg h-7/12 py-8 px-4 md:px-6 mx-1 mb-36 md:mb-16 rounded-xl drop-shadow-xl">
<p className="text-4xl text-center font-semibold flex justify-center text-primary">
{t('signup:step4-message')}
<div className="h-7/12 mx-1 mb-36 flex w-full max-w-xs flex-col items-center rounded-xl bg-bunker py-8 px-4 drop-shadow-xl md:mb-16 md:max-w-lg md:px-6">
<p className="flex justify-center text-center text-4xl font-semibold text-primary">
{t('signup.step4-message')}
</p>
<div className="flex flex-col items-center justify-center w-full mt-4 md:mt-8 max-w-md text-gray-400 text-md rounded-md px-2">
<div>{t('signup:step4-description1')}</div>
<div className="mt-3">{t('signup:step4-description2')}</div>
<div className="text-md mt-4 flex w-full max-w-md flex-col items-center justify-center rounded-md px-2 text-gray-400 md:mt-8">
<div>{t('signup.step4-description1')}</div>
<div className="mt-3">{t('signup.step4-description2')}</div>
</div>
<div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-400 rounded-md max-w-xs md:max-w-md mx-auto mt-4">
<div className="mx-auto mt-4 flex w-full max-w-xs flex-row items-center rounded-md bg-white/10 p-2 text-gray-400 md:max-w-md">
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-4 text-4xl" />
{t('signup:step4-description3')}
{t('signup.step4-description3')}
</div>
<div className="flex flex-col items-center justify-center md:px-4 md:py-5 mt-4 px-2 py-3 max-h-24 max-w-max mx-auto text-lg">
<div className="mx-auto mt-4 flex max-h-24 max-w-max flex-col items-center justify-center px-2 py-3 text-lg md:px-4 md:py-5">
<Button
text="Download PDF"
onButtonPressed={async () => {
frontend/src/components/signup/EnterEmailStep.tsx
+14 -14
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import Link from 'next/link';
import { useTranslation } from 'next-i18next';
import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
@@ -56,13 +56,13 @@ export default function EnterEmailStep({
return (
<div>
<div className="bg-bunker w-full max-w-md h-7/12 py-8 md:px-6 mx-1 rounded-xl drop-shadow-xl">
<p className="text-4xl font-semibold flex justify-center text-primary">
{t('signup:step1-start')}
<div className="h-7/12 mx-1 w-full max-w-md rounded-xl bg-bunker py-8 drop-shadow-xl md:px-6">
<p className="flex justify-center text-4xl font-semibold text-primary">
{t('signup.step1-start')}
</p>
<div className="flex items-center justify-center w-5/6 md:w-full m-auto md:p-2 rounded-lg max-h-24 mt-4">
<div className="m-auto mt-4 flex max-h-24 w-5/6 items-center justify-center rounded-lg md:w-full md:p-2">
<InputField
label={t('common:email') ?? ''}
label={t('common.email') ?? ''}
onChangeHandler={setEmail}
type="email"
value={email}
@@ -73,11 +73,11 @@ export default function EnterEmailStep({
autoComplete="username"
/>
</div>
<div className="flex flex-col items-center justify-center w-5/6 md:w-full md:p-2 max-h-28 max-w-xs md:max-w-md mx-auto mt-4 md:mt-4 text-sm text-center md:text-left">
<p className="text-gray-400 mt-2 md:mx-0.5">{t('signup:step1-privacy')}</p>
<div className="text-l mt-6 m-2 md:m-8 px-8 py-1 text-lg">
<div className="mx-auto mt-4 flex max-h-28 w-5/6 max-w-xs flex-col items-center justify-center text-center text-sm md:mt-4 md:w-full md:max-w-md md:p-2 md:text-left">
<p className="mt-2 text-gray-400 md:mx-0.5">{t('signup.step1-privacy')}</p>
<div className="text-l m-2 mt-6 px-8 py-1 text-lg md:m-8">
<Button
text={t('signup:step1-submit') ?? ''}
text={t('signup.step1-submit') ?? ''}
type="submit"
onButtonPressed={emailCheck}
size="lg"
@@ -85,11 +85,11 @@ export default function EnterEmailStep({
</div>
</div>
</div>
<div className="flex flex-col items-center justify-center w-full md:pb-2 max-w-md mx-auto pt-2 mb-48 md:mb-16 mt-2">
<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 hover:opacity-90 duration-200">
<u className="font-normal text-sm text-primary-500">
{t('signup:already-have-account')}
<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>
frontend/src/components/signup/TeamInviteStep.tsx
+16 -18
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 () => {
@@ -39,40 +37,40 @@ export default function TeamInviteStep(): JSX.Element {
};
return (
<div className="bg-bunker w-max mx-auto h-7/12 pt-6 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-32">
<p className="text-4xl font-semibold flex justify-center text-primary">
{t('signup:step5-invite-team')}
<div className="h-7/12 mx-auto mb-64 w-max rounded-xl bg-bunker px-8 pt-6 pb-4 drop-shadow-xl md:mb-32">
<p className="flex justify-center text-4xl font-semibold text-primary">
{t('signup.step5-invite-team')}
</p>
<p className="text-center flex justify-center text-bunker-300 max-w-xs md:max-w-sm md:mx-8 mb-6 mt-4">
{t('signup:step5-subtitle')}
<p className="mb-6 mt-4 flex max-w-xs justify-center text-center text-bunker-300 md:mx-8 md:max-w-sm">
{t('signup.step5-subtitle')}
</p>
<div>
<div className="overflow-auto bg-bunker-800">
<div className="whitespace-pre-wrap break-words bg-transparent" />
</div>
<textarea
className="bg-bunker-800 h-20 w-full placeholder:text-bunker-400 py-1 px-2 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
className="h-20 w-full rounded-md border border-mineshaft-500 bg-bunker-800 py-1 px-2 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2"
value={emails}
onChange={(e) => setEmails(e.target.value)}
placeholder="[email protected], [email protected]..."
/>
</div>
<div className="flex flex-row max-w-max min-w-28 items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
<div className="min-w-28 mx-auto mt-4 mb-2 flex max-h-24 max-w-max flex-row items-center justify-center px-4 text-lg md:p-2">
<div
onKeyDown={() => null}
role="button"
tabIndex={0}
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"
className="text-md mx-3 cursor-pointer rounded-md bg-mineshaft-700 py-3 px-5 text-bunker-300 duration-200 hover:bg-mineshaft-500 md:py-3.5 md:text-sm"
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){
inviteUsers({ emails })
}else{
if (serverDetails?.emailConfigured) {
inviteUsers({ emails });
} else {
handlePopUpOpen('setUpEmail');
}
}}
frontend/src/components/signup/UserInfoStep.tsx
+36 -38
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, faX } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import jsrp from 'jsrp';
@@ -108,7 +108,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,
@@ -118,11 +117,11 @@ export default function UserInfoStep({
parallelism: 1,
hashLen: 32
});
if (!derivedKey) throw new Error('Failed to derive key from password');
const key = crypto.randomBytes(32);
// create encrypted private key by encrypting the private
// key with the symmetric key [key]
const {
@@ -133,7 +132,7 @@ export default function UserInfoStep({
text: privateKey,
secret: key
});
// create the protected key by encrypting the symmetric key
// [key] with the derived key
const {
@@ -144,7 +143,7 @@ export default function UserInfoStep({
text: key.toString('hex'),
secret: Buffer.from(derivedKey.hash)
});
const response = await completeAccountInformationSignup({
email,
firstName,
@@ -160,7 +159,7 @@ export default function UserInfoStep({
verifier: result.verifier,
organizationName: `${firstName}'s organization`
});
// unset signup JWT token and set JWT token
SecurityClient.setSignupToken('');
SecurityClient.setToken(response.token);
@@ -184,7 +183,6 @@ export default function UserInfoStep({
localStorage.setItem('projectData.id', project._id);
incrementStep();
} catch (error) {
setIsLoading(false);
console.error(error);
@@ -198,45 +196,45 @@ export default function UserInfoStep({
};
return (
<div className="bg-bunker w-max mx-auto h-7/12 py-10 px-8 rounded-xl drop-shadow-xl mb-36 md:mb-16">
<p className="text-4xl font-bold flex justify-center mb-6 mx-8 md:mx-16 text-primary">
{t('signup:step3-message')}
<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 items-center justify-end w-full md:p-2 rounded-lg max-h-24">
<div className="relative z-0 flex max-h-24 w-full items-center justify-end rounded-lg md:p-2">
<InputField
label={t('common:first-name')}
label={t('common.first-name')}
onChangeHandler={setFirstName}
type="name"
value={firstName}
isRequired
errorText={
t('common:validate-required', {
name: t('common:first-name')
t('common.validate-required', {
name: t('common.first-name')
}) as string
}
error={firstNameError}
autoComplete="given-name"
/>
</div>
<div className="mt-2 flex items-center justify-center w-full md:p-2 rounded-lg max-h-24">
<div className="mt-2 flex max-h-24 w-full items-center justify-center rounded-lg md:p-2">
<InputField
label={t('common:last-name')}
label={t('common.last-name')}
onChangeHandler={setLastName}
type="name"
value={lastName}
isRequired
errorText={
t('common:validate-required', {
name: t('common:last-name')
t('common.validate-required', {
name: t('common.last-name')
}) as string
}
error={lastNameError}
autoComplete="family-name"
/>
</div>
<div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
<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({
@@ -255,38 +253,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={faX} className="text-md text-red mr-2.5" />
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
) : (
<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={faX} className="text-md text-red mr-2.5" />
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
) : (
<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={faX} className="text-md text-red mr-2.5" />
<FontAwesomeIcon icon={faX} className="text-md mr-2.5 text-red" />
) : (
<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>
@@ -294,9 +292,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"
@@ -304,4 +302,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,
},
};
};