O3-1409: Support for users changing passwords

packages/esm-system-admin-app/src/change-password-button/change-password-button.component.tsx

@@ -0,0 +1,29 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SwitcherItem } from '@carbon/react';
+import { Settings } from '@carbon/react/icons';
+import { showModal } from '@openmrs/esm-framework';
+import styles from './change-password-button.scss';
+
+export interface ChangePasswordLinkProps {}
+
+const ChangePasswordLink: React.FC<ChangePasswordLinkProps> = () => {
+  const { t } = useTranslation();
+
+  const launchChangePasswordModal = useCallback(() => {
+    showModal('change-password-modal');
+  }, []);
+
+  return (
+    <>
+      <SwitcherItem aria-label="Switcher Container">
+        <div className={styles.changePasswordButton} role="button" onClick={launchChangePasswordModal} tabIndex={0}>
+          <Settings size={20} />
+          <p>{t('changePassword', 'Change Password')}</p>
+        </div>
+      </SwitcherItem>
+    </>
+  );
+};
+
+export default ChangePasswordLink;

packages/esm-system-admin-app/src/change-password-button/change-password-button.scss

@@ -0,0 +1,4 @@
+.changePasswordButton {
+  width: 16rem;
+  display: inline-flex;
+}

packages/esm-system-admin-app/src/change-password-button/change-password-button.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import ChangePasswordButton from './change-password-button.component';
+import { render, screen } from '@testing-library/react';
+import { showModal } from '@openmrs/esm-framework';
+import userEvent from '@testing-library/user-event';
+
+const showModalMock = showModal as jest.Mock;
+
+describe('<ChangePasswordButton/>', () => {
+  beforeEach(() => {
+    render(<ChangePasswordButton />);
+  });
+
+  it('should display the `Change Password` button', async () => {
+    const user = userEvent.setup();
+    const changePasswordButton = await screen.findByRole('button', {
+      name: /Change Password/i,
+    });
+
+    await user.click(changePasswordButton);
+
+    expect(showModalMock).toHaveBeenCalledWith('change-password-modal');
+  });
+});

packages/esm-system-admin-app/src/change-password-modal/change-password-modal.component.tsx

