RC-T48 Login Fixes

src/app/login/__tests__/index.test.tsx

@@ -239,6 +239,37 @@ describe('Login', () => {
     expect(screen.getByText('Login failed')).toBeTruthy();
   });
 
+  describe('a refused password sign-in', () => {
+    const { default: useAuthStore } = jest.requireActual('@/stores/auth/store') as typeof import('@/stores/auth/store');
+    afterEach(() => useAuthStore.setState({ loginFailure: null }));
+
+    it('says why and what to do next, in the modal and on the form, never as the raw code', () => {
+      useAuthStore.setState({ loginFailure: { code: 'invalid_credentials' } });
+      mockUseAuth.mockReturnValue({ login: jest.fn(), ssoLogin: jest.fn(), status: 'error', error: 'invalid_credentials', isAuthenticated: false });
+
+      render(<Login />);
+
+      expect(screen.getByText('login.errors.invalid_credentials.title')).toBeTruthy();
+      // Once in the modal and once on the form under the sign-in button.
+      expect(screen.getAllByText('login.errors.invalid_credentials.message')).toHaveLength(2);
+      expect(screen.queryByText('invalid_credentials')).toBeNull();
+      expect(screen.queryByText('Login failed')).toBeNull();
+    });
+
+    it('tells a temporary lockout from one only an administrator can lift', () => {
+      mockUseAuth.mockReturnValue({ login: jest.fn(), ssoLogin: jest.fn(), status: 'error', error: 'account_locked_out', isAuthenticated: false });
+
+      useAuthStore.setState({ loginFailure: { code: 'account_locked_out', lockoutMinutes: 5 } });
+      const { unmount } = render(<Login />);
+      expect(screen.getByText('login.errors.account_locked_out.title')).toBeTruthy();
+      unmount();
+
+      useAuthStore.setState({ loginFailure: null });
+      render(<Login />);
+      expect(screen.getByText('login.errors.account_locked.title')).toBeTruthy();
+    });
+  });
+
   it('redirects to app when authenticated', async () => {
     mockUseAuth.mockReturnValue({
       login: jest.fn(),

src/app/login/index.tsx

@@ -11,7 +11,9 @@ import { Button, ButtonText } from '@/components/ui/button';
 import { Modal, ModalBackdrop, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/ui/modal';
 import { Text } from '@/components/ui/text';
 import { useAnalytics } from '@/hooks/use-analytics';
+import { useLoginServer } from '@/hooks/use-login-server';
 import { useAuth } from '@/lib/auth';
+import { describeLoginFailure, isLoginErrorCode } from '@/lib/auth/login-errors';
 import { logger } from '@/lib/logging';
 import { isMfaErrorCode, mfaErrorKey } from '@/lib/mfa/messages';
 import { useSharedInstallation } from '@/lib/mfa/shared-installation';
@@ -32,7 +34,11 @@ export default function Login() {
   const router = useRouter();
   const { login, status, error, isAuthenticated } = useAuth();
   const mfaChallenge = useAuthStore((s) => s.mfaChallenge);
+  const loginFailure = useAuthStore((s) => s.loginFailure);
   const installation = useSharedInstallation();
+  const { name: serverName } = useLoginServer();
+  // A failed password sign-in says why and what to do next.
+  const loginError = isLoginErrorCode(error) ? describeLoginFailure(t, loginFailure?.code === error ? loginFailure : { code: error }, serverName) : null;
   // A sign-in that ended (expired, too many attempts, policy changed) or a shared shift that ran out says why in the
   // member's language.
   const displayError = error === 'shift_ended' ? t('shared_session.shift_ended') : isMfaErrorCode(error) ? t(mfaErrorKey(error)) : error;
@@ -80,7 +86,7 @@ export default function Login() {
       <LoginForm
         onSubmit={onSubmit}
         isLoading={status === 'loading'}
-        error={displayError ?? undefined}
+        error={loginError?.message ?? displayError ?? undefined}
         onServerUrlPress={() => setShowServerUrl(true)}
         onSsoPress={() => router.push('/login/sso')}
         onSharedDevicePress={() => router.push('/login/shared-device' as unknown as Href)}
@@ -98,11 +104,17 @@ export default function Login() {
         <ModalBackdrop />
         <ModalContent className="m-4 w-full max-w-3xl rounded-2xl">
           <ModalHeader>
-            <Text className="text-xl font-semibold">{t('login.errorModal.title')}</Text>
+            <Text className="text-xl font-semibold">{loginError?.title ?? t('login.errorModal.title')}</Text>
           </ModalHeader>
           <ModalBody>
-            <Text>{t('login.errorModal.message')}</Text>
-            {displayError ? <Text className="mt-2 text-sm text-gray-500">{displayError}</Text> : null}
+            {loginError ? (
+              <Text testID="login-error-message">{loginError.message}</Text>
+            ) : (
+              <>
+                <Text>{t('login.errorModal.message')}</Text>
+                {displayError ? <Text className="mt-2 text-sm text-gray-500">{displayError}</Text> : null}
+              </>
+            )}
           </ModalBody>
           <ModalFooter>
             <Button

src/app/login/login-form.tsx

@@ -8,6 +8,7 @@ import { Image, Keyboard } from 'react-native';
 import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import * as z from 'zod';
 
+import { LoginServerBadge } from '@/components/auth/login-server-badge';
 import { View } from '@/components/ui';
 import { Button, ButtonSpinner, ButtonText } from '@/components/ui/button';
 import { FormControl, FormControlError, FormControlErrorIcon, FormControlErrorText, FormControlLabel, FormControlLabelText } from '@/components/ui/form-control';
@@ -102,7 +103,10 @@ export const LoginForm = ({ onSubmit = () => {}, isLoading = false, error = unde
         <View className="items-center justify-center">
           <Image style={{ width: '96%' }} source={colorScheme === 'dark' ? require('@assets/images/Resgrid_JustText_White.png') : require('@assets/images/Resgrid_JustText.png')} resizeMode="contain" />
           <Text className="pb-6 text-center text-4xl font-bold">{t('login.title')}</Text>
-          <Text className="mb-6 max-w-xl text-center text-gray-500">{t('login.subtitle')}</Text>
+          <Text className="mb-4 max-w-xl text-center text-gray-500">{t('login.subtitle')}</Text>
+        </View>
+        <View className="mb-6">
+          <LoginServerBadge onPress={onServerUrlPress} />
         </View>
 
         {/* Username */}

src/components/auth/__tests__/login-server-badge.test.tsx

@@ -0,0 +1,54 @@
+import { act, fireEvent, render, screen } from '@testing-library/react-native';
+import React from 'react';
+
+import { useServerUrlStore } from '@/stores/app/server-url-store';
+
+import { LoginServerBadge } from '../login-server-badge';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, options?: Record<string, string>) =>
+      ({
+        'login.server.label': 'Server:',
+        'login.server.us_west': 'US West',
+        'login.server.eu_central': 'EU Central',
+      })[key] ?? (key === 'login.server.custom_host' ? `Custom (${options?.host})` : key),
+  }),
+}));
+
+jest.mock('nativewind', () => ({ useColorScheme: () => ({ colorScheme: 'light' }) }));
+jest.mock('@/lib/storage/app', () => ({
+  getBaseApiUrl: jest.fn(() => 'https://api.resgrid.com/api/v4'),
+  setBaseApiUrl: jest.fn(),
+}));
+
+describe('LoginServerBadge', () => {
+  beforeEach(() => {
+    useServerUrlStore.setState({ url: '' });
+  });
+
+  it('names the stored server before anything changes it', () => {
+    render(<LoginServerBadge />);
+    expect(screen.getByText('US West')).toBeTruthy();
+  });
+
+  it('follows a server change', async () => {
+    render(<LoginServerBadge />);
+    await act(async () => {
+      await useServerUrlStore.getState().setUrl('https://api-eu-central.resgrid.com/api/v4');
+    });
+    expect(screen.getByText('EU Central')).toBeTruthy();
+
+    await act(async () => {
+      await useServerUrlStore.getState().setUrl('https://rg.example.org/api/v4');
+    });
+    expect(screen.getByText('Custom (rg.example.org)')).toBeTruthy();
+  });
+
+  it('opens the server selector when pressed', () => {
+    const onPress = jest.fn();
+    render(<LoginServerBadge onPress={onPress} />);
+    fireEvent.press(screen.getByTestId('login-server-badge'));
+    expect(onPress).toHaveBeenCalled();
+  });
+});

src/components/auth/login-server-badge.tsx

@@ -0,0 +1,37 @@
+import { Server } from 'lucide-react-native';
+import { useColorScheme } from 'nativewind';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Pressable } from 'react-native';
+
+import { Text } from '@/components/ui/text';
+import { useLoginServer } from '@/hooks/use-login-server';
+
+interface LoginServerBadgeProps {
+  /** Opens the server selector; without it the badge is a plain label. */
+  onPress?: () => void;
+}
+
+/** Names the server the login form signs in to (US West, EU Central or Custom), so a wrong server is spotted before signing in. */
+export const LoginServerBadge = ({ onPress }: LoginServerBadgeProps) => {
+  const { t } = useTranslation();
+  const { colorScheme } = useColorScheme();
+  const { name } = useLoginServer();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={!onPress}
+      accessibilityRole={onPress ? 'button' : 'text'}
+      accessibilityLabel={t('login.server.signing_in_to', { server: name })}
+      accessibilityHint={onPress ? t('login.server.change_hint') : undefined}
+      testID="login-server-badge"
+      className="flex-row items-center self-center rounded-full border border-gray-300 px-3 py-1.5 dark:border-gray-700"
+    >
+      <Server size={14} color={colorScheme === 'dark' ? '#9ca3af' : '#6b7280'} />
+      <Text className="ml-1.5 text-sm text-gray-600 dark:text-gray-300">
+        {t('login.server.label')} <Text className="text-sm font-semibold text-gray-900 dark:text-white">{name}</Text>
+      </Text>
+    </Pressable>
+  );
+};

src/hooks/use-login-server.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { describeLoginServer, type LoginServer } from '@/lib/login-server';
+import { getBaseApiUrl } from '@/lib/storage/app';
+import { useServerUrlStore } from '@/stores/app/server-url-store';
+
+/**
+ * The server this device signs in to, and its display name ("US West", "EU Central" or "Custom (host)"). Follows a
+ * server change made from the login screen, since saving one updates the server URL store.
+ */
+export const useLoginServer = (): LoginServer & { name: string } => {
+  const { t } = useTranslation();
+  const storeUrl = useServerUrlStore((state) => state.url);
+  const apiUrl = storeUrl || getBaseApiUrl();
+
+  return useMemo(() => {
+    const server = describeLoginServer(apiUrl);
+    const name = server.kind === 'custom' ? t('login.server.custom_host', { host: server.host }) : t(`login.server.${server.kind}`);
+    return { ...server, name };
+  }, [apiUrl, t]);
+};

src/lib/__tests__/login-server.test.ts

@@ -0,0 +1,15 @@
+import { describeLoginServer } from '../login-server';
+
+describe('describeLoginServer', () => {
+  it('names the Resgrid hosted servers with or without the API suffix', () => {
+    expect(describeLoginServer('https://api.resgrid.com/api/v4')).toEqual({ kind: 'us_west', host: 'api.resgrid.com' });
+    expect(describeLoginServer('https://API.resgrid.com/')).toEqual({ kind: 'us_west', host: 'api.resgrid.com' });
+    expect(describeLoginServer('https://api-eu-central.resgrid.com/api/v4')).toEqual({ kind: 'eu_central', host: 'api-eu-central.resgrid.com' });
+  });
+
+  it('labels any other server custom, with its host', () => {
+    expect(describeLoginServer('https://qaapi.resgrid.dev/api/v4')).toEqual({ kind: 'custom', host: 'qaapi.resgrid.dev' });
+    expect(describeLoginServer('http://localhost:5000/api/v4')).toEqual({ kind: 'custom', host: 'localhost:5000' });
+    expect(describeLoginServer('https://resgrid.example.org/rg/api/v4')).toEqual({ kind: 'custom', host: 'resgrid.example.org' });
+  });
+});

src/lib/auth/__tests__/api-logging.test.ts

@@ -39,16 +39,27 @@ describe('sign-in logging', () => {
     expect(logged()).not.toContain(USERNAME);
   });
 
-  it('logs a failed request without the username', async () => {
+  it('logs a failed request without the username, and answers with the reason instead of throwing', async () => {
     const failure = Object.assign(new Error('Network Error'), { isAxiosError: true, config: { data: requestBody } });
     mockPost.mockRejectedValue(failure);
 
-    await expect(loginRequest({ username: USERNAME, password: PASSWORD })).rejects.toBe(failure);
+    await expect(loginRequest({ username: USERNAME, password: PASSWORD })).resolves.toMatchObject({ successful: false, message: 'server_unreachable', failure: { code: 'server_unreachable' } });
 
-    expect(mockLogger.error).toHaveBeenCalledWith({ message: 'Login failed', context: { error: failure } });
+    expect(mockLogger.error).toHaveBeenCalledWith({ message: 'Login failed', context: { error: failure, loginFailure: 'server_unreachable' } });
     expect(mockLogger.error.mock.calls[0][0].context).not.toHaveProperty('username');
   });
 
+  it("passes on the server's reason for refusing the password", async () => {
+    mockPost.mockRejectedValue({
+      isAxiosError: true,
+      message: 'Request failed with status code 400',
+      response: { status: 400, data: { error: 'invalid_grant', error_description: 'The account is locked out.', login_error: 'account_locked_out', lockout_minutes_remaining: 14.2 } },
+    });
+
+    await expect(loginRequest({ username: USERNAME, password: PASSWORD })).resolves.toMatchObject({ successful: false, failure: { code: 'account_locked_out', lockoutMinutes: 15 } });
+    expect(mockLogger.error.mock.calls[0][0].context).toMatchObject({ loginFailure: 'account_locked_out' });
+  });
+
   it('logs the SSO exchange with the provider, never the username', async () => {
     mockPost.mockResolvedValueOnce({ status: 200, data: { access_token: 'a' } }).mockResolvedValueOnce({ status: 204, data: null });
     await ssoExternalTokenRequest({ provider: 'oidc', externalToken: 'id-token', username: USERNAME });