From e5f4fa8c467830745a77d281ab90347230a3b6c3 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 27 Jan 2016 17:58:47 +0000
Subject: [PATCH] Add warning bar for guest users. Fixes
 https://github.com/vector-im/vector-web/issues/770

---
 src/components/structures/RoomView.js | 40 +++++++++++++++++++++------
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index a2a308ed5c..12acdc21fd 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -1474,6 +1474,16 @@ module.exports = React.createClass({
         }
     },
 
+    onRegisterClicked: function() {
+        dis.dispatch({'action': 'logout'});
+        dis.dispatch({'action': 'start_registration'});
+    },
+
+    onLoginClicked: function() {
+        dis.dispatch({'action': 'logout'});
+        dis.dispatch({'action': 'start_login'});
+    },
+
     render: function() {
         var RoomHeader = sdk.getComponent('rooms.RoomHeader');
         var MessageComposer = sdk.getComponent('rooms.MessageComposer');
@@ -1581,13 +1591,13 @@ module.exports = React.createClass({
                 // a connection!
                 if (this.state.syncState === "ERROR") {
                     statusBar = (
-                        <div className="mx_RoomView_connectionLostBar">
+                        <div className="mx_RoomView_warningBar">
                             <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
-                            <div className="mx_RoomView_connectionLostBar_textArea">
-                                <div className="mx_RoomView_connectionLostBar_title">
+                            <div className="mx_RoomView_warningBar_textArea">
+                                <div className="mx_RoomView_warningBar_title">
                                     Connectivity to the server has been lost.
                                 </div>
-                                <div className="mx_RoomView_connectionLostBar_desc">
+                                <div className="mx_RoomView_warningBar_desc">
                                     Sent messages will be stored until your connection has returned.
                                 </div>
                             </div>
@@ -1611,13 +1621,13 @@ module.exports = React.createClass({
                 }
                 else if (this.state.hasUnsentMessages) {
                     statusBar = (
-                        <div className="mx_RoomView_connectionLostBar">
+                        <div className="mx_RoomView_warningBar">
                             <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
-                            <div className="mx_RoomView_connectionLostBar_textArea">
-                                <div className="mx_RoomView_connectionLostBar_title">
+                            <div className="mx_RoomView_warningBar_textArea">
+                                <div className="mx_RoomView_warningBar_title">
                                     Some of your messages have not been sent.
                                 </div>
-                                <div className="mx_RoomView_connectionLostBar_desc">
+                                <div className="mx_RoomView_warningBar_desc">
                                     <a className="mx_RoomView_resend_link"
                                         onClick={ this.onResendAllClick }>
                                     Resend all now
@@ -1651,6 +1661,20 @@ module.exports = React.createClass({
                             <img src="img/scrolldown.svg" width="24" height="24" alt="Scroll to bottom of page" title="Scroll to bottom of page"/>
                         </div>                        
                     );
+                } else if (MatrixClientPeg.get().isGuest()) {
+                    statusBar = (
+                        <div className="mx_RoomView_warningBar">
+                            <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
+                            <div className="mx_RoomView_warningBar_textArea">
+                                <div className="mx_RoomView_warningBar_title">
+                                    You are using Vector as a guest.
+                                </div>
+                                <div className="mx_RoomView_warningBar_desc">
+                                    <a onClick={this.onRegisterClicked}>Register</a> or <a onClick={this.onLoginClicked}>log in</a> to access more rooms and features.
+                                </div>
+                            </div>
+                        </div>
+                    );
                 }
             }