@inventreedb/ui 0.0.1

package/src/components/forms/AuthFormOptions.tsx

@@ -0,0 +1,39 @@
+import { ActionIcon, Center, Group, Text, Tooltip } from '@mantine/core';
+import { IconServer } from '@tabler/icons-react';
+
+import { useServerApiState } from '../../states/ApiState';
+import { ColorToggle } from '../items/ColorToggle';
+import { LanguageToggle } from '../items/LanguageToggle';
+
+export function AuthFormOptions({
+  hostname,
+  toggleHostEdit
+}: Readonly<{
+  hostname: string;
+  toggleHostEdit: () => void;
+}>) {
+  const [server] = useServerApiState((state) => [state.server]);
+
+  return (
+    <Center mx={'md'}>
+      <Group>
+        <ColorToggle />
+        <LanguageToggle />
+        {window.INVENTREE_SETTINGS.show_server_selector && (
+          <Tooltip label={hostname}>
+            <ActionIcon
+              size='lg'
+              variant='transparent'
+              onClick={toggleHostEdit}
+            >
+              <IconServer />
+            </ActionIcon>
+          </Tooltip>
+        )}
+        <Text c={'dimmed'}>
+          {server.version} | {server.apiVersion}
+        </Text>
+      </Group>
+    </Center>
+  );
+}

package/src/components/forms/AuthenticationForm.tsx

