@inventreedb/ui 0.0.1 → 0.0.3

package/src/pages/Auth/ChangePassword.tsx

@@ -1,84 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import {
-  Button,
-  Divider,
-  Group,
-  Paper,
-  PasswordInput,
-  Stack,
-  Text
-} from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { useNavigate } from 'react-router-dom';
-import { StylishText } from '../../components/items/StylishText';
-import { handleChangePassword } from '../../functions/auth';
-import { useUserState } from '../../states/UserState';
-import { Wrapper } from './Layout';
-
-export default function Set_Password() {
-  const simpleForm = useForm({
-    initialValues: {
-      current_password: '',
-      new_password1: '',
-      new_password2: ''
-    }
-  });
-
-  const user = useUserState();
-  const navigate = useNavigate();
-
-  return (
-    <Wrapper titleText={t`Reset Password`}>
-      {user.username() && (
-        <Paper>
-          <Group>
-            <StylishText size='md'>{t`User`}</StylishText>
-            <Text>{user.username()}</Text>
-          </Group>
-        </Paper>
-      )}
-      <Divider p='xs' />
-      <Stack gap='xs'>
-        <PasswordInput
-          required
-          aria-label='password'
-          label={t`Current Password`}
-          description={t`Enter your current password`}
-          {...simpleForm.getInputProps('current_password')}
-        />
-        <PasswordInput
-          required
-          aria-label='input-password-1'
-          label={t`New Password`}
-          description={t`Enter your new password`}
-          {...simpleForm.getInputProps('new_password1')}
-        />
-        <PasswordInput
-          required
-          aria-label='input-password-2'
-          label={t`Confirm New Password`}
-          description={t`Confirm your new password`}
-          {...simpleForm.getInputProps('new_password2')}
-        />
-      </Stack>
-      <Button
-        type='submit'
-        onClick={() =>
-          handleChangePassword(
-            simpleForm.values.new_password1,
-            simpleForm.values.new_password2,
-            simpleForm.values.current_password,
-            navigate
-          )
-        }
-        disabled={
-          simpleForm.values.current_password === '' ||
-          simpleForm.values.new_password1 === ''
-        }
-      >
-        <Trans>Confirm</Trans>
-      </Button>
-    </Wrapper>
-  );
-}

package/src/pages/Auth/Layout.tsx

@@ -1,74 +0,0 @@
-import { Trans } from '@lingui/react/macro';
-import {
-  Button,
-  Center,
-  Container,
-  Divider,
-  Group,
-  Loader,
-  Paper,
-  Stack
-} from '@mantine/core';
-import { Outlet, useNavigate } from 'react-router-dom';
-import SplashScreen from '../../components/SplashScreen';
-import { StylishText } from '../../components/items/StylishText';
-import { doLogout } from '../../functions/auth';
-
-export default function Layout() {
-  return (
-    <SplashScreen>
-      <Center mih='100vh'>
-        <div
-          style={{
-            padding: '10px',
-            backgroundColor: 'rgba(0,0,0,0.5)',
-            boxShadow: '0 0 15px 10px rgba(0,0,0,0.5)'
-          }}
-        >
-          <Container w='md' miw={400}>
-            <Outlet />
-          </Container>
-        </div>
-      </Center>
-    </SplashScreen>
-  );
-}
-
-export function Wrapper({
-  children,
-  titleText,
-  logOff = false,
-  loader = false,
-  smallPadding = false
-}: Readonly<{
-  children?: React.ReactNode;
-  titleText: string;
-  logOff?: boolean;
-  loader?: boolean;
-  smallPadding?: boolean;
-}>) {
-  const navigate = useNavigate();
-
-  return (
-    <Paper p='xl' withBorder miw={425}>
-      <Stack gap={smallPadding ? 0 : 'md'}>
-        <StylishText size='xl'>{titleText}</StylishText>
-        <Divider p='xs' />
-        {loader && (
-          <Group justify='center'>
-            <Loader />
-          </Group>
-        )}
-        {children}
-        {logOff && (
-          <>
-            <Divider p='xs' />
-            <Button onClick={() => doLogout(navigate)} color='red'>
-              <Trans>Log off</Trans>
-            </Button>
-          </>
-        )}
-      </Stack>
-    </Paper>
-  );
-}

