diff --git a/packages/strapi-admin/admin/.gitignore b/packages/strapi-admin/admin/.gitignore index e7039d8a78..ad2318a4a0 100644 --- a/packages/strapi-admin/admin/.gitignore +++ b/packages/strapi-admin/admin/.gitignore @@ -1,6 +1,7 @@ # Don't check auto-generated stuff into git coverage node_modules +manifest.json plugins.json stats.json package-lock.json diff --git a/packages/strapi-generate-new/files/config/environments/development/server.json b/packages/strapi-generate-new/files/config/environments/development/server.json index 2c9235833f..d891a7547c 100755 --- a/packages/strapi-generate-new/files/config/environments/development/server.json +++ b/packages/strapi-generate-new/files/config/environments/development/server.json @@ -1,5 +1,5 @@ { - "host": "localhost", + "host": "127.0.0.1", "port": 1337, "autoReload": { "enabled": true diff --git a/packages/strapi-generate-new/files/config/environments/production/database.json b/packages/strapi-generate-new/files/config/environments/production/database.json index 6b283d6ebd..5197ec20a4 100755 --- a/packages/strapi-generate-new/files/config/environments/production/database.json +++ b/packages/strapi-generate-new/files/config/environments/production/database.json @@ -5,7 +5,7 @@ "connector": "strapi-mongoose", "settings": { "client": "mongo", - "host": "${process.env.DATABASE_HOST || 'localhost'}", + "host": "${process.env.DATABASE_HOST || '127.0.0.1'}", "port": "${process.env.DATABASE_PORT || 27017}", "database": "${process.env.DATABASE_NAME || 'production'}", "username": "${process.env.DATABASE_USERNAME || ''}", diff --git a/packages/strapi-generate-new/files/config/environments/production/server.json b/packages/strapi-generate-new/files/config/environments/production/server.json index fd731f3c21..6a78348d7e 100755 --- a/packages/strapi-generate-new/files/config/environments/production/server.json +++ b/packages/strapi-generate-new/files/config/environments/production/server.json @@ -1,5 +1,5 @@ { - "host": "localhost", + "host": "127.0.0.1", "port": 1337, "autoReload": { "enabled": false diff --git a/packages/strapi-generate-new/files/config/environments/test/database.json b/packages/strapi-generate-new/files/config/environments/test/database.json index 74443c1c1a..9241d26dbe 100755 --- a/packages/strapi-generate-new/files/config/environments/test/database.json +++ b/packages/strapi-generate-new/files/config/environments/test/database.json @@ -5,7 +5,7 @@ "connector": "strapi-mongoose", "settings": { "client": "mongo", - "host": "localhost", + "host": "127.0.0.1", "port": 27017, "database": "test", "username": "", diff --git a/packages/strapi-generate-new/files/config/environments/test/server.json b/packages/strapi-generate-new/files/config/environments/test/server.json index 2c9235833f..d891a7547c 100755 --- a/packages/strapi-generate-new/files/config/environments/test/server.json +++ b/packages/strapi-generate-new/files/config/environments/test/server.json @@ -1,5 +1,5 @@ { - "host": "localhost", + "host": "127.0.0.1", "port": 1337, "autoReload": { "enabled": true diff --git a/packages/strapi-generate-new/lib/before.js b/packages/strapi-generate-new/lib/before.js index 9989091348..c0297c8e66 100755 --- a/packages/strapi-generate-new/lib/before.js +++ b/packages/strapi-generate-new/lib/before.js @@ -136,7 +136,7 @@ module.exports = (scope, cb) => { prefix: '', name: 'host', message: 'Host:', - default: _.get(scope.database, 'host', 'localhost') + default: _.get(scope.database, 'host', '127.0.0.1') }, { type: 'input', diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/index.js b/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/index.js new file mode 100644 index 0000000000..f354c48dbf --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/index.js @@ -0,0 +1,133 @@ +/** + * + * InputCheckbox + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; +import { isEmpty, isFunction, isObject } from 'lodash'; +import cn from 'classnames'; + +import styles from './styles.scss'; + +class InputCheckbox extends React.Component { + handleChange = () => { + const target = { + name: this.props.name, + type: 'checkbox', + value: !this.props.value, + }; + + this.props.onChange({ target }); + } + + render() { + const { + autoFocus, + className, + disabled, + label, + name, + onBlur, + onFocus, + style, + tabIndex, + value, + } = this.props; + const checkbox = ( + + ); + + let content =
; + + if (typeof(label) === 'string') { + content = ( + + ); + } + + if (isFunction(label)) { + content = ( + + ); + } + + if (isObject(label) && label.id) { + content = ( + + {(message) => ( + + )} + + ); + } + return ( +
+ {content} +
+ ); + } +} + +InputCheckbox.defaultProps = { + autoFocus: false, + className: '', + disabled: false, + label: '', + onBlur: () => {}, + onFocus: () => {}, + style: {}, + tabIndex: '0', + value: false, +}; + +InputCheckbox.propTypes = { + autoFocus: PropTypes.bool, + className: PropTypes.string, + disabled: PropTypes.bool, + label: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.shape({ + id: PropTypes.string, + params: PropTypes.object, + }), + ]), + name: PropTypes.string.isRequired, + onBlur: PropTypes.func, + onChange: PropTypes.func.isRequired, + onFocus: PropTypes.func, + style: PropTypes.object, + tabIndex: PropTypes.string, + value: PropTypes.bool, +}; + +export default InputCheckbox; diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/styles.scss new file mode 100644 index 0000000000..a7fac86bd0 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/styles.scss @@ -0,0 +1,15 @@ +.inputCheckbox { + margin-bottom: 0; + font-weight: 400; + label { + cursor: pointer; + } + input { + margin-right: 1.2rem; + } + +} + +.disabled { + cursor: not-allowed; +} diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js new file mode 100644 index 0000000000..54e28570f9 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js @@ -0,0 +1,213 @@ +/** + * + * InputCheckboxWithErrors + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; +import { includes, isEmpty, isObject, isFunction, mapKeys, reject } from 'lodash'; +import cn from 'classnames'; + +// Design +import Label from 'components/Label'; +import InputDescription from 'components/InputDescription'; +import InputErrors from 'components/InputErrors'; +import InputCheckbox from 'components/InputCheckbox'; + +import styles from './styles.scss'; + +class InputCheckboxWithErrors extends React.Component { + state = { errors: [] }; + + componentDidMount() { + // Display input error if it already has some + const { errors } = this.props; + if (!isEmpty(errors)) { + this.setState({ errors }); + } + } + + componentWillReceiveProps(nextProps) { + // Check if errors have been updated during validations + if (nextProps.didCheckErrors !== this.props.didCheckErrors) { + // Remove from the state the errors that have already been set + const errors = isEmpty(nextProps.errors) ? [] : nextProps.errors; + this.setState({ errors }); + } + } + + render () { + const { + autoFocus, + className, + customBootstrapClass, + deactivateErrorHighlight, + disabled, + errorsClassName, + errorsStyle, + inputClassName, + inputDescription, + inputDescriptionClassName, + inputDescriptionStyle, + inputStyle, + label, + labelClassName, + labelStyle, + name, + noErrorsDescription, + onBlur, + onChange, + onFocus, + placeholder, + style, + tabIndex, + title, + value, + } = this.props; + + const handleBlur = onBlur ? onBlur : () => {}; + let inputTitle = ''; + + let spacer = !isEmpty(inputDescription) ?
:
; + + if (!noErrorsDescription && !isEmpty(this.state.errors)) { + spacer =
; + } + + if (isObject(title) && title.id) { + inputTitle = ( +
+ +
+ ); + } + + if (isFunction(title)) { + inputTitle = title(); + } + + return ( +
+ {inputTitle} + + + + {spacer} +
+ ); + } +} + +InputCheckboxWithErrors.defaultProps = { + autoFocus: false, + className: '', + customBootstrapClass: 'col-md-3', + deactivateErrorHighlight: false, + didCheckErrors: false, + disabled: false, + onBlur: () => {}, + onFocus: () => {}, + errors: [], + errorsClassName: '', + errorsStyle: {}, + inputClassName: '', + inputDescription: '', + inputDescriptionClassName: '', + inputDescriptionStyle: {}, + inputStyle: {}, + label: '', + labelClassName: '', + labelStyle: {}, + noErrorsDescription: false, + placeholder: 'app.utils.placeholder.defaultMessage', + style: {}, + tabIndex: '0', + title: '', + validations: {}, + value: false, +}; +InputCheckboxWithErrors.propTypes = { + autoFocus: PropTypes.bool, + className: PropTypes.string, + customBootstrapClass: PropTypes.string, + deactivateErrorHighlight: PropTypes.bool, + didCheckErrors: PropTypes.bool, + disabled: PropTypes.bool, + errors: PropTypes.array, + errorsClassName: PropTypes.string, + errorsStyle: PropTypes.object, + inputClassName: PropTypes.string, + inputDescription: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.shape({ + id: PropTypes.string, + params: PropTypes.object, + }), + ]), + inputDescriptionClassName: PropTypes.string, + inputDescriptionStyle: PropTypes.object, + inputStyle: PropTypes.object, + label: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.shape({ + id: PropTypes.string, + params: PropTypes.object, + }), + ]), + labelClassName: PropTypes.string, + labelStyle: PropTypes.object, + name: PropTypes.string.isRequired, + noErrorsDescription: PropTypes.bool, + onBlur: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.func, + ]), + onChange: PropTypes.func.isRequired, + onFocus: PropTypes.func, + placeholder: PropTypes.string, + style: PropTypes.object, + tabIndex: PropTypes.string, + title: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.shape({ + id: PropTypes.string, + params: PropTypes.object, + }), + ]), + validations: PropTypes.object, + value: PropTypes.bool, +}; + +export default InputCheckboxWithErrors; diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss new file mode 100644 index 0000000000..29ccc32e0d --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss @@ -0,0 +1,27 @@ +.container { + margin-bottom: 1.5rem; + font-size: 1.3rem; + font-family: 'Lato'; +} + +.spacer { + height: .5rem; +} + +.inputCheckboxDescriptionContainer { + width: 150%; + margin-top: .2rem; + padding-left: 2.5rem; + line-height: 1.2rem; + + > small { + color: #9EA7B8; + font-family: 'Lato'; + font-size: 1.2rem; + } +} + +.inputTitle { + margin-bottom: 1.7rem; + font-weight: 500; +} diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSearch/index.js b/packages/strapi-helper-plugin/lib/src/components/InputSearch/index.js new file mode 100644 index 0000000000..dfafaa8a4b --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/InputSearch/index.js @@ -0,0 +1,108 @@ +/** + * + * InputSearch + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { isEmpty } from 'lodash'; +import { FormattedMessage } from 'react-intl'; +import cn from 'classnames'; + +import styles from './styles.scss'; + +class InputSearch extends React.Component { + state = { isFocused: false }; + + handleBlur = (e) => { + this.setState({ isFocused: !this.state.isFocused }); + this.props.onBlur(e); + } + + handleFocus = (e) => { + this.setState({ isFocused: !this.state.isFocused }); + this.props.onFocus(e); + } + + render() { + const { + autoFocus, + className, + deactivateErrorHighlight, + disabled, + error, + name, + onChange, + placeholder, + style, + tabIndex, + value, + } = this.props; + + return ( +
+ + + {(message) => ( + + )} + +
+ ); + } +} + +InputSearch.defaultProps = { + autoFocus: false, + className: '', + deactivateErrorHighlight: false, + disabled: false, + error: false, + onBlur: () => {}, + onFocus: () => {}, + placeholder: 'app.utils.placeholder.defaultMessage', + style: {}, + tabIndex: '0', +}; + +InputSearch.propTypes = { + autoFocus: PropTypes.bool, + className: PropTypes.string, + deactivateErrorHighlight: PropTypes.bool, + disabled: PropTypes.bool, + error: PropTypes.bool, + onBlur: PropTypes.func, + onChange: PropTypes.func.isRequired, + onFocus: PropTypes.func, + name: PropTypes.string.isRequired, + placeholder: PropTypes.string, + style: PropTypes.object, + tabIndex: PropTypes.string, + value: PropTypes.string.isRequired, +}; + +export default InputSearch; diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSearch/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputSearch/styles.scss new file mode 100644 index 0000000000..8a35aa5b26 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/InputSearch/styles.scss @@ -0,0 +1,71 @@ +.addonSearch { + width: 3.4rem; + height: 3.4rem; + margin-top: .9rem; + padding-left: 0.9rem; + background-color: rgba(16, 22, 34, 0.02); + border: 1px solid #E3E9F3; + border-right: 0; + border-radius: 0.25rem; + color: rgba(16, 22, 34, 0.5); + line-height: 3.2rem; + font-size: 1.3rem; + font-weight: 600!important; + -moz-appearance: none; + -webkit-appearance: none; + -webkit-font-smoothing: antialiased; + &:after { + content: '\F002'; + display: inline-table; + color: #B3B5B9; + font-size: 14px; + font-weight: 400; + font-family: 'FontAwesome'; + -webkit-font-smoothing: antialiased; + } + + & + input { + border-left: 0px !important; + } +} + +.inputSearch { + min-width: 200px; + margin-bottom: 1rem; + font-size: 1.3rem; + + > input { + height: 3.4rem; + margin-top: .9rem; + padding-left: 1rem; + background-size: 0 !important; + border: 1px solid #E3E9F3; + border-radius: 0.25rem; + line-height: 3.4rem; + font-size: 1.3rem; + font-family: 'Lato' !important; + box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05); + &:focus { + border-color: #78caff; + } + } + + & + span { + border-color: #E3E9F3; + } +} + +.errorAddon { + border: 1px solid #ff203c!important; + border-right: none!important; +} + +.addonFocus { + border-color: #78caff; + border-right: 0; +} + +.invalidSearch { + border-color: #ff203c !important; + border-left: 0; +} diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js new file mode 100644 index 0000000000..4b6e0d747f --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js @@ -0,0 +1,252 @@ +/** + * + * InputSearchWithErrors + * + */ + +import React from 'react'; +import PropTypes from 'prop-types'; +import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash'; +import cn from 'classnames'; + +// Design +import Label from 'components/Label'; +import InputDescription from 'components/InputDescription'; +import InputErrors from 'components/InputErrors'; +import InputSearch from 'components/InputSearch'; + +import styles from './styles.scss'; + +class InputSearchWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function + state = { errors: [], hasInitialValue: false }; + + componentDidMount() { + const { value, errors } = this.props; + + // Prevent the input from displaying an error when the user enters and leaves without filling it + if (value && !isEmpty(value)) { + this.setState({ hasInitialValue: true }); + } + + // Display input error if it already has some + if (!isEmpty(errors)) { + this.setState({ errors }); + } + } + + componentWillReceiveProps(nextProps) { + // Check if errors have been updated during validations + if (nextProps.didCheckErrors !== this.props.didCheckErrors) { + // Remove from the state the errors that have already been set + const errors = isEmpty(nextProps.errors) ? [] : nextProps.errors; + this.setState({ errors }); + } + } + + /** + * Set the errors depending on the validations given to the input + * @param {Object} target + */ + handleBlur = ({ target }) => { + // Prevent from displaying error if the input is initially isEmpty + if (!isEmpty(target.value) || this.state.hasInitialValue) { + const errors = this.validate(target.value); + this.setState({ errors, hasInitialValue: true }); + } + } + + render() { + const { + autoFocus, + deactivateErrorHighlight, + disabled, + errorsClassName, + errorsStyle, + inputClassName, + inputDescription, + inputDescriptionClassName, + inputDescriptionStyle, + inputStyle, + label, + labelClassName, + labelStyle, + name, + noErrorsDescription, + onBlur, + onChange, + onFocus, + placeholder, + style, + tabIndex, + value, + } = this.props; + const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur; + + let spacer = !isEmpty(inputDescription) ?
:
; + + if (!noErrorsDescription && !isEmpty(this.state.errors)) { + spacer =
; + } + + return ( +
+
+ ); + } + + validate = (value) => { + const requiredError = { id: 'components.Input.error.validation.required' }; + let errors = []; + + mapKeys(this.props.validations, (validationValue, validationKey) => { + switch (validationKey) { + case 'maxLength': { + if (value.length > validationValue) { + errors.push({ id: 'components.Input.error.validation.maxLength' }); + } + break; + } + case 'minLength': { + if (value.length < validationValue) { + errors.push({ id: 'components.Input.error.validation.minLength' }); + } + break; + } + case 'required': { + if (value.length === 0) { + errors.push({ id: 'components.Input.error.validation.required' }); + } + break; + } + case 'regex': { + if (!new RegExp(validationValue).test(value)) { + errors.push({ id: 'components.Input.error.validation.regex' }); + } + break; + } + default: + errors = []; + } + }); + + if (includes(errors, requiredError)) { + errors = reject(errors, (error) => error !== requiredError); + } + + return errors; + } +} + +InputSearchWithErrors.defaultProps = { + autoFocus: false, + className: '', + customBootstrapClass: 'col-md-6', + deactivateErrorHighlight: false, + didCheckErrors: false, + disabled: false, + onBlur: false, + onFocus: () => {}, + errors: [], + errorsClassName: '', + errorsStyle: {}, + inputClassName: '', + inputDescription: '', + inputDescriptionClassName: '', + inputDescriptionStyle: {}, + inputStyle: {}, + label: '', + labelClassName: '', + labelStyle: {}, + noErrorsDescription: false, + placeholder: 'app.utils.placeholder.defaultMessage', + style: {}, + tabIndex: '0', + validations: {}, +}; + +InputSearchWithErrors.propTypes = { + autoFocus: PropTypes.bool, + className: PropTypes.string, + customBootstrapClass: PropTypes.string, + deactivateErrorHighlight: PropTypes.bool, + didCheckErrors: PropTypes.bool, + disabled: PropTypes.bool, + errors: PropTypes.array, + errorsClassName: PropTypes.string, + errorsStyle: PropTypes.object, + inputClassName: PropTypes.string, + inputDescription: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.shape({ + id: PropTypes.string, + params: PropTypes.object, + }), + ]), + inputDescriptionClassName: PropTypes.string, + inputDescriptionStyle: PropTypes.object, + inputStyle: PropTypes.object, + label: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.func, + PropTypes.shape({ + id: PropTypes.string, + params: PropTypes.object, + }), + ]), + labelClassName: PropTypes.string, + labelStyle: PropTypes.object, + name: PropTypes.string.isRequired, + noErrorsDescription: PropTypes.bool, + onBlur: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.func, + ]), + onChange: PropTypes.func.isRequired, + onFocus: PropTypes.func, + placeholder: PropTypes.string, + style: PropTypes.object, + tabIndex: PropTypes.string, + validations: PropTypes.object, + value: PropTypes.string.isRequired, +}; + +export default InputSearchWithErrors; diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss new file mode 100644 index 0000000000..64c5d42fe9 --- /dev/null +++ b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss @@ -0,0 +1,9 @@ +.containerSearch { + min-width: 200px; + margin-bottom: 1.5rem; + font-size: 1.3rem; +} + +.spacer { + height: .5rem; +} diff --git a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js index e2bc052db5..e41746b06c 100644 --- a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js @@ -7,8 +7,10 @@ import React from 'react'; import PropTypes from 'prop-types'; // Design +import InputCheckboxWithErrors from 'components/InputCheckboxWithErrors'; import InputEmailWithErrors from 'components/InputEmailWithErrors'; import InputNumberWithErrors from 'components/InputNumberWithErrors'; +import InputSearchWithErrors from 'components/InputSearchWithErrors'; import InputSelectWithErrors from 'components/InputSelectWithErrors'; import InputPasswordWithErrors from 'components/InputPasswordWithErrors'; import InputTextAreaWithErrors from 'components/InputTextAreaWithErrors'; @@ -18,9 +20,11 @@ import InputToggleWithErrors from 'components/InputToggleWithErrors'; const DefaultInputError = ({ type }) =>
Your input type: {type} does not exist
const inputs = { + checkbox: InputCheckboxWithErrors, email: InputEmailWithErrors, number: InputNumberWithErrors, password: InputPasswordWithErrors, + search: InputSearchWithErrors, select: InputSelectWithErrors, string: InputTextWithErrors, text: InputTextWithErrors, @@ -40,9 +44,11 @@ InputsIndex.propTypes = { export default InputsIndex; export { + InputCheckboxWithErrors, InputEmailWithErrors, InputNumberWithErrors, InputPasswordWithErrors, + InputSearchWithErrors, InputSelectWithErrors, InputTextWithErrors, InputTextAreaWithErrors, diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/EditForm/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/EditForm/index.js index ad6cebfb8e..5e7be0e294 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/components/EditForm/index.js +++ b/packages/strapi-plugin-users-permissions/admin/src/components/EditForm/index.js @@ -8,7 +8,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { get } from 'lodash'; -import Input from 'components/Input'; +import Input from 'components/InputsIndex'; import styles from './styles.scss'; @@ -18,13 +18,12 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
@@ -56,13 +55,12 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta */}
diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js index f0a277e6e9..8b3ebba020 100644 --- a/packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js +++ b/packages/strapi-plugin-users-permissions/admin/src/components/PopUpForm/index.js @@ -26,7 +26,7 @@ import { // Translations import en from 'translations/en.json'; -import Input from 'components/Input'; +import Input from 'components/InputsIndex'; import styles from './styles.scss'; @@ -102,8 +102,8 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st return (
{}} onBlur={includes(value, 'callback') || includes(value, 'redirect_uri') ? this.handleBlur : false} @@ -134,7 +134,7 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st {}} @@ -146,6 +146,14 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st ); } + const params = { + link: ( + + + + ), + }; + return (
{map(take(form, 3), (value, key) => ( @@ -154,7 +162,7 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st key={value} didCheckErrors={this.props.didCheckErrors} errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', value]), 'errors'], [])} - label={`users-permissions.PopUpForm.Email.${value}.label`} + label={{ id: `users-permissions.PopUpForm.Email.${value}.label` }} name={`${dataToEdit}.${value}`} onChange={this.props.onChange} placeholder={`users-permissions.PopUpForm.Email.${value}.placeholder`} @@ -170,15 +178,18 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st customBootstrapClass="col-md-12" didCheckErrors={this.props.didCheckErrors} errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', value]), 'errors'], [])} - label={`users-permissions.PopUpForm.Email.${value}.label`} + label={{ id: `users-permissions.PopUpForm.Email.${value}.label` }} name={`${dataToEdit}.${value}`} - inputDescription={includes(value, 'object') ? 'users-permissions.PopUpForm.Email.email_templates.inputDescription' : ''} - linkContent={includes(value, 'object') ? { link: 'https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-users-permissions/docs/email-templates.md', description: 'users-permissions.PopUpForm.Email.link.documentation' } : {}} + inputDescription={{ + id: includes(value, 'object') ? 'users-permissions.PopUpForm.Email.email_templates.inputDescription' : '', + params, + }} onChange={this.props.onChange} placeholder={`users-permissions.PopUpForm.Email.${this.props.dataToEdit}.${value}.placeholder`} type={includes(value, 'object') ? 'text' : 'textarea'} validations={{ required: true }} value={get(values, value)} + inputStyle={!includes(value, 'object') ? { height: '16rem' } : {}} /> ))}
diff --git a/packages/strapi-plugin-users-permissions/admin/src/translations/en.json b/packages/strapi-plugin-users-permissions/admin/src/translations/en.json index 52c5bf09b2..26fd5b45e1 100755 --- a/packages/strapi-plugin-users-permissions/admin/src/translations/en.json +++ b/packages/strapi-plugin-users-permissions/admin/src/translations/en.json @@ -168,6 +168,6 @@ "PopUpForm.Providers.twitter.providerConfig.redirectURL": "The redirect URL to add in your Twitter application configurations", "PopUpForm.Providers.callback.placeholder": "TEXT", - "PopUpForm.Email.email_templates.inputDescription": "Don't know how to set variables", + "PopUpForm.Email.email_templates.inputDescription": "Don't know how to set variables, {link}", "PopUpForm.Email.link.documentation": "check out our documentation." } diff --git a/packages/strapi-plugin-users-permissions/admin/src/translations/fr.json b/packages/strapi-plugin-users-permissions/admin/src/translations/fr.json index 64b9166782..26eb1e462b 100755 --- a/packages/strapi-plugin-users-permissions/admin/src/translations/fr.json +++ b/packages/strapi-plugin-users-permissions/admin/src/translations/fr.json @@ -167,6 +167,6 @@ "PopUpForm.Providers.twitter.providerConfig.redirectURL": "L'URL de redirection à ajouter dans les configurations Twitter de votre application", "PopUpForm.Providers.callback.placeholder": "TEXT", - "PopUpForm.Email.email_templates.inputDescription": "Regardez la documentation des variables", + "PopUpForm.Email.email_templates.inputDescription": "Regardez la documentation des variables, {link}", "PopUpForm.Email.link.documentation": "afin de templeter vos emails" } diff --git a/packages/strapi-plugin-users-permissions/config/advanced.json b/packages/strapi-plugin-users-permissions/config/advanced.json index 0979d94ffe..0cb4fbe9a9 100644 --- a/packages/strapi-plugin-users-permissions/config/advanced.json +++ b/packages/strapi-plugin-users-permissions/config/advanced.json @@ -3,4 +3,4 @@ "unique_email": true, "allow_register": true } -} \ No newline at end of file +}