@digihmis/esm-login-app 1.0.0

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":"1.0.0"}

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,73 @@
+{
+  "name": "@digihmis/esm-login-app",
+  "version": "1.0.0",
+  "license": "MPL-2.0",
+  "description": "The login microfrontend for the OpenMRS SPA",
+  "browser": "dist/digihmis-esm-login-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "scripts": {
+    "start": "openmrs develop",
+    "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'"
+  },
+  "keywords": [
+    "openmrs",
+    "digihmis",
+    "microfrontends",
+    "healthcare",
+    "spa"
+  ],
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/its-kios09/openmrs-esm-core.git"
+  },
+  "bugs": {
+    "url": "https://github.com/its-kios09/openmrs-esm-core/issues"
+  },
+  "homepage": "https://github.com/its-kios09/openmrs-esm-core#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@carbon/react": "^1.92.1",
+    "@hookform/resolvers": "^3.6.0",
+    "lodash-es": "^4.17.21",
+    "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": {
+    "@rspack/cli": "^1.3.11",
+    "@rspack/core": "^1.3.11",
+    "cross-env": "^7.0.3",
+    "jest": "^29.7.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",
+    "swr": "2.2.5",
+    "webpack": "^5.99.9"
+  }
+}

package/rspack.config.js

@@ -0,0 +1 @@
+module.exports = require('../../tools/rs-pack-code-spliting');

package/src/background-wrapper/background-wrapper.component.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styles from './background-wrapper.scss';
+import { useConfig } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+
+interface BackgroundWrapperProps {
+  children: React.ReactNode;
+}
+
+const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({ children }) => {
+  const { t } = useTranslation();
+  const { backgroundImage } = useConfig();
+
+  const backgroundSrc = backgroundImage?.src;
+  const backgroundAlt = backgroundImage?.alt || '';
+  const showCenteredLogin = backgroundImage?.showCenteredLogin;
+
+  function renderBackground() {
+    if (backgroundSrc) {
+      return <img src={backgroundSrc} alt={backgroundAlt} className={styles.backgroundImage} />;
+    } else {
+      return (
+        <svg role="img" className={styles.backgroundImage}>
+          <title>{t('openmrsLogo', 'OpenMRS logo')}</title>
+          <use href="#omrs-logo-full-color"></use>
+        </svg>
+      );
+    }
+  }
+
+  return showCenteredLogin ? (
+    <div className={styles.centeredLoginBackgroundContainer}>
+      <div
+        style={{
+          backgroundImage: backgroundSrc ? `url(${backgroundSrc})` : undefined,
+        }}
+        className={styles.centeredLoginOverlay}
+      >
+        {!backgroundSrc && (
+          <svg role="img" className={styles.backgroundSvg}>
+            <title>{t('openmrsLogo', 'OpenMRS logo')}</title>
+            <use href="#omrs-logo-full-color"></use>
+          </svg>
+        )}
+      </div>
+      <div className={styles.contentOverlay}>{children}</div>
+    </div>
+  ) : (
+    <>
+      {renderBackground()}
+      <div className={styles.backgroundContainer}>
+        <div className={styles.contentOverlay}>{children}</div>
+      </div>
+    </>
+  );
+};
+
+export default BackgroundWrapper;

package/src/background-wrapper/background-wrapper.scss

@@ -0,0 +1,45 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.backgroundContainer,
+.centeredLoginBackgroundContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.backgroundImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 1;
+}
+
+.contentOverlay {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media screen and (min-width: 1150px) {
+  .backgroundContainer {
+    max-width: 90%;
+    justify-content: right;
+  }
+
+  .backgroundImage {
+    object-fit: fit;
+    max-width: 55%;
+  }
+}

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 />
+        </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;