feat(frontend): Improve comms around authentication (#9348)

* use enum for flow authentication

* fix inaccurate texts

* add a better user info on login

* fix test assertation

src/frontend/src/functions/auth.tsx

@@ -8,7 +8,7 @@ import { ApiEndpoints } from '../enums/ApiEndpoints';
 import { apiUrl, useServerApiState } from '../states/ApiState';
 import { useLocalState } from '../states/LocalState';
 import { useUserState } from '../states/UserState';
-import { type Provider, fetchGlobalStates } from '../states/states';
+import { FlowEnum, type Provider, fetchGlobalStates } from '../states/states';
 import { showLoginNotification } from './notifications';
 import { generateUrl } from './urls';
 
@@ -104,7 +104,7 @@ export const doBasicLogin = async (
       if (err?.response?.status == 401) {
         setAuthContext(err.response.data?.data);
         const mfa_flow = err.response.data.data.flows.find(
-          (flow: any) => flow.id == 'mfa_authenticate'
+          (flow: any) => flow.id == FlowEnum.MfaAuthenticate
         );
         if (mfa_flow && mfa_flow.is_pending == true) {
           success = true;

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

@@ -1,5 +1,5 @@
 import { Trans, t } from '@lingui/macro';
-import { Anchor, Divider, Loader, Text } from '@mantine/core';
+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';
@@ -97,7 +97,12 @@ export default function Login() {
         <>
           <Wrapper titleText={t`Login`} smallPadding>
             {isLoggingIn ? (
-              <Loader />
+              <>
+                <Group justify='center'>
+                  <Loader />
+                </Group>
+                <Trans>Logging you in</Trans>
+              </>
             ) : (
               <>
                 <AuthenticationForm />

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

@@ -13,7 +13,7 @@ export default function Mfa() {
   const [loginError, setLoginError] = useState<string | undefined>(undefined);
 
   return (
-    <Wrapper titleText={t`Multi-Factor Login`} logOff>
+    <Wrapper titleText={t`Multi-Factor Authentication`} logOff>
       <TextInput
         required
         label={t`TOTP Code`}

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

@@ -32,7 +32,11 @@ import { StylishText } from '../../../../components/items/StylishText';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
 import { ProviderLogin, authApi } from '../../../../functions/auth';
 import { apiUrl, useServerApiState } from '../../../../states/ApiState';
-import type { AuthConfig, Provider } from '../../../../states/states';
+import {
+  type AuthConfig,
+  FlowEnum,
+  type Provider
+} from '../../../../states/states';
 import { ApiTokenTable } from '../../../../tables/settings/ApiTokenTable';
 import { QrRegistrationForm } from './QrRegistrationForm';
 import { useReauth } from './useConfirm';
@@ -660,13 +664,13 @@ async function runActionWithFallback(
     if (err.status == 401) {
       if (
         err.response.data.data.flows.find(
-          (flow: any) => flow.id == 'mfa_reauthenticate'
+          (flow: any) => flow.id == FlowEnum.MfaReauthenticate
         )
       ) {
         return ResultType.mfareauth;
       } else if (
         err.response.data.data.flows.find(
-          (flow: any) => flow.id == 'reauthenticate'
+          (flow: any) => flow.id == FlowEnum.Reauthenticate
         )
       ) {
         return ResultType.reauth;

src/frontend/src/pages/Index/Settings/SystemSettings.tsx

@@ -64,8 +64,8 @@ export default function SystemSettings() {
         )
       },
       {
-        name: 'login',
-        label: t`Login`,
+        name: 'authentication',
+        label: t`Authentication`,
         icon: <IconFingerprint />,
         content: (
           <GlobalSettingList

src/frontend/tests/pui_settings.spec.ts

@@ -107,7 +107,7 @@ test('Settings - Admin', async ({ page }) => {
   // System Settings
   await page.locator('label').filter({ hasText: 'System Settings' }).click();
   await page.getByText('Base URL', { exact: true }).waitFor();
-  await loadTab(page, 'Login');
+  await loadTab(page, 'Authentication');
   await loadTab(page, 'Barcodes');
   await loadTab(page, 'Notifications');
   await loadTab(page, 'Pricing');