(fix) O3-5243: Restore browser autofill support for login credentials

e2e/pages/login-page.ts

@@ -6,4 +6,14 @@ export class LoginPage {
   async goto() {
     await this.page.goto(`${process.env.E2E_BASE_URL}/spa/login`);
   }
+
+  async login(username: string, password: string) {
+    await this.goto();
+    await this.page.getByLabel(/username/i).fill(username);
+    await this.page.getByText(/continue/i).click();
+    await this.page.getByLabel(/^password$/i).waitFor({ state: 'visible', timeout: 10000 });
+    await this.page.getByLabel(/^password$/i).fill(password);
+    await this.page.getByRole('button', { name: /log in/i }).click();
+    await this.page.waitForLoadState('networkidle');
+  }
 }

e2e/specs/login.spec.ts

@@ -1,7 +1,20 @@
 import { test } from '../core';
-import { expect } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
 import { LoginPage } from '../pages';
 
+async function selectLocationIfRequired(page: Page) {
+  const locationPicker = page.getByText(/outpatient clinic/i);
+  const isLocationPickerVisible = await locationPicker
+    .waitFor({ state: 'visible', timeout: 2000 })
+    .then(() => true)
+    .catch(() => false);
+
+  if (isLocationPickerVisible) {
+    await locationPicker.click();
+    await page.getByRole('button', { name: /confirm/i }).click();
+  }
+}
+
 test.use({ storageState: { cookies: [], origins: [] } });
 
 test('Login as Admin user', async ({ page }) => {
@@ -19,25 +32,25 @@ test('Login as Admin user', async ({ page }) => {
   });
 
   await test.step('And I enter my password', async () => {
+    await page.getByLabel(/^password$/i).waitFor({ state: 'visible', timeout: 10000 });
     await page.getByLabel(/^password$/i).fill(`${process.env.E2E_USER_ADMIN_PASSWORD}`);
   });
 
   await test.step('And I click the `Log in` button', async () => {
     await page.getByRole('button', { name: /log in/i }).click();
+    await page.waitForLoadState('domcontentloaded');
   });
 
-  await test.step('And I choose a login location', async () => {
-    await expect(page).toHaveURL(`${process.env.E2E_BASE_URL}/spa/login/location`);
-    await page.getByText(/outpatient clinic/i).click();
-    await page.getByRole('button', { name: /confirm/i }).click();
+  await test.step('And I choose a login location if required', async () => {
+    await selectLocationIfRequired(page);
   });
 
   await test.step('Then I should get navigated to the home page', async () => {
-    await expect(page).toHaveURL(`${process.env.E2E_BASE_URL}/spa/home/service-queues`);
+    await expect(page).toHaveURL(/\/spa\/home/);
   });
 
   await test.step('And I should see the location picker in top nav', async () => {
-    await expect(topNav.getByText(/outpatient clinic/i)).toBeVisible();
+    await expect(topNav.getByText(/(outpatient clinic|inpatient ward)/i)).toBeVisible();
   });
 
   await test.step('When I click on the my account button', async () => {

e2e/specs/navbar.spec.ts

@@ -1,7 +1,22 @@
 import { test } from '../core';
-import { expect } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
 import { HomePage, LoginPage } from '../pages';
 
+async function selectLocationIfRequired(page: Page) {
+  const locationPicker = page.getByText(/outpatient clinic/i);
+  const isLocationPickerVisible = await locationPicker
+    .waitFor({ state: 'visible', timeout: 2000 })
+    .then(() => true)
+    .catch(() => false);
+
+  if (isLocationPickerVisible) {
+    await locationPicker.click();
+    await page.getByRole('button', { name: /confirm/i }).click();
+  }
+}
+
+test.use({ storageState: { cookies: [], origins: [] } });
+
 test('View action buttons in the navbar', async ({ page }) => {
   const loginPage = new LoginPage(page);
   const homePage = new HomePage(page);
@@ -11,10 +26,11 @@ test('View action buttons in the navbar', async ({ page }) => {
     await loginPage.goto();
     await page.getByLabel(/username/i).fill(`${process.env.E2E_USER_ADMIN_USERNAME}`);
     await page.getByText(/continue/i).click();
+    await page.getByLabel(/^password$/i).waitFor({ state: 'visible', timeout: 10000 });
     await page.getByLabel(/^password$/i).fill(`${process.env.E2E_USER_ADMIN_PASSWORD}`);
     await page.getByRole('button', { name: /log in/i }).click();
-    await page.getByText(/outpatient clinic/i).click();
-    await page.getByRole('button', { name: /confirm/i }).click();
+    await page.waitForLoadState('domcontentloaded');
+    await selectLocationIfRequired(page);
   });
 
   await test.step('When I visit the home page', async () => {

packages/apps/esm-login-app/src/login/login.component.tsx

@@ -51,7 +51,10 @@ const Login: React.FC = () => {
   useEffect(() => {
     if (showPasswordOnSeparateScreen) {
       if (showPasswordField) {
-        passwordInputRef.current?.focus();
+        // Only focus password input if it's empty (to preserve browser autofilled values)
+        if (!passwordInputRef.current?.value) {
+          passwordInputRef.current?.focus();
+        }
       } else {
         usernameInputRef.current?.focus();
       }
@@ -157,6 +160,8 @@ const Login: React.FC = () => {
               <TextInput
                 id="username"
                 type="text"
+                name="username"
+                autoComplete="username"
                 labelText={t('username', 'Username')}
                 value={username}
                 onChange={changeUsername}
@@ -165,19 +170,25 @@ const Login: React.FC = () => {
                 autoFocus
               />
               {showPasswordOnSeparateScreen ? (
-                showPasswordField ? (
-                  <>
+                <>
+                  {/* Password input is always in DOM for browser autofill support, but visually hidden until username step is complete */}
+                  <div className={showPasswordField ? undefined : styles.hiddenPasswordField}>
                     <PasswordInput
                       id="password"
                       labelText={t('password', 'Password')}
                       name="password"
+                      autoComplete="current-password"
                       onChange={changePassword}
                       ref={passwordInputRef}
-                      required
+                      required={showPasswordField}
                       value={password}
                       showPasswordLabel={t('showPassword', 'Show password')}
                       invalidText={t('validValueRequired', 'A valid value is required')}
+                      aria-hidden={!showPasswordField}
+                      tabIndex={showPasswordField ? 0 : -1}
                     />
+                  </div>
+                  {showPasswordField ? (
                     <Button
                       type="submit"
                       className={styles.continueButton}
@@ -191,24 +202,25 @@ const Login: React.FC = () => {
                         t('login', 'Log in')
                       )}
                     </Button>
-                  </>
-                ) : (
-                  <Button
-                    className={styles.continueButton}
-                    renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
-                    iconDescription="Continue to password"
-                    onClick={continueLogin}
-                    disabled={!isLoginEnabled}
-                  >
-                    {t('continue', 'Continue')}
-                  </Button>
-                )
+                  ) : (
+                    <Button
+                      className={styles.continueButton}
+                      renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
+                      iconDescription="Continue to password"
+                      onClick={continueLogin}
+                      disabled={!isLoginEnabled}
+                    >
+                      {t('continue', 'Continue')}
+                    </Button>
+                  )}
+                </>
               ) : (
                 <>
                   <PasswordInput
                     id="password"
                     labelText={t('password', 'Password')}
                     name="password"
+                    autoComplete="current-password"
                     onChange={changePassword}
                     ref={passwordInputRef}
                     required

packages/apps/esm-login-app/src/login/login.scss

@@ -156,3 +156,14 @@
   bottom: 100%;
   left: 0;
 }
+
+// Hidden password field for browser autofill support
+// Uses visibility:hidden instead of display:none to keep the input in the DOM
+// This allows browsers to autofill both username and password credentials
+.hiddenPasswordField {
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+  pointer-events: none;
+}

packages/apps/esm-login-app/src/login/login.test.tsx

@@ -172,7 +172,7 @@ describe('Login', () => {
     expect(loginButton).toBeInTheDocument();
   });
 
-  it('should not render the password field when the showPasswordOnSeparateScreen config is true (default)', async () => {
+  it('should render password field hidden but present for autofill when showPasswordOnSeparateScreen config is true (default)', async () => {
     mockUseConfig.mockReturnValue({
       ...mockConfig,
     });
@@ -187,12 +187,14 @@ describe('Login', () => {
 
     const usernameInput = screen.queryByRole('textbox', { name: /username/i });
     const continueButton = screen.queryByRole('button', { name: /Continue/i });
-    const passwordInput = screen.queryByLabelText(/password/i);
+    const passwordInput = screen.queryByLabelText(/^password$/i);
     const loginButton = screen.queryByRole('button', { name: /log in/i });
 
     expect(usernameInput).toBeInTheDocument();
     expect(continueButton).toBeInTheDocument();
-    expect(passwordInput).not.toBeInTheDocument();
+    expect(passwordInput).toBeInTheDocument();
+    expect(passwordInput).toHaveAttribute('aria-hidden', 'true');
+    expect(passwordInput).toHaveAttribute('tabIndex', '-1');
     expect(loginButton).not.toBeInTheDocument();
   });
 
@@ -283,4 +285,31 @@ describe('Login', () => {
 
     expect(usernameInput).toHaveFocus();
   });
+
+  it('should make password input visible and accessible after continuing from username step', async () => {
+    const user = userEvent.setup();
+    mockUseConfig.mockReturnValue({
+      ...mockConfig,
+    });
+
+    renderWithRouter(
+      Login,
+      {},
+      {
+        route: '/login',
+      },
+    );
+
+    const usernameInput = screen.getByRole('textbox', { name: /username/i });
+    const continueButton = screen.getByRole('button', { name: /Continue/i });
+
+    await user.type(usernameInput, 'testuser');
+    await user.click(continueButton);
+
+    const passwordInput = screen.getByLabelText(/^password$/i);
+
+    // Password should now be visible and accessible
+    expect(passwordInput).toHaveAttribute('aria-hidden', 'false');
+    expect(passwordInput).toHaveAttribute('tabIndex', '0');
+  });
 });