XWIKI-22121: Improve the registration experience

xwiki-platform-core/xwiki-platform-administration/xwiki-platform-administration-test/xwiki-platform-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 ";
 

xwiki-platform-core/xwiki-platform-administration/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:undraw_done_re_oak4.svg||data-xwiki-image-style-alignment="center" height="50vh"]]
+
+{{html clean="true"}}
+&lt;div class="registration-success-headline"&gt;
+  &lt;h2&gt;$headline &lt;/h2&gt;
+  #if(!$noReadableName)
+  &lt;p class="registration-success-subtitle"&gt;
+    ($userName)
+  &lt;/p&gt;
+  #end
+&lt;/div&gt;
+&lt;p class="registration-success-hint"&gt;
+  $successAndLogin
+&lt;/p&gt;
+{{/html}}</registrationSuccessMessage>
     </property>
     <property>
       <requireCaptcha>0</requireCaptcha>
@@ -533,4 +554,144 @@
       <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>
+    <contentType></contentType>
+  </property>
+  <property>
+    <name></name>
+  </property>
+  <property>
+    <parse/>
+  </property>
+  <property>
+    <use>onDemand</use>
+  </property>
+</object>
 </xwikidoc>

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/drawer.vm

@@ -41,11 +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
-          <a href="$xwiki.getURL('XWiki.XWikiLogin', 'login', "xredirect=$escapetool.url($xwiki.relativeRequestURL)&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=$escapetool.url($xwiki.relativeRequestURL)")" id="tmRegister" rel="nofollow">$services.icon.renderHTML('log-in') $escapetool.xml($services.localization.render('register'))</a>
-          #end
         #end
         ##
         ## UIX

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/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;

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-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;
 }

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

@@ -1681,7 +1681,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
@@ -5655,6 +5658,11 @@ platform.index.spaceIndex=Space Index
 platform.index.spaceIndexDescription=Pages in the {0} space:
 platform.index.spaceIndexDocumentListCreate=Create a new page
 
+#######################################
+## until 16.8.0RC1
+#######################################
+core.register.successful={0} ({1}): Registration successful.
+
 ## Used to indicate where deprecated keys end
 #@deprecatedend
 

xwiki-platform-core/xwiki-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();
     }

xwiki-platform-core/xwiki-platform-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", " "));
             }
         }