diff --git a/packages/strapi-admin/admin/src/components/Users/MagicLink/Envelope.js b/packages/strapi-admin/admin/src/components/Users/LinkNotification/Envelope.js
similarity index 100%
rename from packages/strapi-admin/admin/src/components/Users/MagicLink/Envelope.js
rename to packages/strapi-admin/admin/src/components/Users/LinkNotification/Envelope.js
diff --git a/packages/strapi-admin/admin/src/components/Users/MagicLink/IconWrapper.js b/packages/strapi-admin/admin/src/components/Users/LinkNotification/IconWrapper.js
similarity index 100%
rename from packages/strapi-admin/admin/src/components/Users/MagicLink/IconWrapper.js
rename to packages/strapi-admin/admin/src/components/Users/LinkNotification/IconWrapper.js
diff --git a/packages/strapi-admin/admin/src/components/Users/MagicLink/Wrapper.js b/packages/strapi-admin/admin/src/components/Users/LinkNotification/Wrapper.js
similarity index 100%
rename from packages/strapi-admin/admin/src/components/Users/MagicLink/Wrapper.js
rename to packages/strapi-admin/admin/src/components/Users/LinkNotification/Wrapper.js
diff --git a/packages/strapi-admin/admin/src/components/Users/LinkNotification/index.js b/packages/strapi-admin/admin/src/components/Users/LinkNotification/index.js
new file mode 100644
index 0000000000..9a3f5b8b65
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/Users/LinkNotification/index.js
@@ -0,0 +1,47 @@
+// This component is a work in progress
+// It's made to be used when the users API is ready
+import React from 'react';
+import { Flex, Text } from '@buffetjs/core';
+import { Duplicate } from '@buffetjs/icons';
+import PropTypes from 'prop-types';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import IconWrapper from './IconWrapper';
+import Envelope from './Envelope';
+import Wrapper from './Wrapper';
+
+const LinkNotification = ({ target, children }) => {
+ const handleCopy = () => {
+ strapi.notification.toggle({ type: 'info', message: { id: 'notification.link-copied' } });
+ };
+
+ return (
+
+
+
+
+
+
+ {target}
+
+
+
+
+
+ {children}
+
+
+
+ );
+};
+
+LinkNotification.defaultProps = {
+ target: '',
+ children: '',
+};
+
+LinkNotification.propTypes = {
+ target: PropTypes.string,
+ children: PropTypes.string,
+};
+
+export default LinkNotification;
diff --git a/packages/strapi-admin/admin/src/components/Users/MagicLink/index.js b/packages/strapi-admin/admin/src/components/Users/MagicLink/index.js
index 2e4071b41f..31917cbfa4 100644
--- a/packages/strapi-admin/admin/src/components/Users/MagicLink/index.js
+++ b/packages/strapi-admin/admin/src/components/Users/MagicLink/index.js
@@ -1,41 +1,18 @@
-// This component is a work in progress
-// It's made to be used when the users API is ready
import React from 'react';
-import { Flex, Text } from '@buffetjs/core';
-import { Duplicate } from '@buffetjs/icons';
-import { useIntl } from 'react-intl';
import PropTypes from 'prop-types';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { useIntl } from 'react-intl';
+import LinkNotification from '../LinkNotification';
import basename from '../../../utils/basename';
-import IconWrapper from './IconWrapper';
-import Envelope from './Envelope';
-import Wrapper from './Wrapper';
const MagicLink = ({ registrationToken }) => {
const { formatMessage } = useIntl();
- const handleCopy = () => {
- strapi.notification.toggle({ type: 'info', message: { id: 'notification.link-copied' } });
- };
const link = `${window.location.origin}${basename}auth/register?registrationToken=${registrationToken}`;
return (
-
-
-
-
-
-
- {link}
-
-
-
-
-
- {formatMessage({ id: 'app.components.Users.MagicLink.connect' })}
-
-
-
+
+ {formatMessage({ id: 'app.components.Users.MagicLink.connect' })}
+
);
};
diff --git a/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/index.js b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/index.js
index b233c86a28..61f7b213f8 100644
--- a/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/index.js
+++ b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/index.js
@@ -1,19 +1,20 @@
import React, { forwardRef, useReducer, useImperativeHandle, useRef } from 'react';
import PropTypes from 'prop-types';
import { BaselineAlignment, ModalSection, request } from 'strapi-helper-plugin';
-import { FormattedMessage } from 'react-intl';
+import { useIntl } from 'react-intl';
import { get } from 'lodash';
import { Padded, Text } from '@buffetjs/core';
-import { Col, Row } from 'reactstrap';
+import { Row } from 'reactstrap';
+import MagicLink from 'ee_else_ce/components/Users/MagicLink';
+
import checkFormValidity from '../../../utils/checkFormValidity';
-import SelectRoles from '../SelectRoles';
import form from './utils/form';
import schema from './utils/schema';
import { initialState, reducer } from './reducer';
import init from './init';
import Input from '../../SizedInput';
import Wrapper from './Wrapper';
-import MagicLink from '../MagicLink';
+import RoleSettingsModalSection from '../RoleSettingsModalSection';
// This component accepts a ref so we can have access to the submit handler.
const ModalCreateBody = forwardRef(
@@ -21,6 +22,7 @@ const ModalCreateBody = forwardRef(
const [reducerState, dispatch] = useReducer(reducer, initialState, init);
const { formErrors, modifiedData } = reducerState;
const buttonSubmitRef = useRef(null);
+ const { formatMessage } = useIntl();
useImperativeHandle(ref, () => ({
submit: () => {
@@ -86,15 +88,13 @@ const ModalCreateBody = forwardRef(
-
- {txt => txt}
-
+ {formatMessage({ id: 'app.components.Users.ModalCreateBody.block-title.details' })}
-
+
{Object.keys(form).map((inputName, i) => (
-
- {txt => txt}
-
+ {formatMessage({ id: 'app.components.Users.ModalCreateBody.block-title.login' })}
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/reducer.js b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/reducer.js
index 8975688828..dc5803e85c 100644
--- a/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/reducer.js
+++ b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/reducer.js
@@ -1,15 +1,11 @@
/* eslint-disable consistent-return */
import produce from 'immer';
import { set } from 'lodash';
+import formDataModel from 'ee_else_ce/components/Users/ModalCreateBody/utils/formDataModel';
const initialState = {
formErrors: {},
- modifiedData: {
- firstname: '',
- lastname: '',
- email: '',
- roles: [],
- },
+ modifiedData: formDataModel,
};
const reducer = (state, action) =>
diff --git a/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/formDataModel.js b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/formDataModel.js
new file mode 100644
index 0000000000..2b0557eb3d
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/formDataModel.js
@@ -0,0 +1,8 @@
+const formDataModel = {
+ firstname: '',
+ lastname: '',
+ email: '',
+ roles: [],
+};
+
+export default formDataModel;
diff --git a/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/roleSettingsForm.js b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/roleSettingsForm.js
new file mode 100644
index 0000000000..7f366efa3b
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/roleSettingsForm.js
@@ -0,0 +1,10 @@
+import RolesSelectComponent from '../../RoleSettingsModalSection/RolesSelectComponent';
+
+const roleSettingsForm = {
+ roles: {
+ label: 'Settings.permissions.users.form.firstname',
+ Component: RolesSelectComponent,
+ },
+};
+
+export default roleSettingsForm;
diff --git a/packages/strapi-admin/admin/src/components/Users/RoleSettingsModalSection/RolesSelectComponent.js b/packages/strapi-admin/admin/src/components/Users/RoleSettingsModalSection/RolesSelectComponent.js
new file mode 100644
index 0000000000..d63a9a25d7
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/Users/RoleSettingsModalSection/RolesSelectComponent.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Padded } from '@buffetjs/core';
+import { Label, Description as BaseDescription } from '@buffetjs/styles';
+import { Col } from 'reactstrap';
+import styled from 'styled-components';
+
+import SelectRoles from '../SelectRoles';
+
+const Description = styled(BaseDescription)`
+ font-size: ${({ theme }) => theme.main.sizes.fonts.md};
+ line-height: normal;
+`;
+
+const RolesSelectComponent = ({ isDisabled, value, error, onChange }) => {
+ const { formatMessage } = useIntl();
+
+ return (
+
+
+
+
+
+
+ {formatMessage({
+ id: 'app.components.Users.ModalCreateBody.block-title.roles.description',
+ })}
+
+
+ );
+};
+
+RolesSelectComponent.defaultProps = {
+ value: null,
+ error: null,
+};
+RolesSelectComponent.propTypes = {
+ isDisabled: PropTypes.bool.isRequired,
+ value: PropTypes.array,
+ error: PropTypes.string,
+ onChange: PropTypes.func.isRequired,
+};
+
+export default RolesSelectComponent;
diff --git a/packages/strapi-admin/admin/src/components/Users/RoleSettingsModalSection/index.js b/packages/strapi-admin/admin/src/components/Users/RoleSettingsModalSection/index.js
new file mode 100644
index 0000000000..3918c1e905
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/Users/RoleSettingsModalSection/index.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ModalSection } from 'strapi-helper-plugin';
+import { Padded } from '@buffetjs/core';
+import { Row } from 'reactstrap';
+import { useIntl } from 'react-intl';
+import roleSettingsForm from 'ee_else_ce/components/Users/ModalCreateBody/utils/roleSettingsForm';
+
+import Input from '../../SizedInput';
+import Wrapper from '../ModalCreateBody/Wrapper';
+
+const RoleSettingsModalSection = ({ isDisabled, modifiedData, onChange, formErrors }) => {
+ const { formatMessage } = useIntl();
+
+ return (
+
+
+
+
+ {Object.keys(roleSettingsForm).map(inputName => {
+ const value = modifiedData[inputName];
+ const { description, type, Component } = roleSettingsForm[inputName];
+ const error = formErrors[inputName];
+
+ if (Component) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+};
+
+RoleSettingsModalSection.defaultProps = {
+ isDisabled: false,
+ formErrors: {},
+};
+
+RoleSettingsModalSection.propTypes = {
+ isDisabled: PropTypes.bool,
+ modifiedData: PropTypes.shape({
+ roles: PropTypes.array,
+ useSSORegistration: PropTypes.bool,
+ }).isRequired,
+ formErrors: PropTypes.shape({
+ roles: PropTypes.array,
+ useSSORegistration: PropTypes.bool,
+ }),
+ onChange: PropTypes.func.isRequired,
+};
+
+export default RoleSettingsModalSection;
diff --git a/packages/strapi-admin/admin/src/components/Users/SelectRoles/index.js b/packages/strapi-admin/admin/src/components/Users/SelectRoles/index.js
index 452fa17d71..5af4dcf999 100644
--- a/packages/strapi-admin/admin/src/components/Users/SelectRoles/index.js
+++ b/packages/strapi-admin/admin/src/components/Users/SelectRoles/index.js
@@ -19,6 +19,7 @@ const SelectRoles = ({ error, isDisabled, name, onChange, value }) => {
return (
<>