add navbar

src/components/App/App.jsx

@@ -1,54 +1,52 @@
 import React, { Component } from 'react';
 import AuthService from '../../utils/AuthService'
 import './App.scss';
-import MainMenu from '../MainMenu/MainMenu';
-import Login from '../Login/Login';
+import Navbar from '../Navbar/Navbar';
 
-const options = {
-    auth: {
-        params: {
-            redirectUrl: 'http://localhost:8080',
-            responseType: 'token'
-        }
-    }
-};
+const options = {};
 const auth = new AuthService(__AUTH0_CLIENT_ID__, __AUTH0_DOMAIN__, options);
 
 class App extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            profile: auth.getProfile()
+            isAuthenticated: this.isAuthenticated(),
+            /*profile: auth.getProfile()*/
         }
         auth.on('profile_updated', (newProfile) => {
-            this.setState({profile: newProfile})
+            // do i need a check for valid profile?
+            this.setState({isAuthenticated: this.isAuthenticated(), /*profile: newProfile*/});
         })
-        this.loginButton = this.loginButton.bind(this);
+        this.logout = this.logout.bind(this);
+        this.getNickName = this.getNickName.bind(this);
+    }
+
+    isAuthenticated() {
+        return auth.getProfile() && auth.getProfile().hasOwnProperty('user_id');
+    }
+
+    getNickName() {
+        return auth.getProfile() && auth.getProfile().hasOwnProperty('nickname')?auth.getProfile().nickname:'';
     }
 
     logout() {
-        auth.logout()
-        this.setState({
-            profile: auth.getProfile()
-        })
-    }
-
-    loginButton() {
-        if(this.state.profile.hasOwnProperty('user_id'))
-            return <button className="btn-primary" onClick={this.logout.bind(this)}>Log out</button>;
-        else
-            return <button className="btn-primary" onClick={auth.login.bind(this)}>Login</button>;
+        auth.logout();
+        this.setState({isAuthenticated: this.isAuthenticated()});
     }
 
     render() {
+        let loginButton = !this.state.isAuthenticated ? 
+            <button className="btn btn-info login-button" onClick={auth.login.bind(this)}>Log in to save your progress!</button> : '';
+
         return (
             <div>
-                <MainMenu profile={this.state.profile} />
-                {this.loginButton()}
+                <Navbar isAuthenticated={this.state.isAuthenticated} nickName={this.getNickName()} handleLogin={auth.login.bind(this)} handleLogout={this.logout} />
+                <div className="container game">
+                    <div className="row text-center">{loginButton}</div>
+                </div>
             </div>
         )
     }
 }
-//                 <Login profile={this.state.profile} />
 
 export default App;

src/components/App/App.scss

@@ -4,15 +4,21 @@ html {
 }
 body {
     min-height: 100%;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    background-color: #eee;
+    font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
+    background-color: #f5f5f5;
     color: #111;
 }
 .container {
     margin: 0 auto;
-    padding: 20px 0 20px;
     max-width: 1024px;
 }
 .row {
     margin: 0;
 }
+.login-button {
+    font-size: 2.0rem;
+    padding: 6px 15px;
+}
+.game {
+    padding-top: 80px;
+}

src/components/Login/Login.jsx

@@ -1,36 +0,0 @@
-import React, { Component, PropTypes as T } from 'react';
-import AuthService from '../../utils/AuthService'
-import './Login.scss';
-
-class Login extends Component {
-    constructor(props) {
-        super(props);
-        this.loginButton = this.loginButton.bind(this);
-    }
-
-    logout() {
-/*        this.props.auth.logout()
-        this.setState({
-            profile: this.props.auth.getProfile()
-        }) */
-    }
-
-    loginButton() {
-        if(this.props.profile.hasOwnProperty('user_id'))
-            return <button className="btn-primary" onClick={this.logout.bind(this)}>Log out</button>;
-        else
-            return <button className="btn-primary" onClick={this.props.auth.login.bind(this)}>Login</button>;
-    }
-
-    render() {
-        return (
-            <div>{this.loginButton()}</div>
-        )
-    }
-}
-
-Login.propTypes = {
-    auth: T.instanceOf(AuthService)
-};
-
-export default Login;

