Ignore compiled frontend assets and got status working

app/javascripts/components/main.js

@@ -170,7 +170,8 @@ const App = React.createClass({
 			showEventsPanel: showEventsPanel,
 			soundController: new SoundController(),
 			showMessageBox: true,
-			collapseMenu: false
+			collapseMenu: false,
+			connectionState: "connected"
 		};
 	},
 
@@ -281,6 +282,22 @@ const App = React.createClass({
 			});
 		});
 
+		socket.on("connect", () => {
+			this.setState({ connectionState: "connected" });
+		});
+
+		socket.on("disconnect", () => {
+			this.setState({ connectionState: "disconnected" });
+		});
+
+		socket.on("reconnecting", () => {
+			this.setState({ connectionState: "reconnecting" });
+		});
+
+		socket.on("reconnect", () => {
+			this.setState({ connectionState: "connected" });
+		});
+
 		socket.emit("users:refresh");
 		socket.emit("message:refresh");
 		socket.emit("gather:refresh");
@@ -321,10 +338,27 @@ const App = React.createClass({
 			);
 		}
 
+		const user = this.state.user;
+		let username, avatar;
+		if (user) {
+			username = user.username;
+			avatar = user.avatar;
+		}
+
 		let appClass = ["skin-blue", "sidebar-mini", "fixed"];
 		if (this.state.showMessageBox) appClass.push("control-sidebar-open");
 		if (this.state.collapseMenu) appClass.push("sidebar-collapse");
 
+		let connectionStatus;
+		const connectionState = this.state.connectionState;
+		if (connectionState === "connected") {
+			connectionStatus = <a href="#"><i className="fa fa-circle text-success"></i> Online</a>;
+		} else if (connectionState === "reconnecting") {
+			connectionStatus = <a href="#"><i className="fa fa-circle text-warning"></i> Reconnecting</a>;
+		} else if (connectionState === "disconnected") {
+			connectionStatus = <a href="#"><i className="fa fa-circle text-danger"></i> Disconnected</a>;
+		}
+
 		return (
 			<div className={appClass.join(" ")}>
 			  <header className="main-header">
@@ -360,11 +394,11 @@ const App = React.createClass({
 			    <section className="sidebar" style={{height: "auto"}}>
 			      <div className="user-panel">
 			        <div className="pull-left image">
-			          <img src="http://www.ensl.org/images/icons/noavatar.png" className="img-circle" alt="User Image" />
+			          <img src={avatar} className="img-circle" alt="User Image" />
 			        </div>
 			        <div className="pull-left info">
-			          <p>User Name</p>
-			          <a href="#"><i className="fa fa-circle text-success"></i> Online</a>
+			          <p>{username}</p>
+			          {connectionStatus}
 			        </div>
 			      </div>
 			      <ul className="sidebar-menu">

public/app.js

@@ -1662,7 +1662,8 @@ var App = React.createClass({
 			showEventsPanel: showEventsPanel,
 			soundController: new SoundController(),
 			showMessageBox: true,
-			collapseMenu: false
+			collapseMenu: false,
+			connectionState: "connected"
 		};
 	},
 	updateTitle: function updateTitle() {
@@ -1766,6 +1767,22 @@ var App = React.createClass({
 			});
 		});
 
+		socket.on("connect", function () {
+			_this2.setState({ connectionState: "connected" });
+		});
+
+		socket.on("disconnect", function () {
+			_this2.setState({ connectionState: "disconnected" });
+		});
+
+		socket.on("reconnecting", function () {
+			_this2.setState({ connectionState: "reconnecting" });
+		});
+
+		socket.on("reconnect", function () {
+			_this2.setState({ connectionState: "connected" });
+		});
+
 		socket.emit("users:refresh");
 		socket.emit("message:refresh");
 		socket.emit("gather:refresh");
@@ -1805,10 +1822,43 @@ var App = React.createClass({
 			);
 		}
 
+		var user = this.state.user;
+		var username = undefined,
+		    avatar = undefined;
+		if (user) {
+			username = user.username;
+			avatar = user.avatar;
+		}
+
 		var appClass = ["skin-blue", "sidebar-mini", "fixed"];
 		if (this.state.showMessageBox) appClass.push("control-sidebar-open");
 		if (this.state.collapseMenu) appClass.push("sidebar-collapse");
 
+		var connectionStatus = undefined;
+		var connectionState = this.state.connectionState;
+		if (connectionState === "connected") {
+			connectionStatus = React.createElement(
+				"a",
+				{ href: "#" },
+				React.createElement("i", { className: "fa fa-circle text-success" }),
+				" Online"
+			);
+		} else if (connectionState === "reconnecting") {
+			connectionStatus = React.createElement(
+				"a",
+				{ href: "#" },
+				React.createElement("i", { className: "fa fa-circle text-warning" }),
+				" Reconnecting"
+			);
+		} else if (connectionState === "disconnected") {
+			connectionStatus = React.createElement(
+				"a",
+				{ href: "#" },
+				React.createElement("i", { className: "fa fa-circle text-danger" }),
+				" Disconnected"
+			);
+		}
+
 		return React.createElement(
 			"div",
 			{ className: appClass.join(" ") },
@@ -1895,7 +1945,7 @@ var App = React.createClass({
 						React.createElement(
 							"div",
 							{ className: "pull-left image" },
-							React.createElement("img", { src: "http://www.ensl.org/images/icons/noavatar.png", className: "img-circle", alt: "User Image" })
+							React.createElement("img", { src: avatar, className: "img-circle", alt: "User Image" })
 						),
 						React.createElement(
 							"div",
@@ -1903,14 +1953,9 @@ var App = React.createClass({
 							React.createElement(
 								"p",
 								null,
-								"User Name"
+								username
 							),
-							React.createElement(
-								"a",
-								{ href: "#" },
-								React.createElement("i", { className: "fa fa-circle text-success" }),
-								" Online"
-							)
+							connectionStatus
 						)
 					),
 					React.createElement(