From fd146a732b3c3611929c202767c8187ddea10825 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 21 Feb 2017 15:33:44 +0000
Subject: [PATCH] Clarify non-e2e vs. e2e /w composers placeholder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For E2E rooms, display "Send an encrypted message…" otherwise display "Send a plaintext message…" as the placeholder for the input box in [old] message composer.
---
 src/components/views/rooms/MessageComposer.js         | 8 ++++++--
 src/components/views/rooms/MessageComposerInput.js    | 2 +-
 src/components/views/rooms/MessageComposerInputOld.js | 5 ++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 113224666d..719187740b 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -223,8 +223,8 @@ export default class MessageComposer extends React.Component {
         );
 
         let e2eImg, e2eTitle, e2eClass;
-
-        if (MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId)) {
+        const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
+        if (roomIsEncrypted) {
             // FIXME: show a /!\ if there are untrusted devices in the room...
             e2eImg = 'img/e2e-verified.svg';
             e2eTitle = 'Encrypted room';
@@ -286,12 +286,16 @@ export default class MessageComposer extends React.Component {
                      key="controls_formatting" />
             );
 
+            const placeholderText = roomIsEncrypted ?
+                "Send an encrypted message…" : "Send a plaintext message…";
+
             controls.push(
                 <MessageComposerInput
                     ref={c => this.messageComposerInput = c}
                     key="controls_input"
                     onResize={this.props.onResize}
                     room={this.props.room}
+                    placeholder={placeholderText}
                     tryComplete={this._tryComplete}
                     onUpArrow={this.onUpArrow}
                     onDownArrow={this.onDownArrow}
diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js
index 9aab174511..61dd1e1b1c 100644
--- a/src/components/views/rooms/MessageComposerInput.js
+++ b/src/components/views/rooms/MessageComposerInput.js
@@ -721,7 +721,7 @@ export default class MessageComposerInput extends React.Component {
                          title={`Markdown is ${this.state.isRichtextEnabled ? 'disabled' : 'enabled'}`}
                          src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
                     <Editor ref="editor"
-                            placeholder="Type a message…"
+                            placeholder={this.props.placeholder}
                             editorState={this.state.editorState}
                             onChange={this.onEditorContentChanged}
                             blockStyleFn={MessageComposerInput.getBlockStyle}
diff --git a/src/components/views/rooms/MessageComposerInputOld.js b/src/components/views/rooms/MessageComposerInputOld.js
index 020c2238cb..2706b7dffb 100644
--- a/src/components/views/rooms/MessageComposerInputOld.js
+++ b/src/components/views/rooms/MessageComposerInputOld.js
@@ -70,6 +70,9 @@ export default React.createClass({
 
         // js-sdk Room object
         room: React.PropTypes.object.isRequired,
+
+        // The text to use a placeholder in the input box
+        placeholder: React.PropTypes.string.isRequired,
     },
 
     componentWillMount: function() {
@@ -442,7 +445,7 @@ export default React.createClass({
     render: function() {
         return (
             <div className="mx_MessageComposer_input" onClick={ this.onInputClick }>
-                <textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
+                <textarea autoFocus ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder={this.props.placeholder} />
             </div>
         );
     }