auto-suggestion of username done differently

[lkocman]

I love freedom (unlike in windows user generation) where I'm stuck initially with what they decide. However I was quite unhappy about the username generation in the old installer which usually generated luboskocman and I have to always do a correction otherwise I'd have to extensively use .ssh/config to override user etc.

This auto-suggestion feature is something I missed in the first-time user experience with the installer.

Fedora and other distros would suggest lkocman. Which would be my personal preference as well.

I think this should be our preferred generation as 99% of SUSE employees have such account anyway.
I'm not sure what the rules is for complex names like "Homer Jay Simpson" etc.

[michaela559]

hello, can you specify what you mean? Do you not want the auto-suggestion, or make it in a way where it doesn't actually generate your username, only writes it somewhere for you to "get inspired by"...?

[imobachgs]

I guess @lkocman wants autosuggestion, but a different one, isn't it? So for "Lubos Kocman" the suggestion should be lkocman instead of luboskocman. For long names, I am unsure. In SUSE I am igonzalezsosa (from Imobach González Sosa) which is rather long but works.

[kobliha]

And when creating a new user name, I always use "lukas". So, not so simple :D

[dgdavid]

I think this is now kind of stale good-first-issue. So let me try to move it on 😉

About which one should be the right suggestion, I believe that Agama is the perfect excuse for trying to think a bit different and do not fill the username input text automatically.

Firstly, if the input gets filled with a suggestion the user does not like it, we are just adding a not needed extra step: remove it before writing the desired one. Not a big deal, though, but completely avoidable.

Second, autofilling the input limits the suggestion to only one. A bit poor considering how cheap would be for us, as developers, to provide a few suggestions instead. For me, the question is how to provide them to the user through the UI. Good news is that I have two ideas 😄

• Using actionable badgets for choosing, if wanted, a suggestion.

  This can be done using the PF/Label. The idea is to show a few suggestions once the users finish writing their name (not sure now on which event, honestly; matter of testing which works better, the onBlur or a delay after the last keystroke)

  These labels can be placed BEFORE the username input. As a result, the keyboard focus will land there after leaving the name input field. If users don't like any of the suggestions, this may be an unnecessary "trap": they have to loop over all of them before reaching the input to type the desired one.

  

  But it is also possible to place them after the username input. By doing so, we give users the option to type their preferred username or to simply pick one from the suggestions. You can think that the user could be trapped in a similar way to the above when trying to reach the password input. In reality, they will not, because suggestions must disappear once they begin typing.

  

• Borrowing the autocompletion from PatternFly auto generated password example.

  The idea is to display the suggestions in a dropdown once the user reach the username input. Suggestions will remain until selecting one or start typing.

  

---

Please, don't think too much about wording or styling in the screenshots above, but rather focus on your feedback about which one might be better. Try to keep the A11y in mind when thinking about them: not everyone uses a mouse, and some users need screen readers that must announce these options.

Wording and styling something we can discuss once we have a plan for introducing the username suggestions features.

[balsa-asanovic]

I like the most your first suggestion, where the suggestion badges are placed below the username input field

• Using actionable badgets for choosing, if wanted, a suggestion.

So, this one:

My second choice would be this:

• Borrowing the autocompletion from PatternFly auto generated password example.

While I like the least the option where suggestions are placed above the username input field.
Somehow, it just feels wrong (possibly due to usually encountering this sort of suggestion below the field in question, not sure)

However, when addressing accessibility maybe the least intrusive and at the same time the most familiar way of doing this is - Borrowing the autocompletion from [PatternFly auto generated password example]

For example, if the user decides to type the password after typing the Full name, she/he would get stuck in the suggestion badges in both cases (being above or below the input field), this wouldn't be the issue for the dropdown solution.

This is probably an unlikely scenario 😄 , but maybe something to consider.

[dgdavid]

Thanks for your quick feedback, appreciated.

I you ask me, although I put the three options my preferred is the last one. I think it is the less intrusive not only because the "focus trap" but also because it does not involve "moving fields" when appears or dissappesrs. I.e., the form height doesn't change and everything still in the same place since the suggestions would be in a fly-out menu that is shown/announced automatically when the input gets the focus and would disappear as soon as the user start typing (i.e., ignoring the suggestions).

BTW,

• the three suggestions in the screenshots are just an example. Of course, we can agree in which suggestions make sense. What is more, they can be added or removed as long as we collect feedback. I.e., not needed to come with the final suggestions before start working on this.
• the repeated "Use suggested username" sentenced in the screenshot above is just s reminder for myself about A11y and screen readers. As said, these screenshots were just for illustrating the idea that going for more than one suggestion is "easily" possible.

[balsa-asanovic]

I you ask me, although I put the three options my preferred is the last one. I think it is the less intrusive not only because the "focus trap" but also because it does not involve "moving fields" when appears or dissappesrs. I.e., the form height doesn't change and everything still in the same place since the suggestions would be in a fly-out menu that is shown/announced automatically when the input gets the focus and would disappear as soon as the user start typing (i.e., ignoring the suggestions).

Agreed.

I do like the look of those badges, but the dropdown seems to be a smart choice 😄

[dgdavid]

I do like the look of those badges

I like it too. We could reserve the space forthem in attempt to avoid the other elements changing their position. But,

• At first sight the gap will feel weird, as if something were missing there.
• How many rows should be reserved? It's to early for start thinking in horizontal scroll for a feature like this.

but the dropdown seems to be a smart choice 😄

Definitely, I'd give it a try. I believe it could help to ship the feature in an almost "transparent" way at the same time that avoids all the mentioned "inconvenients".

[balsa-asanovic]

If you haven't already done some work on this, I could take this on as well?

However, judging by those screenshots you did 😄

[dgdavid]

No, I haven't useful code. These screenshots are just in place mockups I did for illustrating the ideas I had in mind. But you wouldn't like to see how dirty the code is. And I wouldn't show it 😜 In any case, displayed suggestions were hardcoded text, so it's needed

• the code for creating suggestions based on the value of name input
• the code for displaying them in the UI considering all the things discussed
• automated tests for the above

So, you can go ahead if you wish. But my personal recommendation is to address issues one by one instead of working simultaneously in them. But that's just my opinion :)

[balsa-asanovic]

So, you can go ahead if you wish. But my personal recommendation is to address issues one by one instead of working simultaneously in them. But that's just my opinion :)

Agreed. I'd work on this after #872 is done.

So, I am just making a reservation 😄.

Of course, if there is some need for speed 🚀 here, I can give it up.