-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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.
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
Login page layout improvements #61144
Comments
Pinging @elastic/kibana-core-ui (Team:Core UI) |
I know we're not super far in our internationalization efforts, but having every button on each line will be easier to work with across a variety of languages (unless you're ok with the button widths not lining up nicely with the form width) |
+1 I had mentioned to Cristina in a Slack chat the button size change felt least certain for making the cut. She noted her own reservations when sharing these screenshots. |
I'm also in favor of the first one, due to the same concerns. |
ToS was just an example, Kibana login assistance message can contain literally anything that markdown can handle: from simple maintenance notification to any sort of pre-login warnings that are configured by the Kibana admin through |
One more thing to add to the Kibana login page:
|
Pinging @elastic/kibana-security (Team:Security) |
I've labeled this with Team:Security, but the Core UI team can assist with the design. I'll start with some mockups that capture the above suggested changes + the feedback from Shay today. Regarding the latter, there is some clarification needed to differentiate between the SAML and Basic form actions. This may benefit from some layout changes but, most importantly, some text to help explain what is going on. The particular use case that stood out to me is:
As it stands, it's not clear which log in mechanism to use - click the SAML button or submit the form. It may also come as a bit of a surprise that the former will redirect you to the Cloud log in which, upon logging in, routes you back to Kibana. |
@alexfrancoeur @AlonaNadler Is there any input from the Kibana PM side for these log in page changes? Wanting to loop you in, just in case. |
Thank you! Maybe let's take a step back a bit first and outline all the scenarios we have to keep in mind before we spend time on mocking and implementing anything in code. After a product review it became obvious that not everyone realizes what cases are possible, how complex they can be and basically how everything can work together. Please bear with me. TerminologyLogin Selector - the screen you see when you go to Kibana's Login Form - is a part of Login Selector that includes username and password text fields and Login Selector Entries - needs a better name, are representing part of the Login Selector that provides alternative means of login. Think of something like Login Assistance Message - is a part of Login Selector that can display helpful content in markdown (links, emphasis etc.) and is configured by Kibana Admin (hence by Cloud as well). Login Info Message - is a part of Login Selector that can display basic plain text and is solely reserved for a set of predefined messages (e.g. notify user about the reason of logout) First of all, the Login Selector appearance is mainly dictated by the configuration provided by the Kibana Admin in Login formThis form supports the following cases:
There is no way currently for Kibana to know whether user can change password or not before they log in and there are just 2 out of 5 realms for which it would actually make sense. If we decide to add In 7.7+ or 7.8+ we can potentially allow Kibana admin to set Question for Cloud: @legrego brought a good point yesterday, we have a Login Assistance Message support since 7.6.0. @andrew-moldovan @jowiho Any reason you couldn't use it to display Login Selector EntriesFrom the user perspective we can split the types of flow that Login Selector Entries can trigger into two different categories: Flows that involve 3rd-party (SAML and OpenID Connect)These flows require external Identity Provider (Auth0, Okta or brand new Cloud IdP fwiw) to authenticate the user before it can log in to Kibana. And hence users will have to be redirected back and forth. That's a usual flow you see literally everywhere these days when you log in with Google or Okta. I'm still not entirely getting where the confusion around Flows that don't involve 3rd-party (Kerberos and PKI)These flows don't require additional user involvement, when users click on these buttons they will immediately log in to Kibana assuming their "credentials" are valid. In some sense this flow is very similar to the Login Form flow, but instead of username and password that user used to enter manually, browser will automatically provide its client certificate or a special TGT token that Kibana will use to log user in. Login SelectorAs you may have already guessed, Login Selector will either display Login Form, or Login Selector Entries, or both. Kibana can also display Login Assistance Message if needed. Everything is determined by the configuration Kibana Admin would like to have.
Yeah, I agree. Since Login Form is used for a number of different realms and there is no clear logical link from Cloud to these form it's much more confusing that it can be. Feels like a context problem to me. We also should keep in mind that Cloud is just one context (albeit important), but not the only one in which Kibana Login Selector is used. So we need something that fits everywhere or is configurable (again Login Assistance Message was done exactly for that).
I'd like Cloud to chime in here to understand the desired flow as well since having just ability to log in to Kibana with multiple realms turned out to be just a tip of an iceberg. We are eager to help here, but we need more details.
/cc @arisonl |
@azasypkin took a look at
They're going to be native ES users for now. Cloud does not have any RBAC in place so we can't create separate users. That's today, in the future we do want to be able to create Cloud users that will be managed by Cloud, but they should have the same login flow as the "one" Cloud user today. |
Hmm, that is still purely operational task and if it's considered to be a difficult one we could make it only as a part of next upgrade like we most likely will have to do anyway if we decide to implement a new thing on Kibana side. But you're right, let's move this
I see, thanks. |
Based upon recent feedback, I've added a 'Forgot password?' link to the log in form which opens a flyout for further instructions. This saves us from adding a bunch of text to the page (via the log in assistance message) and keeps the full form in view as opposed to blocking it with a modal. The wording in the flyout is just my initial take at trying to accommodate what I understand to be the two scenarios most likely at play - 1) I'm a cloud admin/user who forgot my deployment creds or 2) I'd like to log in but I don't have a Cloud account and may/may not have a Kibana username/pw (i.e. an admin sets me up via Kibana > Management > Users). There are several ways the link could be worded. I felt that 'Forgot password?' is succinct and the most familiar even if, in this specific case, there is a little more going on. Some other alternatives that came to mind were:
In the self-hosted setup, there would (presumably) be no 'Forgot password?' link and thus no accompanying flyout. The mockup below also re-orders the content so that the SAML buttons are underneath the log in form, as suggested in the description of this issue. Figma prototypeScreenshot from prototype |
@ryankeairns thanks so much for the updated mockups! Tagging others who expressed an interest: @bytebilly @jowiho @snide @arisonl |
@ryankeairns would it be too wordy to modify the message to "If you are a cloud user and having trouble login" in the "forgot your password" flyout? |
What about the confused Cloud user who normally just clicks on their deployment link in Cloud UI to get automatically SSO'ed, but who now sees the login screen for the first time because they bookmarked their Kibana? They should just click on "Elastic Cloud SAML" (that caption should be improved) of course, but they might be trying to enter their cloud credentials in the login/password form. How do we help those users? |
The idea is that we can customize the text to say whatever we want -- this will be configurable by cloud via To be more explicit, the following pieces of text will be configurable by cloud:
|
Updated the mockup in my previous comment:
|
Nice mockup @ryankeairns! There is something that I'd like to better understand, because I still feel that we could help users in a different manner. The possible confusion I see with the current proposal is:
The main point is that the owner of the deployment is the only one that can login via Elastic Cloud (unless I'm missing something), so this should be super-clear in this page. Also, Cloud SSO and custom SSO are put on the same level, but they are very different (custom SSO can be used by "regular" users, while Cloud SSO cannot). What about adding a sentence like "If you are the owner of this deployment" to clarify who is allowed to use Elastic Cloud SSO? I also have a couple of suggestions/questions, coming while approaching this login screen as the "dummy user" that is not already familiar with it.
Let me know what you think! |
+++ Will cloud SSO exist only for ESS or also for ECE? |
@azasypkin and @jowiho discussed a possible simpler solution, which I'll try to outline here: Rather than trying to encode all of this information into the login screen, we could use the existing
This would be a link to a cloud docs page which could explain all of the different scenarios based on the user type. This has the following advantages: No code changes required to KibanaCloud could configure Kibana without any additional work on the Kibana side, via the existing Documentation can be dynamicIf we encode all of these instructions into Kibana itself (even via I think this is important because Cloud SSO will continue to improve over time, which will allow for more users and user types to exist. The changing nature of Cloud SSO means that the instructions/help text will likely want to change too, once it's possible for "average Kibana users" (non-deployment owners) to login via Cloud SSO. We wouldn't want to force-restart Kibana instances to get new help text, nor would we want existing instances to live stale help text. LocalizationAn externally linked doc has the possibility of being localized, whereas hard-coded messages in MetricsWe can collect metrics on how many page visits this documentation link receives, to see how effective our login experience is going forward |
@bytebilly I can answer a couple of those:
I would also add that, in my opinion, adding more text to the base log in screen will eventually have the opposite effect we desire. It will become noisy and possibly begin to stir doubt and confusion. The flyout neatly tucks much of this away, so I'd recommend keeping the explanation over there without getting too verbose. |
Thanks everyone for the feedback and @ryankeairns for the hard work on trying to accommodate all the great suggestions we're having here! But let's try to finally settle on something that's reasonable, feasible and most importantly solves the main problem that spurred that discussion: Cloud users aren't always sure how to log in to Kibana and having a choice makes this issue more apparent. We believe that the simple solution outlined by @legrego in #61144 (comment) can solve this problem and has the most reasonable cost/value ratio at the moment along with other benefits (l10n, telemetry etc.). We'll definitely iterate further once we have data for the more informed decisions.
So there are three questions:
|
I filed https://github.com/elastic/cloud/issues/54532 on the Cloud side a few days ago on how we were going to add the loginAssistanceMessage from Cloud. In short, it's doable, especially if we're just linking to a docs page. |
@azasypkin is the proposed wording we should be looking at what is in the prototype? Happy to pull folks in to do a review. |
To clarify, the wording is my 'best guess' and definitely needs more consideration. That said, I'm not sure that we've settled on the final design/UX yet. |
I believe right now we're trying to settle on the design proposal you've made initially and we already have in 7.7.0. The another design/flow that @snide is working on currently will likely be available only in 7.8.0.
As @ryankeairns noted we don't really have any wording yet, we need some simple text for the link that will lead to the Cloud docs page with instructions/clarifications/etc. (see the assistance message in highlighted area on the screenshot above). This help link will likely be used by the user only once so I think good enough text would do the job. P.S. re-ordering of buttons and form is probably something we can still squeeze into 7.7.0 if everyone thinks it's better. |
@alexfrancoeur @arisonl can you propose wordage? Please focus on making sure the user understands the the "task" they are performing. Please add me to review. |
These were the latest round of designs discussed over slack. Again, the main importance here is presenting the question before the answer. Don't show the login forms till the user has made that first decision. Copy in the "help" text is verbose, but I can't think of a way around it at the moment. If possible. I would suggest these changes for 7.7. @ryankeairns had a comment that maybe the help text could be a modal, instead of a dedicated page. I'm fine with that if others feel similar. |
Regarding the text a couple of thoughts. Current organization favors the administrator flow, is that what we want, should we be optimizing for normal users? This is very verbose, can we remove cognitive load for end users by putting them first in the order of the explanation and perhaps have something you expand if you are an administrator? I think we can simplify the wordage too. Will take a look at that in a bit. |
@VijayDoshi Feel free to give it a shot. It could definitely be improved. I'm a serial documenter so I tend to be overly verbose. Any editing would be appreciated. |
@azasypkin Do we know the email address of the administrator for the deployment they are logging into at this point in the flow? |
@VijayDoshi We don't know the email address at this moment |
Proposed text:
|
@VijayDoshi here you go in prototype form. Slight copy changes. https://www.figma.com/proto/1yRyEEPb8NMcPOj2cbybQB/Kibana-SSO-login?node-id=1%3A126&scaling=min-zoom |
Bad link, fixed. |
We could remove the Basic Primer on Logging into Kibana title IMO. |
@VijayDoshi Should we specify the "account" should be the native Kibana user account instead of cloud admin account? |
Clicking on "Login with Elastic Cloud" in figma currently leads to the Cloud login page. TBC: that only happens when your Cloud SSO session has expired. If you still have an active Cloud SSO session, clicking on "Login with Elastic Cloud" will directly log you into Kibana.
I agree that "use the account you created on Elastic Cloud" is ambiguous. Do we mean your personal Elastic Cloud account, or the "elastic" count that was created when you created your deployment? I guess the first (because the paragraph after this deals with the "elastic" account"), but then the text should just say "If you set up this deployment, click on Login with Elastic Cloud". No need to talk about resetting passwords there, because clicking on that button leads you to the Cloud login page that includes a "Forgot your password" link. |
About the "When you set up a deployment.." text. This could be improved. Firstly, it doesn't actually tell you that you can use the "elastic" account to login. On the contrary, it suggests that the "elastic" account is used for other purposes like Beats. Secondly, "something called the Elastic account" can be sharper, like "a local account with the username elastic" (not the lowercase e in elastic). Finally, "if you you've lost that password you can reset it.." can be sightly more concise "You can reset the password for that account.." |
Good feedback, how about this:
. |
Nit: "elastic" user is with a lower case "e". Not sure if ES usernames are case sensitive, but we use all lowercase everywhere else. |
FYI the |
Where do the "Kibana account" and "Cloud account" links point to in this primer? The fact that they are separate is the root of the confusion and I am not sure to what extent "Kibana account" is clear to all users. Since the new experience is aiming 7.8, would it make sense to put together a nice and simple 2-minute explanatory video to bridge the gap, possibly as part of the 7.8 marketing activities for Cloud SSO and link it from the Primer? |
We're planning to start working on these improvements this week so that we can deliver that on time. @snide, thanks for the mock-ups! I have few questions that we need to clarify before we can start working on this. Please see some details on what login selector consists of and what cases we need to support here:
The exact wording/links of the customizable Cloud-specific part is out of scope here, relevant people can discuss it in a separate issue in the Cloud repository in parallel to not clutter this thread even more. Also "Kibana Account" term may not work for the cases when Login Form is used for LDAP/AD authentication that is technically not "Kibana account", so it seems it's not generic enough to me. |
Thanks. Answering inline.
No. I'd skip to the login screen. The choice screen should only exist if more choices are available.
Given that these are generally used to overtake and give messaging. I'd put it on both.
Agree with you, state transition, rather than distinct pages is likely fine to keep it fast.
Assuming you're talking about the logo for the SAML one. I would certainly try for it if you can. Think of our own internal systems. Seeing the "Elastic" logo when I auth to Github gives me some confidence in my selection. That said, I think it's fine to do an bool check on it if no icon exists. I'm happy to give you a design PR to rough out the UI. I just need the state flows.
Given the problem I've been presented, which is that there are two separate login systems and users are unlikely to know which selection to make (at least initially) I think it's worthwhile.
To wherever they would go if they hit the unauthed page directly. So back to the login selector if they have choices, back to the form if they don't.
Understood. Given the limitations, when you have a PR going, I'm happy to do the grunt work to fill this stuff in and make sure we get the proper wording / signoff from everyone. Sounds like we've just got a markdown, flat file. @VijayDoshi and I can figure it out. |
Improvements for the Login Selector discussed here were merged and will be available starting from 7.8.0. Parts of the Login Selector that Kibana Admin and/or Cloud will be able to customize are outlined here |
Potential follow-on work based upon: #53010
Following are a few design and UX considerations, by way of the Cloud design team, that would also better align our login pages.
Re-order
Re-order + smaller buttons
cc:/ @cristina-eleonora
The text was updated successfully, but these errors were encountered: