From 3d2538d72e424d9f738da35d1ade9630bca44295 Mon Sep 17 00:00:00 2001 From: HichamELBSI Date: Thu, 11 Feb 2021 15:49:12 +0100 Subject: [PATCH] Add new user EE for SSO Signed-off-by: HichamELBSI --- .../Envelope.js | 0 .../IconWrapper.js | 0 .../Wrapper.js | 0 .../Users/LinkNotification/index.js | 47 ++++++++++++ .../LoginModalSection/RolesSelectComponent.js | 53 +++++++++++++ .../Users/LoginModalSection/index.js | 74 +++++++++++++++++++ .../src/components/Users/MagicLink/index.js | 38 ++-------- .../components/Users/ModalCreateBody/index.js | 43 ++++------- .../Users/ModalCreateBody/reducer.js | 10 +-- .../ModalCreateBody/utils/formDataModel.js | 8 ++ .../utils/loginSettingsForm.js | 10 +++ .../src/components/Users/SelectRoles/index.js | 1 + .../containers/Users/ListPage/ModalForm.js | 5 +- .../admin/src/translations/en.json | 7 +- .../admin/components/Users/MagicLink/index.js | 36 +++++++++ .../ModalCreateBody/utils/formDataModel.js | 14 ++++ .../utils/loginSettingsForm.js | 21 ++++++ packages/strapi-admin/webpack.config.dev.js | 2 +- yarn.lock | 35 +-------- 19 files changed, 297 insertions(+), 107 deletions(-) rename packages/strapi-admin/admin/src/components/Users/{MagicLink => LinkNotification}/Envelope.js (100%) rename packages/strapi-admin/admin/src/components/Users/{MagicLink => LinkNotification}/IconWrapper.js (100%) rename packages/strapi-admin/admin/src/components/Users/{MagicLink => LinkNotification}/Wrapper.js (100%) create mode 100644 packages/strapi-admin/admin/src/components/Users/LinkNotification/index.js create mode 100644 packages/strapi-admin/admin/src/components/Users/LoginModalSection/RolesSelectComponent.js create mode 100644 packages/strapi-admin/admin/src/components/Users/LoginModalSection/index.js create mode 100644 packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/formDataModel.js create mode 100644 packages/strapi-admin/admin/src/components/Users/ModalCreateBody/utils/loginSettingsForm.js create mode 100644 packages/strapi-admin/ee/admin/components/Users/MagicLink/index.js create mode 100644 packages/strapi-admin/ee/admin/components/Users/ModalCreateBody/utils/formDataModel.js create mode 100644 packages/strapi-admin/ee/admin/components/Users/ModalCreateBody/utils/loginSettingsForm.js 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 ( <>