@ampath/esm-login-app 8.0.0-next.6 → 8.0.0-next.8

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.6"}
+{"$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.8"}

package/package.json

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

package/src/login/login.component.tsx

@@ -17,6 +17,9 @@ import styles from './login.scss';
 import { getEmail, getOtp } from '../resources/otp.resource';
 import { getOtpEnabledStatus } from '../utils/get-base-url';
 import image from '../assets/medicine.jpg';
+import openmrsLogo from '../assets/openmrs.jpg';
+import dhaLogo from '../assets/dha.png';
+import gokLogo from '../assets/gok.png';
 
 export interface LoginReferrer {
   referrer?: string;
@@ -102,7 +105,7 @@ const Login: React.FC = () => {
         const session = sessionStore.session;
         const authenticated = sessionStore?.session?.authenticated;
 
-        if (isOtpEnabled !== true) {
+        if (isOtpEnabled === true) {
           if (authenticated) {
             if (session.sessionLocation) {
               let to = loginLinks?.loginSuccess || '/home';
@@ -212,38 +215,89 @@ const Login: React.FC = () => {
     return (
       <>
         <div className={styles.wrapperContainer}>
-          <div className={styles.container}>
-            <Tile className={styles.loginCard}>
-              {errorMessage && (
-                <div className={styles.errorMessage}>
-                  <InlineNotification
-                    kind="error"
-                    subtitle={errorMessage}
-                    title={getCoreTranslation('error')}
-                    onClick={() => setErrorMessage('')}
-                  />
+          <div className={styles.logoContainer}>
+            <div className={styles.container}>
+              <Tile className={styles.loginCard}>
+                {errorMessage && (
+                  <div className={styles.errorMessage}>
+                    <InlineNotification
+                      kind="error"
+                      subtitle={errorMessage}
+                      title={getCoreTranslation('error')}
+                      onClick={() => setErrorMessage('')}
+                    />
+                  </div>
+                )}
+                <div className={styles.center}>
+                  <Logo t={t} />
                 </div>
-              )}
-              <div className={styles.center}>
-                <Logo t={t} />
-              </div>
-              <form onSubmit={handleSubmit}>
-                <div className={styles.inputGroup}>
-                  <TextInput
-                    id="username"
-                    type="text"
-                    name="username"
-                    autoComplete="username"
-                    labelText={t('username', 'Username')}
-                    value={username}
-                    onChange={changeUsername}
-                    ref={usernameInputRef}
-                    required
-                    autoFocus
-                  />
-                  {showPasswordOnSeparateScreen ? (
-                    <>
-                      <div className={showPasswordField ? undefined : styles.hiddenPasswordField}>
+                <form onSubmit={handleSubmit}>
+                  <div className={styles.inputGroup}>
+                    <TextInput
+                      id="username"
+                      type="text"
+                      name="username"
+                      autoComplete="username"
+                      labelText={t('username', 'Username')}
+                      value={username}
+                      onChange={changeUsername}
+                      ref={usernameInputRef}
+                      required
+                      autoFocus
+                    />
+                    {showPasswordOnSeparateScreen ? (
+                      <>
+                        <div className={showPasswordField ? undefined : styles.hiddenPasswordField}>
+                          <PasswordInput
+                            id="password"
+                            labelText={t('password', 'Password')}
+                            name="password"
+                            autoComplete="current-password"
+                            onChange={changePassword}
+                            ref={passwordInputRef}
+                            required
+                            value={password}
+                            showPasswordLabel={t('showPassword', 'Show password')}
+                            invalidText={t('validValueRequired', 'A valid value is required')}
+                            aria-hidden={!showPasswordField}
+                            tabIndex={showPasswordField ? 0 : -1}
+                          />
+                        </div>
+                        {showPasswordField ? (
+                          <Button
+                            type="submit"
+                            className={styles.continueButton}
+                            renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
+                            iconDescription={t('loginButtonIconDescription', 'Log in button')}
+                            disabled={!isLoginEnabled || isLoggingIn}
+                          >
+                            {isLoggingIn ? (
+                              <InlineLoading
+                                className={styles.loader}
+                                description={t('loggingIn', 'Logging in') + '...'}
+                              />
+                            ) : (
+                              t('login', 'Log in')
+                            )}
+                          </Button>
+                        ) : (
+                          <Button
+                            type="submit"
+                            className={styles.continueButton}
+                            renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
+                            iconDescription="Continue to password"
+                            onClick={(evt) => {
+                              evt.preventDefault();
+                              continueLogin();
+                            }}
+                            disabled={!isLoginEnabled}
+                          >
+                            {t('continue', 'Continue')}
+                          </Button>
+                        )}
+                      </>
+                    ) : (
+                      <>
                         <PasswordInput
                           id="password"
                           labelText={t('password', 'Password')}
@@ -255,16 +309,12 @@ const Login: React.FC = () => {
                           value={password}
                           showPasswordLabel={t('showPassword', 'Show password')}
                           invalidText={t('validValueRequired', 'A valid value is required')}
-                          aria-hidden={!showPasswordField}
-                          tabIndex={showPasswordField ? 0 : -1}
                         />
-                      </div>
-                      {showPasswordField ? (
                         <Button
                           type="submit"
                           className={styles.continueButton}
                           renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
-                          iconDescription={t('loginButtonIconDescription', 'Log in button')}
+                          iconDescription="Log in"
                           disabled={!isLoginEnabled || isLoggingIn}
                         >
                           {isLoggingIn ? (
@@ -276,54 +326,19 @@ const Login: React.FC = () => {
                             t('login', 'Log in')
                           )}
                         </Button>
-                      ) : (
-                        <Button
-                          type="submit"
-                          className={styles.continueButton}
-                          renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
-                          iconDescription="Continue to password"
-                          onClick={(evt) => {
-                            evt.preventDefault();
-                            continueLogin();
-                          }}
-                          disabled={!isLoginEnabled}
-                        >
-                          {t('continue', 'Continue')}
-                        </Button>
-                      )}
-                    </>
-                  ) : (
-                    <>
-                      <PasswordInput
-                        id="password"
-                        labelText={t('password', 'Password')}
-                        name="password"
-                        autoComplete="current-password"
-                        onChange={changePassword}
-                        ref={passwordInputRef}
-                        required
-                        value={password}
-                        showPasswordLabel={t('showPassword', 'Show password')}
-                        invalidText={t('validValueRequired', 'A valid value is required')}
-                      />
-                      <Button
-                        type="submit"
-                        className={styles.continueButton}
-                        renderIcon={(props) => <ArrowRightIcon size={24} {...props} />}
-                        iconDescription="Log in"
-                        disabled={!isLoginEnabled || isLoggingIn}
-                      >
-                        {isLoggingIn ? (
-                          <InlineLoading className={styles.loader} description={t('loggingIn', 'Logging in') + '...'} />
-                        ) : (
-                          t('login', 'Log in')
-                        )}
-                      </Button>
-                    </>
-                  )}
-                </div>
-              </form>
-            </Tile>
+                      </>
+                    )}
+                  </div>
+                </form>
+              </Tile>
+            </div>
+            <div className={styles.logoSection}>
+              <div className={styles.leftLogos}>
+                <img src={gokLogo} alt="GOK logo" className={styles.supportingLogos} />
+                <img src={dhaLogo} alt="DHA logo" className={styles.dhaLogo} />
+              </div>
+              <img src={openmrsLogo} alt="OpenMRS logo" className={styles.openmsrsLogo} />
+            </div>
           </div>
           <img className={styles.image} src={image} alt="TAIFA CARE" />
         </div>

package/src/login/login.scss

@@ -46,13 +46,13 @@
 }
 
 .logo {
-  margin-bottom: layout.$spacing-08;
+  // margin-bottom: layout.$spacing-08;
   height: layout.$spacing-11;
   width: 16rem;
 }
 
 .logoImg {
-  margin-bottom: layout.$spacing-09;
+  // margin-bottom: layout.$spacing-03;
   max-width: 100%;
 }
 
@@ -179,3 +179,69 @@
   max-height: 60rem;
   object-fit: cover;
 }
+
+.poweredBy {
+  display: flex;
+  align-items: center;
+  justify-self: flex-end;
+  font-size: 0.75rem;
+  color: $color-gray-70;
+  color: $text-02;
+  opacity: 0.85;
+  white-space: nowrap;
+  font-weight: bold;
+  margin-bottom: layout.$spacing-08;
+}
+
+.poweredByLogo {
+  margin-left: 0.5rem;
+  width: 2rem;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+
+.logoContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.logoSection {
+  position: absolute;
+  bottom: layout.$spacing-06;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 layout.$spacing-06;
+  gap: 20rem;
+}
+
+.leftLogos {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  border: 2px solid lightgray;
+  border-radius: 0.5rem;
+}
+
+.supportingLogos {
+  margin-left: 0.5rem;
+  width: 3rem;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+.dhaLogo {
+  margin-left: 0.5rem;
+  width: 4rem;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}
+.openmsrsLogo {
+  margin-left: 0.5rem;
+  width: 6rem;
+  height: auto;
+  object-fit: contain;
+  border-radius: 0.5rem;
+}

package/src/logo.component.tsx

@@ -3,20 +3,19 @@ import { interpolateUrl, useConfig } from '@openmrs/esm-framework';
 import { type TFunction } from 'i18next';
 import { type ConfigSchema } from './config-schema';
 import styles from './login/login.scss';
+import taifaCare from './assets/Taifa-Care.png';
+import amrsLogo from './assets/ampath-logo.png';
 
 const Logo: React.FC<{ t: TFunction }> = ({ t }) => {
   const { logo } = useConfig<ConfigSchema>();
-  return logo.src ? (
-    <img
-      alt={logo.alt ? t(logo.alt) : t('openmrsLogo', 'OpenMRS logo')}
-      className={styles.logoImg}
-      src={interpolateUrl(logo.src)}
-    />
-  ) : (
-    <svg role="img" className={styles.logo}>
-      <title>{t('openmrsLogo', 'OpenMRS logo')}</title>
-      <use href="#omrs-logo-full-color"></use>
-    </svg>
+  return (
+    <>
+      <img alt={logo.alt ? t(logo.alt) : t('openmrsLogo', 'OpenMRS logo')} className={styles.logoImg} src={taifaCare} />
+      <span className={styles.poweredBy}>
+        {t('poweredBy', 'Powered by AMRS')}{' '}
+        <img src={amrsLogo} alt={t('taifaCare', 'TAIFA CARE logo')} className={styles.poweredByLogo} />
+      </span>
+    </>
   );
 };