Merge branch 'master' into fix/role

2025-09-25 08:19:07 +00:00 · 2018-02-06 17:38:25 +01:00 · 2018-02-06 17:38:25 +01:00 · c7a1ab0b5d
commit c7a1ab0b5d
parent a07663afe4 dbfc51d659
21 changed files with 869 additions and 25 deletions
--- 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
--- 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
--- 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 || ''}",
--- 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
--- 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": "",
--- 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
--- 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',
--- a/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/index.js
+++ 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 = (
+      <input
+        autoFocus={autoFocus}
+        className="form-check-input"
+        checked={value}
+        disabled={disabled}
+        id={name}
+        onBlur={onBlur}
+        onChange={this.handleChange}
+        onFocus={onFocus}
+        tabIndex={tabIndex}
+        type="checkbox"
+      />
+    );
+
+    let content = <div />;
+
+    if (typeof(label) === 'string') {
+      content = (
+        <label className={cn('form-check-label', disabled && styles.disabled)} htmlFor={name}>
+          {checkbox}
+          {label}
+        </label>
+      );
+    }
+
+    if (isFunction(label)) {
+      content = (
+        <label className={cn('form-check-label', disabled && styles.disabled)} htmlFor={name}>
+          {checkbox}
+          {label()}
+        </label>
+      );
+    }
+
+    if (isObject(label) && label.id) {
+      content = (
+        <FormattedMessage id={label.id} defaultMessage={label.id} values={label.params}>
+          {(message) => (
+            <label className={cn('form-check-label', disabled && styles.disabled)} htmlFor={name}>
+              {checkbox}
+              {message}
+            </label>
+          )}
+        </FormattedMessage>
+      );
+    }
+    return (
+      <div className={cn(
+          'form-check',
+          styles.inputCheckbox,
+          !isEmpty(className) && className,
+        )}
+        style={style}
+      >
+        {content}
+      </div>
+    );
+  }
+}
+
+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;
--- a/packages/strapi-helper-plugin/lib/src/components/InputCheckbox/styles.scss
+++ 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;
+}
--- a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js
+++ 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) ? <div className={styles.spacer} /> : <div />;
+
+    if (!noErrorsDescription && !isEmpty(this.state.errors)) {
+      spacer = <div />;
+    }
+
+    if (isObject(title) && title.id) {
+      inputTitle = (
+        <div className={styles.inputTitle}>
+          <FormattedMessage id={title.id} defaultMessage={title.id} values={title.params} />
+        </div>
+      );
+    }
+
+    if (isFunction(title)) {
+      inputTitle = title();
+    }
+
+    return (
+      <div className={cn(
+          styles.container,
+          customBootstrapClass,
+          !isEmpty(className) && className,
+        )}
+        style={style}
+      >
+        {inputTitle}
+        <InputCheckbox
+          autoFocus={autoFocus}
+          className={inputClassName}
+          disabled={disabled}
+          label={label}
+          name={name}
+          onBlur={handleBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          style={inputStyle}
+          tabIndex={tabIndex}
+          value={value}
+        />
+        <InputDescription
+          className={cn(styles.inputCheckboxDescriptionContainer, inputDescriptionClassName)}
+          message={this.props.inputDescription}
+          style={inputDescriptionStyle}
+        />
+        <InputErrors
+          className={errorsClassName}
+          errors={this.state.errors}
+          style={errorsStyle}
+        />
+      {spacer}
+      </div>
+    );
+  }
+}
+
+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;
--- a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss
+++ 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;
+}
--- a/packages/strapi-helper-plugin/lib/src/components/InputSearch/index.js
+++ 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 (
+     <div className={cn(styles.inputSearch, 'input-group', !isEmpty(className) && className)} style={style}>
+       <span className={cn(
+           'input-group-addon',
+           styles.addonSearch,
+           this.state.isFocused && styles.addonFocus,
+           !deactivateErrorHighlight && error && styles.errorAddon,
+         )}
+       />
+       <FormattedMessage id={placeholder} defaultMessage={placeholder}>
+         {(message) => (
+           <input
+             autoFocus={autoFocus}
+             className={cn(
+               'form-control',
+               !deactivateErrorHighlight && error && 'is-invalid',
+               !deactivateErrorHighlight && error && this.state.isFocused && styles.invalidSearch,
+             )}
+             disabled={disabled}
+             id={name}
+             name={name}
+             onBlur={this.handleBlur}
+             onChange={onChange}
+             onFocus={this.handleFocus}
+             placeholder={message}
+             tabIndex={tabIndex}
+             type="text"
+             value={value}
+           />
+         )}
+       </FormattedMessage>
+     </div>
+   );
+ }
+}
+
+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;
--- a/packages/strapi-helper-plugin/lib/src/components/InputSearch/styles.scss
+++ 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;
+}
--- a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js
+++ 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) ? <div className={styles.spacer} /> : <div />;
+
+    if (!noErrorsDescription && !isEmpty(this.state.errors)) {
+      spacer = <div />;
+    }
+
+    return (
+      <div className={cn(
+          styles.containerSearch,
+          this.props.customBootstrapClass,
+          !isEmpty(this.props.className) && this.props.className,
+        )}
+        style={style}
+      >
+        <Label
+          className={labelClassName}
+          htmlFor={name}
+          message={label}
+          style={labelStyle}
+        />
+        <InputSearch
+          autoFocus={autoFocus}
+          className={inputClassName}
+          disabled={disabled}
+          deactivateErrorHighlight={deactivateErrorHighlight}
+          error={!isEmpty(this.state.errors)}
+          name={name}
+          onBlur={handleBlur}
+          onChange={onChange}
+          onFocus={onFocus}
+          placeholder={placeholder}
+          style={inputStyle}
+          tabIndex={tabIndex}
+          value={value}
+        />
+        <InputDescription
+          className={inputDescriptionClassName}
+          message={inputDescription}
+          style={inputDescriptionStyle}
+        />
+        <InputErrors
+          className={errorsClassName}
+          errors={!noErrorsDescription && this.state.errors || []}
+          style={errorsStyle}
+        />
+        {spacer}
+      </div>
+    );
+  }
+
+  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;
--- a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss
+++ 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;
+}
--- 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 }) => <div>Your input type: <b>{type}</b> does not exist</div>

 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,
