1 files changed, 103 insertions, 32 deletions

diff --git a/webapp/components/confirm_modal.jsx b/webapp/components/confirm_modal.jsx
index 89656a776..72f341efb 100644
--- a/webapp/components/confirm_modal.jsx
+++ b/webapp/components/confirm_modal.jsx
@@ -1,18 +1,70 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import {FormattedMessage} from 'react-intl';
+import React from 'react';
 import {Modal} from 'react-bootstrap';
-
 import PropTypes from 'prop-types';
-
-import React from 'react';
+import {FormattedMessage} from 'react-intl';
 
 export default class ConfirmModal extends React.Component {
-    constructor(props) {
-        super(props);
+    static propTypes = {
+
+        /*
+         * Set to show modal
+         */
+        show: PropTypes.bool.isRequired,
+
+        /*
+         * Title to use for the modal
+         */
+        title: PropTypes.node,
+
+        /*
+         * Message to display in the body of the modal
+         */
+        message: PropTypes.node,
+
+        /*
+         * The CSS class to apply to the confirm button
+         */
+        confirmButtonClass: PropTypes.string,
+
+        /*
+         * Text/jsx element on the confirm button
+         */
+        confirmButtonText: PropTypes.node,
+
+        /*
+         * Text/jsx element on the cancel button
+         */
+        cancelButtonText: PropTypes.node,
+
+        /*
+         * Set to show checkbox
+         */
+        showCheckbox: PropTypes.bool,
+
+        /*
+         * Text/jsx element to display with the checkbox
+         */
+        checkboxText: PropTypes.node,
 
-        this.handleKeypress = this.handleKeypress.bind(this);
+        /*
+         * Function called when the confirm button or ENTER is pressed. Passes `true` if the checkbox is checked
+         */
+        onConfirm: PropTypes.func.isRequired,
+
+        /*
+         * Function called when the cancel button is pressed or the modal is hidden. Passes `true` if the checkbox is checked
+         */
+        onCancel: PropTypes.func.isRequired
+    }
+
+    static defaultProps = {
+        title: '',
+        message: '',
+        confirmButtonClass: 'btn btn-primary',
+        confirmButtonText: ''
     }
 
     componentDidMount() {
@@ -33,13 +85,50 @@ export default class ConfirmModal extends React.Component {
         }
     }
 
-    handleKeypress(e) {
+    handleKeypress = (e) => {
         if (e.key === 'Enter' && this.props.show) {
-            this.props.onConfirm(e);
+            this.handleConfirm();
         }
     }
 
+    handleConfirm = () => {
+        const checked = this.refs.checkbox ? this.refs.checkbox.checked : false;
+        this.props.onConfirm(checked);
+    }
+
+    handleCancel = () => {
+        const checked = this.refs.checkbox ? this.refs.checkbox.checked : false;
+        this.props.onCancel(checked);
+    }
+
     render() {
+        let checkbox;
+        if (this.props.showCheckbox) {
+            checkbox = (
+                <div className='checkbox text-right margin-bottom--none'>
+                    <label>
+                        <input
+                            ref='checkbox'
+                            type='checkbox'
+                        />
+                        {this.props.checkboxText}
+                    </label>
+                </div>
+            );
+        }
+
+        let cancelText;
+        if (this.props.cancelButtonText) {
+            cancelText = this.props.cancelButtonText;
+        } else {
+            cancelText = (
+                <FormattedMessage
+                    id='confirm_modal.cancel'
+                    defaultMessage='Cancel'
+                />
+            );
+        }
+
         return (
             <Modal
                 className='modal-confirm'
@@ -51,43 +140,25 @@ export default class ConfirmModal extends React.Component {
                 </Modal.Header>
                 <Modal.Body>
                     {this.props.message}
+                    {checkbox}
                 </Modal.Body>
                 <Modal.Footer>
                     <button
                         type='button'
                         className='btn btn-default'
-                        onClick={this.props.onCancel}
+                        onClick={this.handleCancel}
                     >
-                        <FormattedMessage
-                            id='confirm_modal.cancel'
-                            defaultMessage='Cancel'
-                        />
+                        {cancelText}
                     </button>
                     <button
                         type='button'
                         className={this.props.confirmButtonClass}
-                        onClick={this.props.onConfirm}
+                        onClick={this.handleConfirm}
                     >
-                        {this.props.confirmButton}
+                        {this.props.confirmButtonText}
                     </button>
                 </Modal.Footer>
             </Modal>
         );
     }
 }
-
-ConfirmModal.defaultProps = {
-    title: '',
-    message: '',
-    confirmButtonClass: 'btn btn-primary',
-    confirmButton: ''
-};
-ConfirmModal.propTypes = {
-    show: PropTypes.bool.isRequired,
-    title: PropTypes.node,
-    message: PropTypes.node,
-    confirmButtonClass: PropTypes.string,
-    confirmButton: PropTypes.node,
-    onConfirm: PropTypes.func.isRequired,
-    onCancel: PropTypes.func.isRequired
-};