package/src/pages/Auth/LoggedIn.tsx

@@ -1,21 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { useDebouncedCallback } from '@mantine/hooks';
-import { useEffect } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-
-import { checkLoginState } from '../../functions/auth';
-import { Wrapper } from './Layout';
-
-export default function Logged_In() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const checkLoginStateDebounced = useDebouncedCallback(checkLoginState, 300);
-
-  useEffect(() => {
-    checkLoginStateDebounced(navigate, location?.state);
-  }, [navigate]);
-
-  return (
-    <Wrapper titleText={t`Checking if you are already logged in`} loader />
-  );
-}

package/src/pages/Auth/Login.tsx

@@ -1,133 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Anchor, Divider, Group, Loader, Text } from '@mantine/core';
-import { useToggle } from '@mantine/hooks';
-import { useEffect, useMemo, useState } from 'react';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { setApiDefaults } from '../../App';
-import { AuthFormOptions } from '../../components/forms/AuthFormOptions';
-import { AuthenticationForm } from '../../components/forms/AuthenticationForm';
-import { InstanceOptions } from '../../components/forms/InstanceOptions';
-import { defaultHostKey } from '../../defaults/defaultHostList';
-import {
-  checkLoginState,
-  doBasicLogin,
-  followRedirect
-} from '../../functions/auth';
-import { useServerApiState } from '../../states/ApiState';
-import { useLocalState } from '../../states/LocalState';
-import { Wrapper } from './Layout';
-
-export default function Login() {
-  const [hostKey, setHost, hostList] = useLocalState((state) => [
-    state.hostKey,
-    state.setHost,
-    state.hostList
-  ]);
-  const [server, fetchServerApiState] = useServerApiState((state) => [
-    state.server,
-    state.fetchServerApiState
-  ]);
-  const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);
-  const hostname =
-    hostList[hostKey] === undefined ? t`No selection` : hostList[hostKey]?.name;
-  const [hostEdit, setHostEdit] = useToggle([false, true] as const);
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [searchParams] = useSearchParams();
-  const [sso_registration, registration_enabled] = useServerApiState(
-    (state) => [state.sso_registration_enabled, state.registration_enabled]
-  );
-  const both_reg_enabled =
-    registration_enabled() || sso_registration() || false;
-
-  const LoginMessage = useMemo(() => {
-    const val = server.customize?.login_message;
-    if (val == undefined) return null;
-    return (
-      <>
-        <Divider my='md' />
-        <Text>
-          <span
-            // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-            dangerouslySetInnerHTML={{ __html: val }}
-          />
-        </Text>
-      </>
-    );
-  }, [server.customize]);
-
-  // Data manipulation functions
-  function ChangeHost(newHost: string | null): void {
-    if (newHost === null) return;
-    setHost(hostList[newHost]?.host, newHost);
-    setApiDefaults();
-    fetchServerApiState();
-  }
-
-  // Set default host to localhost if no host is selected
-  useEffect(() => {
-    if (hostKey === '') {
-      ChangeHost(defaultHostKey);
-    }
-
-    checkLoginState(navigate, location?.state, true);
-
-    // check if we got login params (login and password)
-    if (searchParams.has('login') && searchParams.has('password')) {
-      setIsLoggingIn(true);
-      doBasicLogin(
-        searchParams.get('login') ?? '',
-        searchParams.get('password') ?? '',
-        navigate
-      ).then(() => {
-        followRedirect(navigate, location?.state);
-      });
-    }
-  }, []);
-
-  return (
-    <>
-      {hostEdit ? (
-        <InstanceOptions
-          hostKey={hostKey}
-          ChangeHost={ChangeHost}
-          setHostEdit={setHostEdit}
-        />
-      ) : (
-        <>
-          <Wrapper titleText={t`Login`} smallPadding>
-            {isLoggingIn ? (
-              <>
-                <Group justify='center'>
-                  <Loader />
-                </Group>
-                <Trans>Logging you in</Trans>
-              </>
-            ) : (
-              <>
-                <AuthenticationForm />
-                {both_reg_enabled === false && (
-                  <Text ta='center' size={'xs'} mt={'md'}>
-                    <Trans>Don&apos;t have an account?</Trans>{' '}
-                    <Anchor
-                      component='button'
-                      type='button'
-                      c='dimmed'
-                      size='xs'
-                      onClick={() => navigate('/register')}
-                    >
-                      <Trans>Register</Trans>
-                    </Anchor>
-                  </Text>
-                )}
-                {LoginMessage}{' '}
-              </>
-            )}
-          </Wrapper>
-          <AuthFormOptions hostname={hostname} toggleHostEdit={setHostEdit} />
-        </>
-      )}
-    </>
-  );
-}

