Add ErrorDialog class. Use it for VoIP/command errors.

skins/base/css/common.css

@@ -68,5 +68,15 @@ html {
     max-width: 500px;
     z-index: -100;
     position: relative;
-    top: 100px;
+    top: 200px;
+}
+
+.mx_ErrorDialogTitle {
+    background-color: #d2322d;
+    min-height: 16px;
+    padding: 15px;
+    border-bottom: 1px solid #e5e5e5;
+    font-weight: bold;
+    line-height: 1.4;
+    color: #fff;
 }

skins/base/views/organisms/ErrorDialog.js

@@ -0,0 +1,71 @@
+/*
+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');
+
+module.exports = React.createClass({
+    displayName: 'ErrorDialog',
+
+    // can't use getDefaultProps, see Modal.js
+    componentWillMount: function() {
+        if (!this.props.title) {
+            this.props.title = "Error";
+        }
+        if (!this.props.description) {
+            this.props.description = "An error has occurred.";
+        }
+        if (!this.props.button) {
+            this.props.button = "OK";
+        }
+        if (this.props.focus === undefined) {
+            this.props.focus = true;
+        }
+        if (!this.props.onClose) {
+            var self = this;
+            this.props.onClose = function() {
+                self.props.onFinished();
+            };
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="mx_ErrorDialog">
+                <div className="mx_ErrorDialogTitle">
+                    {this.props.title}
+                </div>
+                {this.props.description}<br />
+                <button onClick={this.props.onClose} autoFocus={this.props.focus}>
+                    {this.props.button}
+                </button>
+            </div>
+        );
+    }
+});
+

skins/base/views/organisms/UserSettings.js

@@ -25,7 +25,7 @@ var ChangePassword = ComponentBroker.get('molecules/ChangePassword');
 var LogoutPrompt = ComponentBroker.get('organisms/LogoutPrompt');
 var Loader = require("react-loader");
 
-var Modal = require("../../../../src/Modal")
+var Modal = require("../../../../src/Modal");
 
 module.exports = React.createClass({
     displayName: 'UserSettings',

src/CallHandler.js

@@ -54,6 +54,9 @@ limitations under the License.
  */
 
 var MatrixClientPeg = require("./MatrixClientPeg");
+var Modal = require("./Modal");
+var ComponentBroker = require('./ComponentBroker');
+var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
 var Matrix = require("matrix-js-sdk");
 var dis = require("./dispatcher");
 
@@ -154,7 +157,12 @@ dis.register(function(payload) {
                 console.error("Room %s does not exist.", payload.room_id);
                 return;
             }
-            if (room.getJoinedMembers().length !== 2) {
+            var members = room.getJoinedMembers();
+            if (members.length !== 2) {
+                var text = members.length === 1 ? "yourself." : "more than 2 people.";
+                Modal.createDialog(ErrorDialog, {
+                    description: "You cannot place a call with " + text
+                });
                 console.error(
                     "Fail: There are %s joined members in this room, not 2.",
                     room.getJoinedMembers().length

src/ComponentBroker.js

@@ -109,4 +109,5 @@ require('../skins/base/views/molecules/voip/MCallAnswerTile');
 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');
 }

src/Modal.js

@@ -44,6 +44,8 @@ module.exports = {
             if (props && props.onFinished) props.onFinished.apply(arguments);
         };
 
+        // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
+        // property set here so you can't close the dialog from a button click!
         var dialog = (
             <div className="mx_Dialog_Wrapper">
                 <div className="mx_Dialog">

src/SlashCommands.js

@@ -100,22 +100,18 @@ var commands = {
                 else {
                     // attempt to join this alias.
                     return success(
-                        MatrixClientPeg.get().joinRoom(room_alias).done(
+                        MatrixClientPeg.get().joinRoom(room_alias).then(
                         function(room) {
                             dis.dispatch({
                                 action: 'view_room',
                                 room_id: room.roomId
                             });
-                        }, function(err) {
-                            console.error(
-                                "Failed to join room: %s", JSON.stringify(err)
-                            );
                         })
                     );
                 }
             }
         }
-        return reject("Usage: /join <room_alias> [NOT IMPLEMENTED]");
+        return reject("Usage: /join <room_alias>");
     },
 
     // Kick a user from the room with an optional reason

src/controllers/molecules/MessageComposer.js

@@ -18,6 +18,9 @@ limitations under the License.
 
 var MatrixClientPeg = require("../../MatrixClientPeg");
 var SlashCommands = require("../../SlashCommands");
+var Modal = require("../../Modal");
+var ComponentBroker = require('../../ComponentBroker');
+var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
 
 var dis = require("../../dispatcher");
 var KeyCode = {
@@ -196,10 +199,18 @@ module.exports = {
                     console.log("Command success.");
                 }, function(err) {
                     console.error("Command failure: %s", err);
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Server Error",
+                        description: err.message
+                    });
                 });
             }
             else if (cmd.error) {
                 console.error(cmd.error);
+                Modal.createDialog(ErrorDialog, {
+                    title: "Command Error",
+                    description: cmd.error
+                });
             }
             return;
         }