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

- 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 * Added the `back to home` button. * Fixed the style of the * 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. * Split the validation messages in multiple parts - Done. * C. replace the registration confirmation inline styling with some CSS * Replaced the registration confirmation inline styling with some CSS * Escaped the content added in RegistrationConfig * 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 * 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. * Fixed the username duplicate validation message * Fixed the size of the hero image on successful registration * Updated the version for deprecation * Merge conflict resolution * Updated version number * Updated the attachment name to be more understandable * Removed a parameter with its default value * Escaped strings in the HTML template. * Improved the display of the Captcha * Solve merge conflict * Fixed wrong version number on translation deprecation section
xwiki · Nov 6, 2024 · 553b6a2 · 553b6a2
1 parent 097089c
commit 553b6a2
Show file tree

Hide file tree

Showing 12 changed files with 526 additions and 119 deletions.
diff --git a/...m-administration-test-docker/src/test/it/org/xwiki/administration/test/ui/RegisterIT.java b/...m-administration-test-docker/src/test/it/org/xwiki/administration/test/ui/RegisterIT.java
@@ -243,7 +243,8 @@ void registerJohnSmith(boolean isModal, boolean closedWiki, boolean withRegistra
     {
         AbstractRegistrationPage registrationPage = setUp(testUtils, isModal, closedWiki, withRegistrationConfig);
         registrationPage.fillInJohnSmithValues();
-        assertTrue(validateAndRegister(testUtils, isModal, registrationPage));
+        assertTrue(validateAndRegister(testUtils, isModal, registrationPage), String.format("isModal: %s close "
+                + "wiki: %s withRegistrationConfig: %s", isModal, closedWiki, withRegistrationConfig));
         tryToLoginAsJohnSmith(testUtils, AbstractRegistrationPage.JOHN_SMITH_PASSWORD, registrationPage);
     }
 
@@ -345,7 +346,6 @@ void registerWikiSyntaxName(boolean isModal, boolean closedWiki, boolean withReg
                 AbstractRegistrationPage.JOHN_SMITH_USERNAME, password, password, "[email protected]");
             assertTrue(validateAndRegister(testUtils, isModal, registrationPage), String.format("isModal: %s close "
                 + "wiki: %s withRegistrationConfig: %s", isModal, closedWiki, withRegistrationConfig));
-
             // TODO: looks like a pretty strange behavior, there might be a message box title missing somewhere
             String messagePrefix = closedWiki ? "" : "Information ";
 

diff --git a/...administration/xwiki-platform-administration-ui/src/main/resources/XWiki/Registration.xml b/...administration/xwiki-platform-administration-ui/src/main/resources/XWiki/Registration.xml
diff --git a/...stration/xwiki-platform-administration-ui/src/main/resources/XWiki/RegistrationConfig.xml b/...stration/xwiki-platform-administration-ui/src/main/resources/XWiki/RegistrationConfig.xml
@@ -522,9 +522,30 @@
       <passwordRuleOneUpperCaseEnabled>0</passwordRuleOneUpperCaseEnabled>
     </property>
     <property>
-      <registrationSuccessMessage>#set($message = $services.localization.render('core.register.successful', 'xwiki/2.1', ['USERLINK', $userName]))
+      <registrationSuccessMessage>#set($discard = $xwiki.ssx.use("XWiki.RegistrationConfig"))
+#set($displayName = "$!firstName $!lastName")
+#set($noReadableName = ($!firstName == "") || ($!lastName == ""))
+#if($noReadableName)
+  #set($displayName = $userName)
+#end
+#set($headline = $services.localization.render('core.register.successful.welcome', [$displayName]))
 #set($userLink = $xwiki.getUserName("$userSpace$userName"))
-{{info}}$message.replace('USERLINK', "{{html clean=false}}$userLink{{/html}}"){{/info}}</registrationSuccessMessage>
+#set($successAndLogin = $services.localization.render('core.register.successful.successandlogin'))
+[[image:registration_success_hero.svg||data-xwiki-image-style-alignment="center" height="50vh"]]
+
+{{html}}
+&lt;div class="registration-success-headline"&gt;
+  &lt;h2&gt;$escapetool.xml($headline) &lt;/h2&gt;
+  #if(!$noReadableName)
+  &lt;p class="registration-success-subtitle"&gt;
+    ($escapetool.xml($userName))
+  &lt;/p&gt;
+  #end
+&lt;/div&gt;
+&lt;p class="registration-success-hint"&gt;
+  $escapetool.xml($successAndLogin)
+&lt;/p&gt;
+{{/html}}</registrationSuccessMessage>
     </property>
     <property>
       <requireCaptcha>0</requireCaptcha>
@@ -533,4 +554,138 @@
       <welcomeMessage>{{translation key="core.register.welcome"/}}</welcomeMessage>
     </property>
   </object>
+  <object>
+    <name>XWiki.RegistrationConfig</name>
+    <number>0</number>
+    <className>XWiki.StyleSheetExtension</className>
+    <guid>6e9139ba-c4ac-4243-9ca7-9e935b0cc730</guid>
+    <class>
+      <name>XWiki.StyleSheetExtension</name>
+      <customClass/>
+      <customMapping/>
+      <defaultViewSheet/>
+      <defaultEditSheet/>
+      <defaultWeb/>
+      <nameField/>
+      <validationScript/>
+      <cache>
+        <cache>0</cache>
+        <defaultValue>long</defaultValue>
+        <disabled>0</disabled>
+        <displayType>select</displayType>
+        <freeText>forbidden</freeText>
+        <largeStorage>0</largeStorage>
+        <multiSelect>0</multiSelect>
+        <name>cache</name>
+        <number>5</number>
+        <prettyName>Caching policy</prettyName>
+        <relationalStorage>0</relationalStorage>
+        <separator> </separator>
+        <separators>|, </separators>
+        <size>1</size>
+        <unmodifiable>0</unmodifiable>
+        <values>long|short|default|forbid</values>
+        <classType>com.xpn.xwiki.objects.classes.StaticListClass</classType>
+      </cache>
+      <code>
+        <contenttype>PureText</contenttype>
+        <disabled>0</disabled>
+        <editor>PureText</editor>
+        <name>code</name>
+        <number>2</number>
+        <prettyName>Code</prettyName>
+        <restricted>0</restricted>
+        <rows>20</rows>
+        <size>50</size>
+        <unmodifiable>0</unmodifiable>
+        <classType>com.xpn.xwiki.objects.classes.TextAreaClass</classType>
+      </code>
+      <contentType>
+        <cache>0</cache>
+        <disabled>0</disabled>
+        <displayType>select</displayType>
+        <freeText>forbidden</freeText>
+        <largeStorage>0</largeStorage>
+        <multiSelect>0</multiSelect>
+        <name>contentType</name>
+        <number>6</number>
+        <prettyName>Content Type</prettyName>
+        <relationalStorage>0</relationalStorage>
+        <separator> </separator>
+        <separators>|, </separators>
+        <size>1</size>
+        <unmodifiable>0</unmodifiable>
+        <values>CSS|LESS</values>
+        <classType>com.xpn.xwiki.objects.classes.StaticListClass</classType>
+      </contentType>
+      <name>
+        <disabled>0</disabled>
+        <name>name</name>
+        <number>1</number>
+        <prettyName>Name</prettyName>
+        <size>30</size>
+        <unmodifiable>0</unmodifiable>
+        <classType>com.xpn.xwiki.objects.classes.StringClass</classType>
+      </name>
+      <parse>
+        <disabled>0</disabled>
+        <displayFormType>select</displayFormType>
+        <displayType>yesno</displayType>
+        <name>parse</name>
+        <number>4</number>
+        <prettyName>Parse content</prettyName>
+        <unmodifiable>0</unmodifiable>
+        <classType>com.xpn.xwiki.objects.classes.BooleanClass</classType>
+      </parse>
+      <use>
+        <cache>0</cache>
+        <disabled>0</disabled>
+        <displayType>select</displayType>
+        <freeText>forbidden</freeText>
+        <largeStorage>0</largeStorage>
+        <multiSelect>0</multiSelect>
+        <name>use</name>
+        <number>3</number>
+        <prettyName>Use this extension</prettyName>
+        <relationalStorage>0</relationalStorage>
+        <separator> </separator>
+        <separators>|, </separators>
+        <size>1</size>
+        <unmodifiable>0</unmodifiable>
+        <values>currentPage|onDemand|always</values>
+        <classType>com.xpn.xwiki.objects.classes.StaticListClass</classType>
+      </use>
+    </class>
+    <property>
+      <cache>long</cache>
+    </property>
+    <property>
+      <code>.registration-success-headline {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.registration-success-headline &gt; .registration-success-subtitle {
+  display: block;
+}
+
+.registration-success-hint {
+  display: block;
+  text-align: center;
+}
+
+/* Resize the hero image displayed when the registration is successful so that the buttons are always on screen without
+ needing to scroll. */
+img.wikigeneratedid {
+  height: 50vh;
+}</code>
+  </property>
+  <property>
+    <parse/>
+  </property>
+  <property>
+    <use>onDemand</use>
+  </property>
+</object>
 </xwikidoc>
diff --git a/...lamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/drawer.vm b/...lamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/drawer.vm
@@ -41,21 +41,6 @@ aria-label="$escapetool.xml($services.localization.render('core.menu.drawer.labe
         #elseif($xcontext.user == 'XWiki.XWikiGuest' && $xcontext.inactiveUserReference)
           <a href="$xwiki.getURL($xcontext.inactiveUserReference, 'view')" class="brand-user" id="tmUser">$!xwiki.getUserName($xcontext.inactiveUserReference, false)</a>
           $logoutLink
-        #else
-          ## If xredirect is not set
-          #if (!$request.xredirect)
-            ## Define redirect URL value using current document relative request URL
-            #set($redirectURL = $escapetool.url($xwiki.relativeRequestURL))
-          ## If xredirect is already set
-          #else
-            ## Reuse the current value in the login link
-            #set($redirectURL = $escapetool.url($request.xredirect))
-          #end
-
-          <a href="$xwiki.getURL('XWiki.XWikiLogin', 'login', "xredirect=$redirectURL&loginLink=1")" id="tmLogin" rel="nofollow">$services.icon.renderHTML('log-in') $escapetool.xml($services.localization.render('login'))</a>
-          #if ($xwiki.hasAccessLevel('register', 'XWiki.XWikiPreferences'))
-            <a href="$xwiki.getURL('XWiki.XWikiRegister', 'register', "xredirect=$redirectURL")" id="tmRegister" rel="nofollow">$services.icon.renderHTML('log-in') $escapetool.xml($services.localization.render('register'))</a>
-          #end
         #end
         ##
         ## UIX

diff --git a/...xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less b/...xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/action-menus.less
@@ -79,6 +79,16 @@
     }
   }
 }
