add navbar
This commit is contained in:
parent
df40e5d37a
commit
721f90aabb
|
@ -1,54 +1,52 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import AuthService from '../../utils/AuthService'
|
import AuthService from '../../utils/AuthService'
|
||||||
import './App.scss';
|
import './App.scss';
|
||||||
import MainMenu from '../MainMenu/MainMenu';
|
import Navbar from '../Navbar/Navbar';
|
||||||
import Login from '../Login/Login';
|
|
||||||
|
|
||||||
const options = {
|
const options = {};
|
||||||
auth: {
|
|
||||||
params: {
|
|
||||||
redirectUrl: 'http://localhost:8080',
|
|
||||||
responseType: 'token'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const auth = new AuthService(__AUTH0_CLIENT_ID__, __AUTH0_DOMAIN__, options);
|
const auth = new AuthService(__AUTH0_CLIENT_ID__, __AUTH0_DOMAIN__, options);
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
profile: auth.getProfile()
|
isAuthenticated: this.isAuthenticated(),
|
||||||
|
/*profile: auth.getProfile()*/
|
||||||
}
|
}
|
||||||
auth.on('profile_updated', (newProfile) => {
|
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() {
|
logout() {
|
||||||
auth.logout()
|
auth.logout();
|
||||||
this.setState({
|
this.setState({isAuthenticated: this.isAuthenticated()});
|
||||||
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>;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
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 (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<MainMenu profile={this.state.profile} />
|
<Navbar isAuthenticated={this.state.isAuthenticated} nickName={this.getNickName()} handleLogin={auth.login.bind(this)} handleLogout={this.logout} />
|
||||||
{this.loginButton()}
|
<div className="container game">
|
||||||
|
<div className="row text-center">{loginButton}</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// <Login profile={this.state.profile} />
|
|
||||||
|
|
||||||
export default App;
|
export default App;
|
|
@ -4,15 +4,21 @@ html {
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
font-family: "Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
|
||||||
background-color: #eee;
|
background-color: #f5f5f5;
|
||||||
color: #111;
|
color: #111;
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 20px 0 20px;
|
|
||||||
max-width: 1024px;
|
max-width: 1024px;
|
||||||
}
|
}
|
||||||
.row {
|
.row {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
.login-button {
|
||||||
|
font-size: 2.0rem;
|
||||||
|
padding: 6px 15px;
|
||||||
|
}
|
||||||
|
.game {
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
|
@ -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;
|
|
|
@ -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;
|
|
31
src/components/Navbar/Navbar.jsx
Normal file
31
src/components/Navbar/Navbar.jsx
Normal file
|
@ -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">< Back to menu</a></li>
|
||||||
|
// </ul>
|
||||||
|
|
||||||
|
export default Navbar;
|
90
src/components/Navbar/Navbar.scss
Normal file
90
src/components/Navbar/Navbar.scss
Normal file
|
@ -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;
|
||||||
|
}
|
|
@ -9,6 +9,6 @@
|
||||||
<meta name="Description" content="Application for studying hiragana & katakana characters.">
|
<meta name="Description" content="Application for studying hiragana & katakana characters.">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container"></div>
|
<div class="app"></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -4,4 +4,4 @@ import Bootstrap from './assets/stylesheets/bootstrap.min.css';
|
||||||
import App from './components/App/App';
|
import App from './components/App/App';
|
||||||
|
|
||||||
let element = React.createElement(App, {});
|
let element = React.createElement(App, {});
|
||||||
render(element, document.querySelector('.container'));
|
render(element, document.querySelector('.app'));
|
Loading…
Reference in a new issue