XWIKI-22121: Improve the registration experience #3155

Sereza7 · 2024-06-05T15:55:00Z

Jira URL

https://jira.xwiki.org/browse/XWIKI-22121

Changes

Description

Part A: Make the registration immediately visible: changed the position of the registration login/logout buttons in the UI.
Part B: Improve live validation (especially for the password)
Part C: Improved the default page displayed after a successful registration

Clarifications

Extra details in the jira ticket.
The most tricky part was the overhaul of livevalidation. Before, validation was handled by field. In order to display a status that's more detailed, I needed to increase granularity and keep a state based on each validation rule for each field. Trying to keep backwards compatibility was a bit challenging and would explain the high amount of safeguards I used in the code.

Screenshots & Video

2024-06-04.13-58-09.mp4

(note that there was a small bug with the display name after the successful registration on the video, it's been fixed since this video has been recorded)

On the video, we can see, in this order:

The page location element (based on livevalidation) is still completely functional -- testing backwards compatibility
The logged in UI is the same as before.
The guest UI does not have anything in the drawer anymore. The login and register buttons are in the top right navbar instead.
The form for registration now has a better support. Every validation has its own message.
When the account is created, the new UI with a welcome picture is displayed.

Executed Tests

Successfully built xwiki-platform-administration with the quality, integration-tests and docker profiles. Built xwiki-platform-flamingo-skin too. The only fails left are already here on the CI (without the changes from this branch).
Manual tests, see video. For backward compatibility of the livevalidation feature, I tested on the page location form (no changes to this form, but everything worked properly still). Note that it would be good to test more backward compatibility with a couple other forms, but AFAIK this is the only other use of livevalidation_prototype.js in XWiki standard.

Expected merging strategy

Prefers squash: Yes
Backport on branches:
- None. The changes proposed here are pretty massive and can wait on the master branch until the next stable release.

* WIP

* Added the `back to home` button. * Fixed the style of the TODO: * replace the inline styling with some CSS

* Moved the login and register buttons from the drawer to the navbar. * Updated style * Part B: moved around the first and last name fields. TODO: * C. replace the registration confirmation inline styling with some CSS

* Split the form into two sections * Added an `About you` title for the second section. TODO: * C. replace the registration confirmation inline styling with some CSS

* Split the validation messages in multiple parts - WIP TODO: * C. replace the registration confirmation inline styling with some CSS

* Split the validation messages in multiple parts - Done. TODO: * C. replace the registration confirmation inline styling with some CSS * B. Check that other uses of Livevalidation are not broken by the changes.

* Replaced the registration confirmation inline styling with some CSS * Escaped the content added in RegistrationConfig TODO: * B. Check that other uses of Livevalidation are not broken by the changes.

* Took care of a fallback for backwards compatibility

* Tried to fix the register form not submitting, WIP

* Fixed a wrong ID for the UIExtensionClass

* Fixed the bug for unexpected lack of form submission

* Fixed some codestyle

* Added comments * Removed special rule for regex type validation in the JS initialization * Updated the template for creating a validationContainer to fit loading the form with values already given

* Improved backwards compatibility (WIP)

* Updated the style of `mandatory` and `must-match` fields when valid to never show the `Ok` text. (wasn't an issue before, because the text was left empty as a mistake) * fixed booleans for validation * fixed boolean for the welcome message formatting.

* Fixed `RegisterIT`

* Fixed the base page object register and login function to fit the new position of those links.

manuelleduc · 2024-06-06T07:12:42Z

@Sereza7 since you are working on live validation, I just saw https://jira.xwiki.org/browse/XWIKI-9797, could it be fixed by your change?

Sereza7 · 2024-06-06T10:06:37Z

I wasn't aware of this. Since I started working on the project, I wasn't aware that there were livevalidation for usernames or page names repeating. From what I could see when checking those livevalidations, there is nothing about this.

My guess is that livevalidation is client-side, and we don't want to have the whole list of usernames or pages on the client. This could be a performance and security issue at least.

Validation is done server side but I don't think livevalidation has anything to do with it.

This issue should probably be closed as Won't Fix because I don't see it being fixed soon. Technically I don't understand how we'd make it work without some massive drawbacks.
AFAICS, for duplicate usernames, there isn't any message anymore. This is a regression introduced by this PR. I'll provide a fix soon. No issue about the page duplicates.
When submitting the form, the same page is returned, but the username field is emptied.

michitux · 2024-06-06T11:33:07Z

There is no reason why live validation couldn't check if the user/page already exists with a call to the server. We don't hide if a username exists or not, from an attacker's point there is no difference if this check is done after clicking submit or before as the attacker could automate both calls.

tkrieck · 2024-06-06T18:23:11Z

From the video, it was not clear to me if all the password requirements are visible from the start. It's an important point for someone thinking of a password in the beginning.

Also, we can reduce the image size, on my mockups I used 200px. If that's still too big, meaning the user has to scroll to see the buttons, then maybe we will change the order of elements, first the message (Welcome), then the image.

* Fixed the username duplicate validation message * Fixed the size of the hero image on successful registration

Sereza7 · 2024-06-07T13:37:13Z

@michitux

There is no reason why live validation couldn't check if the user/page already exists with a call to the server. We don't hide if a username exists or not, from an attacker's point there is no difference if this check is done after clicking submit or before as the attacker could automate both calls.

I'll consider this issue for a BFD then 👍
Don't we have something to prevent spam on the subscription form submission? I'm pretty sure our login system can support blocking a user if there's too many mistakes in a row but I'm not sure about the registration one.

@tkrieck

From the video, it was not clear to me if all the password requirements are visible from the start. It's an important point for someone thinking of a password in the beginning.

The password requirements are visible from the start. On this video I used the default policy, where we ask for at least 6 characters for a password. What's not visible at the start though are error message for Required fields (since there's already text next to the field name to display that :) )
Here is another video with more focus on the password validation:

