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

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

@@ -0,0 +1,51 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.submitButton {
+  margin-top: layout.$spacing-06;
+  width: 18rem;
+
+  :global(.cds--inline-loading) {
+    min-height: layout.$spacing-05;
+  }
+
+  :global(.cds--inline-loading__text) {
+    font-size: unset;
+  }
+}
+
+.alignCenter {
+  display: flex;
+  text-align: center;
+}
+
+.panelItemContainer {
+  a {
+    @extend .alignCenter;
+    justify-content: space-between;
+  }
+
+  div {
+    @extend .alignCenter;
+  }
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin-top: layout.$spacing-08;
+}
+
+.changePasswordCard {
+  border-radius: 0;
+  border: 1px solid $ui-03;
+  background-color: $ui-02;
+  width: 23rem;
+  padding: layout.$spacing-08;
+  position: relative;
+  min-height: fit-content;
+}

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { changeUserPassword } from './change-password.resource';
+import ChangePasswordModal from './change-password.modal';
+
+const mockClose = jest.fn();
+const mockChangeUserPassword = jest.mocked(changeUserPassword);
+
+jest.mock('./change-password.resource', () => ({
+  changeUserPassword: jest.fn().mockResolvedValue({}),
+}));
+
+describe('ChangePasswordModal', () => {
+  it('validates the form before submitting', async () => {
+    const user = userEvent.setup();
+
+    render(<ChangePasswordModal close={mockClose} />);
+
+    const submitButton = screen.getByRole('button', {
+      name: /change/i,
+    });
+
+    const oldPasswordInput = screen.getByLabelText(/old password/i);
+    const newPasswordInput = screen.getByLabelText(/^new password$/i);
+    const confirmPasswordInput = screen.getByLabelText(/confirm new password/i);
+
+    expect(screen.getByRole('heading', { name: /change password/i })).toBeInTheDocument();
+    expect(oldPasswordInput).toBeInTheDocument();
+    expect(newPasswordInput).toBeInTheDocument();
+    expect(confirmPasswordInput).toBeInTheDocument();
+
+    await user.click(submitButton);
+
+    expect(screen.getByText(/old password is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/new password is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/password confirmation is required/i)).toBeInTheDocument();
+
+    await user.type(oldPasswordInput, 'P@ssw0rd123!');
+    await user.type(newPasswordInput, 'N3wP@ssw0rd456!');
+    await user.type(confirmPasswordInput, 'N3wP@ssw0rd456');
+
+    expect(screen.getByText(/passwords do not match/i)).toBeInTheDocument();
+
+    await user.clear(confirmPasswordInput);
+    await user.type(confirmPasswordInput, 'N3wP@ssw0rd456!');
+
+    await user.click(submitButton);
+
+    expect(mockChangeUserPassword).toHaveBeenCalledTimes(1);
+    expect(mockChangeUserPassword).toHaveBeenCalledWith('P@ssw0rd123!', 'N3wP@ssw0rd456!');
+  });
+});

package/src/common/otp/otp.component.tsx