package/src/pages/Auth/Logout.tsx

@@ -1,16 +0,0 @@
-import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { doLogout } from '../../functions/auth';
-import { Wrapper } from './Layout';
-
-/* Expose a route for explicit logout via URL */
-export default function Logout() {
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    doLogout(navigate);
-  }, []);
-
-  return <Wrapper titleText='Logging out' loader />;
-}

package/src/pages/Auth/MFA.tsx

@@ -1,36 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Button, TextInput } from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { handleMfaLogin } from '../../functions/auth';
-import { Wrapper } from './Layout';
-
-export default function Mfa() {
-  const simpleForm = useForm({ initialValues: { code: '' } });
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [loginError, setLoginError] = useState<string | undefined>(undefined);
-
-  return (
-    <Wrapper titleText={t`Multi-Factor Authentication`} logOff>
-      <TextInput
-        required
-        label={t`TOTP Code`}
-        name='TOTP'
-        description={t`Enter your TOTP or recovery code`}
-        {...simpleForm.getInputProps('code')}
-        error={loginError}
-      />
-      <Button
-        type='submit'
-        onClick={() =>
-          handleMfaLogin(navigate, location, simpleForm.values, setLoginError)
-        }
-      >
-        <Trans>Log in</Trans>
-      </Button>
-    </Wrapper>
-  );
-}

package/src/pages/Auth/MFASetup.tsx

@@ -1,38 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { getTotpSecret, handleVerifyTotp } from '../../functions/auth';
-import { Wrapper } from './Layout';
-
-import { Button } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { QrRegistrationForm } from '../Index/Settings/AccountSettings/QrRegistrationForm';
-
-export default function MFASetup() {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const [totpQr, setTotpQr] = useState<{ totp_url: string; secret: string }>();
-  const [value, setValue] = useState('');
-
-  useEffect(() => {
-    getTotpSecret(setTotpQr);
-  }, []);
-
-  return (
-    <Wrapper titleText={t`MFA Setup Required`} logOff>
-      <QrRegistrationForm
-        url={totpQr?.totp_url ?? ''}
-        secret={totpQr?.secret ?? ''}
-        value={value}
-        setValue={setValue}
-      />
-      <Button
-        disabled={!value}
-        onClick={handleVerifyTotp(value, navigate, location)}
-      >
-        <Trans>Add TOTP</Trans>
-      </Button>
-    </Wrapper>
-  );
-}

package/src/pages/Auth/Register.tsx

@@ -1,28 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Anchor, Text } from '@mantine/core';
-import { useNavigate } from 'react-router-dom';
-import { RegistrationForm } from '../../components/forms/AuthenticationForm';
-import {} from '../../functions/auth';
-import { Wrapper } from './Layout';
-
-export default function Register() {
-  const navigate = useNavigate();
-
-  return (
-    <Wrapper titleText={t`Register`} smallPadding>
-      <RegistrationForm />
-      <Text ta='center' size={'xs'} mt={'md'}>
-        <Anchor
-          component='button'
-          type='button'
-          c='dimmed'
-          size='xs'
-          onClick={() => navigate('/login')}
-        >
-          <Trans>Go back to login</Trans>
-        </Anchor>
-      </Text>
-    </Wrapper>
-  );
-}

package/src/pages/Auth/Reset.tsx

