diff options
author | Dessalines <tyhou13@gmx.com> | 2019-03-22 18:42:57 -0700 |
---|---|---|
committer | Dessalines <tyhou13@gmx.com> | 2019-03-22 18:42:57 -0700 |
commit | e570c70701e1c66dad12bef76821f6d94c717a02 (patch) | |
tree | 070d5ba322226acd5fe0d0a7757cb936462ab2ff /ui/src/components/navbar.tsx | |
parent | 816aa0b15f3766e340d8722f03e8b3a7633ab6fb (diff) |
Adding login and Register
- Login and Register mostly working.
- Starting to work on creating communities.
Diffstat (limited to 'ui/src/components/navbar.tsx')
-rw-r--r-- | ui/src/components/navbar.tsx | 54 |
1 files changed, 39 insertions, 15 deletions
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 86d5d1d2..4cf6d6d2 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -1,38 +1,62 @@ import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { repoUrl } from '../utils'; +import { UserService } from '../services'; export class Navbar extends Component<any, any> { constructor(props, context) { super(props, context); + this.state = {isLoggedIn: UserService.Instance.loggedIn}; + + // Subscribe to user changes + UserService.Instance.sub.subscribe(user => { + let loggedIn: boolean = user !== null; + this.setState({isLoggedIn: loggedIn}); + }); } render() { return ( - <div class="sticky-top">{this.navbar()}</div> + <div>{this.navbar()}</div> ) } // TODO class active corresponding to current page + // TODO toggle css collapse navbar() { return ( - <nav class="navbar navbar-light bg-light p-0 px-3 shadow"> - <a class="navbar-brand mx-1" href="#"> - rrf - </a> - <ul class="navbar-nav mr-auto"> - <li class="nav-item"> - <a class="nav-item nav-link" href={repoUrl}>github</a> - </li> - </ul> - <ul class="navbar-nav ml-auto mr-2"> - <li class="nav-item"> - <Link class="nav-item nav-link" to="/login">Login</Link> - </li> - </ul> + <nav class="navbar navbar-expand-sm navbar-light bg-light p-0 px-3 shadow"> + <a class="navbar-brand" href="#">rrf</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="collapse navbar-collapse"> + <ul class="navbar-nav mr-auto"> + <li class="nav-item"> + <a class="nav-link" href={repoUrl}>github</a> + </li> + <li class="nav-item"> + <Link class="nav-link" to="/create_post">Create Post</Link> + </li> + <li class="nav-item"> + <Link class="nav-link" to="/create_community">Create Forum</Link> + </li> + </ul> + <ul class="navbar-nav ml-auto mr-2"> + <li class="nav-item"> + {this.state.isLoggedIn ? + <a role="button" class="nav-link pointer" onClick={ linkEvent(this, this.handleLogoutClick) }>Logout</a> : + <Link class="nav-link" to="/login">Login</Link> + } + </li> + </ul> + </div> </nav> ); } + handleLogoutClick(i: Navbar, event) { + UserService.Instance.logout(); + } } |