+// Authentication buttons ========================================================
+// Reduce the spacing between both items if there's both
+li:has(#tmLogin) + li #tmRegister {
+  padding-right: 8px;
+}
+li:has(+ li #tmRegister) #tmLogin {
+  padding-left: 8px;
+}
+
+// Quick search ========================================================
 
 #globalsearch {
   display: flex;

diff --git a/...-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/drawer.less b/...-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/drawer.less
@@ -191,7 +191,7 @@
   margin: 12px 0;
 }
 
-// Special styling for login/logout/register =============================
-#tmLogin, #tmLogout, #tmRegister {
+// Special styling for logout =============================
+#tmLogout {
   font-style: italic;
 }
diff --git a/...i-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties b/...i-platform-core/xwiki-platform-oldcore/src/main/resources/ApplicationResources.properties
@@ -1684,7 +1684,10 @@ core.register.invalidUsername=Invalid username provided. Please use only letters
 core.register.mailSenderWronglyConfigured=The user has been created but the validation email has not been sent. Please check the Mail Sending Configuration and consider recreating the user.
 core.register.invalidCaptcha=Incorrect CAPTCHA answer.
 core.register.registerFailed=Registration has failed due to unknown reasons. (Error code: {0})
-core.register.successful={0} ({1}): Registration successful.
+core.register.successful.welcome=Welcome {0}
+core.register.successful.successandlogin=Registration successful. You can now log into your account.
+core.register.successful.backtohome=Back to Home
+core.register.aboutYou = About you
 core.register.firstName=First Name
 core.register.lastName=Last Name
 core.register.username=Username
