(feat) O3-4100 - Login flow single-page redesign #1192
Conversation
|
@denniskigen & @gracepotma |
|
Hi @suubi-joshua , please fix the tests. CI is failing. Great description on this PR though, that's very helpful and clear! |
suubi-joshua
changed the title
|
@brandones Thanks for the review fixed the failures. The config for |
| > | ||
| <Help size={24} /> | ||
| </button> | ||
| {user && ( |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
| ); | ||
|
|
||
| if (!loginProvider || loginProvider.type === 'basic') { |
There was a problem hiding this comment.
I'm a little concerned about removing this since the support for other loginProviders is a feature that now seems to be removed?
There was a problem hiding this comment.
I will restore this
|
|
||
| const continueLogin = useCallback(() => { | ||
| const usernameField = usernameInputRef.current; | ||
|
|
||
| if (usernameField.value && usernameField.value.trim()) { | ||
| navigate('/login/confirm'); |
There was a problem hiding this comment.
It seems like the loss of navigate() results in a regression in functionality where the username and password are displayed on separate "screens", but if I mess up entering my user name and click continue, I can now no longer go back to fix that.
There was a problem hiding this comment.
@ibacher I kindly ask for more elaboration on this. Cause in the new design after inputing the username and click continue the password field renders below the username field and incase I messed up the username i can edit it just above the password field. Cause I am seeing no need of the back button if I i render the username just above the password field after I continue.
Screencast from 23-11-24 21:24:41.webm
Requirements
feat,fix, orchore, among others). See existing PR titles for inspiration.For changes to apps
If applicable
Summary
I have basically tried to implement the designs drafted by Ciaran for the login page the designs can be seen via the linked ticket. What I have done is to create a carbon tile in the footer to house the wording in the openmrs logo, also a button that links to the openmrs website. I also moved the logos container to the right bottom of the screen.
There was a suggestion by Ciaran to render password field after validating username but this may pose a security threat as discussed here . But I have still enabled conditional rendering ie the password field renderson the same screen when user inputs username and clicks the continue button.
Also because of the additons in the footer I have tried to make sure that the elements are responsive on different screens.
Screenshots
Video
Screencast from 30-10-24 22:15:19.webm
Related Issue
https://openmrs.atlassian.net/browse/O3-4100
Other