2024-06-07.15-31-18.mp4

Also, we can reduce the image size, on my mockups I used 200px. If that's still too big, meaning the user has to scroll to see the buttons, then maybe we will change the order of elements, first the message (Welcome), then the image.

Note that my screen is halfway covered by the inspector, so the display is unusually horizontal. I just checked and there's no need to scroll down with my screen. I quickly checked with standard phone/tablet resolutions and it's okay too. The only place I saw this scrolling issue is for the CI tests, they use a square window with relatively low resolution and the buttons are just a bit too low.

I improved it in 683ccd5 :

I decided to go with a height of half the viewport height which has the advantage of being a bit more resilient to viewport size than the default auto sizing we had or 200px.

AFAICS, for duplicate usernames, there isn't any message anymore. This is a regression introduced by this PR. I'll provide a fix soon. No issue about the page duplicates.
When submitting the form, the same page is returned, but the username field is emptied.

Done in 683ccd5 👍
PR ready for reviews.

* Updated the version for deprecation

* Merge conflict resolution

* Updated version number

surli · 2024-09-12T13:00:44Z

...rm-administration/xwiki-platform-administration-ui/src/main/resources/XWiki/Registration.xml

@@ -295,7 +296,7 @@
        },
        'noReturn' : true
      })
-    #set($discard = $fields.add($field))
+    #set($discard = $aboutYouFields.add($field))


It doesn't feel accurate to put the captcha in the about you fields, also you didn't provided any screenshot for registration with captcha?

