@ampath/esm-login-app 8.0.0-next.10

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":">=2.2.0"},"pages":[{"component":"root","route":"login","online":true,"offline":true},{"component":"root","route":"logout","online":true,"offline":true},{"component":"root","route":"change-password","online":true,"offline":true}],"extensions":[{"name":"location-picker","slot":"location-picker","component":"locationPicker","online":true,"offline":true},{"name":"logout-button","slot":"user-panel-bottom-slot","component":"logoutButton","online":true,"offline":true},{"name":"password-changer","slot":"user-panel-slot","component":"changePasswordLink","online":true,"offline":true},{"name":"location-changer","slot":"top-nav-info-slot","component":"changeLocationLink","online":true,"offline":true,"order":1}],"modals":[{"name":"change-password-modal","component":"changePasswordModal"}],"version":"8.0.0-next.10"}

package/jest.config.js

@@ -0,0 +1,20 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  clearMocks: true,
+  transform: {
+    '^.+\\.[jt]sx?$': ['@swc/jest'],
+  },
+  moduleNameMapper: {
+    '@openmrs/esm-framework': '@openmrs/esm-framework/mock',
+    '\\.(s?css)$': 'identity-obj-proxy',
+    '^lodash-es/(.*)$': 'lodash/$1',
+    'lodash-es': 'lodash',
+    dexie: require.resolve('dexie'),
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
+  transformIgnorePatterns: ['/node_modules/', '\\.pnp\\.[^\\/]+$'],
+};

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@ampath/esm-login-app",
+  "version": "8.0.0-next.10",
+  "license": "MPL-2.0",
+  "description": "The login microfrontend for the OpenMRS SPA",
+  "browser": "dist/esm-login-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "dev": "openmrs develop --backend=https://staging.ampath.or.ke --api-url=/openmrs --config-url=https://ngx.ampath.or.ke/o3-config.json --port=9000",
+    "serve": "rspack serve --mode=development",
+    "debug": "npm run serve",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
+    "build": "rspack --mode=production",
+    "build:development": "rspack --mode=development",
+    "analyze": "rspack --mode=production --env analyze=true",
+    "typescript": "tsc",
+    "lint": "eslint src --ext ts,tsx",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*.modal.tsx' 'src/**/*.resource.ts' --config='../../../tools/i18next-parser.config.js'",
+    "verify": "turbo lint typescript"
+  },
+  "keywords": [
+    "openmrs",
+    "microfrontends"
+  ],
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ampath/ampath-esm-login-app.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ampath/ampath-esm-login-app/issues"
+  },
+  "homepage": "https://github.com/ampath/ampath-esm-login-app#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.92.1",
+    "@hookform/resolvers": "^3.6.0",
+    "lodash-es": "^4.17.21",
+    "openmrs": "next",
+    "react-hook-form": "^7.52.2",
+    "zod": "^3.23.8"
+  },
+  "peerDependencies": {
+    "@carbon/react": "1.x",
+    "@openmrs/esm-framework": "8.x",
+    "react": "18.x",
+    "react-dom": "18.x",
+    "react-i18next": "16.x",
+    "react-router-dom": "6.x",
+    "rxjs": "6.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "@openmrs/esm-framework": "next",
+    "@openmrs/webpack-config": "next",
+    "@playwright/test": "^1.50.1",
+    "@rspack/cli": "^1.3.11",
+    "@rspack/core": "^1.3.11",
+    "@swc/core": "^1.11.29",
+    "@swc/jest": "^0.2.38",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.0",
+    "@types/webpack-env": "^1.16.4",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
+    "@typescript-eslint/parser": "^8.35.0",
+    "classnames": "^2.3.2",
+    "cross-env": "^7.0.3",
+    "dotenv": "^16.0.3",
+    "eslint": "^8.55.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-playwright": "^2.1.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-testing-library": "^7.1.1",
+    "fake-indexeddb": "^4.0.2",
+    "fork-ts-checker-webpack-plugin": "^7.2.13",
+    "husky": "^8.0.3",
+    "i18next-parser": "^9.3.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.9",
+    "prettier": "^3.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^16.0.0",
+    "react-router-dom": "^6.3.0",
+    "rxjs": "^6.5.3",
+    "swc-loader": "^0.2.6",
+    "swr": "2.2.5",
+    "timezone-mock": "^1.2.2",
+    "turbo": "^2.5.2",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.9"
+  },
+  "packageManager": "yarn@4.10.3",
+  "stableVersion": "8.0.0"
+}

