From dc8f82961aab104ae8af35db5ee1ad18c922409d Mon Sep 17 00:00:00 2001
From: Gene Sokolov <gene@c-46-246-26-227.ip4.frootvpn.com>
Date: Fri, 1 Jan 2016 20:48:38 -0800
Subject: [PATCH] daily commit

---
 css/base.css |  33 ++++++++++
 index.html   | 172 +++++++++++++++++++++++++++++++++++++++++++--------
 index2.html  |   4 ++
 3 files changed, 183 insertions(+), 26 deletions(-)

diff --git a/css/base.css b/css/base.css
index a14b1d56..56c9c559 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1,3 +1,20 @@
+.menuContainer {
+  width: 30em;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  height: 100%;
+}
+
+.messagesContainer {
+  margin-left: 30em;
+}
+
+.messagesContainer {
+  width: 100%;
+  height: 100%;
+}
+
 .avatar {
   width: 32pt;
   height: auto;
@@ -29,6 +46,22 @@
   background-color: #EEE;
 }
 
+.contact {
+  margin-top: 0;
+}
+
+.online, .offline {
+  font-size: 14pt;
+}
+
+.online {
+  color: #8B7;
+}
+
+.offline {
+  color: #999;
+}
+
 .chatBox {
   list-style: none;
   padding: 1.5em 0 1.5em;
diff --git a/index.html b/index.html
index 7b2f53de..91accc21 100644
--- a/index.html
+++ b/index.html
@@ -7,33 +7,77 @@
     <!-- Not present in the tutorial. Just for basic styling. -->
     <link rel="stylesheet" href="css/bootstrap.css" />
     <link rel="stylesheet" href="css/base.css" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
+    <script src="https://fb.me/react-0.14.5.js"></script>
+    <script src="https://fb.me/react-dom-0.14.5.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+  </head>
   </head>
   <body>
     <div id="mountPoint"></div>
-
     <script type="text/babel">
+    var LoginNavbar = React.createClass({
+      render: function() {
+        return (
+          <nav className="navbar navbar-inverse">
+            <div className="container-fluid">
+              <div className="navbar-header">
+                <a className="navbar-brand" href="#">Tinode Demo Chat</a>
+              </div>
+              <div>
+                <ul className="nav navbar-nav navbar-right">
+                  <li><a href="#"><big><span className="glyphicon glyphicon-option-vertical"></span></big></a></li>
+                </ul>
+              </div>
+            </div>
+          </nav>
+        );
+      }
+    })
+
+    var LoginForm = React.createClass({
+      handleSubmit: function(e) {
+        e.preventDefault();
+        this.props.onLogin(true);
+      },
+      render: function() {
+        return (
+          <div className="container-fluid">
+            <form className="form-signin" onSubmit={this.handleSubmit}>
+              <label htmlFor="inputLogin" className="sr-only">Login</label>
+              <input type="text" id="inputLogin" className="form-control" placeholder="Login (alice, bob, carol, dave, frank)" required autofocus />
+              <label htmlFor="inputPassword" className="sr-only">Password</label>
+              <input type="password" id="inputPassword" className="form-control" placeholder="Password (alice123, bob123, ...)" required />
+              <br />
+              <button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+            </form>
+          </div>
+        );
+      }
+    })
+
+    var LoginView = React.createClass({
+      render: function() {
+        return (
+          <div>
+            <LoginNavbar />
+            <LoginForm onLogin={this.props.onLogin} />
+          </div>
+        );
+      }
+    })
+
     var CurrentUser = React.createClass({
       render: function() {
         return (
           <nav id="main-navbar" className="navbar navbar-inverse">
-            <div className="container">
+            <div className="container-fluid">
               <div className="navbar-header">
-                <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-                  <span className="icon-bar"></span>
-                  <span className="icon-bar"></span>
-                  <span className="icon-bar"></span>
-                </button>
                 <a href="#" className="pull-left"><img id="self-avatar" className="avatar" alt="avatar" src="avatar.svg" /></a>
                 <span className="navbar-brand" href="#">Alice Johnson</span>
               </div>
-              <div className="navbar-collapse collapse">
-                <ul className="nav navbar-nav navbar-right ">
-                  <li><a href="#"><span className="glyphicon glyphicon-user"></span></a></li>
-                  <li><a href="#"><span className="glyphicon glyphicon-cog"></span></a></li>
-                  <li><a href="https://github.com/tinode/chat/"><span className="glyphicon glyphicon-info-sign"></span></a></li>
+              <div>
+                <ul className="nav navbar-nav navbar-right">
+                  <li><a href="#"><big><span className="glyphicon glyphicon-cog"></span></big></a></li>
                 </ul>
               </div>
             </div>
@@ -56,52 +100,128 @@
       }
     });
 
+    var contactsData = [
+      {id: "usrBOB", public: "Bob Smith", comment: "This is another comment", online: {now: true}, unread: 0},
+      {id: "usrCAROL", public: "Carol Xmas", comment: "No comments", online: {now: false, when: "1 hour ago"}, unread: 2},
+      {id: "usrDAVE", public: "Dave Goliaphsson", comment: "This is a comment", online: {now: false, when: "30 min ago"}, unread: 0}
+    ];
+
     var Contact = React.createClass({
         render: function() {
           return (
-            <li className="media">
+            <li className="media contact">
               <a href="#" className="pull-left"><img src="avatar.svg" className="avatar img-circle" alt="" /></a>
               <div className="media-body">
-                <span className="text-muted pull-right"><span className="offline">&#x25cf;</span> <small className="text-muted">30 min ago</small></span>
-                <strong>Carol Xmas</strong> <span className="label label-success label-as-badge">2</span>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Lorem ipsum dolor <a href="#"># ipsum dolor </a>adipiscing elit.
-                </p>
+                <Contact.Online when={this.props.when} now={this.props.now} />
+                <strong>{this.props.public}</strong> <Contact.Unread count={this.props.unread} />
+                <p>{this.props.comment}</p>
               </div>
             </li>
           );
         }
     });
 
+    Contact.Unread = React.createClass({
+        render: function() {
+          var showUnreadBadge;
+          if (this.props.count > 0) {
+            showUnreadBadge = <span className="label label-success label-as-badge">{this.props.count}</span>;
+          }
+          return (
+            <span>&nbsp;{showUnreadBadge}</span>
+          );
+        }
+    })
+
+    Contact.Online = React.createClass({
+        render: function() {
+          var lastOnline = '';
+          if (!this.props.online && this.props.when) {
+            lastOnline = this.props.when;
+          } else {
+            lastOnline = 'online';
+          }
+
+          return (
+            <span className="text-muted pull-right">
+              <span className={this.props.now ? "online" : "offline"}>&#x25cf;</span> <small className="text-muted">&nbsp;{lastOnline}</small>
+            </span>
+          );
+        }
+    })
+
     var ContactList = React.createClass({
       render: function() {
+        var contactNodes = this.props.data.map(function(c) {
+          return (
+            <Contact public={c.public} comment={c.comment} unread={c.unread}
+              when={c.online.when} now={c.online.now} key={c.id} />
+          );
+        });
         return (
           <div className="contactList">
             <ul className="media-list">
-              <Contact />
+              {contactNodes}
             </ul>
           </div>
         );
       }
     });
 
-    var ContactBox = React.createClass({
+    var ContactsView = React.createClass({
+      getInitialState: function() {
+        return {contacts: []};
+      },
+      componentDidMount: function() {
+        this.setState({contacts: contactsData});
+      },
       render: function() {
         return (
           <div className="contactBox">
             <CurrentUser />
             <div className="container-fluid">
             <NewTopic />
-            <ContactList />
+            <ContactList data={this.state.contacts} />
             </div>
           </div>
         );
       }
     });
 
+    var AppView = React.createClass({
+      getInitialState: function() {
+        return {loggedIn: false};
+      },
+      handleLogin: function(ok) {
+        this.setState({loggedIn: ok});
+      },
+      render: function() {
+        return (
+          <div className="container-fluid">
+          <div className="row">
+            <div className="menuContainer">
+              {this.state.loggedIn ? <ContactsView data={contactsData} /> : <LoginView onLogin={this.handleLogin} />}
+            </div>
+            <div className="col-md-12 messagesContainer">
+              <div className="row">
+              <div class="panel panel-default">
+                <div class="panel-heading">
+                  <h3 class="panel-title">Chat with X</h3>
+                </div>
+                <div class="panel-body">
+                  Messages go here
+                </div>
+              </div>
+              </div>
+            </div>
+          </div>
+          </div>
+        );
+      }
+    })
+
     ReactDOM.render(
-      <ContactBox />,
+      <AppView />,
       document.getElementById('mountPoint')
     );
     </script>
diff --git a/index2.html b/index2.html
index a33286e8..177f9cbd 100644
--- a/index2.html
+++ b/index2.html
@@ -119,6 +119,10 @@
 </head>
 <body>
 
+  <li><a href="#"><span className="glyphicon glyphicon-user"></span> Sign Up</a></li>
+  <li><a href="#"><span className="glyphicon glyphicon-cog"></span> Settings</a></li>
+  <li><a href="https://github.com/tinode/chat/"><span className="glyphicon glyphicon-info-sign"></span> About</a></li>
+  
 <nav id="main-navbar" class="navbar navbar-inverse">
   <div class="container">
     <div class="navbar-header">