PLT-588 Add a warning when a user demotes themselves from System Admin to another role.

web/react/components/admin_console/demote_own_role_modal.jsx

@@ -0,0 +1,91 @@
+// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import * as AsyncClient from '../../utils/async_client.jsx';
+import * as Client from '../../utils/client.jsx';
+const Modal = ReactBootstrap.Modal;
+import * as Utils from '../../utils/utils.jsx';
+
+export default class DemoteOwnRoleModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.doDemote = this.doDemote.bind(this);
+        this.doCancel = this.doCancel.bind(this);
+
+        this.state = {
+            serverError: null
+        };
+    }
+
+    doDemote() {
+        const data = {
+            user_id: this.props.user.id,
+            new_roles: this.props.role
+        };
+        console.log(JSON.stringify(data));
+
+        Client.updateRoles(data,
+            () => {
+                this.setState({serverError: null});
+                this.props.onModalSubmit();
+            },
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+    }
+
+    doCancel() {
+        this.setState({serverError: null});
+        this.props.onModalDismissed();
+    }
+
+    render() {
+        let serverError = null;
+
+        if (this.state.serverError) {
+            serverError = <div className="has-error"><label className="has-error control-label">{this.state.serverError}</label></div>
+        }
+
+        return (
+            <Modal
+                show={this.props.show}
+                onHide={this.doCancel}
+            >
+                <Modal.Header closeButton={true}>
+                    <h4 className='modal-title'>{'Confirm demotion from System Admin role'}</h4>
+                </Modal.Header>
+                <Modal.Body>
+                    If you demote yourself from the System Admin role and there is not another user with System Admin privileges, you'll need to re-assign a System Admin by accessing the Mattermost server through a terminal and running the following command.<br/><br/>./platform -assign_role -team_name="yourteam" -email="name@yourcompany.com" -role="system_admin"
+                    {serverError}
+                </Modal.Body>
+                <Modal.Footer>
+                    <button
+                        type='button'
+                        className='btn btn-default'
+                        onClick={this.doCancel}
+                    >
+                        {'Cancel'}
+                    </button>
+                    <button
+                        type='button'
+                        className='btn btn-danger'
+                        data-dismiss='modal'
+                        onClick={this.doDemote}
+                    >
+                        {'Confirm Demotion'}
+                    </button>
+                </Modal.Footer>
+            </Modal>
+        );
+    }
+}
+
+DemoteOwnRoleModal.propTypes = {
+    user: React.PropTypes.object,
+    role: React.PropTypes.string,
+    show: React.PropTypes.bool.isRequired,
+    onModalSubmit: React.PropTypes.func,
+    onModalDismissed: React.PropTypes.func
+};

web/react/components/admin_console/user_item.jsx

@@ -3,6 +3,8 @@
 
 import * as Client from '../../utils/client.jsx';
 import * as Utils from '../../utils/utils.jsx';
+import UserStore from '../../stores/user_store.jsx';
+import DemoteOwnRoleModal from './demote_own_role_modal.jsx';
 
 import {FormattedMessage} from 'mm-intl';
 
@@ -16,12 +18,24 @@ export default class UserItem extends React.Component {
         this.handleMakeAdmin = this.handleMakeAdmin.bind(this);
         this.handleMakeSystemAdmin = this.handleMakeSystemAdmin.bind(this);
         this.handleResetPassword = this.handleResetPassword.bind(this);
+        this.doDemote = this.doDemote.bind(this);
+        this.doDemoteSubmit = this.doDemoteSubmit.bind(this);
+        this.doDemoteDismiss = this.doDemoteDismiss.bind(this);
 
-        this.state = {};
+        this.state = {
+            serverError: null,
+            showDemoteModal: false,
+            user: null,
+            role: null
+        };
     }
 
     handleMakeMember(e) {
         e.preventDefault();
+        var me = UserStore.getCurrentUser();
+        if (this.props.user.id === me.id) {
+            this.doDemote(this.props.user, '');
+        } else {
             const data = {
                 user_id: this.props.user.id,
                 new_roles: ''
@@ -36,6 +50,7 @@ export default class UserItem extends React.Component {
                 }
             );
         }
+    }
 
     handleMakeActive(e) {
         e.preventDefault();
@@ -63,6 +78,10 @@ export default class UserItem extends React.Component {
 
     handleMakeAdmin(e) {
         e.preventDefault();
+        var me = UserStore.getCurrentUser();
+        if (this.props.user.id === me.id) {
+            this.doDemote(this.props.user, 'admin');
+        } else {
             const data = {
                 user_id: this.props.user.id,
                 new_roles: 'admin'
@@ -77,6 +96,7 @@ export default class UserItem extends React.Component {
                 }
             );
         }
+    }
 
     handleMakeSystemAdmin(e) {
         e.preventDefault();
@@ -100,6 +120,33 @@ export default class UserItem extends React.Component {
         this.props.doPasswordReset(this.props.user);
     }
 
+    doDemote(user, role) {
+        this.setState({
+            serverError: this.state.serverError,
+            showDemoteModal: true,
+            user,
+            role
+        });
+    }
+
+    doDemoteDismiss() {
+        this.setState({
+            serverError: this.state.serverError,
+            showDemoteModal: false,
+            user: null,
+            role: null
+        });
+    }
+
+    doDemoteSubmit() {
+        this.setState({
+            serverError: this.state.serverError,
+            showDemoteModal: false,
+            user: null,
+            role: null
+        });
+    }
+
     render() {
         let serverError = null;
         if (this.state.serverError) {
@@ -247,6 +294,19 @@ export default class UserItem extends React.Component {
                 </li>
             );
         }
+        var me = UserStore.getCurrentUser();
+        let makeDemoteModal = null;
+        if (this.props.user.id === me.id) {
+            makeDemoteModal = (
+                <DemoteOwnRoleModal
+                    user={this.state.user}
+                    role={this.state.role}
+                    show={this.state.showDemoteModal}
+                    onModalSubmit={this.doDemoteSubmit}
+                    onModalDismissed={this.doDemoteDismiss}
+                />
+            );
+        }
 
         return (
             <tr>
@@ -293,6 +353,7 @@ export default class UserItem extends React.Component {
                             </li>
                         </ul>
                     </div>
+                    {makeDemoteModal}
                     {serverError}
                 </td>
             </tr>