Connect create user to the API

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-admin/admin/src/components/Users/MagicLink/index.js

@@ -6,16 +6,19 @@ import { Duplicate } from '@buffetjs/icons';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
+import basename from '../../../utils/basename';
 import IconWrapper from './IconWrapper';
 import Envelope from './Envelope';
 import Wrapper from './Wrapper';
 
-const MagicLink = ({ link }) => {
+const MagicLink = ({ registrationToken }) => {
   const { formatMessage } = useIntl();
   const handleCopy = () => {
     strapi.notification.info('notification.link-copied');
   };
 
+  const link = `${window.location.origin}${basename}auth/register?code=${registrationToken}`;
+
   return (
     <Wrapper>
       <IconWrapper>
@@ -37,11 +40,11 @@ const MagicLink = ({ link }) => {
 };
 
 MagicLink.defaultProps = {
-  link: 'http://my-app.com/admin/registration?code=1234567827654576856789',
+  registrationToken: '',
 };
 
 MagicLink.propTypes = {
-  link: PropTypes.string,
+  registrationToken: PropTypes.string,
 };
 
 export default MagicLink;

packages/strapi-admin/admin/src/components/Users/ModalCreateBody/index.js

@@ -1,7 +1,8 @@
 import React, { forwardRef, useReducer, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { ModalSection } from 'strapi-helper-plugin';
+import { ModalSection, request } from 'strapi-helper-plugin';
 import { FormattedMessage } from 'react-intl';
+import { get } from 'lodash';
 import { Padded, Text } from '@buffetjs/core';
 import { Col, Row } from 'reactstrap';
 import checkFormValidity from '../../../utils/users/checkFormValidity';
@@ -14,7 +15,8 @@ import Wrapper from './Wrapper';
 import MagicLink from '../MagicLink';
 
 // This component accepts a ref so we can have access to the submit handler.
-const ModalCreateBody = forwardRef(({ isDisabled, onSubmit, showMagicLink }, ref) => {
+const ModalCreateBody = forwardRef(
+  ({ isDisabled, onSubmit, registrationToken, showMagicLink }, ref) => {
     const [reducerState, dispatch] = useReducer(reducer, initialState, init);
     const { formErrors, modifiedData } = reducerState;
     const buttonSubmitRef = useRef(null);
@@ -39,7 +41,17 @@ const ModalCreateBody = forwardRef(({ isDisabled, onSubmit, showMagicLink }, ref
       const errors = await checkFormValidity(modifiedData);
 
       if (!errors) {
-      onSubmit(e, modifiedData);
+        try {
+          const requestURL = '/admin/users';
+
+          const { data } = await request(requestURL, { method: 'POST', body: modifiedData });
+
+          onSubmit(e, data);
+        } catch (err) {
+          const message = get(err, ['response', 'payload', 'message'], 'An error occured');
+
+          strapi.notification.error(message);
+        }
 
         // TODO post request with errors handling
       }
@@ -55,7 +67,7 @@ const ModalCreateBody = forwardRef(({ isDisabled, onSubmit, showMagicLink }, ref
         {/* TODO magic link with token when api ready */}
         {showMagicLink && (
           <ModalSection>
-          <MagicLink />
+            <MagicLink registrationToken={registrationToken} />
           </ModalSection>
         )}
         <ModalSection>
@@ -118,17 +130,20 @@ const ModalCreateBody = forwardRef(({ isDisabled, onSubmit, showMagicLink }, ref
         </button>
       </form>
     );
-});
+  }
+);
 
 ModalCreateBody.defaultProps = {
   isDisabled: false,
   onSubmit: e => e.preventDefault(),
+  registrationToken: '',
   showMagicLink: false,
 };
 
 ModalCreateBody.propTypes = {
   isDisabled: PropTypes.bool,
   onSubmit: PropTypes.func,
+  registrationToken: PropTypes.string,
   showMagicLink: PropTypes.bool,
 };
 

packages/strapi-admin/admin/src/containers/Users/ListPage/ModalForm.js

@@ -9,6 +9,7 @@ const ModalForm = ({ isOpen, onClosed, onToggle }) => {
   // Little trick to focus the first input
   // Without this the focus is lost
   const [showBody, setShowBody] = useState(false);
+  const [registrationToken, setRegistrationToken] = useState(null);
   const { formatMessage } = useGlobalContext();
   const ref = useRef(null);
   const { buttonSubmitLabel, Component, isDisabled, next } = stepper[currentStep];
@@ -35,7 +36,10 @@ const ModalForm = ({ isOpen, onClosed, onToggle }) => {
     setShowBody(false);
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (e, data) => {
+    const { registrationToken } = data;
+
+    setRegistrationToken(registrationToken);
     goNext();
   };
 
@@ -57,6 +61,7 @@ const ModalForm = ({ isOpen, onClosed, onToggle }) => {
           isDisabled={isDisabled}
           onSubmit={handleSubmit}
           ref={currentStep === 'create' ? ref : null}
+          registrationToken={registrationToken}
           showMagicLink={currentStep === 'magic-link'}
         />
       )}

packages/strapi-admin/admin/src/containers/Users/ListPage/stepper.js

@@ -5,17 +5,15 @@ const stepper = {
     buttonSubmitLabel: 'app.containers.Users.ModalForm.footer.button-success',
     Component: ModalCreateBody,
     isDisabled: false,
-    // next: 'magic-link',
-
-    // TODO: set it back to magic-link
-    next: null,
+    next: 'magic-link',
   },
   'magic-link': {
     buttonSubmitLabel: 'form.button.continue',
     Component: ModalCreateBody,
     isDisabled: true,
-    next: 'summary',
+    next: null,
   },
+  // TODO: I am not sure this step is needed we might need to delete it
   summary: {
     buttonSubmitLabel: 'form.button.done',
     Component: () => 'COMING SOON',