package/prettier.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  bracketSpacing: true,
+  printWidth: 120,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: "all",
+};

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-rspack-config');

package/src/change-location-link/change-location-link.extension.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { HeaderGlobalAction } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { LocationIcon, navigate, useSession } from '@openmrs/esm-framework';
+import styles from './change-location-link.scss';
+
+const ChangeLocationLink: React.FC = () => {
+  const { t } = useTranslation();
+  const session = useSession();
+  const currentLocation = session?.sessionLocation?.display;
+
+  const changeLocation = () => {
+    // update=true is passed as a query param for updating the location preference,
+    // The location picker won't redirect with default location on finding the update=true param.
+    navigate({
+      to: `\${openmrsSpaBase}/login/location?returnToUrl=${window.location.pathname}&update=true`,
+    });
+  };
+
+  return (
+    <HeaderGlobalAction
+      aria-label={t('changeLocation', 'Change location')}
+      className={styles.changeLocationButton}
+      onClick={changeLocation}
+    >
+      <LocationIcon size={16} />
+      <span className={styles.currentLocationText}>{currentLocation}</span>
+    </HeaderGlobalAction>
+  );
+};
+
+export default ChangeLocationLink;

package/src/change-location-link/change-location-link.scss

@@ -0,0 +1,17 @@
+@use '@carbon/layout';
+
+.changeLocationButton {
+  width: fit-content;
+  background-color: transparent;
+  color: white;
+  font-size: 14px;
+  padding: layout.$spacing-04 !important; // this gets unset in rtl language without !important
+
+  &:hover {
+    color: white;
+  }
+}
+
+.currentLocationText {
+  padding-inline: layout.$spacing-04;
+}

package/src/change-location-link/change-location-link.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { navigate, type Session, useSession } from '@openmrs/esm-framework';
+import ChangeLocationLink from './change-location-link.extension';
+
+const mockNavigate = jest.mocked(navigate);
+const mockUseSession = jest.mocked(useSession);
+
+delete window.location;
+(window.location as Location) = new URL('https://dev3.openmrs.org/openmrs/spa/home') as unknown as Location;
+
+describe('ChangeLocationLink', () => {
+  beforeEach(() => {
+    mockUseSession.mockReturnValue({
+      sessionLocation: {
+        display: 'Waffle House',
+      },
+    } as Session);
+  });
+
+  it('should display the `Change location` link', async () => {
+    render(<ChangeLocationLink />);
+
+    const user = userEvent.setup();
+    const changeLocationButton = await screen.findByRole('button', {
+      name: /Change/i,
+    });
+
+    await user.click(changeLocationButton);
+
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '${openmrsSpaBase}/login/location?returnToUrl=/openmrs/spa/home&update=true',
+    });
+  });
+});

package/src/change-password/change-password-link.extension.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, SwitcherItem } from '@carbon/react';
+import { PasswordIcon, showModal } from '@openmrs/esm-framework';
+import styles from './change-password.scss';
+
+const ChangePasswordLink: React.FC = () => {
+  const { t } = useTranslation();
+
+  const launchChangePasswordModal = useCallback(() => {
+    const dispose = showModal('change-password-modal', {
+      closeModal: () => dispose(),
+      size: 'sm',
+    });
+  }, []);  
+
+  return (
+    <SwitcherItem aria-label={t('changePassword', 'ChangePassword')} className={styles.panelItemContainer}>
+      <div>
+        <PasswordIcon size={20} />
+        <p>{t('password', 'Password')}</p>
+      </div>
+      <Button kind="ghost" onClick={launchChangePasswordModal}>
+        {t('change', 'Change')}
+      </Button>
+    </SwitcherItem>
+  );
+};
+
+export default ChangePasswordLink;

package/src/change-password/change-password-link.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { showModal } from '@openmrs/esm-framework';
+import ChangePasswordLink from './change-password-link.extension';
+
+const mockShowModal = jest.mocked(showModal);
+
+describe('ChangePasswordLink', () => {
+  it('should launch the change password modal', async () => {
+    const user = userEvent.setup();
+
+    render(<ChangePasswordLink />);
+
+    const changePasswordLink = screen.getByRole('button', {
+      name: /Change/i,
+    });
+
+    await user.click(changePasswordLink);
+
+    expect(mockShowModal).toHaveBeenCalledTimes(1);
+    expect(mockShowModal).toHaveBeenCalledWith('change-password-modal', {
+      size: 'sm',
+      closeModal: expect.any(Function),
+    });
+  });
+});

package/src/change-password/change-password-modal.scss

