refactor(frontend): Auth component refactor (#9121)

* https://github.com/inventree/InvenTree/pull/6293

* refactor to a shared component

* refactoring container stuff to a wrapper

* move title to wrapper

* move logoff and loader to wrapper

* mvoe functions to general auth

* seperate login and register into seperate pages

* unify auth styling

* rename component

* adapt to new look

* check if registration is enabled

* reduce diff

* reduce diff

* fix import

* add aria label to make more reliable

* make cap match

* ensure that confirm only works with valid inputs

* leave error for non-matching pwd to API

---------

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

src/frontend/src/components/SplashScreen.tsx

@@ -1,4 +1,5 @@
 import { BackgroundImage } from '@mantine/core';
+import { useEffect } from 'react';
 import { generateUrl } from '../functions/urls';
 import { useServerApiState } from '../states/ApiState';
 
@@ -7,10 +8,20 @@ import { useServerApiState } from '../states/ApiState';
  */
 export default function SplashScreen({
   children
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
-  const [server] = useServerApiState((state) => [state.server]);
+  const [server, fetchServerApiState] = useServerApiState((state) => [
+    state.server,
+    state.fetchServerApiState
+  ]);
+
+  // Fetch server data on mount if no server data is present
+  useEffect(() => {
+    if (server.server === null) {
+      fetchServerApiState();
+    }
+  }, [server]);
 
   if (server.customize?.splash) {
     return (

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -7,7 +7,6 @@ import {
   Loader,
   PasswordInput,
   Stack,
-  Text,
   TextInput
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
@@ -329,47 +328,3 @@ export function RegistrationForm() {
     </>
   );
 }
-
-export function ModeSelector({
-  loginMode,
-  changePage
-}: Readonly<{
-  loginMode: boolean;
-  changePage: (state: string) => void;
-}>) {
-  const [sso_registration, registration_enabled] = useServerApiState(
-    (state) => [state.sso_registration_enabled, state.registration_enabled]
-  );
-  const both_reg_enabled =
-    registration_enabled() || sso_registration() || false;
-
-  if (both_reg_enabled === false) return null;
-  return (
-    <Text ta='center' size={'xs'} mt={'md'}>
-      {loginMode ? (
-        <>
-          <Trans>Don&apos;t have an account?</Trans>{' '}
-          <Anchor
-            component='button'
-            type='button'
-            c='dimmed'
-            size='xs'
-            onClick={() => changePage('register')}
-          >
-            <Trans>Register</Trans>
-          </Anchor>
-        </>
-      ) : (
-        <Anchor
-          component='button'
-          type='button'
-          c='dimmed'
-          size='xs'
-          onClick={() => changePage('login')}
-        >
-          <Trans>Go back to login</Trans>
-        </Anchor>
-      )}
-    </Text>
-  );
-}

src/frontend/src/components/forms/InstanceOptions.tsx

@@ -1,13 +1,5 @@
 import { Trans, t } from '@lingui/macro';
-import {
+import { ActionIcon, Divider, Group, Select, Table, Text } from '@mantine/core';
-  ActionIcon,
-  Divider,
-  Group,
-  Paper,
-  Select,
-  Table,
-  Text
-} from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
 import {
   IconApi,
@@ -18,11 +10,11 @@ import {
   IconServerSpark
 } from '@tabler/icons-react';
 
+import { Wrapper } from '../../pages/Auth/Layout';
 import { useServerApiState } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
 import type { HostList } from '../../states/states';
 import { EditButton } from '../buttons/EditButton';
-import { StylishText } from '../items/StylishText';
 import { HostOptionsForm } from './HostOptionsForm';
 
 export function InstanceOptions({
@@ -54,46 +46,42 @@ export function InstanceOptions({
   }
 
   return (
-    <>
+    <Wrapper titleText={t`Select Server`} smallPadding>
-      <Paper p='xl' withBorder>
+      <Group gap='xs' wrap='nowrap'>
-        <StylishText size='xl'>{t`Select Server`}</StylishText>
+        <Select
-        <Divider p='xs' />
+          value={hostKey}
-        <Group gap='xs' wrap='nowrap'>
+          onChange={ChangeHost}
-          <Select
+          data={hostListData}
-            value={hostKey}
+          disabled={HostListEdit}
-            onChange={ChangeHost}
+        />
-            data={hostListData}
+        <EditButton
-            disabled={HostListEdit}
+          setEditing={setHostListEdit}
-          />
+          editing={HostListEdit}
-          <EditButton
+          disabled={HostListEdit}
-            setEditing={setHostListEdit}
+        />
-            editing={HostListEdit}
+        <EditButton
-            disabled={HostListEdit}
+          setEditing={setHostEdit}
-          />
+          editing={true}
-          <EditButton
+          disabled={HostListEdit}
-            setEditing={setHostEdit}
+          saveIcon={<IconCheck />}
-            editing={true}
+        />
-            disabled={HostListEdit}
+      </Group>
-            saveIcon={<IconCheck />}
-          />
-        </Group>
 
-        {HostListEdit ? (
+      {HostListEdit ? (
-          <>
+        <>
-            <Divider my={'sm'} />
+          <Divider my={'sm'} />
-            <Text>
+          <Text>
-              <Trans>Edit host options</Trans>
+            <Trans>Edit host options</Trans>
-            </Text>
+          </Text>
-            <HostOptionsForm data={hostList} saveOptions={SaveOptions} />
+          <HostOptionsForm data={hostList} saveOptions={SaveOptions} />
-          </>
+        </>
-        ) : (
+      ) : (
-          <>
+        <>
-            <Divider my={'sm'} />
+          <Divider my={'sm'} />
-            <ServerInfo hostList={hostList} hostKey={hostKey} />
+          <ServerInfo hostList={hostList} hostKey={hostKey} />
-          </>
+        </>
-        )}
+      )}
-      </Paper>
+    </Wrapper>
-    </>
   );
 }
 

src/frontend/src/components/items/LanguageToggle.tsx

@@ -22,6 +22,7 @@ export function LanguageToggle() {
           onClick={() => toggle.toggle()}
           size='lg'
           variant='transparent'
+          aria-label='Language toggle'
         >
           <IconLanguage />
         </ActionIcon>

src/frontend/src/functions/auth.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { notifications } from '@mantine/notifications';
+import { notifications, showNotification } from '@mantine/notifications';
 import axios from 'axios';
 import type { AxiosRequestConfig } from 'axios';
 import type { Location, NavigateFunction } from 'react-router-dom';
@@ -358,3 +358,172 @@ export function authApi(
   // use normal api
   return api(url, requestConfig);
 }
+
+export const getTotpSecret = async (setTotpQr: any) => {
+  await authApi(apiUrl(ApiEndpoints.auth_totp), undefined, 'get').catch(
+    (err) => {
+      if (err.status == 404 && err.response.data.meta.secret) {
+        setTotpQr(err.response.data.meta);
+      } else {
+        const msg = err.response.data.errors[0].message;
+        showNotification({
+          title: t`Failed to set up MFA`,
+          message: msg,
+          color: 'red'
+        });
+      }
+    }
+  );
+};
+
+export function handleVerifyTotp(
+  value: string,
+  navigate: NavigateFunction,
+  location: Location<any>
+) {
+  return () => {
+    authApi(apiUrl(ApiEndpoints.auth_totp), undefined, 'post', {
+      code: value
+    }).then(() => {
+      followRedirect(navigate, location?.state);
+    });
+  };
+}
+
+export function handlePasswordReset(
+  key: string | null,
+  password: string,
+  navigate: NavigateFunction
+) {
+  function success() {
+    notifications.show({
+      title: t`Password set`,
+      message: t`The password was set successfully. You can now login with your new password`,
+      color: 'green',
+      autoClose: false
+    });
+    navigate('/login');
+  }
+
+  function passwordError(values: any) {
+    notifications.show({
+      title: t`Reset failed`,
+      message: values?.errors.map((e: any) => e.message).join('\n'),
+      color: 'red'
+    });
+  }
+
+  // Set password with call to backend
+  api
+    .post(
+      apiUrl(ApiEndpoints.user_reset_set),
+      {
+        key: key,
+        password: password
+      },
+      { headers: { Authorization: '' } }
+    )
+    .then((val) => {
+      if (val.status === 200) {
+        success();
+      } else {
+        passwordError(val.data);
+      }
+    })
+    .catch((err) => {
+      if (err.response?.status === 400) {
+        passwordError(err.response.data);
+      } else if (err.response?.status === 401) {
+        success();
+      } else {
+        passwordError(err.response.data);
+      }
+    });
+}
+
+export function handleVerifyEmail(
+  key: string | undefined,
+  navigate: NavigateFunction
+) {
+  // Set password with call to backend
+  api
+    .post(apiUrl(ApiEndpoints.auth_email_verify), {
+      key: key
+    })
+    .then((val) => {
+      if (val.status === 200) {
+        navigate('/login');
+      }
+    });
+}
+
+export function handleChangePassword(
+  pwd1: string,
+  pwd2: string,
+  current: string,
+  navigate: NavigateFunction
+) {
+  const { clearUserState } = useUserState.getState();
+
+  function passwordError(values: any) {
+    let message: any =
+      values?.new_password ||
+      values?.new_password2 ||
+      values?.new_password1 ||
+      values?.current_password ||
+      values?.error ||
+      t`Password could not be changed`;
+
+    // If message is array
+    if (!Array.isArray(message)) {
+      message = [message];
+    }
+
+    message.forEach((msg: string) => {
+      notifications.show({
+        title: t`Error`,
+        message: msg,
+        color: 'red'
+      });
+    });
+  }
+
+  // check if passwords match
+  if (pwd1 !== pwd2) {
+    passwordError({ new_password2: t`The two password fields didn’t match` });
+    return;
+  }
+
+  // Set password with call to backend
+  api
+    .post(apiUrl(ApiEndpoints.auth_pwd_change), {
+      current_password: current,
+      new_password: pwd2
+    })
+    .then((val) => {
+      passwordError(val.data);
+    })
+    .catch((err) => {
+      if (err.status === 401) {
+        notifications.show({
+          title: t`Password Changed`,
+          message: t`The password was set successfully. You can now login with your new password`,
+          color: 'green',
+          autoClose: false
+        });
+        clearUserState();
+        clearCsrfCookie();
+        navigate('/login');
+      } else {
+        // compile errors
+        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);
+        }
+        passwordError(errors);
+      }
+    });
+}

src/frontend/src/pages/Auth/ChangePassword.tsx

@@ -1,8 +1,6 @@
 import { Trans, t } from '@lingui/macro';
 import {
   Button,
-  Center,
-  Container,
   Divider,
   Group,
   Paper,
@@ -11,18 +9,11 @@ import {
   Text
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { notifications } from '@mantine/notifications';
 import { useNavigate } from 'react-router-dom';
-
-import { api } from '../../App';
-import SplashScreen from '../../components/SplashScreen';
 import { StylishText } from '../../components/items/StylishText';
-import { ProtectedRoute } from '../../components/nav/Layout';
+import { handleChangePassword } from '../../functions/auth';
-import { LanguageContext } from '../../contexts/LanguageContext';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { clearCsrfCookie } from '../../functions/auth';
-import { apiUrl } from '../../states/ApiState';
 import { useUserState } from '../../states/UserState';
+import { Wrapper } from './Layout';
 
 export default function Set_Password() {
   const simpleForm = useForm({
@@ -36,123 +27,57 @@ export default function Set_Password() {
   const user = useUserState();
   const navigate = useNavigate();
 
-  function passwordError(values: any) {
-    let message: any =
-      values?.new_password ||
-      values?.new_password2 ||
-      values?.new_password1 ||
-      values?.current_password ||
-      values?.error ||
-      t`Password could not be changed`;
-
-    // If message is array
-    if (!Array.isArray(message)) {
-      message = [message];
-    }
-
-    message.forEach((msg: string) => {
-      notifications.show({
-        title: t`Error`,
-        message: msg,
-        color: 'red'
-      });
-    });
-  }
-
-  function handleSet() {
-    const { clearUserState } = useUserState.getState();
-
-    // check if passwords match
-    if (simpleForm.values.new_password1 !== simpleForm.values.new_password2) {
-      passwordError({ new_password2: t`The two password fields didn’t match` });
-      return;
-    }
-
-    // Set password with call to backend
-    api
-      .post(apiUrl(ApiEndpoints.auth_pwd_change), {
-        current_password: simpleForm.values.current_password,
-        new_password: simpleForm.values.new_password2
-      })
-      .then((val) => {
-        passwordError(val.data);
-      })
-      .catch((err) => {
-        if (err.status === 401) {
-          notifications.show({
-            title: t`Password Changed`,
-            message: t`The password was set successfully. You can now login with your new password`,
-            color: 'green',
-            autoClose: false
-          });
-          clearUserState();
-          clearCsrfCookie();
-          navigate('/login');
-        } else {
-          // compile errors
-          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);
-          }
-          passwordError(errors);
-        }
-      });
-  }
-
   return (
-    <LanguageContext>
+    <Wrapper titleText={t`Reset Password`}>
-      <ProtectedRoute>
+      {user.username() && (
-        <SplashScreen>
+        <Paper>
-          <Center mih='100vh'>
+          <Group>
-            <Container w='md' miw={425}>
+            <StylishText size='md'>{t`User`}</StylishText>
-              <Paper p='xl' withBorder>
+            <Text>{user.username()}</Text>
-                <Stack>
+          </Group>
-                  <StylishText size='xl'>{t`Reset Password`}</StylishText>
+        </Paper>
-                  <Divider />
+      )}
-                  {user.username() && (
+      <Divider p='xs' />
-                    <Paper>
+      <Stack gap='xs'>
-                      <Group>
+        <PasswordInput
-                        <StylishText size='md'>{t`Username`}</StylishText>
+          required
-                        <Text>{user.username()}</Text>
+          aria-label='password'
-                      </Group>
+          label={t`Current Password`}
-                    </Paper>
+          description={t`Enter your current password`}
-                  )}
+          {...simpleForm.getInputProps('current_password')}
-                  <Divider />
+        />
-                  <Stack gap='xs'>
+        <PasswordInput
-                    <PasswordInput
+          required
-                      required
+          aria-label='input-password-1'
-                      aria-label='password'
+          label={t`New Password`}
-                      label={t`Current Password`}
+          description={t`Enter your new password`}
-                      description={t`Enter your current password`}
+          {...simpleForm.getInputProps('new_password1')}
-                      {...simpleForm.getInputProps('current_password')}
+        />
-                    />
+        <PasswordInput
-                    <PasswordInput
+          required
-                      required
+          aria-label='input-password-2'
-                      aria-label='input-password-1'
+          label={t`Confirm New Password`}
-                      label={t`New Password`}
+          description={t`Confirm your new password`}
-                      description={t`Enter your new password`}
+          {...simpleForm.getInputProps('new_password2')}
-                      {...simpleForm.getInputProps('new_password1')}
+        />
-                    />
+      </Stack>
-                    <PasswordInput
+      <Button
-                      required
+        type='submit'
-                      aria-label='input-password-2'
+        onClick={() =>
-                      label={t`Confirm New Password`}
+          handleChangePassword(
-                      description={t`Confirm your new password`}
+            simpleForm.values.new_password1,
-                      {...simpleForm.getInputProps('new_password2')}
+            simpleForm.values.new_password2,
-                    />
+            simpleForm.values.current_password,
-                  </Stack>
+            navigate
-                  <Button type='submit' onClick={handleSet}>
+          )
-                    <Trans>Confirm</Trans>
+        }
-                  </Button>
+        disabled={
-                </Stack>
+          simpleForm.values.current_password === '' ||
-              </Paper>
+          simpleForm.values.new_password1 === ''
-            </Container>
+        }
-          </Center>
+      >
-        </SplashScreen>
+        <Trans>Confirm</Trans>
-      </ProtectedRoute>
+      </Button>
-    </LanguageContext>
+    </Wrapper>
   );
 }

src/frontend/src/pages/Auth/Layout.tsx

@@ -0,0 +1,74 @@
+import { Trans } from '@lingui/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>
+  );
+}

src/frontend/src/pages/Auth/LoggedIn.tsx

@@ -1,15 +1,14 @@
-import { Trans } from '@lingui/macro';
+import { t } from '@lingui/macro';
-import { Card, Container, Group, Loader, Stack, Text } from '@mantine/core';
 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(() => {
@@ -17,19 +16,6 @@ export default function Logged_In() {
   }, [navigate]);
 
   return (
-    <Container>
+    <Wrapper titleText={t`Checking if you are already logged in`} loader />
-      <Stack align='center'>
-        <Card shadow='sm' padding='lg' radius='md'>
-          <Stack>
-            <Text size='lg'>
-              <Trans>Checking if you are already logged in</Trans>
-            </Text>
-            <Group justify='center'>
-              <Loader />
-            </Group>
-          </Stack>
-        </Card>
-      </Stack>
-    </Container>
   );
 }

src/frontend/src/pages/Auth/Login.tsx

@@ -1,18 +1,12 @@
-import { t } from '@lingui/macro';
+import { Trans, t } from '@lingui/macro';
-import { Center, Container, Divider, Paper, Text } from '@mantine/core';
+import { Anchor, Divider, Text } from '@mantine/core';
-import { useDisclosure, useToggle } from '@mantine/hooks';
+import { useToggle } from '@mantine/hooks';
 import { useEffect, useMemo } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { setApiDefaults } from '../../App';
-import SplashScreen from '../../components/SplashScreen';
 import { AuthFormOptions } from '../../components/forms/AuthFormOptions';
-import {
+import { AuthenticationForm } from '../../components/forms/AuthenticationForm';
-  AuthenticationForm,
-  ModeSelector,
-  RegistrationForm
-} from '../../components/forms/AuthenticationForm';
 import { InstanceOptions } from '../../components/forms/InstanceOptions';
-import { StylishText } from '../../components/items/StylishText';
 import { defaultHostKey } from '../../defaults/defaultHostList';
 import {
   checkLoginState,
@@ -21,6 +15,7 @@ import {
 } 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) => [
@@ -35,35 +30,29 @@ export default function Login() {
   const hostname =
     hostList[hostKey] === undefined ? t`No selection` : hostList[hostKey]?.name;
   const [hostEdit, setHostEdit] = useToggle([false, true] as const);
-  const [loginMode, setMode] = useDisclosure(true);
   const navigate = useNavigate();
   const location = useLocation();
   const [searchParams] = useSearchParams();
-
+  const [sso_registration, registration_enabled] = useServerApiState(
-  useEffect(() => {
+    (state) => [state.sso_registration_enabled, state.registration_enabled]
-    if (location.pathname === '/register') {
+  );
-      setMode.close();
+  const both_reg_enabled =
-    } else {
+    registration_enabled() || sso_registration() || false;
-      setMode.open();
-    }
-  }, [location]);
 
   const LoginMessage = useMemo(() => {
     const val = server.customize?.login_message;
-    if (val) {
+    if (val == undefined) return null;
-      return (
+    return (
-        <>
+      <>
-          <Divider my='md' />
+        <Divider my='md' />
-          <Text>
+        <Text>
-            <span
+          <span
-              // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
-              dangerouslySetInnerHTML={{ __html: val }}
+            dangerouslySetInnerHTML={{ __html: val }}
-            />
+          />
-          </Text>
+        </Text>
-        </>
+      </>
-      );
+    );
-    }
-    return null;
   }, [server.customize]);
 
   // Data manipulation functions
@@ -94,54 +83,37 @@ export default function Login() {
     }
   }, []);
 
-  // Fetch server data on mount if no server data is present
-  useEffect(() => {
-    if (server.server === null) {
-      fetchServerApiState();
-    }
-  }, [server]);
-
-  // Main rendering block
   return (
-    <SplashScreen>
+    <>
-      <Center mih='100vh'>
+      {hostEdit ? (
-        <div
+        <InstanceOptions
-          style={{
+          hostKey={hostKey}
-            padding: '10px',
+          ChangeHost={ChangeHost}
-            backgroundColor: 'rgba(0,0,0,0.5)',
+          setHostEdit={setHostEdit}
-            boxShadow: '0 0 15px 10px rgba(0,0,0,0.5)'
+        />
-          }}
+      ) : (
-        >
+        <>
-          <Container w='md' miw={400}>
+          <Wrapper titleText={t`Login`} smallPadding>
-            {hostEdit ? (
+            <AuthenticationForm />
-              <InstanceOptions
+            {both_reg_enabled === false && (
-                hostKey={hostKey}
+              <Text ta='center' size={'xs'} mt={'md'}>
-                ChangeHost={ChangeHost}
+                <Trans>Don&apos;t have an account?</Trans>{' '}
-                setHostEdit={setHostEdit}
+                <Anchor
-              />
+                  component='button'
-            ) : (
+                  type='button'
-              <>
+                  c='dimmed'
-                <Paper p='xl' withBorder>
+                  size='xs'
-                  <StylishText size='xl'>
+                  onClick={() => navigate('/register')}
-                    {loginMode ? t`Login` : t`Register`}
+                >
-                  </StylishText>
+                  <Trans>Register</Trans>
-                  <Divider p='xs' />
+                </Anchor>
-                  {loginMode ? <AuthenticationForm /> : <RegistrationForm />}
+              </Text>
-                  <ModeSelector
-                    loginMode={loginMode}
-                    changePage={(newPage) => navigate(`/${newPage}`)}
-                  />
-                  {LoginMessage}
-                </Paper>
-                <AuthFormOptions
-                  hostname={hostname}
-                  toggleHostEdit={setHostEdit}
-                />
-              </>
             )}
-          </Container>
+            {LoginMessage}
-        </div>
+          </Wrapper>
-      </Center>
+          <AuthFormOptions hostname={hostname} toggleHostEdit={setHostEdit} />
-    </SplashScreen>
+        </>
+      )}
+    </>
   );
 }

src/frontend/src/pages/Auth/Logout.tsx

@@ -1,9 +1,8 @@
-import { Trans } from '@lingui/macro';
-import { Card, Container, Group, Loader, Stack, Text } from '@mantine/core';
 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() {
@@ -13,20 +12,5 @@ export default function Logout() {
     doLogout(navigate);
   }, []);
 
-  return (
+  return <Wrapper titleText='Logging out' loader />;
-    <Container>
-      <Stack align='center'>
-        <Card shadow='sm' padding='lg' radius='md'>
-          <Stack>
-            <Text size='lg'>
-              <Trans>Logging out</Trans>
-            </Text>
-            <Group justify='center'>
-              <Loader />
-            </Group>
-          </Stack>
-        </Card>
-      </Stack>
-    </Container>
-  );
 }

src/frontend/src/pages/Auth/MFA.tsx

@@ -0,0 +1,35 @@
+import { Trans, t } from '@lingui/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 Login`} 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>
+  );
+}

src/frontend/src/pages/Auth/MFALogin.tsx

@@ -1,63 +0,0 @@
-import { Trans, t } from '@lingui/macro';
-import {
-  Button,
-  Center,
-  Container,
-  Paper,
-  Stack,
-  TextInput
-} from '@mantine/core';
-import { useForm } from '@mantine/form';
-import { useLocation, useNavigate } from 'react-router-dom';
-
-import { useState } from 'react';
-import SplashScreen from '../../components/SplashScreen';
-import { StylishText } from '../../components/items/StylishText';
-import { LanguageContext } from '../../contexts/LanguageContext';
-import { handleMfaLogin } from '../../functions/auth';
-
-export default function MFALogin() {
-  const simpleForm = useForm({ initialValues: { code: '' } });
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [loginError, setLoginError] = useState<string | undefined>(undefined);
-
-  return (
-    <LanguageContext>
-      <SplashScreen>
-        <Center mih='100vh'>
-          <Container w='md' miw={425}>
-            <Paper p='xl' withBorder>
-              <Stack>
-                <StylishText size='xl'>{t`Multi-Factor Login`}</StylishText>
-                <Stack>
-                  <TextInput
-                    required
-                    label={t`TOTP Code`}
-                    name='TOTP'
-                    description={t`Enter your TOTP or recovery code`}
-                    {...simpleForm.getInputProps('code')}
-                    error={loginError}
-                  />
-                </Stack>
-                <Button
-                  type='submit'
-                  onClick={() =>
-                    handleMfaLogin(
-                      navigate,
-                      location,
-                      simpleForm.values,
-                      setLoginError
-                    )
-                  }
-                >
-                  <Trans>Log In</Trans>
-                </Button>
-              </Stack>
-            </Paper>
-          </Container>
-        </Center>
-      </SplashScreen>
-    </LanguageContext>
-  );
-}

src/frontend/src/pages/Auth/MFASetup.tsx

@@ -1,12 +1,10 @@
 import { Trans, t } from '@lingui/macro';
-import { Button, Center, Container, Stack, Title } from '@mantine/core';
+import { getTotpSecret, handleVerifyTotp } from '../../functions/auth';
-import { showNotification } from '@mantine/notifications';
+import { Wrapper } from './Layout';
+
+import { Button } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { LanguageContext } from '../../contexts/LanguageContext';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { authApi, doLogout, followRedirect } from '../../functions/auth';
-import { apiUrl } from '../../states/ApiState';
 import { QrRegistrationForm } from '../Index/Settings/AccountSettings/QrRegistrationForm';
 
 export default function MFASetup() {
@@ -16,61 +14,24 @@ export default function MFASetup() {
   const [totpQr, setTotpQr] = useState<{ totp_url: string; secret: string }>();
   const [value, setValue] = useState('');
 
-  const registerTotp = async () => {
-    await authApi(apiUrl(ApiEndpoints.auth_totp), undefined, 'get').catch(
-      (err) => {
-        if (err.status == 404 && err.response.data.meta.secret) {
-          setTotpQr(err.response.data.meta);
-        } else {
-          const msg = err.response.data.errors[0].message;
-          showNotification({
-            title: t`Failed to set up MFA`,
-            message: msg,
-            color: 'red'
-          });
-        }
-      }
-    );
-  };
-
   useEffect(() => {
-    if (!totpQr) {
+    getTotpSecret(setTotpQr);
-      registerTotp();
+  }, []);
-    }
-  }, [totpQr]);
 
   return (
-    <LanguageContext>
+    <Wrapper titleText={t`MFA Setup Required`} logOff>
-      <Center mih='100vh'>
+      <QrRegistrationForm
-        <Container w='md' miw={425}>
+        url={totpQr?.totp_url ?? ''}
-          <Stack>
+        secret={totpQr?.secret ?? ''}
-            <Title>
+        value={value}
-              <Trans>MFA Setup Required</Trans>
+        setValue={setValue}
-            </Title>
+      />
-            <QrRegistrationForm
+      <Button
-              url={totpQr?.totp_url ?? ''}
+        disabled={!value}
-              secret={totpQr?.secret ?? ''}
+        onClick={handleVerifyTotp(value, navigate, location)}
-              value={value}
+      >
-              setValue={setValue}
+        <Trans>Add TOTP</Trans>
-            />
+      </Button>
-            <Button
+    </Wrapper>
-              disabled={!value}
-              onClick={() => {
-                authApi(apiUrl(ApiEndpoints.auth_totp), undefined, 'post', {
-                  code: value
-                }).then(() => {
-                  followRedirect(navigate, location?.state);
-                });
-              }}
-            >
-              <Trans>Add TOTP</Trans>
-            </Button>
-            <Button onClick={() => doLogout(navigate)} color='red'>
-              <Trans>Log off</Trans>
-            </Button>
-          </Stack>
-        </Container>
-      </Center>
-    </LanguageContext>
   );
 }

src/frontend/src/pages/Auth/Register.tsx

@@ -0,0 +1,27 @@
+import { Trans, t } from '@lingui/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>
+  );
+}

src/frontend/src/pages/Auth/Reset.tsx

@@ -1,48 +1,29 @@
 import { Trans, t } from '@lingui/macro';
-import {
+import { Button, TextInput } from '@mantine/core';
-  Button,
-  Center,
-  Container,
-  Stack,
-  TextInput,
-  Title
-} from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useNavigate } from 'react-router-dom';
-
-import { LanguageContext } from '../../contexts/LanguageContext';
 import { handleReset } from '../../functions/auth';
+import { Wrapper } from './Layout';
 
 export default function Reset() {
   const simpleForm = useForm({ initialValues: { email: '' } });
   const navigate = useNavigate();
 
   return (
-    <LanguageContext>
+    <Wrapper titleText={t`Reset Password`}>
-      <Center mih='100vh'>
+      <TextInput
-        <Container w='md' miw={425}>
+        required
-          <Stack>
+        label={t`Email`}
-            <Title>
+        description={t`We will send you a link to login - if you are registered`}
-              <Trans>Reset password</Trans>
+        placeholder='email@example.org'
-            </Title>
+        {...simpleForm.getInputProps('email')}
-            <Stack>
+      />
-              <TextInput
+      <Button
-                required
+        type='submit'
-                label={t`Email`}
+        onClick={() => handleReset(navigate, simpleForm.values)}
-                description={t`We will send you a link to login - if you are registered`}
+      >
-                placeholder='email@example.org'
+        <Trans>Send Email</Trans>
-                {...simpleForm.getInputProps('email')}
+      </Button>
-              />
+    </Wrapper>
-            </Stack>
-            <Button
-              type='submit'
-              onClick={() => handleReset(navigate, simpleForm.values)}
-            >
-              <Trans>Send Email</Trans>
-            </Button>
-          </Stack>
-        </Container>
-      </Center>
-    </LanguageContext>
   );
 }

src/frontend/src/pages/Auth/ResetPassword.tsx

@@ -1,114 +1,47 @@
 import { Trans, t } from '@lingui/macro';
-import {
+import { Button, PasswordInput } from '@mantine/core';
-  Button,
-  Center,
-  Container,
-  PasswordInput,
-  Stack,
-  Title
-} 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 { api } from '../../App';
+import { handlePasswordReset } from '../../functions/auth';
-import { LanguageContext } from '../../contexts/LanguageContext';
+import { Wrapper } from './Layout';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { apiUrl } from '../../states/ApiState';
 
 export default function ResetPassword() {
   const simpleForm = useForm({ initialValues: { password: '' } });
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
-
   const key = searchParams.get('key');
 
-  function invalidKey() {
+  // make sure we have a 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'
-    });
-    navigate('/login');
-  }
-
-  function success() {
-    notifications.show({
-      title: t`Password set`,
-      message: t`The password was set successfully. You can now login with your new password`,
-      color: 'green',
-      autoClose: false
-    });
-    navigate('/login');
-  }
-
-  function passwordError(values: any) {
-    notifications.show({
-      title: t`Reset failed`,
-      message: values?.errors.map((e: any) => e.message).join('\n'),
-      color: 'red'
-    });
-  }
-
   useEffect(() => {
-    // make sure we have a key
     if (!key) {
-      invalidKey();
+      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]);
 
-  function handleSet() {
-    // Set password with call to backend
-    api
-      .post(
-        apiUrl(ApiEndpoints.user_reset_set),
-        {
-          key: key,
-          password: simpleForm.values.password
-        },
-        { headers: { Authorization: '' } }
-      )
-      .then((val) => {
-        if (val.status === 200) {
-          success();
-        } else {
-          passwordError(val.data);
-        }
-      })
-      .catch((err) => {
-        if (err.response?.status === 400) {
-          passwordError(err.response.data);
-        } else if (err.response?.status === 401) {
-          success();
-        } else {
-          passwordError(err.response.data);
-        }
-      });
-  }
-
   return (
-    <LanguageContext>
+    <Wrapper titleText={t`Set new password`}>
-      <Center mih='100vh'>
+      <PasswordInput
-        <Container w='md' miw={425}>
+        required
-          <Stack>
+        label={t`Password`}
-            <Title>
+        description={t`The desired new password`}
-              <Trans>Set new password</Trans>
+        {...simpleForm.getInputProps('password')}
-            </Title>
+      />
-            <Stack>
+      <Button
-              <PasswordInput
+        type='submit'
-                required
+        onClick={() =>
-                label={t`Password`}
+          handlePasswordReset(key, simpleForm.values.password, navigate)
-                description={t`The desired new password`}
+        }
-                {...simpleForm.getInputProps('password')}
+      >
-              />
+        <Trans>Send Password</Trans>
-            </Stack>
+      </Button>
-            <Button type='submit' onClick={handleSet}>
+    </Wrapper>
-              <Trans>Send Password</Trans>
-            </Button>
-          </Stack>
-        </Container>
-      </Center>
-    </LanguageContext>
   );
 }

src/frontend/src/pages/Auth/VerifyEmail.tsx

@@ -1,61 +1,33 @@
 import { Trans, t } from '@lingui/macro';
-import { Button, Center, Container, Stack, Title } from '@mantine/core';
+import { Button } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { api } from '../../App';
+import { handleVerifyEmail } from '../../functions/auth';
-import { LanguageContext } from '../../contexts/LanguageContext';
+import { Wrapper } from './Layout';
-import { ApiEndpoints } from '../../enums/ApiEndpoints';
-import { apiUrl } from '../../states/ApiState';
 
 export default function VerifyEmail() {
   const { key } = useParams();
   const navigate = useNavigate();
 
-  function invalidKey() {
+  // make sure we have a key
-    notifications.show({
-      title: t`Key invalid`,
-      message: t`You need to provide a valid key.`,
-      color: 'red'
-    });
-    navigate('/login');
-  }
-
   useEffect(() => {
-    // make sure we have a key
     if (!key) {
-      invalidKey();
+      notifications.show({
+        title: t`Key invalid`,
+        message: t`You need to provide a valid key.`,
+        color: 'red'
+      });
+      navigate('/login');
     }
   }, [key]);
 
-  function handleSet() {
-    // Set password with call to backend
-    api
-      .post(apiUrl(ApiEndpoints.auth_email_verify), {
-        key: key
-      })
-      .then((val) => {
-        if (val.status === 200) {
-          navigate('/login');
-        }
-      });
-  }
-
   return (
-    <LanguageContext>
+    <Wrapper titleText={t`Verify Email`}>
-      <Center mih='100vh'>
+      <Button type='submit' onClick={() => handleVerifyEmail(key, navigate)}>
-        <Container w='md' miw={425}>
+        <Trans>Verify</Trans>
-          <Stack>
+      </Button>
-            <Title>
+    </Wrapper>
-              <Trans>Verify Email</Trans>
-            </Title>
-            <Button type='submit' onClick={handleSet}>
-              <Trans>Verify</Trans>
-            </Button>
-          </Stack>
-        </Container>
-      </Center>
-    </LanguageContext>
   );
 }

src/frontend/src/pages/Index/Settings/AccountSettings/SecurityContent.tsx

@@ -107,7 +107,6 @@ function EmailSection() {
     queryFn: () =>
       authApi(apiUrl(ApiEndpoints.auth_email)).then((res) => res.data.data)
   });
