webui: show a warning if JavaScript is disabled, show a warning when not connected to the server

git-svn-id: http://svn.code.sf.net/p/retroshare/code/trunk@8266 b45a01b8-16f6-495d-af2f-9b41ad6348cc

libresapi/src/webfiles/RsXHRConnection.js

@@ -13,6 +13,48 @@ function RsXHRConnection(server_hostname, server_port)
     //server_port = "9090";
     var api_root_path = "/api/v2/";
 
+    var status_listeners = [];
+
+    function notify_status(status)
+    {
+        for(var i = 0; i < status_listeners.length; i++)
+        {
+            status_listeners[i](status);
+        }
+    }
+
+    /**
+     *  Register a callback to be called when the state of the connection changes.
+     *  @param {function} cb - callback which receives a single argument. The arguments value is "connected" or "not_connected".
+     */
+    this.register_status_listener = function(cb)
+    {
+        status_listeners.push(cb);
+    };
+
+    /**
+     * Unregister a status callback function.
+     * @param {function} cb - a privously registered callback function
+     */
+     this.unregister_status_listener = function(cb)
+     {
+        var to_delete = [];
+        for(var i = 0; i < status_listeners.length; i++)
+        {
+            if(status_listeners[i] === cb){
+                to_delete.push(i);
+            }
+        }
+        for(var i = 0; i < to_delete.length; i++)
+        {
+            // copy the last element to the current index
+            var index = to_delete[i];
+            status_listeners[i] = status_listeners[status_listeners.length-1];
+            // remove the last element
+            status_listeners.pop();
+        }
+     };
+
     /**
      * Send a request to the backend
      * automatically encodes the request as JSON before sending it to the server
@@ -36,11 +78,13 @@ function RsXHRConnection(server_hostname, server_port)
                     console.log("RsXHRConnection: request failed with status: "+xhr.status);
                     console.log("request was:");
                     console.log(req);
+                    notify_status("not_connected");
                     if(err_cb !== undefined)
                         err_cb();
                     return;
                 }
                 // received response
+                notify_status("connected");
                 debug("RsXHRConnection received response:");
                 debug(xhr.responseText);
                 if(false)//if(xhr.responseText === "")

libresapi/src/webfiles/gui.jsx

@@ -17,6 +17,42 @@ function start_live_reload()
 }
 start_live_reload();
 
+// displays a notice if requests to the server failed
+var ConnectionStatusWidget = React.createClass({
+	// react component lifecycle callbacks
+	getInitialState: function(){
+		return {status: "unknown"};
+	},
+	componentWillMount: function()
+	{
+		connection.register_status_listener(this.onConnectionStatusChanged);
+	},
+	componentWillUnmount: function()
+	{
+		connection.unregister_status_listener(this.onConnectionStatusChanged);
+	},
+	onConnectionStatusChanged: function(state)
+	{
+		this.setState({status: state});
+	},
+	render: function()
+	{
+		if(this.state.status === "unknown")
+		{
+			return <div>connecting to server...</div>;
+		}
+		if(this.state.status === "connected")
+		{
+			return <div></div>;
+		}
+		if(this.state.status === "not_connected")
+		{
+			return <div>You are not connected to the server anymore. Is the Network connection ok? Is the server up?</div>;
+		}
+		return <div>Error: unexpected status value in ConnectionStatusWidget. Please Report this. this.state.status={this.state.status}</div>;
+	},
+});
+
 // implements automatic update using the state token system
 // components using this mixin should have a member "getPath()" to specify the resource
 var AutoUpdateMixin = 
@@ -867,6 +903,7 @@ var MainWidget = React.createClass({
 		return (
 			<div>
 				{/*<div id="overlay"><div className="paddingbox"><div className="btn2">test</div></div></div>*/}
+				<ConnectionStatusWidget/>
 				<PasswordWidget/>
 				<AudioPlayerWidget/>
 				{menubutton}

libresapi/src/webfiles/index.html

@@ -17,7 +17,10 @@
 	<meta name="viewport" content="initial-scale=1">
 </head>
 <body>
-	<p>loading lots of stuff...</p>
+	<script>
+		document.write("<p>loading lots of stuff...</p>");
+	</script>
+	<p><noscript>The Retroshare web interface requires JavaScript. Please enable JavaScript in your browser.</noscript></p>
 	<!--<div id="logo_splash">
 		<img src="img/logo_splash.png"></img>
 	</div>-->

