From 47fef0896f552e14dca146c6e0c21da459cc9abb Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 Feb 2016 11:49:10 +0000 Subject: [PATCH 1/3] Prompt for display name before joining your first room (if you haven't set one). Fixes https://github.com/vector-im/vector-web/issues/758 --- src/component-index.js | 1 + src/components/structures/RoomView.js | 39 +++++++++- .../views/dialogs/SetDisplayNameDialog.js | 77 +++++++++++++++++++ 3 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 src/components/views/dialogs/SetDisplayNameDialog.js 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? +
+
+
+ +
+
+ +
+
+
+ ); + } +}); From 6e424780f1820edf482c0bd42a139c1fea1d713b Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 Feb 2016 14:38:05 +0000 Subject: [PATCH 2/3] typo --- src/components/structures/RoomView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 8c97b49cce..644927e3bd 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -702,7 +702,7 @@ module.exports = React.createClass({ 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 + // 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 From 167da10b8bf4ae1366c519c01625aa262d7cb92f Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 4 Feb 2016 15:07:30 +0000 Subject: [PATCH 3/3] address PR comments --- src/components/structures/RoomView.js | 14 ++++---------- .../views/dialogs/SetDisplayNameDialog.js | 6 +----- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js index 644927e3bd..836ea1ea2f 100644 --- a/src/components/structures/RoomView.js +++ b/src/components/structures/RoomView.js @@ -700,15 +700,14 @@ module.exports = React.createClass({ var self = this; var cli = MatrixClientPeg.get(); - var join_defer; - var join_promise; + 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) { - join_promise = cli.getProfileInfo(cli.credentials.userId).then((result) => { + 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(); @@ -717,8 +716,7 @@ module.exports = React.createClass({ var dialog_instance = { dialog_ref = r; }} onFinished={() => { - var new_displayname = dialog_ref.getValue() || dialog_ref.getDefaultValue(); - cli.setDisplayName(new_displayname).done(() => { + cli.setDisplayName(dialog_ref.getValue()).done(() => { dialog_defer.resolve(); }); modal.close(); @@ -727,13 +725,9 @@ module.exports = React.createClass({ return dialog_defer.promise; } }); - } else { - join_defer = q.defer(); - join_promise = join_defer.promise; - join_defer.resolve(); } - join_promise.then(() => { + 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 diff --git a/src/components/views/dialogs/SetDisplayNameDialog.js b/src/components/views/dialogs/SetDisplayNameDialog.js index 43d5908327..d1287e2570 100644 --- a/src/components/views/dialogs/SetDisplayNameDialog.js +++ b/src/components/views/dialogs/SetDisplayNameDialog.js @@ -27,14 +27,10 @@ module.exports = React.createClass({ getInitialState: function() { return { - value: this.props.currentDisplayName || this.getDefaultDisplayName(), + value: this.props.currentDisplayName || "Guest "+MatrixClientPeg.get().getUserIdLocalpart(), } }, - getDefaultDisplayName: function() { - return "Guest "+MatrixClientPeg.get().getUserIdLocalpart(); - }, - getValue: function() { return this.state.value; },