(feat) O3-5027: Implement beautiful configurable login page #1460

UjjawalPrabhat · 2025-09-24T19:46:40Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. Ensure your PR title includes a conventional commit label (such as feat, fix, or chore, among others). See existing PR titles for inspiration.

If applicable

My work is based on designs, which are linked or shown either in the Jira ticket or the description below.
My work includes tests or is validated by existing tests.
I have updated the esm-framework mock to reflect any API changes I have made.

Summary

This PR implements a beautiful and configurable login page for OpenMRS 3.x as part of the OMRS Hackathon 2025. The login page now supports:

Configurable images and branding
Custom messages for planned downtime
Improved visual design and user experience
Responsive layout for different screen sizes

Related Issue

https://issues.openmrs.org/browse/O3-5027

Other

This work was completed as part of the OpenMRS Hackathon 2025. The implementation focuses on making the login page easily configurable while maintaining a beautiful and professional appearance.

sherrif10 · 2025-09-25T10:05:01Z

packages/apps/esm-login-app/src/background/background-wrapper.component.tsx

+
+      case 'gradient':
+        if (background.value) {
+          style.background = background.value;


Hello @UjjawalPrabhat , We need Loginbackground to be configurable, i went ahead and tested your code .Check this out.
loginbackground.webm These changes override the default login image.

Hey @sherrif10, the Logo change config you're referring to wasn't implemented by me. It was there from before and therefore the logo is editable. If you're referring to background change then that is available in a separate section called as background.
Do you want me to make the Logo constant?
Also please let me know if there's any other changes or enhancements required.

We need the login page to look like this . Share the vedio of your changes before and after

@sherrif10 could you send the images used in this the login page?

Hello @UjjawalPrabhat , We want to come up with something like that in the image i shared, FYI , Login page is already configurable, the only changes needed is to make login page appear like that.

@sherrif10 I'm on it. I was talking about the images used like the 3 doctor's and logo image used in the login page. It'd be easier for me to configure then

Yes it needs to be configurable and when the configuration is set to default, Default OMRS login page should appear, Then you should consider making it appear left or right on the login page.

tendomart · 2025-09-25T15:00:37Z

Watching

UjjawalPrabhat · 2025-09-25T15:26:27Z

Hey @sherrif10, @tendomart
I was just further enhancing the config features and wanted to ask if how the system-messages is shown in the image ok or should I make it a rectangular bar type somewhat like before, covering the left and right edges of the screen?

sherrif10 · 2025-09-28T05:48:27Z

packages/apps/esm-login-app/src/system-messages/system-messages.component.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useCallback, useMemo } from 'react';


Lets only focus on login page for now, This can come back in separate ticket cc @denniskigen

I agree with @sherrif10 we should first focus on having an image side by side with the login form he shared above

hey @UjjawalPrabhat did you have a chance to look at how it was implemented at https://github.com/METS-Programme/esm-ugandaemr-login ?
I don't think you really need to come up with something completely new

@denniskigen can you please help us approve the workflows here

I agree with @sherrif10 we should first focus on having an image side by side with the login form he shared above

hey @UjjawalPrabhat did you have a chance to look at how it was implemented at https://github.com/METS-Programme/esm-ugandaemr-login ? I don't think you really need to come up with something completely new

@tendomart Thanks for this. I actually implemented it from scratch and then saw this when i was about to commit. But I made all the required changes including login page switch b/w uganda-emr and default, configurable system-messages and background.
@sherrif10 Please review my changes and let me know if any further changes required.

sherrif10 · 2025-10-02T10:27:21Z

packages/apps/esm-login-app/src/background/background-wrapper.component.tsx

