Design EditPage and created needed components, add inputChange dynamic

packages/strapi-helper-plugin/lib/src/components/Input/index.js

@@ -111,7 +111,7 @@ class Input extends React.Component { // eslint-disable-line react/prefer-statel
                   id={this.props.name}
                   name={this.props.name}
                   onChange={this.handleChangeCheckbox}
-                  type="checkbox" id={this.props.name}
+                  type="checkbox"
                 />
                 {message}
               </label>

packages/strapi-plugin-users-permissions/admin/src/components/Controller/index.js

@@ -11,17 +11,19 @@ import { get, map } from 'lodash';
 import InputCheckbox from 'components/InputCheckbox';
 import styles from './styles.scss';
 
-function Controller({ actions, name }) {
+function Controller({ actions, name, inputNamePath }) {
   return (
     <div className={styles.controller}>
       <div className={styles.controllerHeader}>
         <span>{name}</span>
       </div>
       <div className="row">
-        {map(actions, (action, key) => (
+        {map(Object.keys(actions).sort(), (actionKey) => (
           <InputCheckbox
-            key={key}
-            value={get(action, 'enabled')}
+            key={actionKey}
+            name={`${inputNamePath}.controllers.${name}.actions.${actionKey}.enabled`}
+            label={actionKey}
+            value={get(actions[actionKey], 'enabled')}
           />
         ))}
       </div>
@@ -31,11 +33,13 @@ function Controller({ actions, name }) {
 
 Controller.defaultProps = {
   actions: {},
+  inputNamePath: 'permissions.application',
   name: '',
 };
 
 Controller.propTypes = {
   actions: PropTypes.object,
+  inputNamePath: PropTypes.string,
   name: PropTypes.string,
 };
 

packages/strapi-plugin-users-permissions/admin/src/components/Controller/styles.scss

@@ -1,8 +1,12 @@
 .controller {
+  margin-bottom: .3rem;
   padding: 0 28px;
+  background: #ffffff;
+  opacity: none;
 }
 
 .controllerHeader {
+  margin-bottom: 1.5rem;
   font-size: 13px;
   font-weight: 600;
   line-height: 16px;

packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/index.js

@@ -5,19 +5,59 @@
 */
 
 import React from 'react';
-// import PropTypes from 'prop-types';
+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 };
+
+  handleChange = () => {
+    const target = {
+      type: 'checkbox',
+      name: this.props.name,
+      value: !this.props.value,
+    };
+
+    this.context.onChange({ target });
+    this.setState({ showBackground: true });
+  }
+
   render() {
     return (
-      <div className={styles.inputCheckbox}>
+      <div className={cn(styles.inputCheckbox, 'col-md-4')}>
+        <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>
+        </div>
       </div>
     );
   }
 }
 
-InputCheckbox.propTypes = {};
+InputCheckbox.contextTypes = {
+  onChange: PropTypes.func.isRequired,
+};
+
+InputCheckbox.defaultProps = {
+  label: '',
+  value: false,
+};
+
+InputCheckbox.propTypes = {
+  label: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.bool,
+};
 
 export default InputCheckbox;

packages/strapi-plugin-users-permissions/admin/src/components/InputCheckbox/styles.scss

@@ -1,3 +1,50 @@
 .inputCheckbox {
+  margin-bottom: .5rem;
+  padding-left: 0;
+  font-size: 13px;
 
+  > div {
+    height: 26px;
+    padding-left: 15px;
+    line-height: 26px;
+  }
+}
+
+.label {
+
+  margin-left: 9px;
+  > 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;
 }

packages/strapi-plugin-users-permissions/admin/src/components/Plugin/index.js

@@ -21,8 +21,8 @@ class Plugin extends React.Component { // eslint-disable-line react/prefer-state
 
   render() {
     return (
-      <div className={styles.plugin} onClick={this.handleClick}>
-        <div className={styles.banner}>
+      <div className={styles.plugin}>
+        <div className={styles.banner} onClick={this.handleClick}>
           <div>
             <span>{this.props.name}</span>
             &nbsp;—&nbsp;
@@ -33,7 +33,12 @@ class Plugin extends React.Component { // eslint-disable-line react/prefer-state
         </div>
         <Collapse isOpen={this.state.collapse}>
           {map(get(this.props.plugin, 'controllers'), (controllerActions, key) => (
-            <Controller key={key} name={key} actions={get(controllerActions, 'actions')} />
+            <Controller
+              inputNamePath={`permissions.${this.props.name}`}
+              key={key}
+              name={key}
+              actions={get(controllerActions, 'actions')}
+            />
           ))}
         </Collapse>
       </div>

packages/strapi-plugin-users-permissions/admin/src/components/Plugins/styles.scss

@@ -6,8 +6,7 @@
   padding-top: 1.9rem;
 
   > div:not(:first-child) {
-    opacity: 0.5;
-    background: linear-gradient(315deg, rgba(255,255,255,0) 0%, #E3E9F3 100%);
+    background: linear-gradient(315deg, rgba(255,255,255,0) 0%, rgba(227, 233, 243, 0.54) 100%);
   }
 }
 

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/actions.js

@@ -4,7 +4,7 @@
  *
  */
 import { fromJS, List, Map } from 'immutable';
-import { get } from 'lodash';
+import { concat, get } from 'lodash';
 import {
   ADD_USER,
   GET_PERMISSIONS,
@@ -67,9 +67,11 @@ export function onCancel() {
 }
 
 export function onChangeInput({ target }) {
+  const keys = concat(['modifiedData'], target.name.split('.'));
+  
   return {
     type: ON_CHANGE_INPUT,
-    key: target.name,
+    keys,
     value: target.value,
   };
 }

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/index.js

@@ -43,6 +43,12 @@ import saga from './saga';
 import styles from './styles.scss';
 
 export class EditPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  getChildContext = () => (
+    {
+      onChange: this.props.onChangeInput,
+    }
+  );
+
   componentDidMount() {
     if (this.props.match.params.actionType === 'create') {
       this.props.setForm();
@@ -159,6 +165,10 @@ export class EditPage extends React.Component { // eslint-disable-line react/pre
   }
 }
 
+EditPage.childContextTypes = {
+  onChange: PropTypes.func.isRequired,
+};
+
 EditPage.propTypes = {
   addUser: PropTypes.func.isRequired,
   editPage: PropTypes.object.isRequired,

packages/strapi-plugin-users-permissions/admin/src/containers/EditPage/reducer.js

@@ -45,7 +45,7 @@ function editPageReducer(state = initialState, action) {
     case ON_CHANGE_INPUT:
       return state
         .set('showButtons', true)
-        .setIn(['modifiedData', action.key], action.value);
+        .updateIn(action.keys, () => action.value);
     case ON_CLICK_DELETE:
       return state
         .set('didDeleteUser', !state.get('didDeleteUser'))

packages/strapi-plugin-users-permissions/config/fakeData.json

@@ -1,7 +1,7 @@
 {
   "1": {
     "description": "Allow editing and deleting (except users)",
-    "name": "moderateur",
+    "name": "owner",
     "users": [
       {
         "id": "11",
@@ -27,11 +27,39 @@
         "controllers": {
           "invoices": {
             "actions": {
+              "create": {
+                "enabled": true,
+                "policy": "entriesCreatedByUser"
+              },
+              "find": {
+                "enabled": true,
+                "policy": "entriesCreatedByUser"
+              },
+              "payInvoice": {
+                "enabled": true,
+                "policy": "entriesCreatedByUser"
+              },
               "delete": {
                 "enabled": true,
                 "policy": "entriesCreatedByUser"
               },
               "update": {
+                "enabled": true,
+                "policy": "entriesCreatedByUser"
+              },
+              "updateAddress": {
+                "enabled": true,
+                "policy": "entriesCreatedByUser"
+              },
+              "findOne": {
+                "enabled": true,
+                "policy": "entriesCreatedByUser"
+              },
+              "updateRelationship": {
+                "enabled": true,
+                "policy": "entriesCreatedByUser"
+              },
+              "changeOwner": {
                 "enabled": false,
                 "policy": "entriesCreatedByUser"
               }