@@ -0,0 +1,332 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  Anchor,
+  Button,
+  Divider,
+  Group,
+  Loader,
+  PasswordInput,
+  Stack,
+  TextInput
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { useDisclosure } from '@mantine/hooks';
+import { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { apiUrl } from '@lib/functions/Api';
+import { showNotification } from '@mantine/notifications';
+import { api } from '../../App';
+import {
+  doBasicLogin,
+  doSimpleLogin,
+  ensureCsrf,
+  followRedirect
+} from '../../functions/auth';
+import { showLoginNotification } from '../../functions/notifications';
+import { useServerApiState } from '../../states/ApiState';
+import { useUserState } from '../../states/UserState';
+import { SsoButton } from '../buttons/SSOButton';
+
+export function AuthenticationForm() {
+  const classicForm = useForm({
+    initialValues: { username: '', password: '' }
+  });
+  const simpleForm = useForm({ initialValues: { email: '' } });
+  const [classicLoginMode, setMode] = useDisclosure(true);
+  const [auth_config, sso_enabled, password_forgotten_enabled] =
+    useServerApiState((state) => [
+      state.auth_config,
+      state.sso_enabled,
+      state.password_forgotten_enabled
+    ]);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { isLoggedIn } = useUserState();
+
+  const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);
+
+  function handleLogin() {
+    setIsLoggingIn(true);
+
+    if (classicLoginMode === true) {
+      doBasicLogin(
+        classicForm.values.username,
+        classicForm.values.password,
+        navigate
+      )
+        .then((success) => {
+          setIsLoggingIn(false);
+
+          if (isLoggedIn()) {
+            showLoginNotification({
+              title: t`Login successful`,
+              message: t`Logged in successfully`
+            });
+            followRedirect(navigate, location?.state);
+          } else if (success) {
+            // MFA login
+          } else {
+            showLoginNotification({
+              title: t`Login failed`,
+              message: t`Check your input and try again.`,
+              success: false
+            });
+          }
+        })
+        .catch(() => {
+          showNotification({
+            title: t`Login failed`,
+            message: t`Check your input and try again.`,
+            color: 'red'
+          });
+        });
+    } else {
+      doSimpleLogin(simpleForm.values.email).then((ret) => {
+        setIsLoggingIn(false);
+
+        if (ret?.status === 'ok') {
+          showLoginNotification({
+            title: t`Mail delivery successful`,
+            message: t`Check your inbox for the login link. If you have an account, you will receive a login link. Check in spam too.`
+          });
+        } else {
+          showLoginNotification({
+            title: t`Mail delivery failed`,
+            message: t`Check your input and try again.`,
+            success: false
+          });
+        }
+      });
+    }
+  }
+
+  return (
+    <>
+      {sso_enabled() ? (
+        <>
+          <Group grow mb='md' mt='md'>
+            {auth_config?.socialaccount.providers.map((provider) => (
+              <SsoButton provider={provider} key={provider.id} />
+            ))}
+          </Group>
+
+          <Divider
+            label={t`Or continue with other methods`}
+            labelPosition='center'
+            my='lg'
+          />
+        </>
+      ) : null}
+      <form onSubmit={classicForm.onSubmit(() => {})}>
+        {classicLoginMode ? (
+          <Stack gap={0}>
+            <TextInput
+              required
+              label={t`Username`}
+              aria-label='login-username'
+              placeholder={t`Your username`}
+              {...classicForm.getInputProps('username')}
+            />
+            <PasswordInput
+              required
+              label={t`Password`}
+              aria-label='login-password'
+              placeholder={t`Your password`}
+              {...classicForm.getInputProps('password')}
+            />
+            {password_forgotten_enabled() === true && (
+              <Group justify='space-between' mt='0'>
+                <Anchor
+                  component='button'
+                  type='button'
+                  c='dimmed'
+                  size='xs'
+                  onClick={() => navigate('/reset-password')}
+                >
+                  <Trans>Reset password</Trans>
+                </Anchor>
+              </Group>
+            )}
+          </Stack>
+        ) : (
+          <Stack>
+            <TextInput
+              required
+              label={t`Email`}
+              description={t`We will send you a link to login - if you are registered`}
+              placeholder='email@example.org'
+              {...simpleForm.getInputProps('email')}
+            />
+          </Stack>
+        )}
+
+        <Group justify='space-between' mt='xl'>
+          <Anchor
+            component='button'
+            type='button'
+            c='dimmed'
+            size='xs'
+            onClick={() => setMode.toggle()}
+          >
+            {classicLoginMode ? (
+              <Trans>Send me an email</Trans>
+            ) : (
+              <Trans>Use username and password</Trans>
+            )}
+          </Anchor>
+          <Button type='submit' disabled={isLoggingIn} onClick={handleLogin}>
+            {isLoggingIn ? (
+              <Loader size='sm' />
+            ) : (
+              <>
+                {classicLoginMode ? (
+                  <Trans>Log In</Trans>
+                ) : (
+                  <Trans>Send Email</Trans>
+                )}
+              </>
+            )}
+          </Button>
+        </Group>
+      </form>
+    </>
+  );
+}
+
+export function RegistrationForm() {
+  const registrationForm = useForm({
+    initialValues: {
+      username: '',
+      email: '',
+      password: '',
+      password2: '' as string | undefined
+    }
+  });
+  const navigate = useNavigate();
+  const [auth_config, registration_enabled, sso_registration] =
+    useServerApiState((state) => [
+      state.auth_config,
+      state.registration_enabled,
+      state.sso_registration_enabled
+    ]);
+  const [isRegistering, setIsRegistering] = useState<boolean>(false);
+
+  async function handleRegistration() {
+    // check if passwords match
+    if (
+      registrationForm.values.password !== registrationForm.values.password2
+    ) {
+      registrationForm.setFieldError('password2', t`Passwords do not match`);
+      return;
+    }
+    setIsRegistering(true);
+
+    // remove password2 from the request
+    const { password2, ...vals } = registrationForm.values;
+    await ensureCsrf();
+
+    api
+      .post(apiUrl(ApiEndpoints.auth_signup), vals, {
+        headers: { Authorization: '' }
+      })
+      .then((ret) => {
+        if (ret?.status === 200) {
+          setIsRegistering(false);
+          showLoginNotification({
+            title: t`Registration successful`,
+            message: t`Please confirm your email address to complete the registration`
+          });
+          navigate('/home');
+        }
+      })
+      .catch((err) => {
+        if (err.response?.status === 400) {
+          setIsRegistering(false);
+
+          // collect all errors per field
+          const errors: { [key: string]: string[] } = {};
+          for (const val of err.response.data.errors) {
+            if (!errors[val.param]) {
+              errors[val.param] = [];
+            }
+            errors[val.param].push(val.message);
+          }
+
+          for (const key in errors) {
+            registrationForm.setFieldError(key, errors[key]);
+          }
+
+          showLoginNotification({
+            title: t`Input error`,
+            message: t`Check your input and try again. `,
+            success: false
+          });
+        }
+      });
+  }
+
+  const both_reg_enabled = registration_enabled() && sso_registration();
+  return (
+    <>
+      {registration_enabled() && (
+        <form onSubmit={registrationForm.onSubmit(() => {})}>
+          <Stack gap={0}>
+            <TextInput
+              required
+              label={t`Username`}
+              aria-label='register-username'
+              placeholder={t`Your username`}
+              {...registrationForm.getInputProps('username')}
+            />
+            <TextInput
+              required
+              label={t`Email`}
+              aria-label='register-email'
+              description={t`This will be used for a confirmation`}
+              placeholder='email@example.org'
+              {...registrationForm.getInputProps('email')}
+            />
+            <PasswordInput
+              required
+              label={t`Password`}
+              aria-label='register-password'
+              placeholder={t`Your password`}
+              {...registrationForm.getInputProps('password')}
+            />
+            <PasswordInput
+              required
+              label={t`Password repeat`}
+              aria-label='register-password-repeat'
+              placeholder={t`Repeat password`}
+              {...registrationForm.getInputProps('password2')}
+            />
+          </Stack>
+
+          <Group justify='space-between' mt='xl'>
+            <Button
+              type='submit'
+              disabled={isRegistering}
+              onClick={handleRegistration}
+              fullWidth
+            >
+              <Trans>Register</Trans>
+            </Button>
+          </Group>
+        </form>
+      )}
+      {both_reg_enabled && (
+        <Divider label={t`Or use SSO`} labelPosition='center' my='lg' />
+      )}
+      {sso_registration() && (
+        <Group grow mb='md' mt='md'>
+          {auth_config?.socialaccount.providers.map((provider) => (
+            <SsoButton provider={provider} key={provider.id} />
+          ))}
+        </Group>
+      )}
+    </>
+  );
+}