@@ -0,0 +1,197 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, ModalBody, ModalFooter, ModalHeader, Tile, PasswordInput, Form, Layer } from '@carbon/react';
+import { navigate, showSnackbar } from '@openmrs/esm-framework';
+import styles from './change-password-modal.scss';
+import { performPasswordChange } from './change-password-model.resource';
+
+interface ChangePasswordModalProps {
+  close(): void;
+}
+
+export default function ChangePasswordModal({ close }: ChangePasswordModalProps) {
+  const { t } = useTranslation();
+  const [isSavingPassword, setIsSavingPassword] = useState(false);
+  const oldPasswordInputRef = useRef<HTMLInputElement>(null);
+  const newPasswordInputRef = useRef<HTMLInputElement>(null);
+  const confirmPasswordInputRef = useRef<HTMLInputElement>(null);
+  const formRef = useRef<HTMLFormElement>(null);
+  const [newPasswordError, setNewPasswordErr] = useState('');
+  const [oldPasswordError, setOldPasswordErr] = useState('');
+  const [confirmPasswordError, setConfirmPasswordError] = useState('');
+  const [isOldPasswordInvalid, setIsOldPasswordInvalid] = useState<boolean>(true);
+  const [isNewPasswordInvalid, setIsNewPasswordInvalid] = useState<boolean>(true);
+  const [isConfirmPasswordInvalid, setIsConfirmPasswordInvalid] = useState<boolean>(true);
+  const [passwordInput, setPasswordInput] = useState({
+    oldPassword: '',
+    newPassword: '',
+    confirmPassword: '',
+  });
+
+  const handleValidation = useCallback(
+    (passwordInputValue, passwordInputFieldName) => {
+      if (passwordInputFieldName === 'newPassword') {
+        const uppercaseRegExp = /(?=.*?[A-Z])/;
+        const lowercaseRegExp = /(?=.*?[a-z])/;
+        const digitsRegExp = /(?=.*?[0-9])/;
+        const minLengthRegExp = /.{8,}/;
+        const passwordLength = passwordInputValue.length;
+        const uppercasePassword = uppercaseRegExp.test(passwordInputValue);
+        const lowercasePassword = lowercaseRegExp.test(passwordInputValue);
+        const digitsPassword = digitsRegExp.test(passwordInputValue);
+        const minLengthPassword = minLengthRegExp.test(passwordInputValue);
+        let errMsg = '';
+        if (passwordLength === 0) {
+          errMsg = t('passwordIsEmpty', 'Password is empty');
+        } else if (!uppercasePassword) {
+          errMsg = t('atLeastOneUppercase', 'At least one Uppercase');
+        } else if (!lowercasePassword) {
+          errMsg = t('atLeastOneLowercase', 'At least one Lowercase');
+        } else if (!digitsPassword) {
+          errMsg = t('atLeastOneDigit', 'At least one digit');
+        } else if (!minLengthPassword) {
+          errMsg = t('minimum8Characters', 'Minimum 8 characters');
+        } else if (passwordInput.oldPassword.length > 0 && passwordInput.newPassword === passwordInput.oldPassword) {
+          errMsg = t('newPasswordMustNotBeTheSameAsOld', 'New password must not be the same as password');
+        } else {
+          errMsg = '';
+          setIsNewPasswordInvalid(false);
+        }
+        setNewPasswordErr(errMsg);
+      } else if (
+        passwordInputFieldName === 'confirmPassword' ||
+        (passwordInputFieldName === 'newPassword' && passwordInput.confirmPassword.length > 0)
+      ) {
+        if (passwordInput.confirmPassword !== passwordInput.newPassword) {
+          setConfirmPasswordError(t('confirmPasswordMustBeTheSameAsNew', 'Confirm password must be the same as new'));
+        } else {
+          setConfirmPasswordError('');
+          setIsConfirmPasswordInvalid(false);
+        }
+      } else {
+        if (passwordInput.newPassword.length > 0 && passwordInput.newPassword === passwordInput.oldPassword) {
+          setOldPasswordErr(t('oldPasswordMustNotBeTheSameAsNew', 'Old password must not be the same as new'));
+        } else {
+          setOldPasswordErr('');
+          setIsOldPasswordInvalid(false);
+        }
+      }
+    },
+    [passwordInput.confirmPassword, passwordInput.newPassword, passwordInput.oldPassword, t],
+  );
+
+  useEffect(() => {
+    if (passwordInput.oldPassword !== '') {
+      handleValidation(passwordInput.oldPassword, 'oldPassword');
+    }
+    if (passwordInput.newPassword !== '') {
+      handleValidation(passwordInput.newPassword, 'newPassword');
+    }
+    if (passwordInput.confirmPassword !== '') {
+      handleValidation(passwordInput.confirmPassword, 'confirmPassword');
+    }
+  }, [handleValidation, passwordInput]);
+
+  const handlePasswordChange = (event) => {
+    const passwordInputValue = event.target.value.trim();
+    const passwordInputFieldName = event.target.name;
+    const NewPasswordInput = { ...passwordInput, [passwordInputFieldName]: passwordInputValue };
+    setPasswordInput(NewPasswordInput);
+  };
+
+  const handleSubmit = useCallback(
+    async (evt: React.FormEvent<HTMLFormElement>) => {
+      evt.preventDefault();
+      setIsSavingPassword(true);
+      performPasswordChange(passwordInput.oldPassword, passwordInput.confirmPassword)
+        .then(() => {
+          close();
+          navigate({ to: `\${openmrsSpaBase}/logout` });
+          showSnackbar({
+            isLowContrast: true,
+            kind: 'success',
+            subtitle: t('userPasswordUpdated', 'User password updated successfully'),
+            title: t('userPassword', 'User password'),
+          });
+        })
+        .catch((error) => {
+          setIsSavingPassword(false);
+          showSnackbar({
+            title: t('invalidPasswordCredentials', 'Invalid password provided'),
+            kind: 'error',
+            isLowContrast: false,
+            subtitle: error?.message,
+          });
+        });
+    },
+    [close, passwordInput.confirmPassword, passwordInput.oldPassword, t],
+  );
+
+  return (
+    <>
+      <ModalHeader closeModal={close} title={t('changePassword', 'Change Password')} />
+      <ModalBody>
+        <Tile>
+          <Form onSubmit={handleSubmit} ref={formRef}>
+            <div className={styles['input-group']}>
+              <Layer>
+                <PasswordInput
+                  id="oldPassword"
+                  invalid={oldPasswordError.length > 0}
+                  invalidText={oldPasswordError}
+                  labelText={t('oldPassword', 'Old Password')}
+                  name="oldPassword"
+                  value={passwordInput.oldPassword}
+                  onChange={handlePasswordChange}
+                  ref={oldPasswordInputRef}
+                  required
+                  showPasswordLabel="Show old password"
+                />
+              </Layer>
+              <Layer>
+                <PasswordInput
+                  id="newPassword"
+                  invalid={newPasswordError.length > 0}
+                  invalidText={newPasswordError}
+                  labelText={t('newPassword', 'New Password')}
+                  name="newPassword"
+                  value={passwordInput.newPassword}
+                  onChange={handlePasswordChange}
+                  ref={newPasswordInputRef}
+                  required
+                  showPasswordLabel="Show new password"
+                />
+              </Layer>
+              <Layer>
+                <PasswordInput
+                  id="confirmPassword"
+                  invalid={confirmPasswordError.length > 0}
+                  invalidText={confirmPasswordError}
+                  labelText={t('confirmPassword', 'Confirm Password')}
+                  name="confirmPassword"
+                  value={passwordInput.confirmPassword}
+                  onChange={handlePasswordChange}
+                  ref={confirmPasswordInputRef}
+                  required
+                  showPasswordLabel="Show confirm password"
+                />
+              </Layer>
+            </div>
+          </Form>
+        </Tile>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button
+          type="submit"
+          onClick={handleSubmit}
+          disabled={isSavingPassword || isNewPasswordInvalid || isConfirmPasswordInvalid || isOldPasswordInvalid}
+        >
+          {t('updatePassword', 'Update Password')}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+}

packages/esm-system-admin-app/src/change-password-modal/change-password-modal.scss

@@ -0,0 +1,9 @@
+.input-group {
+  :global(.cds--label) {
+    margin-top: 1rem;
+  }
+
+  :global(.cds--text-input) {
+    background-color: white;
+  }
+}

packages/esm-system-admin-app/src/change-password-modal/change-password-modal.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ChangePasswordModal from './change-password-modal.component';
+import userEvent from '@testing-library/user-event';
+
+describe(`Change Password Modal`, () => {
+  it('should change user locale', async () => {
+    const user = userEvent.setup();
+
+    render(<ChangePasswordModal close={jest.fn()} />);
+    expect(screen.getByRole('button', { name: /Apply/ })).toBeDisabled();
+
+    await user.type(screen.getByLabelText(/Old Password/i), 'my-password');
+    await user.type(screen.getByLabelText(/New Password/i), 'my-password');
+    await user.type(screen.getByLabelText(/Confirm Password/i), 'my-password');
+    await user.click(screen.getByRole('button', { name: /Apply/i }));
+  });
+});

packages/esm-system-admin-app/src/change-password-modal/change-password-model.resource.ts

@@ -0,0 +1,16 @@
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export async function performPasswordChange(oldPassword: string, newPassword: string) {
+  return openmrsFetch(`/ws/rest/v1/password`, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: {
+      oldPassword: oldPassword,
+      newPassword: newPassword,
+    },
+  }).then((res) => {
+    return res;
+  });
+}

