Add confirmation modal for deactivating user (#6119)

webapp/components/admin_console/system_users/system_users_dropdown.jsx

@@ -27,7 +27,9 @@ export default class SystemUsersDropdown extends React.Component {
 
         this.handleMakeMember = this.handleMakeMember.bind(this);
         this.handleMakeActive = this.handleMakeActive.bind(this);
-        this.handleMakeNotActive = this.handleMakeNotActive.bind(this);
+        this.handleShowDeactivateMemberModal = this.handleShowDeactivateMemberModal.bind(this);
+        this.handleDeactivateMember = this.handleDeactivateMember.bind(this);
+        this.handleDeactivateCancel = this.handleDeactivateCancel.bind(this);
         this.handleMakeSystemAdmin = this.handleMakeSystemAdmin.bind(this);
         this.handleManageTeams = this.handleManageTeams.bind(this);
         this.handleResetPassword = this.handleResetPassword.bind(this);
@@ -35,10 +37,12 @@ export default class SystemUsersDropdown extends React.Component {
         this.handleDemoteSystemAdmin = this.handleDemoteSystemAdmin.bind(this);
         this.handleDemoteSubmit = this.handleDemoteSubmit.bind(this);
         this.handleDemoteCancel = this.handleDemoteCancel.bind(this);
+        this.renderDeactivateMemberModal = this.renderDeactivateMemberModal.bind(this);
 
         this.state = {
             serverError: null,
             showDemoteModal: false,
+            showDeactivateMemberModal: false,
             user: null,
             role: null
         };
@@ -74,15 +78,6 @@ export default class SystemUsersDropdown extends React.Component {
         );
     }
 
-    handleMakeNotActive(e) {
-        e.preventDefault();
-        updateActive(this.props.user.id, false, null,
-            (err) => {
-                this.setState({serverError: err.message});
-            }
-        );
-    }
-
     handleMakeSystemAdmin(e) {
         e.preventDefault();
 
@@ -150,6 +145,68 @@ export default class SystemUsersDropdown extends React.Component {
         }
     }
 
+    handleShowDeactivateMemberModal(e) {
+        e.preventDefault();
+
+        this.setState({showDeactivateMemberModal: true});
+    }
+
+    handleDeactivateMember() {
+        updateActive(this.props.user.id, false, null,
+            (err) => {
+                this.setState({serverError: err.message});
+            }
+        );
+
+        this.setState({showDeactivateMemberModal: false});
+    }
+
+    handleDeactivateCancel() {
+        this.setState({showDeactivateMemberModal: false});
+    }
+
+    renderDeactivateMemberModal() {
+        const title = (
+            <FormattedMessage
+                id='deactivate_member_modal.title'
+                defaultMessage='Deactivate {username}'
+                values={{
+                    username: this.props.user.username
+                }}
+            />
+        );
+
+        const message = (
+            <FormattedMessage
+                id='deactivate_member_modal.desc'
+                defaultMessage='This action deactivates {username}. They will be logged out and not have access to any teams or channels on this system. Are you sure you want to deactivate {username}?'
+                values={{
+                    username: this.props.user.username
+                }}
+            />
+        );
+
+        const confirmButtonClass = 'btn btn-danger';
+        const deactivateMemberButton = (
+            <FormattedMessage
+                id='deactivate_member_modal.deactivate'
+                defaultMessage='Deactivate'
+            />
+        );
+
+        return (
+            <ConfirmModal
+                show={this.state.showDeactivateMemberModal}
+                title={title}
+                message={message}
+                confirmButtonClass={confirmButtonClass}
+                confirmButton={deactivateMemberButton}
+                onConfirm={this.handleDeactivateMember}
+                onCancel={this.handleDeactivateCancel}
+            />
+        );
+    }
+
     render() {
         let serverError = null;
         if (this.state.serverError) {
@@ -280,7 +337,7 @@ export default class SystemUsersDropdown extends React.Component {
                     <a
                         role='menuitem'
                         href='#'
-                        onClick={this.handleMakeNotActive}
+                        onClick={this.handleShowDeactivateMemberModal}
                     >
                         <FormattedMessage
                             id='admin.user_item.makeInactive'
@@ -407,6 +464,8 @@ export default class SystemUsersDropdown extends React.Component {
             );
         }
 
+        const deactivateMemberModal = this.renderDeactivateMemberModal();
+
         let displayedName = Utils.getDisplayName(user);
         if (displayedName !== user.username) {
             displayedName += ' (@' + user.username + ')';
@@ -437,6 +496,7 @@ export default class SystemUsersDropdown extends React.Component {
                     {passwordReset}
                 </ul>
                 {makeDemoteModal}
+                {deactivateMemberModal}
                 {serverError}
             </div>
         );

webapp/i18n/en.json

@@ -1230,6 +1230,10 @@
   "custom_emoji.empty": "No custom emoji found",
   "custom_emoji.header": "Custom Emoji",
   "custom_emoji.search": "Search Custom Emoji",
+  "deactivate_member_modal.title": "Deactivate {username}",
+  "deactivate_member_modal.desc": "This action deactivates {username}. They will be logged out and not have access to any teams or channels on this system. Are you sure you want to deactivate {username}?",
+  "deactivate_member_modal.cancel": "Cancel",
+  "deactivate_member_modal.deactivate": "Deactivate",
   "default_channel.purpose": "Post messages here that you want everyone to see. Everyone automatically becomes a permanent member of this channel when they join the team.",
   "delete_channel.cancel": "Cancel",
   "delete_channel.confirm": "Confirm DELETE Channel",