Merge pull request #3 from vector-im/confirm_on_leave

Prompt if a user really wants to leave the room

skins/base/views/organisms/QuestionDialog.js

@@ -0,0 +1,66 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+/*
+ * Usage:
+ * Modal.createDialog(ErrorDialog, {
+ *   title: "some text", (default: "Error")
+ *   description: "some more text",
+ *   button: "Button Text",
+ *   onClose: someFunction,
+ *   focus: true|false (default: true)
+ * });
+ */
+
+var React = require('react');
+var QuestionDialogController = require("../../../../src/controllers/organisms/QuestionDialog");
+
+module.exports = React.createClass({
+    displayName: 'QuestionDialog',
+    mixins: [QuestionDialogController],
+
+    onOk: function() {
+        this.props.onFinished(true);
+    },
+
+    onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    render: function() {
+        return (
+            <div className="mx_QuestionDialog">
+                <div className="mx_QuestionDialog">
+                    {this.props.title}
+                </div>
+                <div className="mx_QuestionDialog">
+                    {this.props.description}
+                </div>
+                <div className="mx_QuestionDialog_buttons">
+                    <button onClick={this.onOk} autoFocus={this.props.focus}>
+                        {this.props.button}
+                    </button>
+
+                    <button onClick={this.onCancel}>
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        );
+    }
+});

src/ComponentBroker.js

@@ -112,4 +112,5 @@ require('../skins/base/views/molecules/voip/MCallHangupTile');
 require('../skins/base/views/molecules/EventAsTextTile');
 require('../skins/base/views/molecules/MemberInfo');
 require('../skins/base/views/organisms/ErrorDialog');
+require('../skins/base/views/organisms/QuestionDialog');
 }

src/Modal.js

@@ -41,7 +41,7 @@ module.exports = {
         var closeDialog = function() {
             React.unmountComponentAtNode(self.getOrCreateContainer());
 
-            if (props && props.onFinished) props.onFinished.apply(arguments);
+            if (props && props.onFinished) props.onFinished.apply(null, arguments);
         };
 
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished

src/controllers/molecules/MemberTile.js

@@ -18,6 +18,8 @@ limitations under the License.
 
 var dis = require("../../dispatcher");
 var Modal = require("../../Modal");
+var ComponentBroker = require('../../ComponentBroker');
+var QuestionDialog = ComponentBroker.get("organisms/QuestionDialog");
 var Loader = require("react-loader");
 
 var MatrixClientPeg = require("../../MatrixClientPeg");
@@ -31,19 +33,28 @@ module.exports = {
     },
 
     onLeaveClick: function() {
-        var d = MatrixClientPeg.get().leave(this.props.member.roomId);
+        var roomId = this.props.member.roomId;
+        Modal.createDialog(QuestionDialog, {
+            title: "Leave room",
+            description: "Are you sure you want to leave the room?",
+            onFinished: function(should_leave) {
+                if (should_leave) {
+                    var d = MatrixClientPeg.get().leave(roomId);
 
-        var modal = Modal.createDialog(Loader);
+                    var modal = Modal.createDialog(Loader);
 
-        d.then(function() {
+                    d.then(function() {
-            modal.close();
+                        modal.close();
-            dis.dispatch({action: 'view_next_room'});
+                        dis.dispatch({action: 'view_next_room'});
-        }, function(err) {
+                    }, function(err) {
-            modal.close();
+                        modal.close();
-            Modal.createDialog(ErrorDialog, {
+                        Modal.createDialog(ErrorDialog, {
-                title: "Failed to leave room",
+                            title: "Failed to leave room",
-                description: err.toString()
+                            description: err.toString()
-            });
+                        });
+                    });
+                }
+            }
         });
     }
 };

src/controllers/organisms/QuestionDialog.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require("react");
+
+module.exports = {
+    propTypes: {
+        title: React.PropTypes.string,
+        description: React.PropTypes.string,
+        button: React.PropTypes.string,
+        focus: React.PropTypes.bool,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getDefaultProps: function() {
+        var self = this;
+        return {
+            title: "",
+            description: "",
+            button: "OK",
+            focus: true,
+        };
+    },
+};