@@ -0,0 +1,54 @@
+import React, { useRef, useState } from 'react';
+
+import styles from './otp.scss';
+
+interface OtpInputProps {
+  length?: number;
+  onChange?: (otp: string) => void;
+}
+
+const OTPInput: React.FC<OtpInputProps> = ({ length = 5, onChange }) => {
+  const [otp, setOtp] = useState(Array(length).fill(''));
+  const inputRef = useRef<Array<HTMLInputElement | null>>([]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const val = e.target.value;
+    if (!/^[0-9]?$/.test(val)) return;
+
+    const newOtp = [...otp];
+    newOtp[index] = val;
+
+    setOtp(newOtp);
+
+    onChange?.(newOtp.join(''));
+
+    if (val && index < length - 1) {
+      inputRef.current[index + 1].focus();
+    }
+  };
+
+  const handleKeyDown = (e, index) => {
+    if (e.key === 'Backspace' && otp[index] === '' && index > 0) {
+      inputRef.current[index - 1].focus();
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      {otp.map((digit, index) => (
+        <input
+          className={styles.input}
+          key={index}
+          type="text"
+          maxLength={1}
+          value={digit}
+          onChange={(e) => handleChange(e, index)}
+          onKeyDown={(e) => handleKeyDown(e, index)}
+          ref={(el) => (inputRef.current[index] = el)}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default OTPInput;

package/src/common/otp/otp.scss

@@ -0,0 +1,13 @@
+.container {
+  display: flex;
+  gap: 10px;
+}
+
+.input {
+  width: 40px;
+  height: 40px;
+  font-size: 20px;
+  text-align: center;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}

package/src/common/resend-timer/resend-timer.component.tsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import styles from './resend-timer.scss';
+import { getEmail, getOtp } from '../../resources/otp.resource';
+import { useSession } from '@openmrs/esm-framework';
+
+interface ResendTimerProps {
+  username: string;
+  password: string;
+}
+
+const ResendTimer: React.FC<ResendTimerProps> = ({ username, password }) => {
+  const RESEND_SECONDS = 30;
+  const [secondsLeft, setSecondsLeft] = useState(RESEND_SECONDS);
+  const session = useSession();
+
+  const uuid = session.user.person.uuid;
+
+  useEffect(() => {
+    if (secondsLeft === 0) return;
+
+    const timer = setInterval(() => {
+      setSecondsLeft((s) => s - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [secondsLeft]);
+
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  };
+
+  const handleResend = async () => {
+    const email = await getEmail(uuid, username, password);
+    await getOtp(username, password, email);
+    setSecondsLeft(RESEND_SECONDS);
+  };
+  return (
+    <>
+      <p>
+        Didn&apos;t get a code?
+        {secondsLeft > 0 ? (
+          <>
+            After <span className={styles.timeLeft}>{formatTime(secondsLeft)}</span> you can <span>Resend</span>
+          </>
+        ) : (
+          <a className={styles.link} onClick={handleResend}>
+            Resend
+          </a>
+        )}
+      </p>
+    </>
+  );
+};
+
+export default ResendTimer;

package/src/common/resend-timer/resend-timer.scss

@@ -0,0 +1,7 @@
+.link {
+  cursor: pointer;
+}
+
+.timeLeft {
+  color: #007acc;
+}

package/src/config-schema.ts

@@ -0,0 +1,140 @@
+import { validators, Type, validator } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  provider: {
+    type: {
+      _type: Type.String,
+      _default: 'basic',
+      _description:
+        "Selects the login mechanism to use. Choices are 'basic' and 'oauth2'. " +
+        "For 'oauth2' you'll also need to set the 'loginUrl'",
+      _validators: [validators.oneOf(['basic', 'oauth2'])],
+    },
+    loginUrl: {
+      _type: Type.String,
+      _default: '${openmrsSpaBase}/login',
+      _description: 'The URL to use to login. This is only needed if you are using OAuth2.',
+      _validators: [validators.isUrl],
+    },
+    logoutUrl: {
+      _type: Type.String,
+      _default: '${openmrsSpaBase}/logout',
+      _description: 'The URL to use to login. This is only needed if you are using OAuth2.',
+      _validators: [validators.isUrl],
+    },
+  },
+  chooseLocation: {
+    enabled: {
+      _type: Type.Boolean,
+      _default: true,
+      _description:
+        "Whether to show a 'Choose Location' screen after login. " +
+        "If true, the user will be taken to the URL set in the 'links.loginSuccess' config property after choosing a location.",
+    },
+    numberToShow: {
+      _type: Type.Number,
+      _default: 8,
+      _description: 'The number of locations displayed in the location picker.',
+      _validators: [validator((v: unknown) => typeof v === 'number' && v > 0, 'Must be greater than zero')],
+    },
+    locationsPerRequest: {
+      _type: Type.Number,
+      _default: 50,
+      _description: 'The number of results to fetch in each cycle of infinite scroll.',
+      _validators: [validator((v: unknown) => typeof v === 'number' && v > 0, 'Must be greater than zero')],
+    },
+    useLoginLocationTag: {
+      _type: Type.Boolean,
+      _default: true,
+      _description:
+        "Whether to display only locations with the 'Login Location' tag. If false, all locations are shown.",
+    },
+  },
+  links: {
+    loginSuccess: {
+      _type: Type.String,
+      _default: '${openmrsSpaBase}/home',
+      _description: 'The URL to redirect the user to after a successful login.',
+      _validators: [validators.isUrl],
+    },
+  },
+  logo: {
+    src: {
+      _type: Type.String,
+      _default: '',
+      _description:
+        'The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.',
+      _validators: [validators.isUrl],
+    },
+    alt: {
+      _type: Type.String,
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
+    },
+  },
+  footer: {
+    additionalLogos: {
+      _type: Type.Array,
+      _elements: {
+        _type: Type.Object,
+        src: {
+          _type: Type.String,
+          _required: true,
+          _description: 'The source URL of the logo image',
+          _validators: [validators.isUrl],
+        },
+        alt: {
+          _type: Type.String,
+          _required: true,
+          _description: 'The alternative text for the logo image',
+        },
+      },
+      _default: [],
+      _description: 'An array of logos to be displayed in the footer next to the OpenMRS logo.',
+    },
+  },
+  showPasswordOnSeparateScreen: {
+    _type: Type.Boolean,
+    _default: false,
+    _description:
+      'Whether to show the password field on a separate screen. If false, the password field will be shown on the same screen.',
+  },
+  subDomainUrl: {
+    _type: Type.String,
+    _default: '',
+    _description: 'The subdomain URL for the application.',
+  },
+  etlBaseUrl: {
+    _type: Type.String,
+    _default: '',
+    _description: 'The ETL base URL for the application.',
+  },
+};
+
+export interface ConfigSchema {
+  chooseLocation: {
+    enabled: boolean;
+    locationsPerRequest: number;
+    numberToShow: number;
+    useLoginLocationTag: boolean;
+  };
+  footer: {
+    additionalLogos: Array<{
+      alt: string;
+      src: string;
+    }>;
+  };
+  links: {
+    loginSuccess: string;
+  };
+  logo: {
+    alt: string;
+    src: string;
+  };
+  provider: {
+    loginUrl: string;
+    logoutUrl: string;
+    type: 'basic' | 'oauth2';
+  };
+  showPasswordOnSeparateScreen: boolean;
+}

package/src/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.scss';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.svg';

package/src/footer.component.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react';
+import { Link, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useConfig, ArrowRightIcon } from '@openmrs/esm-framework';
+import { type ConfigSchema } from './config-schema';
+import styles from './footer.scss';
+
+interface Logo {
+  src: string;
+  alt?: string;
+}
+
+const Footer: React.FC = () => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigSchema>();
+  const logos: Logo[] = config.footer.additionalLogos || [];
+
+  const handleImageLoadError = useCallback((error: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    console.error('Failed to load image', error);
+  }, []);
+
+  return (
+    <div className={styles.footer}>
+      <Tile className={styles.poweredByTile}>
+        <div className={styles.poweredByContainer}>
+          <span className={styles.poweredByText}>{t('builtWith', 'Built with')}</span>
+          <svg aria-label={t('openmrsLogo', 'OpenMRS Logo')} className={styles.poweredByLogo} role="img">
+            <use href="#omrs-logo-full-color"></use>
+          </svg>
+          <span className={`${styles.poweredByText} ${styles.poweredBySubtext}`}>
+            {t('poweredBySubtext', 'An open-source medical record system and global community')}
+          </span>
+          <Link
+            className={styles.learnMoreButton}
+            href="https://openmrs.org"
+            rel="noopener noreferrer"
+            renderIcon={() => <ArrowRightIcon size={16} aria-label="Arrow right icon" />}
+            target="_blank"
+          >
+            {t('learnMore', 'Learn more')}
+          </Link>
+        </div>
+      </Tile>
+
+      <div className={styles.logosContainer}>
+        {logos.map((logo) => (
+          <img
+            alt={logo.alt ? t(logo.alt) : t('footerlogo', 'Footer Logo')}
+            className={styles.poweredByLogo}
+            key={logo.src}
+            onError={handleImageLoadError}
+            src={logo.src}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

package/src/footer.scss

@@ -0,0 +1,113 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: layout.$spacing-05;
+  position: absolute;
+  bottom: 0;
+  flex-wrap: wrap;
+  gap: layout.$spacing-05;
+  width: 100%;
+}
+
+.logosContainer {
+  display: flex;
+  max-height: layout.$spacing-07;
+  justify-content: flex-end;
+  flex-direction: row;
+  gap: layout.$spacing-03;
+  filter: grayscale(100%);
+  opacity: 80%;
+}
+
+@media only screen and (max-width: 1024px) {
+  .footer {
+    flex-direction: row;
+    justify-content: center;
+    padding: layout.$spacing-05;
+  }
+
+  .poweredByTile {
+    padding: layout.$spacing-05 layout.$spacing-03;
+    font-size: layout.$spacing-04;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logosContainer {
+    justify-content: center;
+    gap: layout.$spacing-04;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .footer {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: layout.$spacing-03;
+    padding: layout.$spacing-05;
+  }
+
+  .poweredByTile {
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem layout.$spacing-05;
+    font-size: layout.$spacing-04;
+    height: auto;
+    max-width: 100%;
+    border-radius: layout.$spacing-04;
+  }
+
+  .poweredBySubtext {
+    display: none;
+  }
+}
+
+.poweredByTile {
+  display: flex;
+  text-align: left;
+  max-width: fit-content;
+  min-height: fit-content;
+  font-size: smaller;
+  background-color: colors.$white;
+  padding: layout.$spacing-03 layout.$spacing-05;
+  border: 1px solid colors.$gray-20;
+  border-radius: layout.$spacing-04;
+  flex-wrap: wrap;
+}
+
+.poweredByContainer {
+  display: flex;
+  height: layout.$spacing-06;
+  align-items: center;
+  gap: layout.$spacing-03;
+}
+
+.poweredByLogo {
+  height: layout.$spacing-07;
+  width: auto;
+  max-width: layout.$spacing-12;
+  border-collapse: collapse;
+  padding: 0;
+  object-fit: contain;
+  display: block;
+  flex-shrink: 0;
+}
+
+.poweredByLogo + .poweredByText {
+  margin-left: layout.$spacing-02;
+}
+
+.learnMoreButton {
+  display: flex;
+  align-items: center;
+
+  svg {
+    fill: colors.$blue-60;
+  }
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import changeLocationLinkComponent from './change-location-link/change-location-link.extension';
+import changePasswordLinkComponent from './change-password/change-password-link.extension';
+import locationPickerComponent from './location-picker/location-picker-view.component';
+import logoutButtonComponent from './logout/logout.extension';
+import rootComponent from './root.component';
+
+export const moduleName = '@ampath/esm-login-app';
+
+const options = {
+  featureName: 'login',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const root = getSyncLifecycle(rootComponent, options);
+export const locationPicker = getSyncLifecycle(locationPickerComponent, options);
+export const logoutButton = getSyncLifecycle(logoutButtonComponent, options);
+export const changeLocationLink = getSyncLifecycle(changeLocationLinkComponent, options);
+export const changePasswordLink = getSyncLifecycle(changePasswordLinkComponent, options);
+export const changePasswordModal = getAsyncLifecycle(() => import('./change-password/change-password.modal'), options);

package/src/loading/loading.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Loading } from '@carbon/react';
+import styles from './loading.scss';
+
+const LoadingIcon: React.FC = () => (
+  <div className={styles['centerLoadingSVG']}>
+    <Loading description="Active loading indicator" role="progressbar" withOverlay={false} small />
+  </div>
+);
+
+export default LoadingIcon;

package/src/loading/loading.scss

@@ -0,0 +1,7 @@
+.centerLoadingSVG {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-items: center;
+}