--- 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
      <div className={styles.editForm}>
        <div className="row">
          <Input
-            label="users-permissions.EditForm.inputToggle.label.email"
-            inputDescription="users-permissions.EditForm.inputToggle.description.email"
+            label={{ id: 'users-permissions.EditForm.inputToggle.label.email' }}
+            inputDescription={{ id: 'users-permissions.EditForm.inputToggle.description.email' }}
            name="unique_email"
            onChange={this.props.onChange}
            type="toggle"
            value={get(this.props.values, 'unique_email')}
-            validations={{}}
          />
        </div>
        <div className={styles.separator} />
@ -56,13 +55,12 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
        */}
        <div className="row">
          <Input
-            label="users-permissions.EditForm.inputToggle.label.sign-up"
-            inputDescription="users-permissions.EditForm.inputToggle.description.sign-up"
+            label={{ id: 'users-permissions.EditForm.inputToggle.label.sign-up' }}
+            inputDescription={{ id: 'users-permissions.EditForm.inputToggle.description.sign-up' }}
            name="allow_register"
            onChange={this.props.onChange}
            type="toggle"
            value={get(this.props.values, 'allow_register')}
-            validations={{}}
          />
        </div>
      </div>
--- 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 (
        <div className={`row ${styles.providerDisabled}`}>
          <Input
-            inputDescription="users-permissions.PopUpForm.Providers.enabled.description"
-            label="users-permissions.PopUpForm.Providers.enabled.label"
+            inputDescription={{ id: 'users-permissions.PopUpForm.Providers.enabled.description' }}
+            label={{ id: 'users-permissions.PopUpForm.Providers.enabled.label' }}
            name={`${dataToEdit}.enabled`}
            onChange={this.handleChange}
            type="toggle"
@ -120,7 +120,7 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st
              didCheckErrors={this.props.didCheckErrors}
              errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', value]), 'errors'], [])}
              key={value}
-              label={`users-permissions.PopUpForm.Providers.${ includes(value, 'callback') || includes(value, 'redirect_uri') ? 'redirectURL.front-end' : value}.label`}
+              label={{ id: `users-permissions.PopUpForm.Providers.${ includes(value, 'callback') || includes(value, 'redirect_uri') ? 'redirectURL.front-end' : value}.label` }}
              name={`${dataToEdit}.${value}`}
              onFocus={includes(value, 'callback') || includes(value, 'redirect_uri') ? this.handleFocus : () => {}}
              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
            <Input
              customBootstrapClass="col-md-12"
              disabled
-              label={`users-permissions.PopUpForm.Providers.${dataToEdit}.providerConfig.redirectURL`}
+              label={{ id: `users-permissions.PopUpForm.Providers.${dataToEdit}.providerConfig.redirectURL` }}
              name="noName"
              type="text"
              onChange={() => {}}
@ -146,6 +146,14 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st
      );
    }

+    const params = {
+      link: (
+        <a href="https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-users-permissions/docs/email-templates.md" target="_blank">
+          <FormattedMessage id="users-permissions.PopUpForm.Email.link.documentation" />
+        </a>
+      ),
+    };
+
    return (
      <div className="row">
        {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' } : {}}
          />
        ))}
      </div>
--- 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."
 }
--- 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"
 }
--- 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
  }
-}
+}