Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

(feat) O3-4100 - Login flow single-page redesign #1192

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+217 −156
Open

(feat) O3-4100 - Login flow single-page redesign #1192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a42687
Login page UI enhancement
suubi-joshua Oct 30, 2024
1d2ecd0
Fix the showpasswordonseparatescreen config
suubi-joshua Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions packages/apps/esm-help-menu-app/src/help-menu/help.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import React, { useState, useEffect, useRef } from 'react';
import classNames from 'classnames';
import { Help } from '@carbon/react/icons';
import { useSession } from '@openmrs/esm-framework'
import HelpMenuPopup from './help-popup.component';
import styles from './help.styles.scss';

export default function HelpMenu() {
const { user } = useSession();
const [helpMenuOpen, setHelpMenuOpen] = useState(false);
const helpMenuButtonRef = useRef(null);
const popupRef = useRef(null);
Expand Down Expand Up @@ -35,15 +37,17 @@ export default function HelpMenu() {

return (
<>
<button
aria-expanded={helpMenuOpen}
aria-controls="help-menu-popup"
onClick={toggleHelpMenu}
ref={helpMenuButtonRef}
className={classNames(styles.helpMenuButton)}
>
<Help size={24} />
</button>
{user && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I understand why we've added this restriction? Seems both unrelated and like we may want the opportunity for implementers to show the HelpMenu on the login screen.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ibacher sorry about this, I dont know why this is showing up as a change cause it is related to this if the help button appears in that position it blocks the logos.
Yes this is unrelated to this but not sure why it showing as a change since its already part of core.

<button
aria-expanded={helpMenuOpen}
aria-controls="help-menu-popup"
onClick={toggleHelpMenu}
ref={helpMenuButtonRef}
className={classNames(styles.helpMenuButton)}
>
<Help size={24} />
</button>
)}
{helpMenuOpen && (
<div id="help-menu-popup" ref={popupRef} className={styles.helpMenuPopup}>
<HelpMenuPopup />
Expand Down
28 changes: 23 additions & 5 deletions packages/apps/esm-login-app/src/footer.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { interpolateUrl, useConfig } from '@openmrs/esm-framework';
import { useConfig, ArrowRightIcon } from '@openmrs/esm-framework';
import { Tile, Button } from '@carbon/react';
import { useTranslation } from 'react-i18next';
import { type ConfigSchema } from './config-schema';
import styles from './login/login.scss';
Expand All @@ -11,11 +12,28 @@ const Footer: React.FC = () => {

return (
<div className={styles.footer}>
<p className={styles.poweredByTxt}>{t('poweredBy', 'Powered by')}</p>
<Tile className={styles.poweredByTile}>
<div className={styles.poweredByContainer}>
<span className={styles.poweredByText}>{t('builtWith', 'Built with')}</span>
<svg role="img" className={styles.poweredByLogo}>
<use href="#omrs-logo-full-color"></use>
</svg>
<span className={styles.poweredByText}>
{t('poweredBySubtext', 'An open-source medical record system and global community')}
</span>
<Button
className={styles.learnMore}
iconDescription={t('learnMore', 'Learn More')}
kind="ghost"
onClick={() => window.open('https://openmrs.org', '_blank')}
renderIcon={(props) => <ArrowRightIcon {...props} size={20} className={styles.arrowRightIcon}/>}
>
<span>{t('learnMore', 'Learn More')}</span>
</Button>
</div>
</Tile>

<div className={styles.logosContainer}>
<svg role="img" className={styles.poweredByLogo}>
<use href="#omrs-logo-partial-mono"></use>
</svg>
{logos.map((logo, index) => (
<img
key={index}
Expand Down
Loading
Loading