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..5567dcf81b
--- /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 = ({ link, description }) => {
+ const handleCopy = () => {
+ strapi.notification.toggle({ type: 'info', message: { id: 'notification.link-copied' } });
+ };
+
+ return (
+
+
+
+
+
+
+ {link}
+
+
+
+
+
+ {description}
+
+
+
+ );
+};
+
+LinkNotification.defaultProps = {
+ link: '',
+ description: '',
+};
+
+LinkNotification.propTypes = {
+ link: PropTypes.string,
+ description: PropTypes.string,
+};
+
+export default LinkNotification;
diff --git a/packages/strapi-admin/admin/src/components/Users/LoginModalSection/RolesSelectComponent.js b/packages/strapi-admin/admin/src/components/Users/LoginModalSection/RolesSelectComponent.js
new file mode 100644
index 0000000000..d63a9a25d7
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/Users/LoginModalSection/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/LoginModalSection/index.js b/packages/strapi-admin/admin/src/components/Users/LoginModalSection/index.js
new file mode 100644
index 0000000000..2832cdfb7e
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/Users/LoginModalSection/index.js
@@ -0,0 +1,74 @@
+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 loginSettingsForm from 'ee_else_ce/components/Users/ModalCreateBody/utils/loginSettingsForm';
+
+import Input from '../../SizedInput';
+import Wrapper from '../ModalCreateBody/Wrapper';
+
+const LoginModalSection = ({ isDisabled, modifiedData, onChange, formErrors }) => {
+ const { formatMessage } = useIntl();
+
+ return (
+
+
+
+
+ {Object.keys(loginSettingsForm).map(inputName => {
+ if (loginSettingsForm[inputName].Component) {
+ const { Component } = loginSettingsForm[inputName];
+
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+};
+
+LoginModalSection.defaultProps = {
+ isDisabled: false,
+ formErrors: {},
+};
+
+LoginModalSection.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 LoginModalSection;
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..337d42664e 100644
--- a/packages/strapi-admin/admin/src/components/Users/MagicLink/index.js
+++ b/packages/strapi-admin/admin/src/components/Users/MagicLink/index.js
@@ -1,50 +1,22 @@
-// 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 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 MagicLink = ({ registrationToken, description }) => {
const link = `${window.location.origin}${basename}auth/register?registrationToken=${registrationToken}`;
- return (
-
-
-
-
-
-
- {link}
-
-
-
-
-
- {formatMessage({ id: 'app.components.Users.MagicLink.connect' })}
-
-
-
- );
+ return ;
};
MagicLink.defaultProps = {
registrationToken: '',
+ description: '',
};
MagicLink.propTypes = {
registrationToken: PropTypes.string,
+ description: PropTypes.string,
};
export default MagicLink;
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..75d3bd5d3a 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 LoginModalSection from '../LoginModalSection';
// 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..46e51c4b1c 100644
--- a/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/reducer.js
+++ b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/reducer.js
@@ -1,18 +1,14 @@
/* 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) =>
+const reducer = (state = initialState, action) =>
produce(state, draftState => {
switch (action.type) {
case 'ON_CHANGE': {
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/loginSettingsForm.js b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/loginSettingsForm.js
new file mode 100644
index 0000000000..f2218fa5ef
--- /dev/null
+++ b/packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/loginSettingsForm.js
@@ -0,0 +1,10 @@
+import RolesSelectComponent from '../../LoginModalSection/RolesSelectComponent';
+
+const loginSettingsForm = {
+ roles: {
+ label: 'Settings.permissions.users.form.firstname',
+ Component: RolesSelectComponent,
+ },
+};
+
+export default loginSettingsForm;
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 (
<>