@@ -1,30 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Button, TextInput } from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { useNavigate } from 'react-router-dom';
-import { handleReset } from '../../functions/auth';
-import { Wrapper } from './Layout';
-
-export default function Reset() {
-  const simpleForm = useForm({ initialValues: { email: '' } });
-  const navigate = useNavigate();
-
-  return (
-    <Wrapper titleText={t`Reset Password`}>
-      <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')}
-      />
-      <Button
-        type='submit'
-        onClick={() => handleReset(navigate, simpleForm.values)}
-      >
-        <Trans>Send Email</Trans>
-      </Button>
-    </Wrapper>
-  );
-}

package/src/pages/Auth/ResetPassword.tsx

@@ -1,48 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Button, PasswordInput } from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { notifications } from '@mantine/notifications';
-import { useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
-
-import { handlePasswordReset } from '../../functions/auth';
-import { Wrapper } from './Layout';
-
-export default function ResetPassword() {
-  const simpleForm = useForm({ initialValues: { password: '' } });
-  const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
-  const key = searchParams.get('key');
-
-  // make sure we have a key
-  useEffect(() => {
-    if (!key) {
-      notifications.show({
-        title: t`Key invalid`,
-        message: t`You need to provide a valid key to set a new password. Check your inbox for a reset link.`,
-        color: 'red',
-        autoClose: false
-      });
-    }
-  }, [key]);
-
-  return (
-    <Wrapper titleText={t`Set new password`}>
-      <PasswordInput
-        required
-        label={t`Password`}
-        description={t`The desired new password`}
-        {...simpleForm.getInputProps('password')}
-      />
-      <Button
-        type='submit'
-        onClick={() =>
-          handlePasswordReset(key, simpleForm.values.password, navigate)
-        }
-      >
-        <Trans>Send Password</Trans>
-      </Button>
-    </Wrapper>
-  );
-}

package/src/pages/Auth/VerifyEmail.tsx

@@ -1,34 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import { Button } from '@mantine/core';
-import { notifications } from '@mantine/notifications';
-import { useEffect } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
-
-import { handleVerifyEmail } from '../../functions/auth';
-import { Wrapper } from './Layout';
-
-export default function VerifyEmail() {
-  const { key } = useParams();
-  const navigate = useNavigate();
-
-  // make sure we have a key
-  useEffect(() => {
-    if (!key) {
-      notifications.show({
-        title: t`Key invalid`,
-        message: t`You need to provide a valid key.`,
-        color: 'red'
-      });
-      navigate('/login');
-    }
-  }, [key]);
-
-  return (
-    <Wrapper titleText={t`Verify Email`}>
-      <Button type='submit' onClick={() => handleVerifyEmail(key, navigate)}>
-        <Trans>Verify</Trans>
-      </Button>
-    </Wrapper>
-  );
-}

package/src/pages/ErrorPage.tsx

@@ -1,26 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { useDocumentTitle } from '@mantine/hooks';
-import { useEffect, useState } from 'react';
-import { useRouteError } from 'react-router-dom';
-
-import type { ErrorResponse } from '@lib/types/Auth';
-import GenericErrorPage from '../components/errors/GenericErrorPage';
-
-export default function ErrorPage() {
-  const error = useRouteError() as ErrorResponse;
-  const [title, setTitle] = useState(t`Error`);
-  useDocumentTitle(title);
-
-  useEffect(() => {
-    if (error?.statusText) {
-      setTitle(t`Error: ${error.statusText}`);
-    }
-  }, [error]);
-
-  return (
-    <GenericErrorPage
-      title={title}
-      message={t`An unexpected error has occurred`}
-    />
-  );
-}

package/src/pages/Index/Home.tsx

@@ -1,12 +0,0 @@
-import { t } from '@lingui/core/macro';
-import DashboardLayout from '../../components/dashboard/DashboardLayout';
-import PageTitle from '../../components/nav/PageTitle';
-
-export default function Home() {
-  return (
-    <>
-      <PageTitle title={t`Dashboard`} />
-      <DashboardLayout />
-    </>
-  );
-}