@@ -1710,6 +1713,7 @@ core.validation.valid.message=Ok.
 
 # Captcha 
 core.captcha.captchaAnswerIsWrong=Incorrect answer, please try again.
+core.captcha.label=CAPTCHA
 core.captcha.instruction=Please validate the CAPTCHA to prove you are not a robot
 
 # History
@@ -5658,6 +5662,11 @@ platform.index.spaceIndex=Space Index
 platform.index.spaceIndexDescription=Pages in the {0} space:
 platform.index.spaceIndexDocumentListCreate=Create a new page
 
+#######################################
+## until 16.10.0RC1
+#######################################
+core.register.successful={0} ({1}): Registration successful.
+
 ## Used to indicate where deprecated keys end
 #@deprecatedend
 

diff --git a/...iki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/BasePage.java b/...iki-platform-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/BasePage.java
@@ -426,7 +426,6 @@ public boolean hasLoginLink()
      */
     public LoginPage login()
     {
-        getDrawerMenu().toggle();
         this.loginLink.click();
         return new LoginPage();
     }
@@ -511,7 +510,6 @@ public void logout()
      */
     public RegistrationPage register()
     {
-        getDrawerMenu().toggle();
         this.registerLink.click();
         return new RegistrationPage();
     }

diff --git a/...form-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/RegistrationPage.java b/...form-test/xwiki-platform-test-ui/src/main/java/org/xwiki/test/ui/po/RegistrationPage.java
@@ -61,9 +61,12 @@ public void clickRegister()
      */
     public Optional<String> getRegistrationSuccessMessage()
     {
-        List<WebElement> infos = getDriver().findElements(By.className("infomessage"));
+        List<WebElement> infos = getDriver().findElements(
+            By.xpath("//*[contains(@class, 'infomessage') or" +
+             " contains(@class, 'registration-success-headline')]"));
         for (WebElement info : infos) {
-            if (info.getText().contains("Registration successful.")) {
+            if (info.getText().contains("Registration successful.") ||
+                info.getText().contains("Welcome ")) {
                 return Optional.of(info.getText().replaceAll("\n", " "));
             }
         }