The semantics are a bit wrong yup, however I'm not sure how we'd want to show it so I kept it similar to what was done before. It's also more convenient because I don't need to update how we display the captcha (here it's treated the same as any other field).

@tkrieck Do you think this is an okay position for the captcha? Do you have an idea for a design that would clearly separate it from the rest of the form without looking too cluttered?

If we don't do anything right now I can still open a low importance ticket for accessibility because of the wrong semantics. IMO this is not the core of the change and we can wait until later to improve it.

@Sereza7 The positioning doesn't bother me, it looks okay. The input can get a new label though, could it be just "Captcha"? The little help beneath the captcha field can receive the current applied label (Please validate the captcha to prove you are not a robot)

Thanks for your help!
Addressed in c49f94d 👍
Here's what this looks like now vvv

Looks good to me, thanks! 👍

...rm-administration/xwiki-platform-administration-ui/src/main/resources/XWiki/Registration.xml

surli · 2024-09-12T13:02:39Z

...rm-administration/xwiki-platform-administration-ui/src/main/resources/XWiki/Registration.xml

+#if ($xcontext.user == 'XWiki.XWikiGuest' &amp;&amp; !$xcontext.inactiveUserReference &amp;&amp; $xwiki.hasAccessLevel('register', 'XWiki.XWikiPreferences'))
+&lt;li&gt;
+&lt;a href="$xwiki.getURL('XWiki.XWikiRegister', 'register', "xredirect=$escapetool.url($xwiki.relativeRequestURL)")" id="tmRegister" rel="nofollow"&gt;$escapetool.xml($services.localization.render('register'))&lt;/a&gt;
+&lt;/li&gt;


I'm wondering the impact of this for private wikis, you could have a wiki entirely private in which registration is still possible no? In which case here we're loosing seeing the register link at all, isn't it?

If the wiki is entirely private, the user would not be able to see any of the buttons of the top right navigation bar anyways.
I think it's not that much of an issue.

Moreover, as far as I know, private wikis did not use this way to get new users:

either invitation of new users

or the admin creates the accounts and shares the logins with the actual users.

Maybe it'd be an issue for semi private?
Even in the case the Registration page is public, there's other ways to access it.

Let me know if you find a use case where this is wrong.

Thanks,
LC

Well if in XWiki 15.10.13 I set the rights to prevent unregistered users to view pages, but yet allow guest users to register I obtain this as guest:

Do you get the same with your changes?

Test conditions

I tried to reproduce what you described:

Result

Trying to go anywhere while not registered prompts me with this page:

(the drawer is similar to the one you sent, minus the two links)
Clicking on the register link displays the register form as expected 👍

Okay, I tried to find back where the set of conditions to display the buttons come from.

It seems that it's just a factorization of all the conditions that were needed to display the links before.
https://github.com/xwiki/xwiki-platform/pull/3155/files#diff-97052b73aa6732071455b709190c5a5e65729555d3587e57882b79ea2f57e12dL38-L58

Unless my boolean factorization is wrong, this should be displayed in the same conditions as the drawer links and not be a regression on feature.
The original code is not factorized like this because there are other moving parts in the template that are only displayed on a specific set of conditions.

Ok thanks for checking this.

...inistration/xwiki-platform-administration-ui/src/main/resources/XWiki/RegistrationConfig.xml

...ki-platform-web/xwiki-platform-web-templates/src/main/resources/templates/register_macros.vm

...eb-war/src/main/webapp/resources/uicomponents/widgets/validation/livevalidation_prototype.js

* Updated the attachment name to be more understandable

* Removed a parameter with its default value * Escaped strings in the HTML template.

Sereza7 · 2024-09-30T16:45:27Z

Open "blocking" discussions:

Additional open discussions (non blocking - as in, I could see the PR being merged without them being clearly closed.):

* Improved the display of the Captcha

* Solve merge conflict

Sereza7 · 2024-10-23T15:12:59Z

Updated status of the PR:
Open "blocking" discussions:

XWIKI-22121: Improve the registration experience #3155 (comment) Could use @surli 's approval to make sure it's properly solved
XWIKI-22121: Improve the registration experience #3155 (comment) Paused on a misunderstanding

Additional open discussions (non blocking - as in, I could see the PR being merged without them being clearly closed.):

XWIKI-22121: Improve the registration experience #3155 (comment)

xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties

* Fixed wrong version number on translation deprecation section

Sereza7 and others added 20 commits April 29, 2024 10:18

XWIKI-22121: Improve the registration experience - Part C

d0e251c

* WIP

XWIKI-22121: Improve the registration experience - Part C

157fd99

* Added the `back to home` button. * Fixed the style of the TODO: * replace the inline styling with some CSS

XWIKI-22121: Improve the registration experience - Part A

641dc53

* Moved the login and register buttons from the drawer to the navbar. * Updated style * Part B: moved around the first and last name fields. TODO: * C. replace the registration confirmation inline styling with some CSS

XWIKI-22121: Improve the registration experience - Part B

f631969

* Split the form into two sections * Added an `About you` title for the second section. TODO: * C. replace the registration confirmation inline styling with some CSS

XWIKI-22121: Improve the registration experience - Part B

78fdc81

* Split the validation messages in multiple parts - WIP TODO: * C. replace the registration confirmation inline styling with some CSS

XWIKI-22121: Improve the registration experience - Part B

cd64ac2

* Split the validation messages in multiple parts - Done. TODO: * C. replace the registration confirmation inline styling with some CSS * B. Check that other uses of Livevalidation are not broken by the changes.

Merge branch 'xwiki:master' into XWIKI-22121

4c3045c

XWIKI-22121: Improve the registration experience - Part B

bee22da

* Replaced the registration confirmation inline styling with some CSS * Escaped the content added in RegistrationConfig TODO: * B. Check that other uses of Livevalidation are not broken by the changes.

XWIKI-22121: Improve the registration experience - Part B

d3cab05

* Took care of a fallback for backwards compatibility

XWIKI-22121: Improve the registration experience - Part B

af3c804

* Tried to fix the register form not submitting, WIP

Merge branch 'xwiki:master' into XWIKI-22121

39445e5

XWIKI-22121: Improve the registration experience

fa5e492

* Fixed a wrong ID for the UIExtensionClass

XWIKI-22121: Improve the registration experience

1bd4025

* Fixed the bug for unexpected lack of form submission

XWIKI-22121: Improve the registration experience

8b9fb00

* Fixed some codestyle

XWIKI-22121: Improve the registration experience

d24b61e

* Added comments * Removed special rule for regex type validation in the JS initialization * Updated the template for creating a validationContainer to fit loading the form with values already given

XWIKI-22121: Improve the registration experience

d328145

* Improved backwards compatibility (WIP)

Merge branch 'xwiki:master' into XWIKI-22121

cf825e4

XWIKI-22121: Improve the registration experience

23b31ed

* Fixed `RegisterIT`

XWIKI-22121: Improve the registration experience

af46c36

* Fixed the base page object register and login function to fit the new position of those links.

Sereza7 changed the title ~~Xwiki 22121~~ XWIKI-22121: Improve the registration experience Jun 5, 2024

Sereza7 marked this pull request as draft June 6, 2024 10:06

XWIKI-22121: Improve the registration experience

683ccd5

* Fixed the username duplicate validation message * Fixed the size of the hero image on successful registration

Sereza7 marked this pull request as ready for review June 7, 2024 13:37

XWIKI-22121: Improve the registration experience

17237cc

* Updated the version for deprecation

Sereza7 marked this pull request as draft August 26, 2024 16:37

Sereza7 added 3 commits September 11, 2024 16:49

Merge branch 'master' into XWIKI-22121

699558b

XWIKI-22121: Improve the registration experience

420b092

* Merge conflict resolution

XWIKI-22121: Improve the registration experience

2467089

* Updated version number

Sereza7 marked this pull request as ready for review September 11, 2024 15:19

surli reviewed Sep 12, 2024

View reviewed changes

Merge branch 'xwiki:master' into XWIKI-22121

d0bcd33

Sereza7 marked this pull request as draft September 30, 2024 08:23

Sereza7 added 2 commits September 30, 2024 17:51

XWIKI-22121: Improve the registration experience

f7671c1

* Updated the attachment name to be more understandable

XWIKI-22121: Improve the registration experience

abb32a7

* Removed a parameter with its default value * Escaped strings in the HTML template.

Sereza7 requested a review from surli September 30, 2024 16:46

Sereza7 added 3 commits October 2, 2024 11:25

XWIKI-22121: Improve the registration experience

c49f94d

* Improved the display of the Captcha

Merge branch 'master' into XWIKI-22121

e316527

XWIKI-22121: Improve the registration experience

f3f24d7

* Solve merge conflict

Sereza7 assigned surli Oct 10, 2024

Sereza7 marked this pull request as ready for review October 23, 2024 08:27

surli reviewed Nov 4, 2024

View reviewed changes

xwiki-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties Outdated Show resolved Hide resolved

XWIKI-22121: Improve the registration experience

0598ab8

* Fixed wrong version number on translation deprecation section

surli merged commit 553b6a2 into xwiki:master Nov 6, 2024
1 check passed

This was referenced Nov 7, 2024

XWIKI-22121: Improve the registration experience #3627

Merged

XWIKI-22121: Improve the registration experience #3633

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

XWIKI-22121: Improve the registration experience #3155

XWIKI-22121: Improve the registration experience #3155

Sereza7 commented Jun 5, 2024 •

edited

Loading

manuelleduc commented Jun 6, 2024

Sereza7 commented Jun 6, 2024 •

edited

Loading

michitux commented Jun 6, 2024

tkrieck commented Jun 6, 2024

Sereza7 commented Jun 7, 2024

surli Sep 12, 2024

Sereza7 Sep 30, 2024

tkrieck Oct 1, 2024

Sereza7 Oct 2, 2024

tkrieck Oct 2, 2024

surli Sep 12, 2024

Sereza7 Sep 30, 2024

surli Oct 23, 2024

Sereza7 Oct 23, 2024

Sereza7 Oct 23, 2024

surli Nov 4, 2024

Sereza7 commented Sep 30, 2024 •

edited

Loading

Sereza7 commented Oct 23, 2024

XWIKI-22121: Improve the registration experience #3155

XWIKI-22121: Improve the registration experience #3155

Conversation

Sereza7 commented Jun 5, 2024 • edited Loading

Jira URL

Changes

Description

Clarifications

Screenshots & Video

Executed Tests

Expected merging strategy

manuelleduc commented Jun 6, 2024

Sereza7 commented Jun 6, 2024 • edited Loading

michitux commented Jun 6, 2024

tkrieck commented Jun 6, 2024

Sereza7 commented Jun 7, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Test conditions

Result

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Sereza7 commented Sep 30, 2024 • edited Loading

Sereza7 commented Oct 23, 2024

Sereza7 commented Jun 5, 2024 •

edited

Loading

Sereza7 commented Jun 6, 2024 •

edited

Loading

Sereza7 commented Sep 30, 2024 •

edited

Loading