+import styles from './background-wrapper.scss';
+
+// Import Uganda EMR background for default usage
+const getUgandaEmrBackgroundUrl = () => {


This is not supposed to be called Ugandaemr. its supposed to be generic. You are simply picking what was done in uganda emr and do it this side as simple as that. Like i had said. We only need the design, on the implementation side, An implementor simply needs to configure a background image and The login page , What is left is designing the page,

Hello @UjjawalPrabhat Also remember for all this to happen out of the box. You need to map this image on the server either via dockerFile in openmrs distro to let docker pick the path such that immediately you start openmrs-esm-login -app, it can pick that Path and renders it via config that we made in esm-login-app. cc @reagan-meant @ibacher

Ideally, the user can just supply a (relative) URL in configuration and that will be used to display the image. We should not be doing anything to fetch the image, especially using require() and the like, which only work if the image is part of the login app.

sherrif10 · 2025-10-02T10:38:59Z

packages/apps/esm-login-app/src/background/background-wrapper.scss

+  }
+}
+
+// Uganda EMR specific background styles (from original app)


Please remove those openmrs images and ugandaEMR image. Those are supposed to be handled by the server.

ibacher · 2025-10-03T14:57:17Z

This PR has way too many changes not related to the Login page. Can we please remove those changes from this PR completely? PRs that are larger than they need to be are usually impossible to merge in because they will break too many things.

ibacher · 2025-10-03T14:58:25Z

packages/apps/esm-login-app/src/background/background-wrapper.component.tsx

+import styles from './background-wrapper.scss';
+
+// Import Uganda EMR background for default usage
+const getUgandaEmrBackgroundUrl = () => {


Ideally, the user can just supply a (relative) URL in configuration and that will be used to display the image. We should not be doing anything to fetch the image, especially using require() and the like, which only work if the image is part of the login app.

@ibacher

Significantly reduced the number of changed files based on @ibacher's comments. Removed all framework modifications and simplified the background image handling to use direct URLs. All the configurable login features are still there - just implemented more cleanly now. Should be much easier to review and merge.

UjjawalPrabhat · 2025-10-03T17:46:33Z

@ibacher @sherrif10 @tendomart

Fixed the scope issues! They're all just in the login app now.

Removed the framework stuff and simplified the image loading like you asked - now it just uses URLs directly instead of bundling assets.

All the login customization still works (backgrounds, layouts, branding, etc.) but it's much cleaner implementation.

Ready for another look when you get a chance 👍

UjjawalPrabhat mentioned this pull request Sep 24, 2025

(feat) O3-5027: Implement beautiful configurable login page #1458

Closed

4 tasks

denniskigen added the omrs25hackathon Tasks from the OMRS 25 hackathon label Sep 24, 2025

sherrif10 reviewed Sep 25, 2025

View reviewed changes

sherrif10 reviewed Sep 28, 2025

View reviewed changes

sherrif10 reviewed Oct 2, 2025

View reviewed changes

ibacher requested changes Oct 3, 2025

View reviewed changes

UjjawalPrabhat force-pushed the feature/configurable-login-page branch from 0cd6e18 to 4f67b63 Compare October 3, 2025 17:38

UjjawalPrabhat added 3 commits October 3, 2025 23:23

Merge branch 'openmrs:main' into feature/configurable-login-page

a52afaa

Merge branch 'openmrs:main' into feature/configurable-login-page

523002d

Merge branch 'openmrs:main' into feature/configurable-login-page

4b0f4a3

UjjawalPrabhat requested a review from ibacher October 5, 2025 00:14

		@@ -0,0 +1,88 @@
		import React, { useState, useCallback, useMemo } from 'react';

(feat) O3-5027: Implement beautiful configurable login page #1460

Are you sure you want to change the base?

(feat) O3-5027: Implement beautiful configurable login page #1460

Uh oh!

Conversation

UjjawalPrabhat commented Sep 24, 2025

Requirements

If applicable

Summary

Related Issue

Other

Uh oh!

sherrif10 Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

UjjawalPrabhat Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tendomart commented Sep 25, 2025

Uh oh!

UjjawalPrabhat commented Sep 25, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sherrif10 Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sherrif10 Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ibacher commented Oct 3, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

UjjawalPrabhat commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

sherrif10 Sep 25, 2025 •

edited

Loading

UjjawalPrabhat Sep 25, 2025 •

edited

Loading

sherrif10 Oct 2, 2025 •

edited

Loading

sherrif10 Oct 2, 2025 •

edited

Loading

UjjawalPrabhat commented Oct 3, 2025 •

edited

Loading