@inventreedb/ui 0.0.1

package/src/pages/Auth/ChangePassword.tsx

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,74 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,12 @@
+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 />
+    </>
+  );
+}