From da41adeacf8d1df66a607a4f4c1263405a541432 Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Tue, 6 Feb 2018 17:32:15 +0100
Subject: [PATCH 1/7] Use new input lib in AuthPage container

---
 .../lib/src/components/InputsIndex/index.js   |  3 +-
 .../admin/src/containers/AuthPage/form.json   | 44 ++++++++++++++-----
 .../admin/src/containers/AuthPage/index.js    |  4 +-
 3 files changed, 37 insertions(+), 14 deletions(-)

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 3a7d75defc..44b6c60816 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
@@ -32,8 +32,9 @@ const inputs = {
 
 function InputsIndex(props) {
   const Input = inputs[props.type] ? inputs[props.type] : DefaultInputError;
+  const inputValue = props.value || '';
 
-  return <Input {...props} />;
+  return <Input {...props} value={inputValue} />;
 }
 
 InputsIndex.propTypes = {
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/form.json b/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/form.json
index a286de0f76..433c9dd564 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/form.json
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/form.json
@@ -3,7 +3,9 @@
     "forgot-password": [
       {
         "customBootstrapClass": "col-md-12",
-        "label": "users-permissions.Auth.form.forgot-password.email.label",
+        "label": {
+          "id": "users-permissions.Auth.form.forgot-password.email.label"
+        },
         "name": "email",
         "type": "email",
         "placeholder": "users-permissions.Auth.form.forgot-password.email.placeholder"
@@ -12,20 +14,26 @@
     "login": [
       {
         "customBootstrapClass": "col-md-12",
-        "label": "users-permissions.Auth.form.login.username.label",
+        "label": {
+          "id":  "users-permissions.Auth.form.login.username.label"
+        },
         "name": "identifier",
         "type": "text",
         "placeholder": "users-permissions.Auth.form.login.username.placeholder"
       },
       {
         "customBootstrapClass": "col-md-12",
-        "label": "users-permissions.Auth.form.login.password.label",
+        "label": {
+          "id": "users-permissions.Auth.form.login.password.label"
+        },
         "name": "password",
         "type": "password"
       },
       {
         "customBootstrapClass": "col-md-6",
-        "label": "users-permissions.Auth.form.login.rememberMe.label",
+        "label": {
+          "id": "users-permissions.Auth.form.login.rememberMe.label"
+        },
         "name": "rememberMe",
         "type": "checkbox"
       }
@@ -33,26 +41,34 @@
     "register": [
       {
         "customBootstrapClass": "col-md-12",
-        "label": "users-permissions.Auth.form.register.username.label",
+        "label": {
+          "id": "users-permissions.Auth.form.register.username.label"
+        },
         "name": "username",
         "type": "text",
         "placeholder": "users-permissions.Auth.form.register.username.placeholder"
       },
       {
         "customBootstrapClass": "col-md-12",
-        "label": "users-permissions.Auth.form.register.password.label",
+        "label": {
+          "id": "users-permissions.Auth.form.register.password.label"
+        },
         "name": "password",
         "type": "password"
       },
       {
         "customBootstrapClass": "col-md-12",
-        "label": "users-permissions.Auth.form.register.confirmPassword.label",
+        "label": {
+          "id": "users-permissions.Auth.form.register.confirmPassword.label"
+        },
         "name": "confirmPassword",
         "type": "password"
       },
       {
         "customBootstrapClass": "col-md-12",
-        "label": "users-permissions.Auth.form.register.email.label",
+        "label": {
+          "id": "users-permissions.Auth.form.register.email.label"
+        },
         "name": "email",
         "placeholder": "users-permissions.Auth.form.register.email.placeholder",
         "type": "email"
@@ -63,7 +79,9 @@
         "customBootstrapClass": "col-md-12",
         "name": "email",
         "type": "email",
-        "label": "users-permissions.Auth.form.register-success.email.label",
+        "label": {
+          "id":  "users-permissions.Auth.form.register-success.email.label"
+        },
         "placeholder": "users-permissions.Auth.form.register-success.email.placeholder"
       }
     ],
@@ -72,13 +90,17 @@
         "customBootstrapClass": "col-md-12",
         "name": "password",
         "type": "password",
-        "label": "users-permissions.Auth.form.register.password.label"
+        "label": {
+          "id": "users-permissions.Auth.form.register.password.label"
+        }
       },
       {
         "customBootstrapClass": "col-md-12",
         "name": "passwordConfirmation",
         "type": "password",
-        "label": "users-permissions.Auth.form.register.confirmPassword.label"
+        "label": {
+          "id": "users-permissions.Auth.form.register.confirmPassword.label"
+        }
       }
     ]
   }
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js
index b8baa3e3ba..a315953588 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js
@@ -18,7 +18,7 @@ import LogoStrapi from 'assets/images/logo_strapi.png';
 
 // Design
 import Button from 'components/Button';
-import Input from 'components/Input';
+import Input from 'components/InputsIndex';
 
 // Utils
 import injectSaga from 'utils/injectSaga';
@@ -142,7 +142,7 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
     const headerDescription = this.props.match.params.authType === 'register' ?
       <FormattedMessage id="users-permissions.Auth.header.register.description" />
       : <span />;
-    
+
     return (
       <div className={styles.authPage}>
         <div className={styles.wrapper}>

From 8a2d5cf8e6500aeb98ca4423b377fbee34edf19b Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Tue, 6 Feb 2018 17:47:50 +0100
Subject: [PATCH 2/7] Fix label succes email sent

---
 .../admin/src/containers/AuthPage/index.js                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js
index a315953588..819589cf2b 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/AuthPage/index.js
@@ -173,7 +173,7 @@ export class AuthPage extends React.Component { // eslint-disable-line react/pre
                       didCheckErrors={this.props.didCheckErrors}
                       errors={get(this.props.formErrors, [findIndex(this.props.formErrors, ['name', input.name]), 'errors'])}
                       key={get(input, 'name')}
-                      label={this.props.match.params.authType === 'forgot-password' && this.props.submitSuccess? 'users-permissions.Auth.form.forgot-password.email.label.success' : get(input, 'label')}
+                      label={this.props.match.params.authType === 'forgot-password' && this.props.submitSuccess? { id: 'users-permissions.Auth.form.forgot-password.email.label.success' } : get(input, 'label')}
                       name={get(input, 'name')}
                       onChange={this.props.onChangeInput}
                       placeholder={get(input, 'placeholder')}

From 5002dd43ab0c462cbe40db03cb5575daaa7c5aeb Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Tue, 6 Feb 2018 17:59:06 +0100
Subject: [PATCH 3/7] Rename custome InputCheckbox I ran into an issue with
 webpack which chould get the appropriate file beacsue of conflicting between
 components from the strapi-helper-plugin and components from the plugin
 itself. Had to rename this file in order to solve the bug

---
 .../lib/src/components/InputsIndex/index.js   |   2 +-
 .../admin/src/components/Controller/index.js  |   2 +-
 .../src/components/InputCheckbox/index.js     | 115 ------------------
 .../src/components/InputCheckbox/styles.scss  |  58 ---------
 4 files changed, 2 insertions(+), 175 deletions(-)
 delete mode 100644 packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/index.js
 delete mode 100644 packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/styles.scss

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 47503c68eb..4fbbf753e4 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
@@ -34,7 +34,7 @@ const inputs = {
 
 function InputsIndex(props) {
   const Input = inputs[props.type] ? inputs[props.type] : DefaultInputError;
-  const inputValue = props.value || '';
+  const inputValue = props.type === 'checkbox' ? props.value || false : props.value || '';
 
   return <Input {...props} value={inputValue} />;
 }
diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js
index a25fb1af57..8d8dc7cb64 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js
@@ -10,7 +10,7 @@ import { get, map, some } from 'lodash';
 import cn from 'classnames';
 import { FormattedMessage } from 'react-intl';
 
-import InputCheckbox from 'components/InputCheckbox';
+import InputCheckbox from 'components/InputCheckboxPlugin';
 import styles from './styles.scss';
 
 class Controller extends React.Component {
diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/index.js
deleted file mode 100644
index 0c68f53240..0000000000
--- a/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/index.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
-*
-* InputCheckbox
-*
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-
-import styles from './styles.scss';
-
-class InputCheckbox extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  state = { showBackground: false, showCog: false };
-
-  componentWillReceiveProps(nextProps) {
-    // Remove background if another input is selected
-    if (nextProps.inputSelected !== this.props.inputSelected && nextProps.inputSelected !== this.props.name) {
-      this.setState({ showBackground: false });
-    }
-
-    if (!nextProps.isOpen) {
-      this.setState({ showBackground: false, showCog: false });
-    }
-  }
-
-  handleChange = () => {
-    const target = {
-      type: 'checkbox',
-      name: this.props.name,
-      value: !this.props.value,
-    };
-
-    // Don't show the label background if the user unselects the input
-    if (!this.props.value) {
-      this.setState({ showBackground: true });
-      // Tell the Parent component that another input has been selected
-      this.props.setNewInputSelected(this.props.name);
-      // Tell the policies component to show the associated routes
-      this.context.setShouldDisplayPolicieshint();
-      this.context.setInputPoliciesPath(this.props.name);
-    } else {
-      this.setState({ showBackground: false, showCog: false });
-      this.props.setNewInputSelected('');
-    }
-
-    this.context.onChange({ target });
-  }
-
-  handleClick = () => {
-    this.setState({ showBackground: !this.state.showBackground });
-    this.props.setNewInputSelected(this.props.name);
-    this.context.setInputPoliciesPath(this.props.name);
-
-    if (this.state.showBackground) {
-      this.context.resetShouldDisplayPoliciesHint();
-    } else {
-      this.context.setShouldDisplayPolicieshint();
-    }
-  }
-
-  render() {
-    return (
-      <div
-        className={cn(styles.inputCheckbox, 'col-md-4')}
-        onMouseEnter={() => {
-          if (this.props.value) {
-            this.setState({ showCog: true });
-          }
-        }}
-        onMouseLeave={() => this.setState({ showCog: false })}
-      >
-        <div className={cn('form-check', this.state.showBackground ? styles.highlighted : '')}>
-          <label className={cn('form-check-label', styles.label, this.props.value ? styles.checked : '')} htmlFor={this.props.name}>
-            <input
-              className="form-check-input"
-              defaultChecked={this.props.value}
-              id={this.props.name}
-              name={this.props.name}
-              onChange={this.handleChange}
-              type="checkbox"
-            />
-            {this.props.label}
-          </label>
-          {this.state.showCog || this.state.showBackground ? (
-            <i className="fa fa-cog" onClick={this.handleClick} />
-          ) : ''}
-        </div>
-      </div>
-    );
-  }
-}
-
-InputCheckbox.contextTypes = {
-  onChange: PropTypes.func.isRequired,
-  resetShouldDisplayPoliciesHint: PropTypes.func.isRequired,
-  setInputPoliciesPath: PropTypes.func.isRequired,
-  setShouldDisplayPolicieshint: PropTypes.func.isRequired,
-};
-
-InputCheckbox.defaultProps = {
-  label: '',
-  value: false,
-};
-
-InputCheckbox.propTypes = {
-  inputSelected: PropTypes.string.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  setNewInputSelected: PropTypes.func.isRequired,
-  value: PropTypes.bool,
-};
-
-export default InputCheckbox;
diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/styles.scss b/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/styles.scss
deleted file mode 100644
index 040dd8f601..0000000000
--- a/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/styles.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.inputCheckbox {
-  margin-bottom: .5rem;
-  padding-left: 0;
-  font-size: 13px;
-
-  > div {
-    height: 26px;
-    padding-left: 15px;
-    line-height: 26px;
-
-    > i {
-      position: absolute;
-      top: 8px;
-      right: 10px;
-      color: #787E8F;
-      cursor: pointer;
-    }
-  }
-}
-
-.label {
-  margin-left: 9px;
-  cursor: pointer;
-  > input {
-    display: none;
-    margin-right: 9px;
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    left:15px; top: 6px;
-    width: 14px; height: 14px;
-    border: 1px solid rgba(16,22,34,0.15);
-    background-color: #FDFDFD;
-    border-radius: 3px;
-  }
-}
-
-.checked {
-  &:after {
-    content: '\f00c';
-    position: absolute;
-    top: 0; left: 17px;
-    font-size: 10px;
-    font-family: 'FontAwesome';
-    font-weight: 100;
-    color: #1C5DE7;
-    transition: all .2s;
-
-  }
-}
-
-.highlighted {
-  border-radius: 3px;
-  background-color: #E9EAEB;
-  font-weight: 600;
-}

From 9740ab3869b333b90959b1538db49edd22a23133 Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Tue, 6 Feb 2018 18:01:44 +0100
Subject: [PATCH 4/7] Rename custome InputCheckbox I ran into an issue with
 webpack which chould get the appropriate file beacsue of conflicting between
 components from the strapi-helper-plugin and components from the plugin
 itself. Had to rename this file in order to solve the bug

---
 .../components/InputCheckboxPlugin/index.js   | 115 ++++++++++++++++++
 .../InputCheckboxPlugin/styles.scss           |  58 +++++++++
 2 files changed, 173 insertions(+)
 create mode 100644 packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js
 create mode 100644 packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/styles.scss

diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js
new file mode 100644
index 0000000000..7962b3babf
--- /dev/null
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/index.js
@@ -0,0 +1,115 @@
+/**
+*
+* InputCheckboxPlugin
+*
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+
+import styles from './styles.scss';
+
+class InputCheckboxPlugin extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  state = { showBackground: false, showCog: false };
+
+  componentWillReceiveProps(nextProps) {
+    // Remove background if another input is selected
+    if (nextProps.inputSelected !== this.props.inputSelected && nextProps.inputSelected !== this.props.name) {
+      this.setState({ showBackground: false });
+    }
+
+    if (!nextProps.isOpen) {
+      this.setState({ showBackground: false, showCog: false });
+    }
+  }
+
+  handleChange = () => {
+    const target = {
+      type: 'checkbox',
+      name: this.props.name,
+      value: !this.props.value,
+    };
+
+    // Don't show the label background if the user unselects the input
+    if (!this.props.value) {
+      this.setState({ showBackground: true });
+      // Tell the Parent component that another input has been selected
+      this.props.setNewInputSelected(this.props.name);
+      // Tell the policies component to show the associated routes
+      this.context.setShouldDisplayPolicieshint();
+      this.context.setInputPoliciesPath(this.props.name);
+    } else {
+      this.setState({ showBackground: false, showCog: false });
+      this.props.setNewInputSelected('');
+    }
+
+    this.context.onChange({ target });
+  }
+
+  handleClick = () => {
+    this.setState({ showBackground: !this.state.showBackground });
+    this.props.setNewInputSelected(this.props.name);
+    this.context.setInputPoliciesPath(this.props.name);
+
+    if (this.state.showBackground) {
+      this.context.resetShouldDisplayPoliciesHint();
+    } else {
+      this.context.setShouldDisplayPolicieshint();
+    }
+  }
+
+  render() {
+    return (
+      <div
+        className={cn(styles.inputCheckbox, 'col-md-4')}
+        onMouseEnter={() => {
+          if (this.props.value) {
+            this.setState({ showCog: true });
+          }
+        }}
+        onMouseLeave={() => this.setState({ showCog: false })}
+      >
+        <div className={cn('form-check', this.state.showBackground ? styles.highlighted : '')}>
+          <label className={cn('form-check-label', styles.label, this.props.value ? styles.checked : '')} htmlFor={this.props.name}>
+            <input
+              className="form-check-input"
+              defaultChecked={this.props.value}
+              id={this.props.name}
+              name={this.props.name}
+              onChange={this.handleChange}
+              type="checkbox"
+            />
+            {this.props.label}
+          </label>
+          {this.state.showCog || this.state.showBackground ? (
+            <i className="fa fa-cog" onClick={this.handleClick} />
+          ) : ''}
+        </div>
+      </div>
+    );
+  }
+}
+
+InputCheckboxPlugin.contextTypes = {
+  onChange: PropTypes.func.isRequired,
+  resetShouldDisplayPoliciesHint: PropTypes.func.isRequired,
+  setInputPoliciesPath: PropTypes.func.isRequired,
+  setShouldDisplayPolicieshint: PropTypes.func.isRequired,
+};
+
+InputCheckboxPlugin.defaultProps = {
+  label: '',
+  value: false,
+};
+
+InputCheckboxPlugin.propTypes = {
+  inputSelected: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  setNewInputSelected: PropTypes.func.isRequired,
+  value: PropTypes.bool,
+};
+
+export default InputCheckboxPlugin;
diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/styles.scss b/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/styles.scss
new file mode 100644
index 0000000000..040dd8f601
--- /dev/null
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputCheckboxPlugin/styles.scss
@@ -0,0 +1,58 @@
+.inputCheckbox {
+  margin-bottom: .5rem;
+  padding-left: 0;
+  font-size: 13px;
+
+  > div {
+    height: 26px;
+    padding-left: 15px;
+    line-height: 26px;
+
+    > i {
+      position: absolute;
+      top: 8px;
+      right: 10px;
+      color: #787E8F;
+      cursor: pointer;
+    }
+  }
+}
+
+.label {
+  margin-left: 9px;
+  cursor: pointer;
+  > input {
+    display: none;
+    margin-right: 9px;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    left:15px; top: 6px;
+    width: 14px; height: 14px;
+    border: 1px solid rgba(16,22,34,0.15);
+    background-color: #FDFDFD;
+    border-radius: 3px;
+  }
+}
+
+.checked {
+  &:after {
+    content: '\f00c';
+    position: absolute;
+    top: 0; left: 17px;
+    font-size: 10px;
+    font-family: 'FontAwesome';
+    font-weight: 100;
+    color: #1C5DE7;
+    transition: all .2s;
+
+  }
+}
+
+.highlighted {
+  border-radius: 3px;
+  background-color: #E9EAEB;
+  font-weight: 600;
+}

From 5b27933d66a5218169fd389f68ea41f8c89ce25c Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Tue, 6 Feb 2018 18:14:30 +0100
Subject: [PATCH 5/7] Add new input lib to EditPage container

---
 .../lib/src/components/InputsIndex/index.js                 | 2 +-
 .../admin/src/containers/EditPage/index.js                  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

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 4fbbf753e4..b929abd9d2 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
@@ -34,7 +34,7 @@ const inputs = {
 
 function InputsIndex(props) {
   const Input = inputs[props.type] ? inputs[props.type] : DefaultInputError;
-  const inputValue = props.type === 'checkbox' ? props.value || false : props.value || '';
+  const inputValue = props.type === 'checkbox' || props.type === 'toggle' ? props.value || false : props.value || '';
 
   return <Input {...props} value={inputValue} />;
 }
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js
index 621594bc30..fa4e06ff01 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js
@@ -15,7 +15,7 @@ import cn from 'classnames';
 
 // Design
 import BackHeader from 'components/BackHeader';
-import Input from 'components/Input';
+import Input from 'components/InputsIndex';
 import InputSearch from 'components/InputSearch';
 import PluginHeader from 'components/PluginHeader';
 import Plugins from 'components/Plugins';
@@ -159,7 +159,7 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
                           customBootstrapClass="col-md-12"
                           errors={get(this.props.editPage, ['formErrors', findIndex(this.props.editPage.formErrors, ['name', 'name']), 'errors'])}
                           didCheckErrors={this.props.editPage.didCheckErrors}
-                          label="users-permissions.EditPage.form.roles.label.name"
+                          label={{ id: 'users-permissions.EditPage.form.roles.label.name' }}
                           name="name"
                           onChange={this.props.onChangeInput}
                           type="text"
@@ -170,7 +170,7 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
                       <div className="row">
                         <Input
                           customBootstrapClass="col-md-12"
-                          label="users-permissions.EditPage.form.roles.label.description"
+                          label={{ id: 'users-permissions.EditPage.form.roles.label.description' }}
                           name="description"
                           onChange={this.props.onChangeInput}
                           type="textarea"

From 5a4bc75c91a689262f8f5d5caaf26676eb82f027 Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Tue, 6 Feb 2018 18:42:42 +0100
Subject: [PATCH 6/7] Implement new lib input in EditPage container Use Label
 component in InputSearchContainer. Add new Inputselect in Policies component

---
 .../index.js                                  | 32 ++++++++++++-------
 .../styles.scss                               | 11 +++++++
 .../admin/src/components/Policies/index.js    |  4 +--
 .../admin/src/containers/EditPage/index.js    | 10 ++++--
 4 files changed, 40 insertions(+), 17 deletions(-)
 rename packages/strapi-plugin-users-permissions/admin/src/components/{InputSearch => InputSearchContainer}/index.js (79%)
 rename packages/strapi-plugin-users-permissions/admin/src/components/{InputSearch => InputSearchContainer}/styles.scss (91%)

diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js
similarity index 79%
rename from packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/index.js
rename to packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js
index 76cd8e19da..e663988892 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/index.js
@@ -1,6 +1,6 @@
 /**
 *
-* InputSearch
+* InputSearchContainer
 *
 */
 
@@ -10,15 +10,17 @@ import { findIndex, has, includes, isEmpty, map, toLower } from 'lodash';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
 
+import Label from 'components/Label';
 import InputSearchLi from 'components/InputSearchLi';
 
 import styles from './styles.scss';
 
-class InputSearch extends React.Component { // eslint-disable-line react/prefer-stateless-function
+class InputSearchContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function
   state = {
     errors: [],
     filteredUsers: this.props.values,
     isAdding: false,
+    isFocused: false,
     users: this.props.values,
     value: '',
     autoFocus: false,
@@ -38,6 +40,8 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
+  handleBlur = () => this.setState({ isFocused: !this.state.isFocused });
+
   handleChange = ({ target }) => {
     const filteredUsers = isEmpty(target.value) ?
       this.state.users
@@ -54,6 +58,8 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
     this.setState({ value: target.value, filteredUsers });
   }
 
+  handleFocus = () => this.setState({ isFocused: !this.state.isFocused });
+
   handleClick = (item) => {
     if (this.state.isAdding) {
       const id = has(item, '_id') ? '_id' : 'id';
@@ -76,18 +82,18 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
   render() {
     return (
       <div className={cn(styles.inputSearch, 'col-md-6')}>
-        <label htmlFor={this.props.name}>
-          <FormattedMessage id={this.props.label} values={this.props.labelValues} />
-        </label>
+        <Label htmlFor={this.props.name} message={this.props.label} />
         <div className={cn('input-group')}>
-          <span className={cn('input-group-addon', styles.addon)} />
+          <span className={cn('input-group-addon', styles.addon, this.state.isFocused && styles.addonFocus,)} />
           <FormattedMessage id="users-permissions.InputSearch.placeholder">
             {(message) => (
               <input
                 className={cn('form-control', !isEmpty(this.state.errors) ? 'is-invalid': '')}
                 id={this.props.name}
                 name={this.props.name}
+                onBlur={this.handleBlur}
                 onChange={this.handleChange}
+                onFocus={this.handleFocus}
                 value={this.state.value}
                 placeholder={message}
                 type="text"
@@ -96,7 +102,7 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
             )}
           </FormattedMessage>
         </div>
-        <div className={styles.ulContainer}>
+        <div className={cn(styles.ulContainer, this.state.isFocused && styles.ulFocused)}>
           <ul>
             {map(this.state.filteredUsers, (user) => (
               <InputSearchLi
@@ -113,7 +119,7 @@ class InputSearch extends React.Component { // eslint-disable-line react/prefer-
   }
 }
 
-InputSearch.defaultProps = {
+InputSearchContainer.defaultProps = {
   labelValues: {
     number: 0,
   },
@@ -121,13 +127,15 @@ InputSearch.defaultProps = {
   values: [],
 };
 
-InputSearch.propTypes = {
+InputSearchContainer.propTypes = {
   didDeleteUser: PropTypes.bool.isRequired,
   didFetchUsers: PropTypes.bool.isRequired,
   didGetUsers: PropTypes.bool.isRequired,
   getUser: PropTypes.func.isRequired,
-  label: PropTypes.string.isRequired,
-  labelValues: PropTypes.object,
+  label: PropTypes.shape({
+    id: PropTypes.string,
+    params: PropTypes.object,
+  }).isRequired,
   name: PropTypes.string.isRequired,
   onClickAdd: PropTypes.func.isRequired,
   onClickDelete: PropTypes.func.isRequired,
@@ -135,4 +143,4 @@ InputSearch.propTypes = {
   values: PropTypes.array,
 };
 
-export default InputSearch;
+export default InputSearchContainer;
diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/styles.scss b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/styles.scss
similarity index 91%
rename from packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/styles.scss
rename to packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/styles.scss
index 421d1e3473..090aa16762 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/components/InputSearch/styles.scss
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/InputSearchContainer/styles.scss
@@ -4,6 +4,7 @@
   margin-top: .9rem;
   background-color: rgba(16, 22, 34, 0.02);
   border: 1px solid #E3E9F3;
+  border-right: 0;
   border-bottom: 0px;
   border-radius: 0.25rem;
   border-bottom-left-radius: 0!important;
@@ -46,6 +47,7 @@
     padding-left: 1rem;
     background-size: 0 !important;
     border: 1px solid #E3E9F3;
+    border-left: 0;
     border-bottom: 0px;
     border-radius: 0.25rem;
     border-bottom-right-radius: 0;
@@ -72,3 +74,12 @@
     padding: 1px 0;
   }
 }
+
+.addonFocus {
+  border-color: #78caff;
+  border-right: 0;
+}
+
+.ulFocused {
+  border-color: #78caff;
+}
diff --git a/packages/strapi-plugin-users-permissions/admin/src/components/Policies/index.js b/packages/strapi-plugin-users-permissions/admin/src/components/Policies/index.js
index 7b87e5e243..bb60ed2953 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/components/Policies/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/components/Policies/index.js
@@ -11,7 +11,7 @@ import { FormattedMessage } from 'react-intl';
 import { get, isEmpty, map, takeRight, toLower, without } from 'lodash';
 
 import BoundRoute from 'components/BoundRoute';
-import Input from 'components/Input';
+import Input from 'components/InputsIndex';
 
 import styles from './styles.scss';
 
@@ -36,7 +36,7 @@ class Policies extends React.Component { // eslint-disable-line react/prefer-sta
             {!this.props.shouldDisplayPoliciesHint ? (
               <Input
                 customBootstrapClass="col-md-12"
-                label="users-permissions.Policies.InputSelect.label"
+                label={{ id: 'users-permissions.Policies.InputSelect.label' }}
                 name={this.props.inputSelectName}
                 onChange={this.handleChange}
                 selectOptions={this.props.selectOptions}
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js
index fa4e06ff01..84f4cad0ed 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js
@@ -16,7 +16,7 @@ import cn from 'classnames';
 // Design
 import BackHeader from 'components/BackHeader';
 import Input from 'components/InputsIndex';
-import InputSearch from 'components/InputSearch';
+import InputSearch from 'components/InputSearchContainer';
 import PluginHeader from 'components/PluginHeader';
 import Plugins from 'components/Plugins';
 import Policies from 'components/Policies';
@@ -185,8 +185,12 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
                       didFetchUsers={this.props.editPage.didFetchUsers}
                       didGetUsers={this.props.editPage.didGetUsers}
                       getUser={this.props.getUser}
-                      label="users-permissions.EditPage.form.roles.label.users"
-                      labelValues={{ number: size(get(this.props.editPage, ['modifiedData', 'users'])) }}
+                      label={{
+                        id: 'users-permissions.EditPage.form.roles.label.users',
+                        params: {
+                          number: size(get(this.props.editPage, ['modifiedData', 'users'])),
+                        },
+                      }}
                       onClickAdd={this.props.onClickAdd}
                       onClickDelete={this.props.onClickDelete}
                       name="users"

From 7db50ab6e1aa5b9af50f89ad30ce07dbaa98ae98 Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Wed, 7 Feb 2018 11:46:29 +0100
Subject: [PATCH 7/7] Created inputsdValidations utils Refacto input s
 validation logic. Fix input s initial value bug when the input is required

---
 .../components/InputAddonWithErrors/index.js  |  54 +---
 .../components/InputDateWithErrors/index.js   | 240 ++++++++----------
 .../components/InputEmailWithErrors/index.js  |  59 +----
 .../components/InputNumberWithErrors/index.js |  54 +---
 .../InputPasswordWithErrors/index.js          |  54 +---
 .../components/InputSearchWithErrors/index.js |  54 +---
 .../InputTextAreaWithErrors/index.js          |  54 +---
 .../components/InputTextWithErrors/index.js   |  54 +---
 .../lib/src/components/InputsIndex/index.js   |   1 -
 .../lib/src/utils/inputsValidations.js        |  64 +++++
 10 files changed, 246 insertions(+), 442 deletions(-)
 create mode 100644 packages/strapi-helper-plugin/lib/src/utils/inputsValidations.js

diff --git a/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js
index 59ab395f20..396a156aba 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js
@@ -15,6 +15,9 @@ import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputAddon from 'components/InputAddon';
 
+// Utils
+import validateInput from 'utils/inputsValidations';
+
 import styles from './styles.scss';
 
 class InputAddonWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -24,7 +27,7 @@ class InputAddonWithErrors extends React.Component { // eslint-disable-line reac
     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)) {
+    if (!isEmpty(value)) {
       this.setState({ hasInitialValue: true });
     }
 
@@ -35,6 +38,11 @@ class InputAddonWithErrors extends React.Component { // eslint-disable-line reac
   }
 
   componentWillReceiveProps(nextProps) {
+    // Show required error if the input's value is received after the compo is mounted
+    if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
+      this.setState({ hasInitialValue: true });
+    }
+
     // 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
@@ -50,7 +58,7 @@ class InputAddonWithErrors extends React.Component { // eslint-disable-line reac
   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);
+      const errors = validateInput(target.value, this.props.validations);
       this.setState({ errors, hasInitialValue: true });
     }
   }
@@ -135,48 +143,6 @@ class InputAddonWithErrors extends React.Component { // eslint-disable-line reac
       </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;
-  }
 }
 
 InputAddonWithErrors.defaultProps = {
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js
index ad21c2e685..aa35a6dc21 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js
@@ -13,150 +13,134 @@ import cn from 'classnames';
 import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
-  import InputDate from 'components/InputDate';
+import InputDate from 'components/InputDate';
+
+// Utils
+import validateInput from 'utils/inputsValidations';
 
 import styles from './styles.scss';
 
 class InputDateWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
- state = { errors: [], hasInitialValue: false };
+  state = { errors: [], hasInitialValue: false };
 
- componentDidMount() {
-   const { value, errors } = this.props;
+  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 });
-   }
+    // Prevent the input from displaying an error when the user enters and leaves without filling it
+    if (!isEmpty(value)) {
+      this.setState({ hasInitialValue: true });
+    }
 
-   // Display input error if it already has some
-   if (!isEmpty(errors)) {
-     this.setState({ errors });
-   }
- }
+    // 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 });
-   }
- }
+  componentWillReceiveProps(nextProps) {
+    // Show required error if the input's value is received after the compo is mounted
+    if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
+      this.setState({ hasInitialValue: true });
+    }
 
- /**
+    // 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(get(target, 'value')) || this.state.hasInitialValue) {
-     const errors = this.validate(target.value);
-     this.setState({ errors, hasInitialValue: true });
-   }
- }
+  handleBlur = ({ target }) => {
+    // Prevent from displaying error if the input is initially isEmpty
+    if (!isEmpty(get(target, 'value')) || this.state.hasInitialValue) {
+      const errors = validateInput(target.value, this.props.validations);
+      this.setState({ errors, hasInitialValue: true });
+    }
+  }
 
- 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,
-     value,
-   } = this.props;
-   const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
+  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,
+      value,
+    } = this.props;
+    const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-   let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
 
-   if (!noErrorsDescription && !isEmpty(this.state.errors)) {
-     spacer = <div />;
-   }
+    if (!noErrorsDescription && !isEmpty(this.state.errors)) {
+      spacer = <div />;
+    }
 
-   return (
-     <div className={cn(
-         !isEmpty(customBootstrapClass) && customBootstrapClass || 'col-md-4',
-         styles.containerDate,
-         !isEmpty(className) && className,
-       )}
-       style={style}
-     >
-       <Label
-         className={labelClassName}
-         htmlFor={name}
-         message={label}
-         style={labelStyle}
-       />
-      <InputDate
-         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 'required': {
-         if (value.length === 0) {
-           errors.push({ id: 'components.Input.error.validation.required' });
-         }
-         break;
-       }
-       default:
-         errors = [];
-     }
-   });
-
-   if (includes(errors, requiredError)) {
-     errors = reject(errors, (error) => error !== requiredError);
-   }
-
-   return errors;
- }
+    return (
+      <div className={cn(
+          !isEmpty(customBootstrapClass) && customBootstrapClass || 'col-md-4',
+          styles.containerDate,
+          !isEmpty(className) && className,
+        )}
+        style={style}
+      >
+        <Label
+          className={labelClassName}
+          htmlFor={name}
+          message={label}
+          style={labelStyle}
+        />
+        <InputDate
+          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>
+    );
+  }
 }
 
 InputDateWithErrors.defaultProps = {
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js
index 35ba1deb9e..8e7903a30c 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js
@@ -15,6 +15,9 @@ import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputEmail from 'components/InputEmail';
 
+// Utils
+import validateInput from 'utils/inputsValidations';
+
 import styles from './styles.scss';
 
 class InputEmailWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -24,7 +27,7 @@ class InputEmailWithErrors extends React.Component { // eslint-disable-line reac
     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)) {
+    if (!isEmpty(value)) {
       this.setState({ hasInitialValue: true });
     }
 
@@ -35,6 +38,11 @@ class InputEmailWithErrors extends React.Component { // eslint-disable-line reac
   }
 
   componentWillReceiveProps(nextProps) {
+    // Show required error if the input's value is received after the compo is mounted
+    if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
+      this.setState({ hasInitialValue: true });
+    }
+
     // 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
@@ -50,7 +58,7 @@ class InputEmailWithErrors extends React.Component { // eslint-disable-line reac
   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);
+      const errors = validateInput(target.value, this.props.validations, 'email');
       this.setState({ errors, hasInitialValue: true });
     }
   }
@@ -131,53 +139,6 @@ class InputEmailWithErrors extends React.Component { // eslint-disable-line reac
       </div>
     );
   }
-
-  validate = (value) => {
-    const emailRegex = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
-    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 (!emailRegex.test(value)) {
-      errors.push({ id: 'components.Input.error.validation.email' });
-    }
-
-    if (includes(errors, requiredError)) {
-      errors = reject(errors, (error) => error !== requiredError);
-    }
-
-    return errors;
-  }
 }
 
 InputEmailWithErrors.defaultProps = {
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js
index 3abc7d999d..021b35f866 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js
@@ -9,6 +9,9 @@ import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputNumber from 'components/InputNumber';
 
+// Utils
+import validateInput from 'utils/inputsValidations';
+
 import styles from './styles.scss';
 
 class InputNumberWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -18,7 +21,7 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
     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)) {
+    if (!isEmpty(value)) {
       this.setState({ hasInitialValue: true });
     }
 
@@ -29,6 +32,11 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
   }
 
   componentWillReceiveProps(nextProps) {
+    // Show required error if the input's value is received after the compo is mounted
+    if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
+      this.setState({ hasInitialValue: true });
+    }
+
     // 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
@@ -44,7 +52,7 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
   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);
+      const errors = validateInput(target.value, this.props.validations);
       this.setState({ errors, hasInitialValue: true });
     }
   }
@@ -127,48 +135,6 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
       </div>
     );
   }
-
-  validate = (value) => {
-    const requiredError = { id: 'components.Input.error.validation.required' };
-    let errors = [];
-
-    mapKeys(this.props.validations, (validationValue, validationKey) => {
-      switch (validationKey) {
-        case 'max': {
-          if (parseInt(value, 10) > validationValue) {
-            errors.push({ id: 'components.Input.error.validation.max' });
-          }
-          break;
-        }
-        case 'min': {
-          if (parseInt(value, 10) < validationValue) {
-            errors.push({ id: 'components.Input.error.validation.min' });
-          }
-          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;
-  }
 }
 
 InputNumberWithErrors.defaultProps = {
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js
index 77acca6641..5a692b8f2b 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js
@@ -15,6 +15,9 @@ import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputPassword from 'components/InputPassword';
 
+// Utils
+import validateInput from 'utils/inputsValidations';
+
 import styles from './styles.scss';
 
 class InputPasswordWithErrors extends React.Component {
@@ -24,7 +27,7 @@ class InputPasswordWithErrors extends React.Component {
     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)) {
+    if (!isEmpty(value)) {
       this.setState({ hasInitialValue: true });
     }
 
@@ -35,6 +38,11 @@ class InputPasswordWithErrors extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    // Show required error if the input's value is received after the compo is mounted
+    if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
+      this.setState({ hasInitialValue: true });
+    }
+
     // 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
@@ -50,7 +58,7 @@ class InputPasswordWithErrors extends React.Component {
   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);
+      const errors = validateInput(target.value, this.props.validations);
       this.setState({ errors, hasInitialValue: true });
     }
   }
@@ -120,48 +128,6 @@ class InputPasswordWithErrors extends React.Component {
       </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;
-  }
 }
 
 InputPasswordWithErrors.defaultProps = {
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js
index 4b6e0d747f..81c734f4b8 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js
@@ -15,6 +15,9 @@ import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputSearch from 'components/InputSearch';
 
+// Utils
+import validateInput from 'utils/inputsValidations';
+
 import styles from './styles.scss';
 
 class InputSearchWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -24,7 +27,7 @@ class InputSearchWithErrors extends React.Component { // eslint-disable-line rea
     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)) {
+    if (!isEmpty(value)) {
       this.setState({ hasInitialValue: true });
     }
 
@@ -35,6 +38,11 @@ class InputSearchWithErrors extends React.Component { // eslint-disable-line rea
   }
 
   componentWillReceiveProps(nextProps) {
+    // Show required error if the input's value is received after the compo is mounted
+    if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
+      this.setState({ hasInitialValue: true });
+    }
+
     // 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
@@ -50,7 +58,7 @@ class InputSearchWithErrors extends React.Component { // eslint-disable-line rea
   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);
+      const errors = validateInput(target.value, this.props.validations);
       this.setState({ errors, hasInitialValue: true });
     }
   }
@@ -131,48 +139,6 @@ class InputSearchWithErrors extends React.Component { // eslint-disable-line rea
       </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 = {
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js
index c3461c6038..1183bba0c2 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js
@@ -9,6 +9,9 @@ import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputTextArea from 'components/InputTextArea';
 
+// Utils
+import validateInput from 'utils/inputsValidations';
+
 import styles from './styles.scss';
 
 class InputTextAreaWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -18,7 +21,7 @@ class InputTextAreaWithErrors extends React.Component { // eslint-disable-line r
     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)) {
+    if (!isEmpty(value)) {
       this.setState({ hasInitialValue: true });
     }
 
@@ -29,6 +32,11 @@ class InputTextAreaWithErrors extends React.Component { // eslint-disable-line r
   }
 
   componentWillReceiveProps(nextProps) {
+    // Show required error if the input's value is received after the compo is mounted
+    if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
+      this.setState({ hasInitialValue: true });
+    }
+
     // 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
@@ -44,7 +52,7 @@ class InputTextAreaWithErrors extends React.Component { // eslint-disable-line r
   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);
+      const errors = validateInput(target.value, this.props.validations);
       this.setState({ errors, hasInitialValue: true });
     }
   }
@@ -127,48 +135,6 @@ class InputTextAreaWithErrors extends React.Component { // eslint-disable-line r
       </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;
-  }
 }
 
 InputTextAreaWithErrors.defaultProps = {
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
index 0724d3d313..ba7aa8bcf1 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
@@ -9,6 +9,9 @@ import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputText from 'components/InputText';
 
+// Utils
+import validateInput from 'utils/inputsValidations';
+
 import styles from './styles.scss';
 
 class InputTextWithErrors extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -18,7 +21,7 @@ class InputTextWithErrors extends React.Component { // eslint-disable-line react
     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)) {
+    if (!isEmpty(value)) {
       this.setState({ hasInitialValue: true });
     }
 
@@ -29,6 +32,11 @@ class InputTextWithErrors extends React.Component { // eslint-disable-line react
   }
 
   componentWillReceiveProps(nextProps) {
+    // Show required error if the input's value is received after the compo is mounted
+    if (!isEmpty(nextProps.value) && !this.state.hasInitialValue) {
+      this.setState({ hasInitialValue: true });
+    }
+
     // 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
@@ -44,7 +52,7 @@ class InputTextWithErrors extends React.Component { // eslint-disable-line react
   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);
+      const errors = validateInput(target.value, this.props.validations);
       this.setState({ errors, hasInitialValue: true });
     }
   }
@@ -127,48 +135,6 @@ class InputTextWithErrors extends React.Component { // eslint-disable-line react
       </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;
-  }
 }
 
 InputTextWithErrors.defaultProps = {
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 27ae264e49..fba940e064 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
@@ -38,7 +38,6 @@ const inputs = {
 };
 
 function InputsIndex(props) {
-  const inputValue = props.type === 'checkbox' || props.type === 'toggle' ? props.value || false : props.value || '';
   const type = props.type && !isEmpty(props.addon) ? 'addon' : props.type;
   const inputValue = props.type === 'checkbox' || props.type === 'toggle' ? props.value || false : props.value || '';
   const Input = inputs[type] ? inputs[type] : DefaultInputError;
diff --git a/packages/strapi-helper-plugin/lib/src/utils/inputsValidations.js b/packages/strapi-helper-plugin/lib/src/utils/inputsValidations.js
new file mode 100644
index 0000000000..dda65e58e7
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/utils/inputsValidations.js
@@ -0,0 +1,64 @@
+import { includes, mapKeys, reject } from 'lodash';
+/**
+ * [validateInput description]
+ * @param  {String || Number} value  Input's value
+ * @param  {Object} inputValidations
+ * @param  {String} [type='text']    Optionnal: the input's type only for email
+ * @return {Array}                  Array of errors to be displayed
+ */
+const validateInput = (value, inputValidations = {}, type = 'text') => {
+  let errors = [];
+
+  const emailRegex = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+  // handle i18n
+  const requiredError = { id: 'components.Input.error.validation.required' };
+
+  mapKeys(inputValidations, (validationValue, validationKey) => {
+    switch (validationKey) {
+      case 'max':
+        if (parseInt(value, 10) > validationValue) {
+          errors.push({ id: 'components.Input.error.validation.max' });
+        }
+        break;
+      case 'maxLength':
+        if (value.length > validationValue) {
+          errors.push({ id: 'components.Input.error.validation.maxLength' });
+        }
+        break;
+      case 'min':
+        if (parseInt(value, 10) < validationValue) {
+          errors.push({ id: 'components.Input.error.validation.min' });
+        }
+        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 (type === 'email' && !emailRegex.test(value)) {
+    errors.push({ id: 'components.Input.error.validation.email' });
+  }
+
+  if (includes(errors, requiredError)) {
+    errors = reject(errors, (error) => error !== requiredError);
+  }
+
+  return errors;
+}
+
+export default validateInput;