Merge pull request #720 from matrix-org/luke/clarify-e2e-input-box

Clarify non-e2e vs. e2e /w composers placeholder

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 a message (unencrypted)…" : "Send a 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}

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}

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>
         );
     }