package/src/components/forms/HostOptionsForm.tsx

@@ -0,0 +1,96 @@
+import type { HostList } from '@lib/types/Server';
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Group,
+  Space,
+  Text,
+  TextInput
+} from '@mantine/core';
+import { useForm } from '@mantine/form';
+import { randomId } from '@mantine/hooks';
+import { IconSquarePlus, IconTrash } from '@tabler/icons-react';
+
+export function HostOptionsForm({
+  data,
+  saveOptions
+}: Readonly<{
+  data: HostList;
+  saveOptions: (newData: HostList) => void;
+}>) {
+  const form = useForm({ initialValues: data });
+  function deleteItem(key: string) {
+    const newData = form.values;
+    delete newData[key];
+    form.setValues(newData);
+  }
+
+  const fields = Object.entries(form.values).map(([key]) => (
+    <Group key={key} mt='xs'>
+      {form.values[key] !== undefined && (
+        <>
+          <TextInput
+            placeholder={t`Host`}
+            withAsterisk
+            style={{ flex: 1 }}
+            {...form.getInputProps(`${key}.host`)}
+          />
+          <TextInput
+            placeholder={t`Name`}
+            withAsterisk
+            style={{ flex: 1 }}
+            {...form.getInputProps(`${key}.name`)}
+          />
+          <ActionIcon
+            color='red'
+            onClick={() => {
+              deleteItem(key);
+            }}
+            variant='default'
+          >
+            <IconTrash />
+          </ActionIcon>
+        </>
+      )}
+    </Group>
+  ));
+
+  return (
+    <form onSubmit={form.onSubmit(saveOptions)}>
+      <Box style={{ maxWidth: 500 }} mx='auto'>
+        {fields.length > 0 ? (
+          <Group mb='xs'>
+            <Text fw={500} size='sm' style={{ flex: 1 }}>
+              <Trans>Host</Trans>
+            </Text>
+            <Text fw={500} size='sm' style={{ flex: 1 }}>
+              <Trans>Name</Trans>
+            </Text>
+          </Group>
+        ) : (
+          <Text c='dimmed' ta='center'>
+            <Trans>No one here...</Trans>
+          </Text>
+        )}
+        {fields}
+        <Group mt='md'>
+          <Button
+            onClick={() =>
+              form.setFieldValue(`${randomId()}`, { name: '', host: '' })
+            }
+          >
+            <IconSquarePlus />
+            <Trans>Add Host</Trans>
+          </Button>
+          <Space style={{ flex: 1 }} />
+          <Button type='submit'>
+            <Trans>Save</Trans>
+          </Button>
+        </Group>
+      </Box>
+    </form>
+  );
+}