@@ -0,0 +1,11 @@
+@use '@carbon/layout';
+
+.submitButton {
+  :global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset;
+  }
+}

package/src/change-password/change-password.component.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, FieldError, useForm, type SubmitHandler } from 'react-hook-form';
+import { Button, Form, PasswordInput, InlineLoading, Tile } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { changeUserPassword } from './change-password.resource';
+import Logo from '../logo.component';
+import styles from './change-password.scss';
+
+const ChangePassword: React.FC = () => {
+  const { t } = useTranslation();
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+
+  const oldPasswordValidation = z.string({
+    required_error: t('oldPasswordRequired', 'Old password is required'),
+  });
+
+  const newPasswordValidation = z.string({
+    required_error: t('newPasswordRequired', 'New password is required'),
+  });
+
+  const passwordConfirmationValidation = z.string({
+    required_error: t('passwordConfirmationRequired', 'Password confirmation is required'),
+  });
+
+  const changePasswordFormSchema = z
+    .object({
+      oldPassword: oldPasswordValidation,
+      newPassword: newPasswordValidation,
+      passwordConfirmation: passwordConfirmationValidation,
+    })
+    .refine((data) => data.newPassword === data.passwordConfirmation, {
+      message: t('passwordsDoNotMatch', 'Passwords do not match'),
+      path: ['passwordConfirmation'],
+    });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(changePasswordFormSchema),
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof changePasswordFormSchema>> = useCallback(
+    (data) => {
+      setIsChangingPassword(true);
+
+      const { oldPassword, newPassword } = data;
+
+      changeUserPassword(oldPassword, newPassword)
+        .then(() => {
+          showSnackbar({
+            title: t('passwordChangedSuccessfully', 'Password changed successfully'),
+            kind: 'success',
+          });
+        })
+        .catch((error) => {
+          showSnackbar({
+            kind: 'error',
+            subtitle: error?.message,
+            title: t('errorChangingPassword', 'Error changing password'),
+          });
+        })
+        .finally(() => {
+          setIsChangingPassword(false);
+        });
+    },
+    [t],
+  );
+
+  const onError = useCallback(() => setIsChangingPassword(false), []);
+
+  return (
+    <div className={styles.container}>
+      <Tile className={styles.changePasswordCard}>
+        <div className={styles.alignCenter}>
+          <Logo t={t} />
+        </div>
+        <Form onSubmit={handleSubmit(onSubmit, onError)}>
+          <Controller
+            name="oldPassword"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <PasswordInput
+                id="oldPassword"
+                invalid={!!errors?.oldPassword}
+                invalidText={
+                  (errors &&
+                    errors.oldPassword &&
+                    errors.oldPassword.message &&
+                    typeof errors.oldPassword.message === 'string' &&
+                    errors.oldPassword.message) ??
+                  ''
+                }
+                labelText={t('oldPassword', 'Old password')}
+                onChange={onChange}
+                value={value}
+              />
+            )}
+          />
+          <Controller
+            name="newPassword"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <PasswordInput
+                id="newPassword"
+                invalid={!!errors?.newPassword}
+                invalidText={
+                  (errors &&
+                    errors.newPassword &&
+                    errors.newPassword.message &&
+                    typeof errors.newPassword.message === 'string' &&
+                    errors.newPassword.message) ??
+                  ''
+                }
+                labelText={t('newPassword', 'New password')}
+                onChange={onChange}
+                value={value}
+              />
+            )}
+          />
+          <Controller
+            name="passwordConfirmation"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <PasswordInput
+                id="passwordConfirmation"
+                invalid={!!errors?.passwordConfirmation}
+                invalidText={
+                  (errors &&
+                    errors.passwordConfirmation &&
+                    errors.passwordConfirmation.message &&
+                    typeof errors.passwordConfirmation.message === 'string' &&
+                    errors.passwordConfirmation.message) ??
+                  ''
+                }
+                labelText={t('confirmPassword', 'Confirm new password')}
+                onChange={onChange}
+                value={value}
+              />
+            )}
+          />
+          <Button className={styles.submitButton} disabled={isChangingPassword} type="submit">
+            {isChangingPassword ? (
+              <InlineLoading description={t('changingPassword', 'Changing password') + '...'} />
+            ) : (
+              <span>{t('change', 'Change Password')}</span>
+            )}
+          </Button>
+        </Form>
+      </Tile>
+    </div>
+  );
+};
+
+export default ChangePassword;

package/src/change-password/change-password.modal.tsx

