awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-16 19:28:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(frontend): fixed all eslint errors

Browse Source
This commit is contained in:
akhilmhdh
2023-01-17 21:06:14 +05:30
parent 9f82e2d836
commit cf7834bfc3
184 changed files with 6255 additions and 6117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/settings/personal/[id].tsx
+90 -139
View File
@@ -1,23 +1,22 @@
import { useEffect, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faCheck, faPlus, faX } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect, useState } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import Button from '@app/components/basic/buttons/Button';
import InputField from '@app/components/basic/InputField';
import ListBox from '@app/components/basic/Listbox';
import ApiKeyTable from '@app/components/basic/table/ApiKeyTable';
import NavHeader from '@app/components/navigation/NavHeader';
import passwordCheck from '@app/components/utilities/checks/PasswordCheck';
import changePassword from '@app/components/utilities/cryptography/changePassword';
import issueBackupKey from '@app/components/utilities/cryptography/issueBackupKey';
import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
import { faCheck, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from "~/components/basic/buttons/Button";
import InputField from "~/components/basic/InputField";
import ListBox from "~/components/basic/Listbox";
import ApiKeyTable from "~/components/basic/table/ApiKeyTable";
import NavHeader from "~/components/navigation/NavHeader";
import changePassword from "~/components/utilities/cryptography/changePassword";
import issueBackupKey from "~/components/utilities/cryptography/issueBackupKey";
import passwordCheck from "~/utilities/checks/PasswordCheck";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import AddApiKeyDialog from "../../../components/basic/dialog/AddApiKeyDialog";
import getAPIKeys from "../../api/apiKey/getAPIKeys";
import getUser from "../../api/user/getUser";
import AddApiKeyDialog from '../../../components/basic/dialog/AddApiKeyDialog';
import getAPIKeys from '../../api/apiKey/getAPIKeys';
import getUser from '../../api/user/getUser';
export default function PersonalSettings() {
const [personalEmail, setPersonalEmail] = useState('');
@@ -32,7 +31,7 @@ export default function PersonalSettings() {
const [passwordChanged, setPasswordChanged] = useState(false);
const [backupKeyIssued, setBackupKeyIssued] = useState(false);
const [backupKeyError, setBackupKeyError] = useState(false);
const [isAddApiKeyDialogOpen, setIsAddApiKeyDialogOpen] = useState(false)
const [isAddApiKeyDialogOpen, setIsAddApiKeyDialogOpen] = useState(false);
const [apiKeys, setApiKeys] = useState<any[]>([]);
const { t } = useTranslation();
@@ -48,16 +47,14 @@ export default function PersonalSettings() {
const load = async () => {
try {
const user = await getUser();
setApiKeys(
await getAPIKeys()
);
setApiKeys(await getAPIKeys());
setPersonalEmail(user.email);
setPersonalName(user.firstName + " " + user.lastName);
setPersonalName(`${user.firstName} ${user.lastName}`);
} catch (err) {
console.error(err);
}
}
};
load();
}, []);
@@ -66,12 +63,10 @@ export default function PersonalSettings() {
};
return (
<div className='bg-bunker-800 max-h-screen flex flex-col justify-between text-white'>
<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
<Head>
<title>
{t('common:head-title', { title: t('settings-personal:title') })}
</title>
<link rel='icon' href='/infisical.ico' />
<title>{t('common:head-title', { title: t('settings-personal:title') })}</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<AddApiKeyDialog
isOpen={isAddApiKeyDialogOpen}
@@ -81,16 +76,11 @@ export default function PersonalSettings() {
/>
<div className="flex flex-row">
<div className="w-full max-h-screen pb-2 overflow-y-auto">
<NavHeader
pageName={t('settings-personal:title')}
isProjectRelated={false}
/>
<div className='flex flex-row justify-between items-center ml-6 mt-8 mb-6 text-xl max-w-5xl'>
<div className='flex flex-col justify-start items-start text-3xl'>
<p className='font-semibold mr-4 text-gray-200'>
{t('settings-personal:title')}
</p>
<p className='font-normal mr-4 text-gray-400 text-base'>
<NavHeader pageName={t('settings-personal:title')} isProjectRelated={false} />
<div className="flex flex-row justify-between items-center ml-6 mt-8 mb-6 text-xl max-w-5xl">
<div className="flex flex-col justify-start items-start text-3xl">
<p className="font-semibold mr-4 text-gray-200">{t('settings-personal:title')}</p>
<p className="font-normal mr-4 text-gray-400 text-base">
{t('settings-personal:description')}
</p>
</div>
@@ -98,9 +88,9 @@ export default function PersonalSettings() {
<div className="flex flex-col ml-6 text-mineshaft-50 mr-6 max-w-5xl">
<div className="bg-white/5 rounded-md px-6 pt-6 pb-6 flex flex-col items-start w-full mb-6 mt-4">
<p className="text-xl font-semibold self-start">
{t("settings-personal:change-language")}
{t('settings-personal:change-language')}
</p>
<div className='max-h-28 w-ful mt-4'>
<div className="max-h-28 w-ful mt-4">
<ListBox
selected={lang}
onChange={setLanguage}
@@ -113,15 +103,15 @@ export default function PersonalSettings() {
<div className="flex flex-row justify-between w-full">
<div className="flex flex-col w-full">
<p className="text-xl font-semibold mb-3">
{t("settings-personal:api-keys.title")}
{t('settings-personal:api-keys.title')}
</p>
<p className="text-sm text-gray-400">
{t("settings-personal:api-keys.description")}
{t('settings-personal:api-keys.description')}
</p>
</div>
<div className="w-48 mt-2">
<Button
text={String(t("settings-personal:api-keys.add-new"))}
text={String(t('settings-personal:api-keys.add-new'))}
onButtonPressed={() => {
setIsAddApiKeyDialogOpen(true);
}}
@@ -131,35 +121,32 @@ export default function PersonalSettings() {
/>
</div>
</div>
<ApiKeyTable
data={apiKeys}
setApiKeys={setApiKeys as any}
/>
<ApiKeyTable data={apiKeys} setApiKeys={setApiKeys as any} />
</div>
<div className='bg-white/5 rounded-md px-6 pt-5 pb-6 flex flex-col items-start w-full mb-6'>
<div className='flex flex-row max-w-5xl justify-between items-center w-full'>
<div className='flex flex-col justify-between w-full max-w-3xl'>
<p className='text-xl font-semibold mb-3 min-w-max'>
<div className="bg-white/5 rounded-md px-6 pt-5 pb-6 flex flex-col items-start w-full mb-6">
<div className="flex flex-row max-w-5xl justify-between items-center w-full">
<div className="flex flex-col justify-between w-full max-w-3xl">
<p className="text-xl font-semibold mb-3 min-w-max">
{t('section-password:change')}
</p>
</div>
</div>
<div className='max-w-xl w-full'>
<div className="max-w-xl w-full">
<InputField
label={t('section-password:current') as string}
onChangeHandler={(password) => {
setCurrentPassword(password);
}}
type='password'
type="password"
value={currentPassword}
isRequired
error={currentPasswordError}
errorText={t('section-password:current-wrong') as string}
autoComplete='current-password'
id='current-password'
autoComplete="current-password"
id="current-password"
/>
<div className='py-2'></div>
<div className="py-2" />
<InputField
label={t('section-password:new') as string}
onChangeHandler={(password) => {
@@ -169,39 +156,27 @@ export default function PersonalSettings() {
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
errorCheck: false,
errorCheck: false
});
}}
type='password'
type="password"
value={newPassword}
isRequired
error={
passwordErrorLength &&
passwordErrorLowerCase &&
passwordErrorNumber
}
autoComplete='new-password'
id='new-password'
error={passwordErrorLength && passwordErrorLowerCase && passwordErrorNumber}
autoComplete="new-password"
id="new-password"
/>
</div>
{passwordErrorLength ||
passwordErrorLowerCase ||
passwordErrorNumber ? (
<div className='w-full mt-3 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md max-w-xl mb-2'>
<div className={`text-gray-400 text-sm mb-1`}>
{passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber ? (
<div className="w-full mt-3 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md max-w-xl mb-2">
<div className="text-gray-400 text-sm mb-1">
{t('section-password:validate-base')}
</div>
<div className='flex flex-row justify-start items-center ml-1'>
<div className="flex flex-row justify-start items-center ml-1">
{passwordErrorLength ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${
@@ -211,39 +186,25 @@ export default function PersonalSettings() {
{t('section-password:validate-length')}
</div>
</div>
<div className='flex flex-row justify-start items-center ml-1'>
<div className="flex flex-row justify-start items-center ml-1">
{passwordErrorLowerCase ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${
passwordErrorLowerCase
? 'text-gray-400'
: 'text-gray-600'
passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'
} text-sm`}
>
{t('section-password:validate-case')}
</div>
</div>
<div className='flex flex-row justify-start items-center ml-1'>
<div className="flex flex-row justify-start items-center ml-1">
{passwordErrorNumber ? (
<FontAwesomeIcon
icon={faX}
className='text-md text-red mr-2.5'
/>
<FontAwesomeIcon icon={faX} className="text-md text-red mr-2.5" />
) : (
<FontAwesomeIcon
icon={faCheck}
className='text-md text-primary mr-2'
/>
<FontAwesomeIcon icon={faCheck} className="text-md text-primary mr-2" />
)}
<div
className={`${
@@ -255,17 +216,13 @@ export default function PersonalSettings() {
</div>
</div>
) : (
<div className='py-2'></div>
<div className="py-2" />
)}
<div className='flex flex-row items-center mt-3 w-52 pr-3'>
<div className="flex flex-row items-center mt-3 w-52 pr-3">
<Button
text={t('section-password:change') as string}
onButtonPressed={() => {
if (
!passwordErrorLength &&
!passwordErrorLowerCase &&
!passwordErrorNumber
) {
if (!passwordErrorLength && !passwordErrorLowerCase && !passwordErrorNumber) {
changePassword(
personalEmail,
currentPassword,
@@ -277,16 +234,12 @@ export default function PersonalSettings() {
);
}
}}
color='mineshaft'
size='md'
color="mineshaft"
size="md"
active={
newPassword != '' &&
currentPassword != '' &&
!(
passwordErrorLength ||
passwordErrorLowerCase ||
passwordErrorNumber
)
newPassword !== '' &&
currentPassword !== '' &&
!(passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber)
}
textDisabled={t('section-password:change') as string}
/>
@@ -299,34 +252,34 @@ export default function PersonalSettings() {
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-5 pb-6 mt-2 flex flex-col items-start flex flex-col items-start w-full mb-6">
<div className="bg-white/5 rounded-md px-6 pt-5 pb-6 mt-2 flex flex-col items-start w-full mb-6">
<div className="flex flex-row max-w-5xl justify-between items-center w-full">
<div className="flex flex-col justify-between w-full max-w-3xl">
<p className="text-xl font-semibold mb-3 min-w-max">
{t("settings-personal:emergency.name")}
{t('settings-personal:emergency.name')}
</p>
<p className='text-sm text-mineshaft-300 min-w-max'>
<p className="text-sm text-mineshaft-300 min-w-max">
{t('settings-personal:emergency.text1')}
</p>
<p className='text-sm text-mineshaft-300 mb-5 min-w-max'>
<p className="text-sm text-mineshaft-300 mb-5 min-w-max">
{t('settings-personal:emergency.text2')}
</p>
</div>
</div>
<div className='w-full max-w-xl mb-4'>
<div className="w-full max-w-xl mb-4">
<InputField
label={t('section-password:current') as string}
onChangeHandler={setBackupPassword}
type='password'
type="password"
value={backupPassword}
isRequired
error={backupKeyError}
errorText={t('section-password:current-wrong') as string}
autoComplete='current-password'
id='current-password'
autoComplete="current-password"
id="current-password"
/>
</div>
<div className='flex flex-row items-center mt-3 w-60'>
<div className="flex flex-row items-center mt-3 w-60">
<Button
text={t('settings-personal:emergency.download') as string}
onButtonPressed={() => {
@@ -335,15 +288,13 @@ export default function PersonalSettings() {
password: backupPassword,
personalName,
setBackupKeyError,
setBackupKeyIssued,
setBackupKeyIssued
});
}}
color='mineshaft'
size='md'
active={backupPassword != ''}
textDisabled={
t('settings-personal:emergency.download') as string
}
color="mineshaft"
size="md"
active={backupPassword !== ''}
textDisabled={t('settings-personal:emergency.download') as string}
/>
<FontAwesomeIcon
icon={faCheck}
@@ -363,8 +314,8 @@ export default function PersonalSettings() {
PersonalSettings.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"settings-personal",
"section-password",
"section-api-key"
'settings',
'settings-personal',
'section-password',
'section-api-key'
]);