[https://github.com/tracim/tracim/issues/779] added integrated version of admin user

frontend_app_admin_workspace_user/src/component/AddMemberForm.jsx

@@ -0,0 +1,74 @@
+import React from 'react'
+
+export const AddMemberForm = props =>
+  <form className='adminUserPage__adduser__form'>
+    <div className='adminUserPage__adduser__form__username'>
+      <label className='username__text' htmlFor='adduser'>
+        Ajouter un membre
+      </label>
+
+      <input
+        type='text'
+        className='username__input form-control'
+        id='adduser'
+        placeholder='Nom ou Email'
+      />
+
+      <div className='username__createaccount'>
+        <input type='radio' id='createuseraccount' />
+        <label className='ml-2' htmlFor='createuseraccount'>Create an account for this member</label>
+      </div>
+    </div>
+
+    <div className='adminUserPage__adduser__form__userrole'>
+      <div className='userrole__text'>
+        Choose the role of the member
+      </div>
+
+      <div className='userrole__role'>
+        <div className='userrole__role__workspacemanager mt-3 d-flex align-items-center'>
+          <input type='radio' name='adminuser' />
+          <div className='d-flex align-items-center'>
+            <div className='userrole__role__icon mx-2'>
+              <i className='fa fa-fw fa-gavel' />
+            </div>
+            Workspace manager
+          </div>
+        </div>
+        <div className='userrole__role__contentmanager mt-3 d-flex align-items-center'>
+          <input type='radio' name='adminuser' />
+          <div className='d-flex align-items-center'>
+            <div className='userrole__role__icon mx-2'>
+              <i className='fa fa-fw fa-graduation-cap' />
+            </div>
+            Content manager
+          </div>
+        </div>
+        <div className='userrole__role__contributor mt-3 d-flex align-items-center'>
+          <input type='radio' name='adminuser' />
+          <div className='d-flex align-items-center'>
+            <div className='userrole__role__icon mx-2'>
+              <i className='fa fa-fw fa-pencil' />
+            </div>
+            Contributor
+          </div>
+        </div>
+        <div className='userrole__role__reader mt-3 d-flex align-items-center'>
+          <input type='radio' name='adminuser' />
+          <div className='d-flex align-items-center'>
+            <div className='userrole__role__icon mx-2'>
+              <i className='fa fa-fw fa-eye' />
+            </div>
+            Reader
+          </div>
+        </div>
+      </div>
+    </div>
+    <div className='adminUserPage__adduser__form__submit'>
+      <button className='btn'>
+        Add the member
+      </button>
+    </div>
+  </form>
+
+export default AddMemberForm

frontend_app_admin_workspace_user/src/component/AdminUser.jsx

@@ -0,0 +1,152 @@
+import React from 'react'
+import {
+  Delimiter,
+  PageWrapper,
+  PageTitle,
+  PageContent,
+  BtnSwitch
+} from 'tracim_frontend_lib'
+import AddMemberForm from './AddMemberForm.jsx'
+// import { translate } from 'react-i18next'
+
+export class AdminUser extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      displayAddMember: false
+    }
+  }
+
+  handleToggleAddMember = () => this.setState(prevState => ({
+    displayAddMember: !prevState.displayAddMember
+  }))
+
+  render () {
+    return (
+      <PageWrapper customClass='adminUserPage'>
+        <PageTitle
+          parentClass={'adminUserPage'}
+          title={"Member's management"}
+        />
+
+        <PageContent parentClass='adminUserPage'>
+
+          <div className='adminUserPage__description'>
+            On this page you can manage the members of your instance Tracim.
+          </div>
+
+          <div className='adminUserPage__adduser'>
+            <button className='adminUserPage__adduser__button btn' onClick={this.handleToggleAddMember}>
+              Add a member
+            </button>
+
+            {this.state.displayAddMember &&
+              <AddMemberForm />
+            }
+          </div>
+
+          <Delimiter customClass={'adminUserPage__delimiter'} />
+
+          <div className='adminUserPage__table'>
+            <table className='table'>
+              <thead>
+                <tr>
+                  <th scope='col'>Active</th>
+                  <th scope='col'>Member</th>
+                  <th scope='col'>Email</th>
+                  <th scope='col'>Member can create workspace</th>
+                  <th scope='col'>Administrator</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <th scope='row'>Joe Delavaiga</th>
+                  <td><a href='#'>joedelavaiga@mail.com</a></td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <th scope='row'>Susie Washington</th>
+                  <td><a href='#'>susiewash@mail.com</a></td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <th scope='row'>Marty MacJoe</th>
+                  <td><a href='#'>martymac@mail.com</a></td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <th scope='row'>Joe Delavaiga</th>
+                  <td><a href='#'>joedelavaiga@mail.com</a></td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <th scope='row'>Susie Washington</th>
+                  <td><a href='#'>susiewash@mail.com</a></td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <th scope='row'>Marty MacJoe</th>
+                  <td><a href='#'>martymac@mail.com</a></td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                  <td>
+                    <BtnSwitch />
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+        </PageContent>
+
+      </PageWrapper>
+    )
+  }
+}
+
+export default AdminUser

frontend_app_admin_workspace_user/src/container/AdminWorkspaceUser.jsx

@@ -9,6 +9,7 @@ import { debug } from '../helper.js'
 import {
 } from '../action.async.js'
 import AdminWorkspace from '../component/AdminWorkspace.jsx'
+import AdminUser from '../component/AdminUser.jsx'
 
 require('../css/index.styl')
 
@@ -76,7 +77,7 @@ class AdminWorkspaceUser extends React.Component {
         }
 
         {this.state.config.type === 'user' &&
-          <div>not yet implemented</div>
+          <AdminUser />
         }
       </div>
     )

frontend_app_admin_workspace_user/src/css/index.styl

@@ -1,7 +1,10 @@
 @import "../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
 
-.table th
-  vertical-align middle
+.table
+  th
+    vertical-align middle
+  td a:hover
+    text-decoration underline
 
 .adminWorkspacePage
   &__createworkspace
@@ -19,3 +22,33 @@
       align-items center
       flex-wrap wrap
       cursor pointer
+
+.adminUserPage
+  &__description
+    margin-bottom 40px
+  &__adduser
+    margin 25px 0
+    &__button
+      margin-bottom 20px
+    &__form
+      border 1px solid grey
+      border-radius 5px
+      padding 20px
+      &__username
+        .username
+        &__text
+          font-weight bold
+        &__input
+          margin 15px 0 20px 0
+          width 40%
+      &__userrole
+        .userrole
+        &__text
+          margin 20px 0
+          font-weight bold
+        &__role
+          margin 25px 0
+  &__delimiter
+    margin 50px auto
+  &__table
+    margin-bottom 100px

frontend_app_admin_workspace_user/src/helper.js

@@ -11,7 +11,7 @@ export const debug = {
     slug: 'admin_workspace_user',
     faIcon: 'file-text-o',
     hexcolor: '#7d4e24',
-    type: 'workspace',
+    type: 'user',
     translation: {en: {}, fr: {}}
   },
   loggedUser: { // @FIXME this object is outdated