authenticated.html

<!DOCTYPE html>
  <head>
    <title>Web Version of Yo</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet" type="text/css" media="all">

    <!-- React JS -->
    <script src="vendor/react-0.10.0.min.js"></script>
    <script src="vendor/JSXTransformer-0.10.0.js"></script>

    <!-- Firebase JS -->
    <script src="vendor/firebase.js"></script>
    <!-- Firebase Login JS -->
    <script src="vendor/firebase-simple-login.js"></script>
    <!-- ReactFire -->
    <script src="vendor/reactfire.min.js"></script>
  </head>
  <body>
    <div id="mount"></div>

    <script type="text/jsx" src="coreComponents.js"></script>

    <script type="text/jsx">
      /** @jsx React.DOM */

      // APP COMPONENT
      var App = React.createClass({
        mixins : [ReactFireMixin],
        componentWillMount : function() {

          var $this = this;

          $this.authRef = new FirebaseSimpleLogin(new Firebase(baseUrl), function(error, user) {
            $this.setState({
              errorMsg : ''
            });

            if (error) {
              // an error occurred while attempting login
              $this.setState({
                errorMsg : error.message,
                authenticated : false
              });
            } else if (user) {
              // user authenticated with Firebase

              $this.setState({
                name : user.username,
                authenticated : true
              });

              var newRef = new Firebase(baseUrl + '/users/' + user.username);

              $this.bindAsObject(newRef, 'user');
              newRef.child('name').set(user.username);

            } else {
              // user is logged out
              $this.setState({
                authenticated : false
              });
            }
          });
        },
        getInitialState : function() {
          return {
            name : '',
            user : {},
            errorMsg : '',
            authenticated : false
          };
        },
        _logout : function() {
          this.authRef.logout();
        },
        _login : function() {
          this.authRef.login('twitter', {
            rememberMe: true
          });
        },
        render : function() {

          if (this.state.authenticated) {
            return (
              <div>
                <a className="margin-bottom btn btn-default btn-large" href="#" onClick={this._logout}>Logout</a>
                <UserDisplay user={this.state.user} />
                <PeopleToYo name={this.state.name} />
                <YoDisplay user={this.state.user} name={this.state.name} />
                <h5>Made by <a href="https://twitter.com/davidchizzle">@davidchizzle</a> from <a href="http://davidandsuzi.com">davidandsuzi.com</a></h5>
              </div>
            );
          }

          var errorMsg = '';
          if (this.state.errorMsg) {
            errorMsg = <div className="alert alert-danger" role="alert">Error : {this.state.errorMsg}</div>
          }

          return (
            <div>
              <h3>My Web Version of Yo using React and Firebase</h3>
              <div className="margin-bottom">If you do not want to log in, you can still view the experience at <a href="index.html">here</a>.</div>
              {errorMsg}
              <a className="margin-bottom btn btn-primary" href="#" onClick={this._login}>Login</a>
              <h5>Made by <a href="https://twitter.com/davidchizzle">@davidchizzle</a> from <a href="http://davidandsuzi.com">davidandsuzi.com</a></h5>
            </div>
          );
        }
      });

      React.renderComponent(<App />, document.getElementById('mount'));
    </script>
  </body>
</html>