(feat) O3-3423: Allow user to change password (#1045)

packages/apps/esm-login-app/src/change-password/change-password.extension.tsx

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

packages/apps/esm-login-app/src/change-password/change-password.modal.tsx

@@ -0,0 +1,57 @@
+import React, { type ChangeEvent, useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineLoading, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
+import styles from './change-password-modal.scss';
+import { Form, PasswordInput } from '@carbon/react';
+
+interface ChangePasswordModalProps {
+  close(): void;
+}
+
+export default function ChangeLanguageModal({ close }: ChangePasswordModalProps) {
+  const { t } = useTranslation();
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+  const [oldPassword, setOldPassword] = useState<string>();
+  const [newPassword, setNewPassword] = useState<string>();
+  const [confirmPassword, setConfirmPassword] = useState<string>();
+
+  const handleSubmit = useCallback(() => {
+    setIsChangingPassword(true);
+  }, []);
+
+  return (
+    <>
+      <ModalHeader closeModal={close} title={t('changePassword', 'Change password')} />
+      <ModalBody>
+        <div className={styles.languageOptionsContainer}>
+          <Form>
+            <PasswordInput
+              onChange={(event: ChangeEvent) => setOldPassword(event.target.nodeValue)}
+              labelText={t('oldPassword', 'Old Password')}
+            />
+            <PasswordInput
+              onChange={(event: ChangeEvent) => setNewPassword(event.target.nodeValue)}
+              labelText={t('newPassword', 'New Password')}
+            />
+            <PasswordInput
+              onChange={(event: ChangeEvent) => setConfirmPassword(event.target.nodeValue)}
+              labelText={t('confirmPassword', 'Confirm New Password')}
+            />
+          </Form>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={close}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.submitButton} disabled={isChangingPassword} type="submit" onClick={handleSubmit}>
+          {isChangingPassword ? (
+            <InlineLoading description={t('changingLanguage', 'Changing password') + '...'} />
+          ) : (
+            <span>{t('change', 'Change')}</span>
+          )}
+        </Button>
+      </ModalFooter>
+    </>
+  );
+}

packages/apps/esm-login-app/src/change-password/change-password.scss

@@ -0,0 +1,10 @@
+.panelItemContainer a {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.panelItemContainer div {
+  display: flex;
+  align-items: center;
+}

packages/apps/esm-login-app/src/index.ts

@@ -1,10 +1,10 @@
-import { defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import rootComponent from './root.component';
 import locationPickerComponent from './location-picker/location-picker.component';
 import changeLocationLinkComponent from './change-location-link/change-location-link.extension';
+import changePasswordLinkComponent from './change-password/change-password.extension';
 import logoutButtonComponent from './logout/logout.extension';
-
 const moduleName = '@openmrs/esm-login-app';
 
 const options = {
@@ -22,3 +22,6 @@ 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 passwordChanger = getSyncLifecycle(changePasswordLinkComponent, options);
+
+export const changePasswordModal = getAsyncLifecycle(() => import('./change-password/change-password.modal'), options);

packages/apps/esm-login-app/src/routes.json

@@ -32,6 +32,13 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "password-changer",
+      "slot": "user-panel-slot",
+      "component": "passwordChanger",
+      "online": true,
+      "offline": true
+    },
     {
       "name": "location-changer",
       "slot": "user-panel-slot",
@@ -40,5 +47,11 @@
       "offline": true,
       "order": 1
     }
+  ],
+  "modals": [
+    {
+      "name": "change-password-modal",
+      "component": "changePasswordModal"
+    }
   ]
 }