package/src/components/forms/InstanceOptions.tsx

@@ -0,0 +1,178 @@
+import { t } from '@lingui/core/macro';
+import { Trans } from '@lingui/react/macro';
+import {
+  ActionIcon,
+  Divider,
+  Group,
+  Select,
+  Table,
+  Text,
+  Tooltip
+} from '@mantine/core';
+import { useToggle } from '@mantine/hooks';
+import {
+  IconApi,
+  IconCircleCheck,
+  IconEdit,
+  IconInfoCircle,
+  IconPlugConnected,
+  IconServer,
+  IconServerSpark
+} from '@tabler/icons-react';
+
+import type { HostList } from '@lib/types/Server';
+import { Wrapper } from '../../pages/Auth/Layout';
+import { useServerApiState } from '../../states/ApiState';
+import { useLocalState } from '../../states/LocalState';
+import { ActionButton } from '../buttons/ActionButton';
+import { HostOptionsForm } from './HostOptionsForm';
+
+export function InstanceOptions({
+  hostKey,
+  ChangeHost,
+  setHostEdit
+}: Readonly<{
+  hostKey: string;
+  ChangeHost: (newHost: string | null) => void;
+  setHostEdit: () => void;
+}>) {
+  const [hostListEdit, setHostListEdit] = useToggle([false, true] as const);
+  const [setHost, setHostList, hostList] = useLocalState((state) => [
+    state.setHost,
+    state.setHostList,
+    state.hostList
+  ]);
+  const hostListData = Object.keys(hostList).map((key) => ({
+    value: key,
+    label: hostList[key]?.name
+  }));
+
+  function SaveOptions(newHostList: HostList): void {
+    setHostList(newHostList);
+    if (newHostList[hostKey] === undefined) {
+      setHost('', '');
+    }
+    setHostListEdit();
+  }
+
+  return (
+    <Wrapper titleText={t`Select Server`} smallPadding>
+      <Group gap='xs' justify='space-between' wrap='nowrap'>
+        <Select
+          style={{ width: '100%' }}
+          value={hostKey}
+          onChange={ChangeHost}
+          data={hostListData}
+          disabled={hostListEdit}
+        />
+        <Group gap='xs' wrap='nowrap'>
+          <Tooltip label={t`Edit host options`} position='top'>
+            <ActionButton
+              variant='transparent'
+              disabled={hostListEdit}
+              onClick={setHostListEdit}
+              icon={<IconEdit />}
+            />
+          </Tooltip>
+          <Tooltip label={t`Save host selection`} position='top'>
+            <ActionButton
+              variant='transparent'
+              onClick={setHostEdit}
+              disabled={hostListEdit}
+              icon={<IconCircleCheck />}
+              color='green'
+            />
+          </Tooltip>
+        </Group>
+      </Group>
+
+      {hostListEdit ? (
+        <>
+          <Divider my={'sm'} />
+          <Text>
+            <Trans>Edit host options</Trans>
+          </Text>
+          <HostOptionsForm data={hostList} saveOptions={SaveOptions} />
+        </>
+      ) : (
+        <>
+          <Divider my={'sm'} />
+          <ServerInfo hostList={hostList} hostKey={hostKey} />
+        </>
+      )}
+    </Wrapper>
+  );
+}
+
+function ServerInfo({
+  hostList,
+  hostKey
+}: Readonly<{
+  hostList: HostList;
+  hostKey: string;
+}>) {
+  const [server] = useServerApiState((state) => [state.server]);
+
+  const items: any[] = [
+    {
+      key: 'server',
+      label: t`Server`,
+      value: hostList[hostKey]?.host,
+      icon: <IconServer />
+    },
+    {
+      key: 'name',
+      label: t`Name`,
+      value: server.instance,
+      icon: <IconInfoCircle />
+    },
+    {
+      key: 'version',
+      label: t`Version`,
+      value: server.version,
+      icon: <IconInfoCircle />
+    },
+    {
+      key: 'api',
+      label: t`API Version`,
+      value: server.apiVersion,
+      icon: <IconApi />
+    },
+    {
+      key: 'plugins',
+      label: t`Plugins`,
+      value: server.plugins_enabled ? t`Enabled` : t`Disabled`,
+      icon: <IconPlugConnected />,
+      color: server.plugins_enabled ? 'green' : 'red'
+    },
+    {
+      key: 'worker',
+      label: t`Worker`,
+      value: server.worker_running ? t`Running` : t`Stopped`,
+      icon: <IconServerSpark />,
+      color: server.worker_running ? 'green' : 'red'
+    }
+  ];
+
+  return (
+    <Table striped p='xs'>
+      <Table.Tbody>
+        {items.map((item) => (
+          <Table.Tr key={item.key} p={2}>
+            <Table.Td>
+              <ActionIcon size='xs' variant='transparent' color={item.color}>
+                {item.icon}
+              </ActionIcon>
+            </Table.Td>
+            <Table.Td>
+              <Text size='sm'>{item.label}</Text>
+            </Table.Td>
+            <Table.Td>
+              <Text size='sm'>{item.value}</Text>
+            </Table.Td>
+          </Table.Tr>
+        ))}
+      </Table.Tbody>
+    </Table>
+  );
+}

