diff --git a/src/component-index.js b/src/component-index.js index 50803c045e..780bfa6bd7 100644 --- a/src/component-index.js +++ b/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'); diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index f77e2e226d..8c97b49cce 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -698,7 +698,44 @@ module.exports = React.createClass({ onJoinButtonClicked: function(ev) { var self = this; - MatrixClientPeg.get().joinRoom(this.props.roomId).done(function() { + + var cli = MatrixClientPeg.get(); + var join_defer; + var join_promise; + // if this is the first room we're joining, checkthe 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) { + join_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 = { + dialog_ref = r; + }} onFinished={() => { + var new_displayname = dialog_ref.getValue() || dialog_ref.getDefaultValue(); + cli.setDisplayName(new_displayname).done(() => { + dialog_defer.resolve(); + }); + modal.close(); + }} /> + modal = Modal.createDialogWithElement(dialog_instance); + return dialog_defer.promise; + } + }); + } else { + join_defer = q.defer(); + join_promise = join_defer.promise; + join_defer.resolve(); + } + + join_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 diff --git a/src/components/views/dialogs/SetDisplayNameDialog.js b/src/components/views/dialogs/SetDisplayNameDialog.js new file mode 100644 index 0000000000..43d5908327 --- /dev/null +++ b/src/components/views/dialogs/SetDisplayNameDialog.js @@ -0,0 +1,77 @@ +/* +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 || this.getDefaultDisplayName(), + } + }, + + getDefaultDisplayName: function() { + return "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 ( +
+
+ Set a Display Name +
+
+ Your display name is how you'll appear to others when you speak in rooms. What would you like it to be? +
+
+
+ +
+
+ +
+
+
+ ); + } +});