packages/esm-system-admin-app/src/index.ts

@@ -34,3 +34,13 @@ export const legacySystemAdminPageCardLink = getAsyncLifecycle(
   () => import('./dashboard/legacy-admin-page-link.component'),
   options,
 );
+
+export const changePasswordButton = getAsyncLifecycle(
+  () => import('./change-password-button/change-password-button.component'),
+  options,
+);
+
+export const changePasswordModal = getAsyncLifecycle(
+  () => import('./change-password-modal/change-password-modal.component'),
+  options,
+);

packages/esm-system-admin-app/src/routes.json

@@ -15,6 +15,20 @@
       "slot": "system-admin-page-card-link-slot",
       "component": "legacySystemAdminPageCardLink",
       "order": 0
+    },
+    {
+      "name": "change-password",
+      "slot": "user-panel-slot",
+      "component": "changePasswordButton",
+      "online": true,
+      "offline": true,
+      "order": 3
+    },
+    {
+      "name": "change-password-modal",
+      "component": "changePasswordModal",
+      "online": true,
+      "offline": true
     }
   ],
   "pages": [

packages/esm-system-admin-app/translations/ar.json

@@ -1,5 +1,23 @@
 {
+  "atLeastOneDigit": "رقم واحد على الأقل",
+  "atLeastOneLowercase": "حرف صغير واحد على الأقل",
+  "atLeastOneUppercase": "حرف كبير واحد على الأقل",
+  "cancel": "يلغي",
+  "changePassword": "تغيير كلمة المرور",
   "config": "الإعدادات",
+  "confirmPassword": "تأكيد كلمة المرور",
+  "confirmPasswordMustBeTheSameAsNew": "تأكيد كلمة المرور يجب أن تكون هي نفسها الجديدة",
+  "invalidPasswordCredentials": "",
   "legacyAdmin": "إدارة النظام القديم",
   "systemAdmin": "إدارة النظام"
+  "minimum8Characters": "الحد الأدنى 8 أحرف",
+  "newPassword": "كلمة المرور الجديدة",
+  "newPasswordMustNotBeTheSameAsOld": "كلمة المرور الجديدة يجب ألا تكون نفس كلمة المرور",
+  "oldPassword": "كلمة المرور القديمة",
+  "oldPasswordMustNotBeTheSameAsNew": "يجب ألا تكون كلمة المرور القديمة هي نفس كلمة المرور الجديدة",
+  "passwordIsEmpty": "كلمة المرور فارغة",
+  "systemAdmin": "إدارة النظام",
+  "updatePassword": "تطوير كلمة السر",
+  "userPassword": "كلمة مرور المستخدم",
+  "userPasswordUpdated": "تم تحديث كلمة مرور المستخدم بنجاح"
 }

packages/esm-system-admin-app/translations/en.json

@@ -1,5 +1,23 @@
 {
+  "atLeastOneDigit": "At least one digit",
+  "atLeastOneLowercase": "At least one Lowercase",
+  "atLeastOneUppercase": "At least one Uppercase",
+  "cancel": "Cancel",
+  "changePassword": "Change Password",
   "config": "Configurations",
+  "confirmPassword": "Confirm Password",
+  "confirmPasswordMustBeTheSameAsNew": "Confirm password must be the same as new",
+  "invalidPasswordCredentials": "",
   "legacyAdmin": "Legacy Admin",
   "systemAdmin": "System Administration"
+  "minimum8Characters": "Minimum 8 characters",
+  "newPassword": "New Password",
+  "newPasswordMustNotBeTheSameAsOld": "New password must not be the same as password",
+  "oldPassword": "Old Password",
+  "oldPasswordMustNotBeTheSameAsNew": "Old password must not be the same as new",
+  "passwordIsEmpty": "Password is empty",
+  "systemAdmin": "System Administration",
+  "updatePassword": "Update Password",
+  "userPassword": "User password",
+  "userPasswordUpdated": "User password updated successfully"
 }