Auto suggest username #1022

balsa-asanovic · 2024-01-28T23:24:38Z

Problem

As described in issue #112 this PR addresses the suggestion of username for user account creation based on full name input.

Solution

Usernames are suggested based on the given full name in the following manner:

Just the first word of the given name
The first letter of the first word + all other full words
The full first word + first letters of all other words
First letters of all words except last + full last word
All words of a name joined without white spaces

Also, all suggestions with less than 3 characters are filtered out.

This PR fixes #112

Testing

Manually tested
Added unit tests in web/src/components/users/utils.test.js

Screenshots

Three suggestions are given: name+surname nameInitial+surname name+surnameInitial

balsa-asanovic · 2024-01-28T23:38:38Z

web/src/components/users/FirstUser.jsx

@@ -166,6 +172,26 @@ export default function FirstUser() {
    setFormValues({ ...formValues, [name]: value });
  };

+  const suggestUsernames = (fullName) => {


I'll start immediately with some uncertainties 😄

When the user types two words for the full name, these current suggestions work well.

However, if the user's full name has more than two words (names), the choice is not so clear.
People having longer full names is a common thing in some parts of the world (like Spain) and with the current approach to suggesting the username, Ronaldo Luís Nazário de Lima would be presented with the following choices:

The issues are apparent, the first suggestion is pretty long, the second might be as well and only the third one might be okay.

Should we maybe take only the first two words (names)?
Or maybe some other approach entirely, feel free to make a suggestion.

I see your point, but I fear that guessing which are the right or expected parts is a bit difficult due to the fact on how different can be personal names around the world (long and old article).

Therefore, I wouldn't worry too much about them. They are just suggestions. Of course, the idea is to show up the more sensible ones, but we can't do so for every single user. I propose below as first. Some of them are based on feedback received in the issue, some are not:

Just the first word (the simplest approach)

To make @kobliha happy

Lubos Kocman: lubos

Imobach González Sosa: imobach

Ronaldo Luís Nazário de Lima: ronaldo

First letter of first word plus second word

It satisfies the original request from @lkocman

Lubos Kocman: lkocman

Imobach González Sosa: igonzalez

Ronaldo Luís Nazário de Lima: rluis

First letter of first word plus all other words

It would suggest a username like the one @imobachgs have at SUSE

Lubos Kocman: lkocman

Imobach González Sosa: igonzalezsosa

Ronaldo Luís Nazário de Lima: rluisnazariodelima

First word plus first letter of the other words (maybe with a limit of just 2 more words?)

Lubos Kocman: lubosk

Imobach González Sosa: imobachgs

Ronaldo Luís Nazário de Lima: ronaldolndl (or ronaldoln if using a limit)

First letter of all words except the last one, which would be complete

Lubos Kocman: lkocman

Imobach González Sosa: igsosa

Ronaldo Luís Nazário de Lima: rlndlima

All words

Lubos Kocman: luboskocman

Imobach González Sosa: imobachgonzalezsosa

Ronaldo Luís Nazário de Lima: ronaldoluiznaariodelima

So, after removing duplicates, suggestions for these users will be,

Lubos Kocman Imobach González Sosa Ronaldo Luís Nazário de Lima

lubos

lkocman

lubosk

imobach

igonzalez

igonzalezsosa

imobachgs

igsosa

imobachgonzalezsosa

ronaldo

rluis

rluisnazariodelima

ronaldolndl (or ronaldoln)

rlndlima

ronaldoluiznaariodelima

I do not have strong preference and ideas from others are welcome. I think that we can release the feature with these few (or even only the three or four first ones) and wait for more suggestion requests.

BTW, as you can see in my examples above, I prefer not using the "special characters" in the suggested username (accents and friends). See https://stackoverflow.com/a/70288180 and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

dgdavid · 2024-02-02T08:40:07Z

web/src/components/users/FirstUser.jsx

@@ -166,6 +172,26 @@ export default function FirstUser() {
    setFormValues({ ...formValues, [name]: value });
  };

+  const suggestUsernames = (fullName) => {
+    const cleanedName = fullName.replace(/[^\p{L}\p{N} ]/gu, "").toLowerCase();


NP: At least for me, that line deserves an explanation / comment 🤯

Also, I'm not sure if it pays off.

NP: At least for me, that line deserves an explanation / comment 🤯

Haha, indeed, this was weird for me as well.
This has almost identical effect as the regular expression /[^a-zA-Z0-9 ]/g, which cleans the string from all characters except alphanumeric and blank spaces.
However, when I just used this initially, non English characters (like š, ć, č, ...) would also get removed.

So, after googling for a bit, I found that since ECMAScript 2018 Unicode property escapes are available for regular expressions in JavaScript. So, the '\p{L}' matches any character from any language and '\p{N}' matches any numeric character.

Also, I'm not sure if it pays off.

Of course, it is another thing should something like this be used at all. When I coded this, the idea was that users could enter some special characters in their full names, like ',', '.', ';', '-', '"', etc,... And I supposed that this isn't something that should be a part of the username.

Thanks a lot for the explanation!

If we keep it in the code, definitely it deserves a comment above it.

However, I think that "johnq.diaz" is a valid username for "John Q. Díaz" where "johnqdíaz" is not. If I'm right, we can sanitize the name in another way or with other regular expression. Either way, a comment in the code is more than welcome for future developers.

Keep going!

Replace strong with bold tag

…ovic/agama into auto-suggest-username

balsa-asanovic · 2024-02-19T23:40:34Z

Hey @dgdavid

Sorry for a bit of a delay with these changes.

I've been on a vacation the week before last and then last week had some catching up to do.

I think I've addressed all your comments, so please check it out when you find the time.

I've modified the suggestUsername method in accordance with your suggestions and moved it to utils.js file

web/src/components/users/utils.test.js

dgdavid · 2024-02-27T09:17:22Z

How should the keyboard commands be handled here? When the user is focused on username input field, should the arrow down key press start going through the options of the dropdown list?

I think so. Plus Enter should select the suggestion, like the click does.

Or maybe use Tab?

No, Tab should respect the normal flow of the form and just jump to the next field.

coveralls · 2024-02-27T14:04:56Z

coverage: 74.566% (+0.03%) from 74.532%
when pulling eb79c6f on balsa-asanovic:auto-suggest-username
into 0951b8c on openSUSE:master.

dgdavid

@balsa-asanovic,

I've had a short chat with @imobachgs about the state of this PR. We've conclude that it looks good to us as it is now :) 💪 🎉

We think that the keyboard support can be done as a follow-up PR, following the same approach we are trying to apply in the team to avoid long PRs. You can do it if you want to keep working in this area, or just open an issue for it and pick another one to work on if you prefer something new instead.

So, just adding the changes file is enough for merging it into master. Also, you can update/reword a bit the PR description if you don't mind, since it is a bit outdated if I'm not wrong.

Thanks a lot!

dgdavid · 2024-02-27T14:12:19Z

Sorry, not much knowledge about the accessibility topic 😅 That said, I do like how it looks and it sort of clears up any dilemma about what is being suggested in the dropdown

Ok, let's release it as it is and gather feedback from users.

balsa-asanovic · 2024-02-28T22:45:07Z

Hay @dgdavid

First, as always thank you a lot for continued support and mentorship. 👏

You can do it if you want to keep working in this area, or just open an issue for it and pick another one to work on if you prefer something new instead.

Well, since I started working on this, I guess I would like to finish that part as well.
Should I open this issue even in the case that I'll be working on it?

So, just adding the changes file is enough for merging it into master. Also, you can update/reword a bit the PR description if you don't mind, since it is a bit outdated if I'm not wrong.

I've logged changes and also updated a bit the description of the PR

web/src/components/users/utils.test.js

It's a test that have a lot of unknown words because they are username suggestions. It makes sense to disable the spell checker in this case.

dgdavid

LGTM 👍 thanks a ton!

dgdavid · 2024-02-29T10:47:49Z

Hay @dgdavid

First, as always thank you a lot for continued support and mentorship. 👏

Anytime!

Should I open this issue even in the case that I'll be working on it?

I don't think so, just reference this or #112 in the new PR description and/or the entry in the changes file.

I've logged changes and also updated a bit the description of the PR

And now it's merged :)

## Problem In #1022 the username auto-suggest feature was introduced, but the dropdown with usernames didn't support keyboard navigation. This PR aims to solve this, It introduces navigation with arrow keys (up and down) and sets the value on the press of Enter. fixes #1070 ## Solution Now checking for keyboard events on the username input field and on the arrow presses changing the index of the selected menu item, highlighting the appropriate one. On the press of Enter, again using the current value of index, the text input is populated with a value from the usernames array.

Prepare for releasing Agama 8. It includes the following pull requests: * #884 * #886 * #914 * #918 * #956 * #957 * #958 * #959 * #960 * #961 * #962 * #963 * #964 * #965 * #966 * #969 * #970 * #976 * #977 * #978 * #979 * #980 * #981 * #983 * #984 * #985 * #986 * #988 * #991 * #992 * #995 * #996 * #997 * #999 * #1003 * #1004 * #1006 * #1007 * #1008 * #1009 * #1010 * #1011 * #1012 * #1014 * #1015 * #1016 * #1017 * #1020 * #1022 * #1023 * #1024 * #1025 * #1027 * #1028 * #1029 * #1030 * #1031 * #1032 * #1033 * #1034 * #1035 * #1036 * #1038 * #1039 * #1041 * #1042 * #1043 * #1045 * #1046 * #1047 * #1048 * #1052 * #1054 * #1056 * #1057 * #1060 * #1061 * #1062 * #1063 * #1064 * #1066 * #1067 * #1068 * #1069 * #1071 * #1072 * #1073 * #1074 * #1075 * #1079 * #1080 * #1081 * #1082 * #1085 * #1086 * #1087 * #1088 * #1089 * #1090 * #1091 * #1092 * #1093 * #1094 * #1095 * #1096 * #1097 * #1098 * #1099 * #1100 * #1102 * #1103 * #1104 * #1105 * #1106 * #1109 * #1110 * #1111 * #1112 * #1114 * #1116 * #1117 * #1118 * #1119 * #1120 * #1121 * #1122 * #1123 * #1125 * #1126 * #1127 * #1128 * #1129 * #1130 * #1131 * #1132 * #1133 * #1134 * #1135 * #1136 * #1138 * #1139 * #1140 * #1141 * #1142 * #1143 * #1144 * #1145 * #1146 * #1147 * #1148 * #1149 * #1151 * #1152 * #1153 * #1154 * #1155 * #1156 * #1157 * #1158 * #1160 * #1161 * #1162 * #1163 * #1164 * #1165 * #1166 * #1167 * #1168 * #1169 * #1170 * #1171 * #1172 * #1173 * #1174 * #1175 * #1177 * #1178 * #1180 * #1181 * #1182 * #1183 * #1184 * #1185 * #1187 * #1188 * #1189 * #1190 * #1191 * #1192 * #1193 * #1194 * #1195 * #1196 * #1198 * #1199 * #1200 * #1201 * #1203 * #1204 * #1205 * #1206 * #1207 * #1208 * #1209 * #1210 * #1211 * #1212 * #1213 * #1214 * #1215 * #1216 * #1217 * #1219 * #1220 * #1221 * #1222 * #1223 * #1224 * #1225 * #1226 * #1227 * #1229

balsa-asanovic added 2 commits January 29, 2024 00:11

added username suggestion based on full name

5ac5eee

Three suggestions are given: name+surname nameInitial+surname name+surnameInitial

added classes for styling dropdown in username suggestions

5d3e42f

balsa-asanovic commented Jan 28, 2024

View reviewed changes

This comment was marked as outdated.

Sign in to view

dgdavid reviewed Feb 2, 2024

View reviewed changes

balsa-asanovic added 8 commits February 5, 2024 20:37

Merge branch 'openSUSE:master' into auto-suggest-username

bae02a2

Merge branch 'openSUSE:master' into auto-suggest-username

e42c4be

removed trailing space from transalation

502a230

Replace strong with bold tag

Merge branch 'openSUSE:master' into auto-suggest-username

83bbf5b

moved suggestUsernames method to utils.js file

1f9badf

created utils.js file with method for username suggestion

94dce4d

unit tests for utils.js file

b71102d

Merge branch 'auto-suggest-username' of https://github.com/balsa-asan…

a5e4a59

…ovic/agama into auto-suggest-username

This comment was marked as outdated.

Sign in to view

balsa-asanovic added 3 commits February 25, 2024 23:09

moved suggestions menu to internal component

06a89e6

updated the algorithm for suggestion to be more readable

11db225

updated tests for suggestions algorithm

3cbb674

This comment was marked as outdated.

Sign in to view

dgdavid reviewed Feb 27, 2024

View reviewed changes

web/src/components/users/utils.test.js Show resolved Hide resolved

dgdavid reviewed Feb 27, 2024

View reviewed changes

balsa-asanovic force-pushed the auto-suggest-username branch from 6f5fced to 3cbb674 Compare February 28, 2024 22:23

balsa-asanovic added 2 commits February 28, 2024 23:24

Merge branch 'openSUSE:master' into auto-suggest-username

b53085d

logged changes

75b9781

dgdavid reviewed Feb 28, 2024

View reviewed changes

web/src/components/users/utils.test.js Show resolved Hide resolved

Disable cspell in test file

eb79c6f

It's a test that have a lot of unknown words because they are username suggestions. It makes sense to disable the spell checker in this case.

dgdavid approved these changes Feb 29, 2024

View reviewed changes

dgdavid merged commit 8946391 into agama-project:master Feb 29, 2024
1 check passed

dgdavid mentioned this pull request Mar 5, 2024

Add keyboard support for auto-suggested usernames #1070

Closed

balsa-asanovic deleted the auto-suggest-username branch March 22, 2024 22:20

balsa-asanovic mentioned this pull request Mar 27, 2024

Added keyboard support when navigating suggested usernames #1122

Merged

dgdavid mentioned this pull request Apr 3, 2024

web: unexpected user suggestions behavior #1124

Closed

imobachgs mentioned this pull request May 17, 2024

Update to release 8 #1232

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Auto suggest username #1022

Auto suggest username #1022

balsa-asanovic commented Jan 28, 2024 •

edited

Loading

balsa-asanovic Jan 28, 2024

dgdavid Feb 1, 2024 •

edited

Loading

This comment was marked as outdated.

dgdavid Feb 2, 2024 •

edited

Loading

dgdavid Feb 2, 2024

balsa-asanovic Feb 2, 2024

dgdavid Feb 9, 2024

balsa-asanovic commented Feb 19, 2024

This comment was marked as outdated.

This comment was marked as outdated.

dgdavid commented Feb 27, 2024 •

edited

Loading

coveralls commented Feb 27, 2024 •

edited

Loading

dgdavid left a comment •

edited

Loading

dgdavid commented Feb 27, 2024

balsa-asanovic commented Feb 28, 2024

dgdavid left a comment

dgdavid commented Feb 29, 2024

Auto suggest username #1022

Auto suggest username #1022

Conversation

balsa-asanovic commented Jan 28, 2024 • edited Loading

Problem

Solution

Testing

Screenshots

balsa-asanovic Jan 28, 2024

Choose a reason for hiding this comment

dgdavid Feb 1, 2024 • edited Loading

Choose a reason for hiding this comment

This comment was marked as outdated.

dgdavid Feb 2, 2024 • edited Loading

Choose a reason for hiding this comment

dgdavid Feb 2, 2024

Choose a reason for hiding this comment

balsa-asanovic Feb 2, 2024

Choose a reason for hiding this comment

dgdavid Feb 9, 2024

Choose a reason for hiding this comment

balsa-asanovic commented Feb 19, 2024

This comment was marked as outdated.

This comment was marked as outdated.

dgdavid commented Feb 27, 2024 • edited Loading

coveralls commented Feb 27, 2024 • edited Loading

dgdavid left a comment • edited Loading

Choose a reason for hiding this comment

dgdavid commented Feb 27, 2024

balsa-asanovic commented Feb 28, 2024

dgdavid left a comment

Choose a reason for hiding this comment

dgdavid commented Feb 29, 2024

balsa-asanovic commented Jan 28, 2024 •

edited

Loading

dgdavid Feb 1, 2024 •

edited

Loading

dgdavid Feb 2, 2024 •

edited

Loading

dgdavid commented Feb 27, 2024 •

edited

Loading

coveralls commented Feb 27, 2024 •

edited

Loading

dgdavid left a comment •

edited

Loading