@@ -0,0 +1,175 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Controller, useForm, type SubmitHandler } from 'react-hook-form';
+import {
+  Button,
+  Form,
+  InlineLoading,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  PasswordInput,
+  Stack,
+} from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { changeUserPassword } from './change-password.resource';
+import styles from './change-password-modal.scss';
+
+interface ChangePasswordModalProps {
+  close(): () => void;
+}
+
+const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({ close }) => {
+  const { t } = useTranslation();
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const oldPasswordValidation = z
+    .string({
+      required_error: t('oldPasswordRequired', 'Old password is required'),
+    })
+    .trim()
+    .min(1, t('oldPasswordRequired', 'Old password is required'));
+
+  const newPasswordValidation = z
+    .string({
+      required_error: t('newPasswordRequired', 'New password is required'),
+    })
+    .trim()
+    .min(1, t('newPasswordRequired', 'New password is required'));
+
+  const passwordConfirmationValidation = z
+    .string({
+      required_error: t('passwordConfirmationRequired', 'Password confirmation is required'),
+    })
+    .trim()
+    .min(1, t('passwordConfirmationRequired', 'Password confirmation is required'));
+
+  const changePasswordFormSchema = z
+    .object({
+      oldPassword: oldPasswordValidation,
+      newPassword: newPasswordValidation,
+      passwordConfirmation: passwordConfirmationValidation,
+    })
+    .refine((data) => data.newPassword === data.passwordConfirmation, {
+      message: t('passwordsDoNotMatch', 'Passwords do not match'),
+      path: ['passwordConfirmation'],
+    });
+
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(changePasswordFormSchema),
+    defaultValues: {
+      oldPassword: '',
+      newPassword: '',
+      passwordConfirmation: '',
+    },
+  });
+
+  const onSubmit: SubmitHandler<z.infer<typeof changePasswordFormSchema>> = useCallback(
+    (data) => {
+      setIsChangingPassword(true);
+      const { oldPassword, newPassword } = data;
+
+      changeUserPassword(oldPassword, newPassword)
+        .then(() => {
+          close();
+
+          showSnackbar({
+            title: t('passwordChangedSuccessfully', 'Password changed successfully'),
+            kind: 'success',
+          });
+        })
+        .catch((error) => {
+          const errorMessage = error?.responseBody?.message ?? error?.message;
+          setErrorMessage(errorMessage);
+        })
+        .finally(() => {
+          setIsChangingPassword(false);
+        });
+    },
+    [close, t],
+  );
+
+  const onError = () => setIsChangingPassword(false);
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit, onError)}>
+      <ModalHeader closeModal={close} title={t('changePassword', 'Change password')} />
+      <ModalBody>
+        <Stack gap={5} className={styles.languageOptionsContainer}>
+          <Controller
+            name="oldPassword"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <PasswordInput
+                id="oldPassword"
+                invalid={!!errors?.oldPassword}
+                invalidText={errors?.oldPassword?.message}
+                labelText={t('oldPassword', 'Old password')}
+                onChange={onChange}
+                value={value}
+              />
+            )}
+          />
+          <Controller
+            name="newPassword"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <PasswordInput
+                id="newPassword"
+                invalid={!!errors?.newPassword}
+                invalidText={errors?.newPassword?.message}
+                labelText={t('newPassword', 'New password')}
+                onChange={onChange}
+                value={value}
+              />
+            )}
+          />
+          <Controller
+            name="passwordConfirmation"
+            control={control}
+            render={({ field: { onChange, value } }) => (
+              <PasswordInput
+                id="passwordConfirmation"
+                invalid={!!errors?.passwordConfirmation}
+                invalidText={errors?.passwordConfirmation?.message}
+                labelText={t('confirmPassword', 'Confirm new password')}
+                onChange={onChange}
+                value={value}
+              />
+            )}
+          />
+          {errorMessage && (
+            <InlineNotification
+              kind="error"
+              onClick={() => setErrorMessage('')}
+              subtitle={errorMessage}
+              title={t('errorChangingPassword', 'Error changing password')}
+            />
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.submitButton} disabled={isChangingPassword} type="submit">
+          {isChangingPassword ? (
+            <InlineLoading description={t('changingPassword', 'Changing password') + '...'} />
+          ) : (
+            <span>{t('change', 'Change')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </Form>
+  );
+};
+
+export default ChangePasswordModal;

package/src/change-password/change-password.resource.ts

@@ -0,0 +1,12 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export function changeUserPassword(oldPassword: string, newPassword: string) {
+  return openmrsFetch(`${restBaseUrl}/password`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: {
+      oldPassword,
+      newPassword,
+    },
+  });
+}