[UI] Adjust login error messages (#10556)

* Adjust config template

- Don't hard-code cookie mode into template
- Revert to the "default" values (which are the same)

* [ui] better feedback on login error

- Show error code, at least

* Revert removed code

* Adjust playwright tests

src/backend/InvenTree/config_template.yaml

@@ -110,7 +110,7 @@ sentry_enabled: False
 #sentry_dsn: https://custom@custom.ingest.sentry.io/custom
 
 # OpenTelemetry tracing/metrics - disabled by default - refer to the documentation for full list of options
-# This can be used to send tracing data, logs and metrics to OpenTelemtry compatible backends
+# This can be used to send tracing data, logs and metrics to OpenTelemetry compatible backends
 tracing:
   enabled: false
 
@@ -142,9 +142,9 @@ allowed_hosts:
 # use_x_forwarded_proto: true
 
 # Cookie settings (nominally the default settings should be fine)
-cookie:
-  secure: false
-  samesite: false
+# cookie:
+#  secure: false
+#  samesite: false
 
 # Cross Origin Resource Sharing (CORS) settings (see https://github.com/adamchainz/django-cors-headers)
 cors:
@@ -203,7 +203,7 @@ remote_login_header: HTTP_REMOTE_USER
 #  - 'allauth.socialaccount.providers.github'
 
 # Add specific settings for social account providers (if required)
-# Refer to the djngo-allauth documentation for more details:
+# Refer to the django-allauth documentation for more details:
 # https://docs.allauth.org/en/latest/socialaccount/provider_configuration.html
 # social_providers:
 #   github:

src/frontend/src/functions/auth.tsx

@@ -106,14 +106,37 @@ export async function doBasicLogin(
       }
     })
     .catch(async (err) => {
-      if (err?.response?.status == 401) {
-        await handlePossibleMFAError(err);
-      } else if (err?.response?.status == 409) {
+      notifications.hide('auth-login-error');
+
+      if (err?.response?.status) {
+        switch (err.response.status) {
+          case 401:
+            await handlePossibleMFAError(err);
+            break;
+          case 409:
+            notifications.show({
+              title: t`Already logged in`,
+              message: t`There is a conflicting session on the server for this browser. Please logout of that first.`,
+              color: 'red',
+              id: 'auth-login-error',
+              autoClose: false
+            });
+            break;
+          default:
+            notifications.show({
+              title: `${t`Login failed`} (${err.response.status})`,
+              message: t`Check your input and try again.`,
+              id: 'auth-login-error',
+              color: 'red'
+            });
+            break;
+        }
+      } else {
         notifications.show({
-          title: t`Already logged in`,
-          message: t`There is a conflicting session on the server for this browser. Please logout of that first.`,
+          title: t`Login failed`,
+          message: t`No response from server.`,
           color: 'red',
-          autoClose: false
+          id: 'login-error'
         });
       }
     });

src/frontend/tests/pui_login.spec.ts

@@ -9,8 +9,8 @@ import { doLogin } from './login.js';
 test('Login - Failures', async ({ page }) => {
   const loginWithError = async () => {
     await page.getByRole('button', { name: 'Log In' }).click();
-    await page.getByText('Login failed').waitFor();
-    await page.getByText('Check your input and try again').waitFor();
+    await page.getByText('Login failed', { exact: true }).waitFor();
+    await page.getByText('Check your input and try again').first().waitFor();
     await page.locator('#login').getByRole('button').click();
   };