libresapi/src/webui/RsXHRConnection.js

@@ -13,6 +13,48 @@ function RsXHRConnection(server_hostname, server_port)
     //server_port = "9090";
     var api_root_path = "/api/v2/";
 
+    var status_listeners = [];
+
+    function notify_status(status)
+    {
+        for(var i = 0; i < status_listeners.length; i++)
+        {
+            status_listeners[i](status);
+        }
+    }
+
+    /**
+     *  Register a callback to be called when the state of the connection changes.
+     *  @param {function} cb - callback which receives a single argument. The arguments value is "connected" or "not_connected".
+     */
+    this.register_status_listener = function(cb)
+    {
+        status_listeners.push(cb);
+    };
+
+    /**
+     * Unregister a status callback function.
+     * @param {function} cb - a privously registered callback function
+     */
+     this.unregister_status_listener = function(cb)
+     {
+        var to_delete = [];
+        for(var i = 0; i < status_listeners.length; i++)
+        {
+            if(status_listeners[i] === cb){
+                to_delete.push(i);
+            }
+        }
+        for(var i = 0; i < to_delete.length; i++)
+        {
+            // copy the last element to the current index
+            var index = to_delete[i];
+            status_listeners[i] = status_listeners[status_listeners.length-1];
+            // remove the last element
+            status_listeners.pop();
+        }
+     };
+
     /**
      * Send a request to the backend
      * automatically encodes the request as JSON before sending it to the server
@@ -36,11 +78,13 @@ function RsXHRConnection(server_hostname, server_port)
                     console.log("RsXHRConnection: request failed with status: "+xhr.status);
                     console.log("request was:");
                     console.log(req);
+                    notify_status("not_connected");
                     if(err_cb !== undefined)
                         err_cb();
                     return;
                 }
                 // received response
+                notify_status("connected");
                 debug("RsXHRConnection received response:");
                 debug(xhr.responseText);
                 if(false)//if(xhr.responseText === "")

libresapi/src/webui/gui.jsx

@@ -17,6 +17,42 @@ function start_live_reload()
 }
 start_live_reload();
 
+// displays a notice if requests to the server failed
+var ConnectionStatusWidget = React.createClass({
+	// react component lifecycle callbacks
+	getInitialState: function(){
+		return {status: "unknown"};
+	},
+	componentWillMount: function()
+	{
+		connection.register_status_listener(this.onConnectionStatusChanged);
+	},
+	componentWillUnmount: function()
+	{
+		connection.unregister_status_listener(this.onConnectionStatusChanged);
+	},
+	onConnectionStatusChanged: function(state)
+	{
+		this.setState({status: state});
+	},
+	render: function()
+	{
+		if(this.state.status === "unknown")
+		{
+			return <div>connecting to server...</div>;
+		}
+		if(this.state.status === "connected")
+		{
+			return <div></div>;
+		}
+		if(this.state.status === "not_connected")
+		{
+			return <div>You are not connected to the server anymore. Is the Network connection ok? Is the server up?</div>;
+		}
+		return <div>Error: unexpected status value in ConnectionStatusWidget. Please Report this. this.state.status={this.state.status}</div>;
+	},
+});
+
 // implements automatic update using the state token system
 // components using this mixin should have a member "getPath()" to specify the resource
 var AutoUpdateMixin = 
@@ -867,6 +903,7 @@ var MainWidget = React.createClass({
 		return (
 			<div>
 				{/*<div id="overlay"><div className="paddingbox"><div className="btn2">test</div></div></div>*/}
+				<ConnectionStatusWidget/>
 				<PasswordWidget/>
 				<AudioPlayerWidget/>
 				{menubutton}

libresapi/src/webui/index.html

@@ -17,7 +17,10 @@
 	<meta name="viewport" content="initial-scale=1">
 </head>
 <body>
-	<p>loading lots of stuff...</p>
+	<script>
+		document.write("<p>loading lots of stuff...</p>");
+	</script>
+	<p><noscript>The Retroshare web interface requires JavaScript. Please enable JavaScript in your browser.</noscript></p>
 	<!--<div id="logo_splash">
 		<img src="img/logo_splash.png"></img>
 	</div>-->