-
   const emailAvailable = useMemo(() => {
     return data == undefined || data.length == 0;
   }, [data]);

src/frontend/src/router.tsx

@@ -7,6 +7,10 @@ import { Loadable } from './functions/loading';
 export const LayoutComponent = Loadable(
   lazy(() => import('./components/nav/Layout'))
 );
+export const LoginLayoutComponent = Loadable(
+  lazy(() => import('./pages/Auth/Layout'))
+);
+
 export const Home = Loadable(lazy(() => import('./pages/Index/Home')));
 
 export const CompanyDetail = Loadable(
@@ -103,17 +107,19 @@ export const AdminCenter = Loadable(
 export const NotFound = Loadable(
   lazy(() => import('./components/errors/NotFound'))
 );
+
+// Auth
 export const Login = Loadable(lazy(() => import('./pages/Auth/Login')));
-export const MFALogin = Loadable(lazy(() => import('./pages/Auth/MFALogin')));
+export const LoggedIn = Loadable(lazy(() => import('./pages/Auth/LoggedIn')));
-export const MFASetup = Loadable(lazy(() => import('./pages/Auth/MFASetup')));
 export const Logout = Loadable(lazy(() => import('./pages/Auth/Logout')));
-export const Logged_In = Loadable(lazy(() => import('./pages/Auth/Logged-In')));
+export const Register = Loadable(lazy(() => import('./pages/Auth/Register')));
-export const Reset = Loadable(lazy(() => import('./pages/Auth/Reset')));
+export const Mfa = Loadable(lazy(() => import('./pages/Auth/MFA')));
+export const MfaSetup = Loadable(lazy(() => import('./pages/Auth/MFASetup')));
 
 export const ChangePassword = Loadable(
   lazy(() => import('./pages/Auth/ChangePassword'))
 );
-
+export const Reset = Loadable(lazy(() => import('./pages/Auth/Reset')));
 export const ResetPassword = Loadable(
   lazy(() => import('./pages/Auth/ResetPassword'))
 );
@@ -173,16 +179,20 @@ export const routes = (
         <Route path='customer/:id/*' element={<CustomerDetail />} />
       </Route>
     </Route>
-    <Route path='/' errorElement={<ErrorPage />}>
+    <Route
+      path='/'
+      element={<LoginLayoutComponent />}
+      errorElement={<ErrorPage />}
+    >
       <Route path='/login' element={<Login />} />,
-      <Route path='/register' element={<Login />} />,
+      <Route path='/logged-in' element={<LoggedIn />} />
-      <Route path='/mfa' element={<MFALogin />} />,
-      <Route path='/mfa-setup' element={<MFASetup />} />,
       <Route path='/logout' element={<Logout />} />,
-      <Route path='/logged-in' element={<Logged_In />} />
+      <Route path='/register' element={<Register />} />,
+      <Route path='/mfa' element={<Mfa />} />,
+      <Route path='/mfa-setup' element={<MfaSetup />} />,
+      <Route path='/change-password' element={<ChangePassword />} />
       <Route path='/reset-password' element={<Reset />} />
       <Route path='/set-password' element={<ResetPassword />} />
-      <Route path='/change-password' element={<ChangePassword />} />
       <Route path='/verify-email/:key' element={<VerifyEmail />} />
     </Route>
   </Routes>

src/frontend/tests/pui_settings.spec.ts

@@ -13,7 +13,7 @@ test('Settings - Language / Color', async ({ page }) => {
   await page.getByRole('button', { name: 'Ally Access' }).click();
   await page.getByRole('menuitem', { name: 'Logout' }).click();
   await page.getByRole('button', { name: 'Send me an email' }).click();
-  await page.getByRole('button').nth(3).click();
+  await page.getByLabel('Language toggle').click();
   await page.getByLabel('Select language').first().click();
   await page.getByRole('option', { name: 'German' }).click();
   await page.waitForTimeout(200);