inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-06-18 13:05:42 +00:00
Code Activity

refactor and rephrasing

Browse Source
This commit is contained in:
Matthias Mair
2025-01-10 03:09:47 +01:00
parent bf82c4c269
commit fc09af58b1
1 changed files with 33 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx
View File

@ -15,7 +15,7 @@ import {
} from '@mantine/core'; } from '@mantine/core';
import { IconAlertCircle, IconAt } from '@tabler/icons-react'; import { IconAlertCircle, IconAt } from '@tabler/icons-react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { useEffect, useMemo, useState } from 'react'; import { useMemo, useState } from 'react';
import { api } from '../../../../App'; import { api } from '../../../../App';
import { YesNoButton } from '../../../../components/buttons/YesNoButton'; import { YesNoButton } from '../../../../components/buttons/YesNoButton';
@ -36,12 +36,12 @@ export function SecurityContent() {
<Title order={5}> <Title order={5}>
<Trans>Email</Trans> <Trans>Email</Trans>
</Title> </Title>
<EmailContent /> <EmailSection />
<Title order={5}> <Title order={5}>
<Trans>Single Sign On Accounts</Trans> <Trans>Single Sign On</Trans>
</Title> </Title>
{sso_enabled() ? ( {sso_enabled() ? (
<SsoContent auth_config={auth_config} /> <ProviderSection auth_config={auth_config} />
) : ( ) : (
<Alert <Alert
icon={<IconAlertCircle size='1rem' />} icon={<IconAlertCircle size='1rem' />}
@ -52,11 +52,10 @@ export function SecurityContent() {
</Alert> </Alert>
)} )}
<Title order={5}> <Title order={5}>
<Trans>Multifactor</Trans> <Trans>Multifactor authentication</Trans>
</Title> </Title>
{mfa_enabled() ? ( {mfa_enabled() ? (
<MfaContent /> <MfaSection />
) : ( ) : (
<Alert <Alert
icon={<IconAlertCircle size='1rem' />} icon={<IconAlertCircle size='1rem' />}
@ -68,16 +67,15 @@ export function SecurityContent() {
</Trans> </Trans>
</Alert> </Alert>
)} )}
<Title order={5}> <Title order={5}>
<Trans>Token</Trans> <Trans>Access Tokens</Trans>
</Title> </Title>
<TokenContent /> <TokenSection />
</Stack> </Stack>
); );
} }
function EmailContent() { function EmailSection() {
const [value, setValue] = useState<string>(''); const [value, setValue] = useState<string>('');
const [newEmailValue, setNewEmailValue] = useState(''); const [newEmailValue, setNewEmailValue] = useState('');
const { isLoading, data, refetch } = useQuery({ const { isLoading, data, refetch } = useQuery({
@ -91,7 +89,6 @@ function EmailContent() {
data?: any data?: any
) { ) {
const vals: any = data || { email: value }; const vals: any = data || { email: value };
console.log('vals', vals);
authApi(apiUrl(ApiEndpoints.auth_email), undefined, action, vals) authApi(apiUrl(ApiEndpoints.auth_email), undefined, action, vals)
.then(() => { .then(() => {
refetch(); refetch();
@ -199,39 +196,29 @@ function ProviderButton({ provider }: Readonly<{ provider: Provider }>) {
); );
} }
function SsoContent({ function ProviderSection({
auth_config auth_config
}: Readonly<{ auth_config: AuthConfig | undefined }>) { }: Readonly<{ auth_config: AuthConfig | undefined }>) {
const [value, setValue] = useState<string>(''); const [value, setValue] = useState<string>('');
const [currentProviders, setCurrentProviders] = useState<Provider[]>();
const { isLoading, data, refetch } = useQuery({ const { isLoading, data, refetch } = useQuery({
queryKey: ['sso-list'], queryKey: ['provider-list'],
queryFn: () => queryFn: () =>
authApi(apiUrl(ApiEndpoints.auth_providers)).then((res) => res.data.data) authApi(apiUrl(ApiEndpoints.auth_providers)).then((res) => res.data.data)
}); });
useEffect(() => { const availableProviders = useMemo(() => {
if (auth_config === undefined) return; if (!auth_config || !data) return [];
if (data === undefined) return;
const configuredProviders = data.map((item: any) => { const configuredProviders = data.map((item: any) => item.provider.id);
return item.provider.id; return auth_config.socialaccount.providers.filter(
}); (provider: any) => !configuredProviders.includes(provider.id)
function isAlreadyInUse(value: any) { );
return !configuredProviders.includes(value.id);
}
// remove providers that are used currently
const newData = auth_config.socialaccount.providers.filter(isAlreadyInUse);
setCurrentProviders(newData);
}, [auth_config, data]); }, [auth_config, data]);
function removeProvider() { function removeProvider() {
const split = value.split('$'); const [uid, provider] = value.split('$');
const provider = split[split.length - 1];
const uid = split.slice(0, split.length - 1).join('$');
authApi(apiUrl(ApiEndpoints.auth_providers), undefined, 'delete', { authApi(apiUrl(ApiEndpoints.auth_providers), undefined, 'delete', {
provider: provider, provider,
account: uid account: uid
}) })
.then(() => { .then(() => {
@ -240,7 +227,6 @@ function SsoContent({
.catch((res) => console.log(res.data)); .catch((res) => console.log(res.data));
} }
/* renderer */
if (isLoading) return <Loader />; if (isLoading) return <Loader />;
return ( return (
@ -252,9 +238,7 @@ function SsoContent({
title={t`Not configured`} title={t`Not configured`}
color='yellow' color='yellow'
> >
<Trans> <Trans>There are no providers connected to this account. </Trans>
There are no social network accounts connected to this account.{' '}
</Trans>
</Alert> </Alert>
) : ( ) : (
<Stack> <Stack>
@ -262,7 +246,7 @@ function SsoContent({
value={value} value={value}
onChange={setValue} onChange={setValue}
name='sso_accounts' name='sso_accounts'
label={t`You can sign in to your account using any of the following third party accounts`} label={t`You can sign in to your account using any of the following providers`}
> >
<Stack mt='xs'> <Stack mt='xs'>
{data.map((link: any) => ( {data.map((link: any) => (
@ -275,7 +259,7 @@ function SsoContent({
</Stack> </Stack>
</Radio.Group> </Radio.Group>
<Button onClick={removeProvider}> <Button onClick={removeProvider}>
<Trans>Remove Link</Trans> <Trans>Remove Provider Link</Trans>
</Button> </Button>
</Stack> </Stack>
)} )}
@ -284,11 +268,11 @@ function SsoContent({
<Stack> <Stack>
<Text>Add SSO Account</Text> <Text>Add SSO Account</Text>
<Text> <Text>
{currentProviders === undefined ? ( {availableProviders === undefined ? (
<Trans>Loading</Trans> <Trans>Loading</Trans>
) : ( ) : (
<Stack gap='xs'> <Stack gap='xs'>
{currentProviders.map((provider: any) => ( {availableProviders.map((provider: any) => (
<ProviderButton key={provider.id} provider={provider} /> <ProviderButton key={provider.id} provider={provider} />
))} ))}
</Stack> </Stack>
@ -300,8 +284,8 @@ function SsoContent({
); );
} }
function MfaContent() { function MfaSection() {
const { isLoading, data, refetch } = useQuery({ const { isLoading, data } = useQuery({
queryKey: ['mfa-list'], queryKey: ['mfa-list'],
queryFn: () => queryFn: () =>
api api
@ -309,12 +293,11 @@ function MfaContent() {
.then((res) => res.data.data) .then((res) => res.data.data)
}); });
function parseDate(date: number) { const parseDate = (date: number) =>
if (date == null) return 'Never'; date == null ? 'Never' : new Date(date * 1000).toLocaleString();
return new Date(date * 1000).toLocaleString();
}
const rows = useMemo(() => { const rows = useMemo(() => {
if (isLoading || data === undefined) return null; if (isLoading || !data) return null;
return data.map((token: any) => ( return data.map((token: any) => (
<Table.Tr key={`${token.created_at}-${token.type}`}> <Table.Tr key={`${token.created_at}-${token.type}`}>
<Table.Td>{token.type}</Table.Td> <Table.Td>{token.type}</Table.Td>
@ -324,7 +307,6 @@ function MfaContent() {
)); ));
}, [data, isLoading]); }, [data, isLoading]);
/* renderer */
if (isLoading) return <Loader />; if (isLoading) return <Loader />;
if (data.length == 0) if (data.length == 0)
@ -354,7 +336,7 @@ function MfaContent() {
); );
} }
function TokenContent() { function TokenSection() {
const { isLoading, data, refetch } = useQuery({ const { isLoading, data, refetch } = useQuery({
queryKey: ['token-list'], queryKey: ['token-list'],
queryFn: () => queryFn: () =>
@ -369,8 +351,9 @@ function TokenContent() {
}) })
.catch((res) => console.log(res.data)); .catch((res) => console.log(res.data));
} }
const rows = useMemo(() => { const rows = useMemo(() => {
if (isLoading || data === undefined) return null; if (isLoading || !data) return null;
return data.map((token: any) => ( return data.map((token: any) => (
<Table.Tr key={token.id}> <Table.Tr key={token.id}>
<Table.Td> <Table.Td>
@ -397,7 +380,6 @@ function TokenContent() {
)); ));
}, [data, isLoading]); }, [data, isLoading]);
/* renderer */
if (isLoading) return <Loader />; if (isLoading) return <Loader />;
if (data.length == 0) if (data.length == 0)