Support for user registration in users page + little aesthetics

README.md

@@ -10,7 +10,7 @@ Features:
 
 - Login and register
 - Change password and manage Git ssh keys
-- List users, grant admin, delete user (admin only)
+- List users, grant admin, delete user, register user (admin only)
 - List and create new apps
 - Scale app
 - Destroy app

actions/deis.js

@@ -140,6 +140,10 @@ export const listApps = () => (
   client.get('/apps')
 )
 
+export const listUsers = () => (
+  client.get('/users')
+)
+
 export const login = (username, password) => (
   client.post('/auth/login', { body: { username, password } }, {
     mapResponse: (response, json, baseAction) => {
@@ -256,6 +260,17 @@ export const createApp = (appID) => (dispatch, getState) => (
   })
 )
 
+export const createUser = (username, password, email) => (dispatch, getState) => (
+  client.post(`/auth/register`, {
+    body: { username, password, email },
+  }, {
+    action: { type: 'POST_USER' },
+  })(dispatch, getState).then(() => {
+    // refresh user list
+    dispatch(listUsers())
+  })
+)
+
 export const appOverview = (appID) => (
   client.get(`/apps/${appID}`, {}, { action: { type: 'GET_APP_OVERVIEW' } })
 )

containers/Dash/Users/index.js

@@ -5,12 +5,66 @@ import { connect } from 'react-redux'
 import UserItem from './UserItem'
 import { Table } from 'react-bootstrap'
 
+class CreateUser extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.create = this.create.bind(this)
+    this.change = this.change.bind(this)
+    this.state = {
+      username: '',
+      password: '',
+      email: '',
+    }
+  }
+
+  change(type, field) {
+    const nextState = {}
+    nextState[type] = field.target.value
+    this.setState(nextState)
+  }
+
+  create() {
+    this.props.createUser(this.state.username, this.state.password, this.state.email)
+    this.setState({ username: '', password: '', email: '' })
+  }
+
+  render() {
+    return (
+      <div className="form-inline create-user-form">
+        <div className="form-group">
+          <input
+            value={this.state.username}
+            onChange={this.change.bind(this, 'username')}
+            className="form-control"
+            placeholder="username"
+          />
+          <input type="password"
+            value={this.state.password}
+            onChange={this.change.bind(this, 'password')}
+            className="form-control"
+            placeholder="password"
+          />
+          <input
+            value={this.state.email}
+            onChange={this.change.bind(this, 'email')}
+            className="form-control"
+            placeholder="email"
+          />
+        </div>
+        <button className="btn btn-success" onClick={this.create}>Create user</button>
+      </div>
+    )
+  }
+}
+
 class Users extends React.Component {
   constructor(props) {
     super(props)
     this.onDestroyUser = this.onDestroyUser.bind(this)
     this.grantAdmin = this.grantAdmin.bind(this)
     this.revokeAdmin = this.revokeAdmin.bind(this)
+    this.createUser = this.createUser.bind(this)
   }
   // TODO: also do this in willreceiveprops
   componentWillMount() {
@@ -27,6 +81,11 @@ class Users extends React.Component {
     dispatch(deis.delUser(username))
   }
 
+  createUser(username, password, email) {
+    const { dispatch } = this.props
+    dispatch(deis.createUser(username, password, email))
+  }
+
   grantAdmin(username) {
     const { dispatch } = this.props
     dispatch(deis.grantAdmin(username))
@@ -43,7 +102,7 @@ class Users extends React.Component {
     if (!users) return <div></div>
 
     // Sort by username
-    users.sort(function(a,b) {return (a.username > b.username) ? 1 : ((b.username > a.username) ? -1 : 0);} );
+    users.sort(function( a,b) {return (a.username > b.username) ? 1 : ((b.username > a.username) ? -1 : 0);} );
 
     const userItems = users.map((user) => (
       <UserItem
@@ -78,6 +137,7 @@ class Users extends React.Component {
             {userItems}
           </tbody>
         </Table>
+        <CreateUser createUser={this.createUser} />
       </div>
     )
   }

styles/_apps.scss

@@ -22,6 +22,7 @@
      clear: both;
   }
   .create-app-form {
+    padding-bottom: 20px;
     button {
       margin-left: 10px;
     }

styles/_users.scss

@@ -0,0 +1,6 @@
+.create-user-form {
+  input {
+    margin-right: 10px;
+  }
+  margin-bottom: 20px;
+}

styles/main.scss

@@ -2,6 +2,7 @@
 @import "auth";
 @import "header";
 @import "apps";
+@import "users";
 @import "apps_show";
 @import "config";
 @import "hpanel";