@ampath/esm-login-app 8.0.0-next.2 → 8.0.0-next.21

package/dist/routes.json

@@ -1 +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.2"}
+{"$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.21"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ampath/esm-login-app",
-  "version": "8.0.0-next.2",
+  "version": "8.0.0-next.21",
   "license": "MPL-2.0",
   "description": "The login microfrontend for the OpenMRS SPA",
   "browser": "dist/esm-login-app.js",

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

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styles from './resend-timer.scss';
-import { getOtp } from '../../resources/otp.resource';
+import { getEmailAndPhone, getOtp } from '../../resources/otp.resource';
+import { useSession } from '@openmrs/esm-framework';
 
 interface ResendTimerProps {
   username: string;
@@ -10,6 +11,9 @@ interface ResendTimerProps {
 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;
@@ -27,7 +31,8 @@ const ResendTimer: React.FC<ResendTimerProps> = ({ username, password }) => {
   };
 
   const handleResend = async () => {
-    await getOtp(username, password);
+    const { email, phone } = await getEmailAndPhone(uuid, username, password);
+    await getOtp(username, password, email, phone);
     setSecondsLeft(RESEND_SECONDS);
   };
   return (

package/src/config-schema.ts

@@ -1,27 +1,25 @@
-import { validators, Type, validator } from "@openmrs/esm-framework";
+import { validators, Type, validator } from '@openmrs/esm-framework';
 
 export const configSchema = {
   provider: {
     type: {
       _type: Type.String,
-      _default: "basic",
+      _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"])],
+      _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.",
+      _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.",
+      _default: '${openmrsSpaBase}/logout',
+      _description: 'The URL to use to login. This is only needed if you are using OAuth2.',
       _validators: [validators.isUrl],
     },
   },
@@ -36,25 +34,14 @@ export const configSchema = {
     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"
-        ),
-      ],
+      _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"
-        ),
-      ],
+      _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,
@@ -66,24 +53,23 @@ export const configSchema = {
   links: {
     loginSuccess: {
       _type: Type.String,
-      _default: "${openmrsSpaBase}/home",
-      _description: "The URL to redirect the user to after a successful login.",
+      _default: '${openmrsSpaBase}/home',
+      _description: 'The URL to redirect the user to after a successful login.',
       _validators: [validators.isUrl],
     },
   },
   logo: {
     src: {
       _type: Type.String,
-      _default: "",
+      _default: '',
       _description:
-        "The path or URL to the logo image. If set to an empty string, the default OpenMRS SVG sprite will be used.",
+        '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.",
+      _default: 'Logo',
+      _description: 'The alternative text for the logo image, displayed when the image cannot be loaded or on hover.',
     },
   },
   footer: {
@@ -94,25 +80,34 @@ export const configSchema = {
         src: {
           _type: Type.String,
           _required: true,
-          _description: "The source URL of the logo image",
+          _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",
+          _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.",
+      _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.",
+      '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.',
   },
 };
 
@@ -139,7 +134,7 @@ export interface ConfigSchema {
   provider: {
     loginUrl: string;
     logoutUrl: string;
-    type: "basic" | "oauth2";
+    type: 'basic' | 'oauth2';
   };
   showPasswordOnSeparateScreen: boolean;
 }

package/src/declarations.d.ts

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

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

@@ -0,0 +1,113 @@
+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, TextInput, InlineLoading, Tile } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { initiatePasswordReset } from './forgot-password.resource';
+import Logo from '../logo.component';
+import styles from './forgot-password.scss';
+import { Link, useNavigate } from "react-router-dom";
+
+const ForgotPassword: React.FC = () => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const [initiatingPasswordReset, setIsInitiatingPasswordReset] = useState(false);
+
+    const usernameOrEmailValidation = z.string({
+        required_error: t('usernameOrEmailRequired', 'Username or Email is required'),
+    });
+
+    const resetPasswordFormSchema = z
+        .object({
+            usernameOrEmail: usernameOrEmailValidation,
+        });
+
+    const {
+        handleSubmit,
+        control,
+        formState: { errors },
+    } = useForm({
+        resolver: zodResolver(resetPasswordFormSchema),
+    });
+
+    const onSubmit: SubmitHandler<z.infer<typeof resetPasswordFormSchema>> = useCallback(
+        (data) => {
+            setIsInitiatingPasswordReset(true);
+
+            const { usernameOrEmail } = data;
+
+            initiatePasswordReset(usernameOrEmail)
+                .then(() => {
+                    showSnackbar({
+                        title: t('passwordResetSuccessfull', 'Password reset successfull. Reset link has been sent to your email.'),
+                        kind: 'success',
+                    });
+                    navigate('/login');
+                })
+                .catch((error) => {
+                    let errorMessage = error?.responseBody?.error?.rawMessage ?? "";
+                    if(errorMessage.includes("recipient")) {
+                        errorMessage = t('recipientAddressNotConfigured', 'Recipient email address not configured.');
+                    }
+                    showSnackbar({
+                        kind: 'error',
+                        subtitle: errorMessage,
+                        title: t('errorResettingPassword', 'Error resetting password'),
+                    });
+                })
+                .finally(() => {
+                    setIsInitiatingPasswordReset(false);
+                });
+        },
+        [t],
+    );
+
+    const onError = useCallback(() => setIsInitiatingPasswordReset(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="usernameOrEmail"
+                        control={control}
+                        render={({ field: { onChange, value } }) => (
+                            <TextInput
+                                id="usernameOrEmail"
+                                invalid={!!errors?.usernameOrEmail}
+                                invalidText={
+                                    (errors &&
+                                        errors.usernameOrEmail &&
+                                        errors.usernameOrEmail.message &&
+                                        typeof errors.usernameOrEmail.message === 'string' &&
+                                        errors.usernameOrEmail.message) ??
+                                    ''
+                                }
+                                labelText={t('usernameOrEmail', 'Username or Email')}
+                                onChange={onChange}
+                                value={value}
+                            />
+                        )}
+                    />
+                    <Button className={styles.submitButton} disabled={initiatingPasswordReset} type="submit">
+                        {initiatingPasswordReset ? (
+                            <InlineLoading description={t('resettingPassword', 'Resetting password') + '...'} />
+                        ) : (
+                            <span>{t('resetPassword', 'Reset Password')}</span>
+                        )}
+                    </Button>
+                    <div style={{ padding: "15px", textAlign: "center" }}>
+                        <Link to="/login" style={{ textDecoration: "none", cursor: "pointer" }}> Back to Login</Link>
+                    </div>
+                </Form>
+            </Tile>
+        </div>
+    )
+}
+
+export default ForgotPassword;

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

@@ -0,0 +1,11 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+export function initiatePasswordReset(usernameOrEmail: string) {
+  return openmrsFetch(`${restBaseUrl}/passwordreset`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: {
+      usernameOrEmail
+    },
+  });
+}

package/src/forgot-password/forgot-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/forgot-password/reset-password/reset-password.component.tsx

@@ -0,0 +1,131 @@
+import React, { useCallback, useState } from "react";
+import { useParams } from "react-router-dom";
+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, Tile, PasswordInput } from '@carbon/react';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { resetPassword } from './reset-password.resource';
+import Logo from '../../logo.component';
+import styles from '../../forgot-password/forgot-password.scss';
+
+const ResetPassword: React.FC = () => {
+    const { activationKey } = useParams<{ activationKey: string }>();
+    const { t } = useTranslation();
+    const [isResetingPassword, setIsResetingPassword] = useState(false);
+
+    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 resetPasswordFormSchema = z
+        .object({
+            newPassword: newPasswordValidation,
+            passwordConfirmation: passwordConfirmationValidation,
+        });
+
+    const {
+        handleSubmit,
+        control,
+        formState: { errors },
+    } = useForm({
+        resolver: zodResolver(resetPasswordFormSchema),
+    });
+
+    const onSubmit: SubmitHandler<z.infer<typeof resetPasswordFormSchema>> = useCallback(
+        (data) => {
+            setIsResetingPassword(true);
+
+            const { newPassword } = data;
+
+            resetPassword(newPassword, activationKey || "")
+                .then(() => {
+                    showSnackbar({
+                        title: t('passwordResetSuccessfull', 'Password reset successfull'),
+                        kind: 'success',
+                    });
+                })
+                .catch((error) => {
+                    showSnackbar({
+                        kind: 'error',
+                        subtitle: error?.message,
+                        title: t('errorResetingPassword', 'Error reseting password'),
+                    });
+                })
+                .finally(() => {
+                    setIsResetingPassword(false);
+                });
+        },
+        [t, activationKey],
+    );
+
+    const onError = useCallback(() => setIsResetingPassword(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="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={isResetingPassword} type="submit">
+                        {isResetingPassword ? (
+                            <InlineLoading description={t('resettingPassword', 'Resetting password') + '...'} />
+                        ) : (
+                            <span>{t('resetPassword', 'Reset Password')}</span>
+                        )}
+                    </Button>
+                </Form>
+            </Tile>
+        </div>
+    )
+}
+
+export default ResetPassword;

package/src/forgot-password/reset-password/reset-password.resource.ts

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