Login workflow (#137)

* Use collection label instead of name on the CollectionPage

* Added Avatar and logout menu item

* [feat](login) Added userpic with a logout action in the dropdown.

- Display logged in user in the AppHeader
- Implemented logout action and store + tests
- Better styles for GitHub sign in screen

Closes #100

* Better styles for the AppHeader
This commit is contained in:
Andrey Okonetchnikov
2016-11-01 14:35:20 +01:00
committed by Cássio Souza
parent 1c4751f479
commit 4d696f2253
9 changed files with 129 additions and 22 deletions

View File

@ -9,3 +9,11 @@
.appBar {
background-color: var(--backgroundColor);
}
.icon {
/* stylelint-disable */
/* Cascade is evil :( */
color: var(--foregroundColor) !important;
/* stylelint-enable */
}

View File

@ -2,24 +2,29 @@ import React, { PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import pluralize from 'pluralize';
import { IndexLink } from 'react-router';
import { Menu, MenuItem } from 'react-toolbox';
import { IconMenu, Menu, MenuItem } from 'react-toolbox/lib/menu';
import Avatar from 'react-toolbox/lib/avatar';
import AppBar from 'react-toolbox/lib/app_bar';
import FontIcon from 'react-toolbox/lib/font_icon';
import FindBar from '../FindBar/FindBar';
import styles from './AppHeader.css';
export default class AppHeader extends React.Component {
static propTypes = {
user: ImmutablePropTypes.map.isRequired,
collections: ImmutablePropTypes.orderedMap.isRequired,
commands: PropTypes.array.isRequired, // eslint-disable-line
defaultCommands: PropTypes.array.isRequired, // eslint-disable-line
runCommand: PropTypes.func.isRequired,
toggleNavDrawer: PropTypes.func.isRequired,
onCreateEntryClick: PropTypes.func.isRequired,
onLogoutClick: PropTypes.func.isRequired,
};
state = {
createMenuActive: false,
userMenuActive: false,
};
handleCreatePostClick = (collectionName) => {
@ -41,27 +46,53 @@ export default class AppHeader extends React.Component {
});
};
handleRightIconClick = () => {
this.setState({
userMenuActive: !this.state.userMenuActive,
});
};
render() {
const {
user,
collections,
commands,
defaultCommands,
runCommand,
toggleNavDrawer,
onLogoutClick,
} = this.props;
const { createMenuActive } = this.state;
const {
createMenuActive,
userMenuActive,
} = this.state;
return (
<AppBar
fixed
theme={styles}
leftIcon="menu"
rightIcon="create"
rightIcon={
<div>
<Avatar
title={user.get('name')}
image={user.get('avatar_url')}
/>
<Menu
active={userMenuActive}
position="topRight"
onHide={this.handleRightIconClick}
>
<MenuItem onClick={onLogoutClick}>Log out</MenuItem>
</Menu>
</div>
}
onLeftIconClick={toggleNavDrawer}
onRightIconClick={this.handleCreateButtonClick}
onRightIconClick={this.handleRightIconClick}
>
<IndexLink to="/">
Dashboard
<FontIcon value="home" />
</IndexLink>
<FindBar
@ -69,9 +100,11 @@ export default class AppHeader extends React.Component {
defaultCommands={defaultCommands}
runCommand={runCommand}
/>
<Menu
<IconMenu
theme={styles}
active={createMenuActive}
position="topRight"
icon="create"
onClick={this.handleCreateButtonClick}
onHide={this.handleCreateMenuHide}
>
{
@ -84,7 +117,7 @@ export default class AppHeader extends React.Component {
/>
)
}
</Menu>
</IconMenu>
</AppBar>
);
}