Manage Users Lab

The Manage Users demo can be accessed at:
http://jpdevries.github.io/matboard/labs/manage-users/

The Manage Users Lab experiments with an HTML and mobile first concept for page to create, quick create, edit, duplicate, delete, and email users. There is a Quick Create form which is initially hidden behind a button for .js users followed by search and filter components. Below the search area is a User Group component for each group of users. One user can belong to one or more user groups. Updating a single user object in the Redux store will reflect the change in the one or more user groups that user belongs to.

The User Group component follows the pattern explored in the Settings Table Lab. The User Group Component is actually a simple HTML <table>. Each user consists of a row that displays the username and status followed by a row which contains a form to quick edit / edit, duplicate, delete, email, or save the user. Similar to the settings table, these "hidden forms" are initially accessible for .no-js users.

Screenshots

Bulk Actions

Bulk Actions such as activate, suspend, delete, and email can be performed on multiple members of a group. JavaScript users can asynchronously choose users to perform bulk actions on. .no-js users will only be able to perform the on the entire group.

Screencasts

• Manage Users Concept

Features

• Accessible
• Lightweight (CSS + JS is less than 8kb over GZIP excluding CDN requests)
• HTML–first
• React + Redux 0.15
• Two Way Data Binding

Front End Dependencies

• React
• ReactDOM
• Redux
• React Redux

Design Patterns

• Mirrored Calls to Action
• Async Collapse
• Focus Show
• Flexible Items