src/components/MainMenu/MainMenu.jsx

@@ -1,12 +0,0 @@
-import React, { Component } from 'react';
-import './MainMenu.scss';
-
-class MainMenu extends Component {
-    render() {
-        return (
-            <div>{this.props.profile.hasOwnProperty('user_id')?this.props.profile.name+' is logged in':'not logged in'}</div>
-        )
-    }
-}
-
-export default MainMenu;

src/components/Navbar/Navbar.jsx

@@ -0,0 +1,31 @@
+import React, { Component } from 'react';
+import './Navbar.scss';
+
+class Navbar extends Component {
+    render() {
+        let profileButton = this.props.isAuthenticated ?
+            <a href="#" onClick={this.props.handleLogout}><span className="glyphicon glyphicon-small glyphicon-user"></span> {this.props.nickName}</a> :
+            <a href="#" onClick={this.props.handleLogin}><span className="glyphicon glyphicon-small glyphicon-user"></span> Log in</a>;
+        return (
+            <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
+                <div className="container">
+                    <div id="navbar">
+                        <ul className="nav navbar-nav">
+                            <li id="nav-kanaquiz"><a href="javascript:;">Kana Quiz 2</a></li>
+                        </ul>
+                        <ul className="nav navbar-nav navbar-right">
+                            <li id="nav-settings"><a href="#"><span className="glyphicon glyphicon-small glyphicon-cog"></span> Settings</a></li>
+                            <li id="nav-profile">{profileButton}</li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+        )
+    }
+}
+//            <div>{this.props.profile.hasOwnProperty('user_id')?this.props.profile.name+' is logged in':'not logged in'}</div>
+                        // <ul className="nav navbar-nav">
+                        //     <li id="nav-about"><a href="#menu">&lt; Back to menu</a></li>
+                        // </ul>
+
+export default Navbar;

src/components/Navbar/Navbar.scss

@@ -0,0 +1,90 @@
+#nav-profile {
+    text-transform:capitalize;
+}
+#navbar ul li {
+    font-size: 1.2em;
+    .glyphicon {
+        font-size: 0.9em;
+        color: #62bbff;
+    }
+}
+.navbar-inverse {
+    background-color: #333;
+}
+// From http://getbootstrap.com/examples/non-responsive/non-responsive.css
+.container .navbar-header,
+.container .navbar-collapse {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+/* Always float the navbar header */
+.navbar-header {
+  float: left;
+}
+
+/* Undo the collapsing navbar */
+.navbar-collapse {
+  display: block !important;
+  height: auto !important;
+  padding-bottom: 0;
+  overflow: visible !important;
+}
+
+.navbar-toggle {
+  display: none;
+}
+.navbar-collapse {
+  border-top: 0;
+}
+
+.navbar-brand {
+  margin-left: -15px;
+}
+
+/* Always apply the floated nav */
+.navbar-nav {
+  float: left;
+  margin: 0;
+}
+.navbar-nav > li {
+  float: left;
+}
+.navbar-nav > li > a {
+  padding: 15px;
+}
+
+/* Redeclare since we override the float above */
+.navbar-nav.navbar-right {
+  float: right;
+}
+
+/* Undo custom dropdowns */
+.navbar .navbar-nav .open .dropdown-menu {
+  position: absolute;
+  float: left;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-width: 0 1px 1px;
+  border-radius: 0 0 4px 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+}
+.navbar-default .navbar-nav .open .dropdown-menu > li > a {
+  color: #333;
+}
+.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
+.navbar .navbar-nav .open .dropdown-menu > .active > a,
+.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+  color: #fff !important;
+  background-color: #428bca !important;
+}
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
+.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
+  color: #999 !important;
+  background-color: transparent !important;
+}

src/index.html

@@ -9,6 +9,6 @@
     <meta name="Description" content="Application for studying hiragana & katakana characters.">
   </head>
   <body>
-    <div class="container"></div>
+    <div class="app"></div>
   </body>
 </html>

src/index.js

@@ -4,4 +4,4 @@ import Bootstrap from './assets/stylesheets/bootstrap.min.css';
 import App from './components/App/App';
 
 let element = React.createElement(App, {});
-render(element, document.querySelector('.container'));
+render(element, document.querySelector('.app'));