Merge pull request #136 from matrix-org/dbkr/prompt_display_name_on_join

Prompt for display name before joining your first room

src/component-index.js

@@ -41,6 +41,7 @@ module.exports.components['views.create_room.RoomAlias'] = require('./components
 module.exports.components['views.dialogs.ErrorDialog'] = require('./components/views/dialogs/ErrorDialog');
 module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/views/dialogs/LogoutPrompt');
 module.exports.components['views.dialogs.QuestionDialog'] = require('./components/views/dialogs/QuestionDialog');
+module.exports.components['views.dialogs.SetDisplayNameDialog'] = require('./components/views/dialogs/SetDisplayNameDialog');
 module.exports.components['views.dialogs.TextInputDialog'] = require('./components/views/dialogs/TextInputDialog');
 module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText');
 module.exports.components['views.elements.PowerSelector'] = require('./components/views/elements/PowerSelector');

src/components/structures/RoomView.js

@@ -706,7 +706,38 @@ module.exports = React.createClass({
 
     onJoinButtonClicked: function(ev) {
         var self = this;
-        MatrixClientPeg.get().joinRoom(this.props.roomId).done(function() {
+
+        var cli = MatrixClientPeg.get();
+        var display_name_promise = q();
+        // if this is the first room we're joining, check the user has a display name
+        // and if they don't, prompt them to set one.
+        // NB. This unfortunately does not re-use the ChangeDisplayName component because
+        // it doesn't behave quite as desired here (we want an input field here rather than
+        // content-editable, and we want a default).
+        if (MatrixClientPeg.get().getRooms().length == 0) {
+            display_name_promise = cli.getProfileInfo(cli.credentials.userId).then((result) => {
+                if (!result.displayname) {
+                    var SetDisplayNameDialog = sdk.getComponent('views.dialogs.SetDisplayNameDialog');
+                    var dialog_defer = q.defer();
+                    var dialog_ref;
+                    var modal;
+                    var dialog_instance = <SetDisplayNameDialog currentDisplayName={result.displayname} ref={(r) => {
+                            dialog_ref = r;
+                    }} onFinished={() => {
+                        cli.setDisplayName(dialog_ref.getValue()).done(() => {
+                            dialog_defer.resolve();
+                        });
+                        modal.close();
+                    }} />
+                    modal = Modal.createDialogWithElement(dialog_instance);
+                    return dialog_defer.promise;
+                }
+            });
+        }
+
+        display_name_promise.then(() => {
+            return MatrixClientPeg.get().joinRoom(this.props.roomId)
+        }).done(function() {
             // It is possible that there is no Room yet if state hasn't come down
             // from /sync - joinRoom will resolve when the HTTP request to join succeeds,
             // NOT when it comes down /sync. If there is no room, we'll keep the

src/components/views/dialogs/SetDisplayNameDialog.js

@@ -0,0 +1,73 @@
+/*
+Copyright 2016 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.
+*/
+
+var React = require("react");
+var sdk = require("../../../index.js");
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+
+module.exports = React.createClass({
+    displayName: 'SetDisplayNameDialog',
+    propTypes: {
+        onFinished: React.PropTypes.func.isRequired,
+        currentDisplayName: React.PropTypes.string,
+    },
+
+    getInitialState: function() {
+        return {
+            value: this.props.currentDisplayName || "Guest "+MatrixClientPeg.get().getUserIdLocalpart(),
+        }
+    },
+
+    getValue: function() {
+        return this.state.value;
+    },
+
+    onValueChange: function(ev) {
+        this.setState({
+            value: ev.target.value
+        });
+    },
+
+    onFormSubmit: function(ev) {
+        ev.preventDefault();
+        this.props.onFinished();
+        return false;
+    },
+
+    render: function() {
+        return (
+            <div className="mx_SetDisplayNameDialog">
+                <div className="mx_Dialog_title">
+                    Set a Display Name
+                </div>
+                <div className="mx_Dialog_content">
+                    Your display name is how you'll appear to others when you speak in rooms. What would you like it to be?
+                </div>
+                <form onSubmit={this.onFormSubmit}>
+                    <div className="mx_Dialog_content">
+                        <input type="text" value={this.state.value}
+                            autoFocus={true} onChange={this.onValueChange} size="30"
+                            className="mx_SetDisplayNameDialog_input"
+                        />
+                    </div>
+                    <div className="mx_Dialog_buttons">
+                        <input type="submit" value="Set" />
+                    </div>
+                </form>
+            </div>
+        );
+    }
+});