2016-11-05 16:27:01 +05:30
|
|
|
import React, { Component, PropTypes } from 'react';
|
|
|
|
|
2016-11-06 01:53:56 +05:30
|
|
|
import classNames from 'classnames';
|
2016-11-11 13:09:01 +05:30
|
|
|
import { Link } from 'react-router';
|
2016-11-06 01:53:56 +05:30
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
|
|
|
2016-11-19 15:04:19 +05:30
|
|
|
import loader from 'services/loader';
|
2016-11-08 11:37:04 +05:30
|
|
|
import { skins, SKIN_DARK, COLOR_WHITE } from 'components/ui';
|
2016-11-06 19:49:52 +05:30
|
|
|
import { Button } from 'components/ui/form';
|
2016-11-06 01:53:56 +05:30
|
|
|
|
2016-11-05 16:27:01 +05:30
|
|
|
import styles from './accountSwitcher.scss';
|
2016-11-06 01:53:56 +05:30
|
|
|
import messages from './AccountSwitcher.intl.json';
|
2016-11-05 16:27:01 +05:30
|
|
|
|
2016-11-13 02:01:44 +05:30
|
|
|
export class AccountSwitcher extends Component {
|
2016-11-06 01:53:56 +05:30
|
|
|
static displayName = 'AccountSwitcher';
|
|
|
|
|
|
|
|
static propTypes = {
|
2016-11-13 02:01:44 +05:30
|
|
|
switchAccount: PropTypes.func.isRequired,
|
|
|
|
removeAccount: PropTypes.func.isRequired,
|
|
|
|
onAfterAction: PropTypes.func, // called after each action performed
|
2016-11-13 20:17:56 +05:30
|
|
|
onSwitch: PropTypes.func, // called after switching an account. The active account will be passed as arg
|
2016-11-06 01:53:56 +05:30
|
|
|
accounts: PropTypes.shape({ // TODO: accounts shape
|
|
|
|
active: PropTypes.shape({
|
|
|
|
id: PropTypes.number
|
|
|
|
}),
|
|
|
|
available: PropTypes.arrayOf(PropTypes.shape({
|
|
|
|
id: PropTypes.number
|
|
|
|
}))
|
|
|
|
}),
|
|
|
|
skin: PropTypes.oneOf(skins),
|
2016-11-06 19:49:52 +05:30
|
|
|
highlightActiveAccount: PropTypes.bool, // whether active account should be expanded and shown on the top
|
2016-11-06 01:53:56 +05:30
|
|
|
allowLogout: PropTypes.bool, // whether to show logout icon near each account
|
|
|
|
allowAdd: PropTypes.bool // whether to show add account button
|
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
skin: SKIN_DARK,
|
|
|
|
highlightActiveAccount: true,
|
|
|
|
allowLogout: true,
|
|
|
|
allowAdd: true,
|
2016-11-13 20:17:56 +05:30
|
|
|
onAfterAction() {},
|
|
|
|
onSwitch() {}
|
2016-11-06 01:53:56 +05:30
|
|
|
};
|
|
|
|
|
2016-11-05 16:27:01 +05:30
|
|
|
render() {
|
2016-11-06 01:53:56 +05:30
|
|
|
const { accounts, skin, allowAdd, allowLogout, highlightActiveAccount } = this.props;
|
|
|
|
|
|
|
|
let {available} = accounts;
|
|
|
|
|
|
|
|
if (highlightActiveAccount) {
|
|
|
|
available = available.filter((account) => account.id !== accounts.active.id);
|
|
|
|
}
|
|
|
|
|
2016-11-05 16:27:01 +05:30
|
|
|
return (
|
2016-11-06 01:53:56 +05:30
|
|
|
<div className={classNames(
|
|
|
|
styles.accountSwitcher,
|
|
|
|
styles[`${skin}AccountSwitcher`],
|
|
|
|
)}>
|
|
|
|
{highlightActiveAccount ? (
|
2016-11-06 05:05:09 +05:30
|
|
|
<div className={styles.item}>
|
2016-11-06 19:49:52 +05:30
|
|
|
<div className={classNames(
|
|
|
|
styles.accountIcon,
|
|
|
|
styles.activeAccountIcon,
|
|
|
|
styles.accountIcon1
|
2016-11-13 02:01:44 +05:30
|
|
|
)} />
|
2016-11-06 05:05:09 +05:30
|
|
|
<div className={styles.activeAccountInfo}>
|
|
|
|
<div className={styles.activeAccountUsername}>
|
2016-11-06 01:53:56 +05:30
|
|
|
{accounts.active.username}
|
|
|
|
</div>
|
2016-11-06 19:49:52 +05:30
|
|
|
<div className={classNames(styles.accountEmail, styles.activeAccountEmail)}>
|
2016-11-06 01:53:56 +05:30
|
|
|
{accounts.active.email}
|
|
|
|
</div>
|
2016-11-06 05:05:09 +05:30
|
|
|
<div className={styles.links}>
|
|
|
|
<div className={styles.link}>
|
|
|
|
<a href="">
|
|
|
|
<Message {...messages.goToEly} />
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div className={styles.link}>
|
2016-11-13 02:01:44 +05:30
|
|
|
<a className={styles.link} onClick={this.onRemove(accounts.active)} href="#">
|
2016-11-06 05:05:09 +05:30
|
|
|
<Message {...messages.logout} />
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
2016-11-05 16:27:01 +05:30
|
|
|
</div>
|
|
|
|
</div>
|
2016-11-06 01:53:56 +05:30
|
|
|
) : null}
|
2016-11-06 19:49:52 +05:30
|
|
|
{available.map((account, id) => (
|
2016-11-13 02:01:44 +05:30
|
|
|
<div className={classNames(styles.item, styles.accountSwitchItem)}
|
|
|
|
key={account.id}
|
|
|
|
onClick={this.onSwitch(account)}
|
|
|
|
>
|
2016-11-06 19:49:52 +05:30
|
|
|
<div className={classNames(
|
|
|
|
styles.accountIcon,
|
|
|
|
styles[`accountIcon${id % 7 + (highlightActiveAccount ? 2 : 1)}`]
|
2016-11-13 02:01:44 +05:30
|
|
|
)} />
|
2016-11-06 19:49:52 +05:30
|
|
|
|
2016-11-06 01:53:56 +05:30
|
|
|
{allowLogout ? (
|
2016-11-13 02:01:44 +05:30
|
|
|
<div className={styles.logoutIcon} onClick={this.onRemove(account)} />
|
2016-11-06 01:53:56 +05:30
|
|
|
) : (
|
2016-11-13 02:01:44 +05:30
|
|
|
<div className={styles.nextIcon} />
|
2016-11-06 01:53:56 +05:30
|
|
|
)}
|
2016-11-06 19:49:52 +05:30
|
|
|
|
|
|
|
<div className={styles.accountInfo}>
|
|
|
|
<div className={styles.accountUsername}>
|
|
|
|
{account.username}
|
|
|
|
</div>
|
|
|
|
<div className={styles.accountEmail}>
|
|
|
|
{account.email}
|
|
|
|
</div>
|
|
|
|
</div>
|
2016-11-05 16:27:01 +05:30
|
|
|
</div>
|
|
|
|
))}
|
2016-11-06 01:53:56 +05:30
|
|
|
{allowAdd ? (
|
2016-11-13 02:01:44 +05:30
|
|
|
<Link to="/login" onClick={this.props.onAfterAction}>
|
2016-11-06 19:49:52 +05:30
|
|
|
<Button
|
2016-11-08 11:37:04 +05:30
|
|
|
color={COLOR_WHITE}
|
2016-11-06 19:49:52 +05:30
|
|
|
block
|
|
|
|
small
|
|
|
|
className={styles.addAccount}
|
|
|
|
label={
|
|
|
|
<Message {...messages.addAccount}>
|
|
|
|
{(message) =>
|
|
|
|
<span>
|
|
|
|
<div className={styles.addIcon} />
|
|
|
|
{message}
|
|
|
|
</span>
|
|
|
|
}
|
|
|
|
</Message>
|
|
|
|
}
|
|
|
|
/>
|
2016-11-11 13:09:01 +05:30
|
|
|
</Link>
|
2016-11-06 01:53:56 +05:30
|
|
|
) : null}
|
2016-11-05 16:27:01 +05:30
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-11-13 02:01:44 +05:30
|
|
|
|
|
|
|
onSwitch = (account) => (event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
|
2016-11-19 15:04:19 +05:30
|
|
|
loader.show();
|
|
|
|
|
2016-11-13 02:01:44 +05:30
|
|
|
this.props.switchAccount(account)
|
2016-11-13 20:17:56 +05:30
|
|
|
.then(() => this.props.onAfterAction())
|
2016-11-19 15:04:19 +05:30
|
|
|
.then(() => this.props.onSwitch(account))
|
|
|
|
.finally(() => loader.hide());
|
2016-11-13 02:01:44 +05:30
|
|
|
};
|
|
|
|
|
|
|
|
onRemove = (account) => (event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
this.props.removeAccount(account)
|
|
|
|
.then(() => this.props.onAfterAction());
|
|
|
|
};
|
2016-11-05 16:27:01 +05:30
|
|
|
}
|
|
|
|
|
2016-11-13 02:01:44 +05:30
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import { authenticate, revoke } from 'components/accounts/actions';
|
|
|
|
|
|
|
|
export default connect(({accounts}) => ({
|
|
|
|
accounts
|
|
|
|
}), {
|
|
|
|
switchAccount: authenticate,
|
|
|
|
removeAccount: revoke
|
|
|
|
})(AccountSwitcher);
|