Page Comparison

Redesigned single-page login flow

• The login experience has been redesigned as a single-page flow for better user experience. When a user first arrives, they see only the username field. After entering their username, the password field smoothly appears below it.

  The login page features a new attribution footer, positioned discretely in the bottom left corner. This footer contains four distinct elements in sequence:

  • The text "Built with"

  • The standard OpenMRS logo sprite

  • The descriptive text "An open-source medical record system and global community

  • A "Learn more" link that takes users to the OpenMRS website

• Each logo object includes:

  • url - direct path to the logo image

  • altText - accessible description of the logo for screen readers

  • width - logo width in pixels

  • height - logo height in pixels

  Implementation-specific logos, when configured in the login page configuration, will appear in the bottom right corner of the page, creating a balanced layout opposite to the attribution footer. These logos can be customized through the login page configuration.

  All elements in the footer maintain consistent styling with the rest of the interface while ensuring clear visibility and accessibility.

Customizable implementation logos

You can now add custom logos for your implementation to the Login page through configuration. These logos appear in the footer, displayed sequentially after the default OpenMRS sprite.

Configuration details

Add logos by including an additionalLogos array in the login page configuration:

{
  "footer": {
    "additionalLogos": [
      {
        "url": "path/to/logo.png",
        "altText": "Organization Name",
        "width": 100,
        "height": 50
      }
    ]
  }
}

• Each logo object includes:

  • url - direct path to the logo image

  • altText - accessible description of the logo for screen readers

  • width - logo width in pixels

  • height - logo height in pixels

These logos appear in the same orders as they are defined in the array. All the logos are positioned after the default OpenMRS sprite. Each logo maintains its specified dimensions while respecting responsive design principles. The list of logos is then displayed in the bottom right hand corner of the login page, opposite the attribution footer.

These changes provide a balanced way for implementations to maintain both OpenMRS identity and their own individual branding on the login page.