From 897afd029b0d62f6dbae88d60ecbd90bc3d0681a Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Sun, 16 Mar 2025 23:03:42 +0100
Subject: [PATCH] feat(frontend): show if redirecting inline (#9122)

* 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

* feat(frontend):show if redirecting

* reduce diff

* fix missing import

* remove double warning
---
 src/frontend/src/pages/Auth/Login.tsx | 42 ++++++++++++++++-----------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/pages/Auth/Login.tsx b/src/frontend/src/pages/Auth/Login.tsx
index 28e18697da..4c0780e1e7 100644
--- a/src/frontend/src/pages/Auth/Login.tsx
+++ b/src/frontend/src/pages/Auth/Login.tsx
@@ -1,7 +1,7 @@
 import { Trans, t } from '@lingui/macro';
-import { Anchor, Divider, Text } from '@mantine/core';
+import { Anchor, Divider, Loader, Text } from '@mantine/core';
 import { useToggle } from '@mantine/hooks';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
 import { setApiDefaults } from '../../App';
 import { AuthFormOptions } from '../../components/forms/AuthFormOptions';
@@ -27,6 +27,7 @@ export default function Login() {
     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);
@@ -73,6 +74,7 @@ export default function Login() {
 
     // 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') ?? '',
@@ -94,22 +96,28 @@ export default function Login() {
       ) : (
         <>
           <Wrapper titleText={t`Login`} smallPadding>
-            <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>
+            {isLoggingIn ? (
+              <Loader />
+            ) : (
+              <>
+                <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}{' '}
+              </>
             )}
-            {LoginMessage}
           </Wrapper>
           <AuthFormOptions hostname={hostname} toggleHostEdit={setHostEdit} />
         </>