build the registration from using the userschema provided by backend

packages/volto/news/6434.feature

@@ -0,0 +1 @@
+Build the registration form with the information of the backend (provided by the @userschema endpoint) @erral

packages/volto/src/components/theme/Register/Register.jsx

@@ -7,7 +7,7 @@ import { toast } from 'react-toastify';
 import { Helmet, usePrevious } from '@plone/volto/helpers';
 import { Toast } from '@plone/volto/components';
 import { Form } from '@plone/volto/components/manage/Form';
-import { createUser } from '@plone/volto/actions';
+import { createUser, getUserSchema } from '@plone/volto/actions';
 
 const messages = defineMessages({
   title: {
@@ -64,6 +64,13 @@ const Register = () => {
   const { loaded, loading, error } = useUsers();
 
   const prevloading = usePrevious(loading);
+  const userschema = useSelector((state) => state.userschema);
+
+  useEffect(() => {
+    if (!userschema.loading && !userschema.loaded) {
+      dispatch(getUserSchema());
+    }
+  }, [userschema, dispatch]);
 
   useEffect(() => {
     if (prevloading && loaded) {
@@ -90,6 +97,12 @@ const Register = () => {
     setError(null);
   };
 
+  const emptySchema = {
+    fieldsets: [],
+    properties: {},
+    required: [],
+  };
+
   return (
     <div id="page-register">
       <Helmet title={intl.formatMessage(messages.register)} />
@@ -99,28 +112,7 @@ const Register = () => {
         error={errors || error}
         loading={loading}
         submitLabel={intl.formatMessage(messages.register)}
-        schema={{
-          fieldsets: [
-            {
-              id: 'default',
-              title: intl.formatMessage(messages.default),
-              fields: ['fullname', 'email'],
-            },
-          ],
-          properties: {
-            fullname: {
-              type: 'string',
-              title: intl.formatMessage(messages.fullnameTitle),
-              description: intl.formatMessage(messages.fullnameDescription),
-            },
-            email: {
-              type: 'string',
-              title: intl.formatMessage(messages.emailTitle),
-              description: intl.formatMessage(messages.emailDescription),
-            },
-          },
-          required: ['fullname', 'email'],
-        }}
+        schema={userschema.loaded ? userschema.userschema : emptySchema}
       />
     </div>
   );

packages/volto/src/components/theme/Register/Register.stories.jsx

@@ -20,6 +20,32 @@ function StoryComponent(args) {
           locale: 'en',
           messages: {},
         },
+        userschema: {
+          loaded: true,
+          loading: false,
+          userschema: {
+            fieldsets: [
+              {
+                id: 'default',
+                title: 'default',
+                fields: ['fullname', 'email'],
+              },
+            ],
+            properties: {
+              fullname: {
+                type: 'string',
+                title: 'Fullname',
+                description: 'Enter your fullname',
+              },
+              email: {
+                type: 'string',
+                title: 'email',
+                description: 'Enter your email address',
+              },
+            },
+            required: ['fullname', 'email'],
+          },
+        },
       }}
     >
       <div id="toolbar" style={{ display: 'none' }} />

packages/volto/src/components/theme/Register/Register.test.jsx

@@ -31,6 +31,32 @@ describe('Register', () => {
           loaded: true,
         },
       },
+      userschema: {
+        loaded: true,
+        loading: false,
+        userschema: {
+          fieldsets: [
+            {
+              id: 'default',
+              title: 'default',
+              fields: ['fullname', 'email'],
+            },
+          ],
+          properties: {
+            fullname: {
+              type: 'string',
+              title: 'Fullname',
+              description: 'Enter your fullname',
+            },
+            email: {
+              type: 'string',
+              title: 'email',
+              description: 'Enter your email address',
+            },
+          },
+          required: ['fullname', 'email'],
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

packages/volto/src/components/theme/Register/__snapshots__/Register.test.jsx.snap

@@ -9,7 +9,7 @@ exports[`Register renders a register component 1`] = `
   \\"fieldsets\\": [
     {
       \\"id\\": \\"default\\",
-      \\"title\\": \\"Default\\",
+      \\"title\\": \\"default\\",
       \\"fields\\": [
         \\"fullname\\",
         \\"email\\"
@@ -19,13 +19,13 @@ exports[`Register renders a register component 1`] = `
   \\"properties\\": {
     \\"fullname\\": {
       \\"type\\": \\"string\\",
-      \\"title\\": \\"Full Name\\",
-      \\"description\\": \\"Enter full name, e.g. John Smith.\\"
+      \\"title\\": \\"Fullname\\",
+      \\"description\\": \\"Enter your fullname\\"
     },
     \\"email\\": {
       \\"type\\": \\"string\\",
-      \\"title\\": \\"E-mail\\",
-      \\"description\\": \\"Enter an email address. This will be your login name. We respect your privacy, and will not give the address away to any third parties or expose it anywhere.\\"
+      \\"title\\": \\"email\\",
+      \\"description\\": \\"Enter your email address\\"
     }
   },
   \\"required\\": [