warn when neither reader nor admin roles are selected for a user

graylog2-web-interface/src/components/users/EditRolesForm.css

@@ -0,0 +1,4 @@
+:local(.rolesMissingAlert) {
+    margin-top: -15px;
+    margin-bottom: 20px;
+}

graylog2-web-interface/src/components/users/EditRolesForm.jsx

@@ -11,13 +11,17 @@ const UsersStore = StoreProvider.getStore('Users');
 import RolesSelect from 'components/users/RolesSelect';
 import { Spinner } from 'components/common';
 
+import EditRolesFormStyle from '!style!css!./EditRolesForm.css';
+
 const EditRolesForm = React.createClass({
   propTypes: {
     user: React.PropTypes.object.isRequired,
     history: React.PropTypes.object,
   },
   getInitialState() {
-    return {};
+    return {
+      newRoles: null,
+    };
   },
   componentDidMount() {
     RolesStore.loadRoles().then(roles => {
@@ -39,11 +43,22 @@ const EditRolesForm = React.createClass({
   _onCancel() {
     this.props.history.pushState(null, Routes.SYSTEM.AUTHENTICATION.USERS.LIST);
   },
+  _onValueChange(newRoles) {
+    const roles = newRoles.split(',');
+    this.setState({ newRoles: roles });
+  },
   render() {
     const user = this.props.user;
     if (!this.state.roles) {
       return <Spinner />;
     }
+    let rolesAlert = null;
+    const roles = this.state.newRoles;
+    if (roles != null && !(roles.includes('Reader') || roles.includes('Admin'))) {
+      rolesAlert = (<Alert bsStyle="danger" role="alert" className={EditRolesFormStyle.rolesMissingAlert}>
+        You need to select at least one of the <em>Reader</em> or <em>Admin</em> roles.
+      </Alert>);
+    }
     const externalUser = user.external ?
       (
         <Col smOffset={3} sm={9} style={{ marginBottom: 15 }}>
@@ -65,11 +80,12 @@ const EditRolesForm = React.createClass({
         <form className="form-horizontal" style={{ marginTop: '10px' }} onSubmit={this._updateRoles}>
           <Input label="Roles" help="Choose the roles the user should be a member of. All the granted permissions will be combined."
                  labelClassName="col-sm-3" wrapperClassName="col-sm-9">
-            <RolesSelect ref="roles" userRoles={user.roles} availableRoles={this.state.roles} />
+            <RolesSelect ref="roles" userRoles={user.roles} availableRoles={this.state.roles} onValueChange={this._onValueChange} />
           </Input>
           <div className="form-group">
             <Col smOffset={3} sm={9}>
-              <Button bsStyle="primary" type="submit" className="save-button-margin">
+              {rolesAlert}
+              <Button bsStyle="primary" type="submit" className="save-button-margin" disabled={!!rolesAlert}>
                 Update role
               </Button>
               <Button onClick={this._onCancel}>Cancel</Button>

graylog2-web-interface/src/components/users/NewUserForm.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Col, Input, Button } from 'react-bootstrap';
+import { Alert, Row, Col, Input, Button } from 'react-bootstrap';
 
 import RolesSelect from 'components/users/RolesSelect';
 import TimeoutInput from 'components/users/TimeoutInput';
@@ -20,6 +20,7 @@ const NewUserForm = React.createClass({
   getInitialState() {
     return {
       users: [],
+      newRoles: null,
     };
   },
 
@@ -57,6 +58,11 @@ const NewUserForm = React.createClass({
     this.props.onSubmit(result);
   },
 
+  _onValueChange(newRoles) {
+    const roles = newRoles.split(',');
+    this.setState({ newRoles: roles });
+  },
+
   render() {
     const rolesHelp = (
       <span className="help-block">
@@ -65,6 +71,13 @@ const NewUserForm = React.createClass({
         The <em>Admin</em> role grants access to everything in Graylog.
       </span>
     );
+    const roles = this.state.newRoles;
+    let rolesAlert = null;
+    if (roles != null && !(roles.includes('Reader') || roles.includes('Admin'))) {
+      rolesAlert = (<Alert bsStyle="danger" role="alert">
+        You need to select at least one of the <em>Reader</em> or <em>Admin</em> roles.
+      </Alert>);
+    }
     return (
       <form id="create-user-form" className="form-horizontal" onSubmit={this._onSubmit}>
         <Input ref="username" name="username" id="username" type="text" maxLength={100}
@@ -97,7 +110,9 @@ const NewUserForm = React.createClass({
 
         <Input label="Roles" help={rolesHelp}
                labelClassName="col-sm-2" wrapperClassName="col-sm-10">
-          <RolesSelect ref="roles" availableRoles={this.props.roles} userRoles={['Reader']} className="form-control" />
+          <RolesSelect ref="roles" availableRoles={this.props.roles} userRoles={['Reader']}
+                       className="form-control" onValueChange={this._onValueChange}/>
+          {rolesAlert}
         </Input>
 
         <TimeoutInput ref="session_timeout_ms" />
@@ -109,7 +124,7 @@ const NewUserForm = React.createClass({
 
         <div className="form-group">
           <Col smOffset={2} sm={10}>
-            <Button type="submit" bsStyle="primary" className="create-user save-button-margin">
+            <Button type="submit" bsStyle="primary" className="create-user save-button-margin" disabled={!!rolesAlert}>
               Create User
             </Button>
             <Button onClick={this.props.onCancel}>Cancel</Button>

graylog2-web-interface/src/components/users/RolesSelect.jsx

@@ -6,6 +6,7 @@ const RolesSelect = React.createClass({
   propTypes: {
     userRoles: React.PropTypes.arrayOf(React.PropTypes.string),
     availableRoles: React.PropTypes.array.isRequired,
+    onValueChange: React.PropTypes.func,
   },
   getDefaultProps() {
     return {
@@ -25,6 +26,7 @@ const RolesSelect = React.createClass({
         ref="select"
         options={rolesOptions}
         value={rolesValue}
+        onValueChange={this.props.onValueChange}
         placeholder="Choose roles..."
       />
     );