package/src/components/forms/StandaloneField.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useMemo } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import type { ApiFormFieldType } from '@lib/types/Forms';
+import { ApiFormField } from './fields/ApiFormField';
+
+export function StandaloneField({
+  fieldDefinition,
+  fieldName = 'field',
+  defaultValue,
+  hideLabels,
+  error
+}: Readonly<{
+  fieldDefinition: ApiFormFieldType;
+  fieldName?: string;
+  defaultValue?: any;
+  hideLabels?: boolean;
+  error?: string;
+}>) {
+  // Field must have a defined name
+  const name = useMemo(() => fieldName ?? 'field', [fieldName]);
+
+  const defaultValues = useMemo(() => {
+    if (defaultValue)
+      return {
+        [name]: defaultValue
+      };
+    return {};
+  }, [defaultValue]);
+
+  const form = useForm({
+    criteriaMode: 'all',
+    defaultValues
+  });
+
+  useEffect(() => {
+    form.clearErrors();
+
+    if (!!error) {
+      form.setError(name, { message: error });
+    }
+  }, [form, error]);
+
+  return (
+    <FormProvider {...form}>
+      <ApiFormField
+        fieldName={name}
+        definition={fieldDefinition}
+        control={form.control}
+        hideLabels={hideLabels}
+        setFields={undefined}
+      />
+    </FormProvider>
+  );
+}