accounts-frontend/src/components/accounts/AccountSwitcher.jsx

167 lines
6.3 KiB
React
Raw Normal View History

import React, { Component, PropTypes } from 'react';
2016-11-06 01:53:56 +05:30
import classNames from 'classnames';
import { Link } from 'react-router';
2016-11-06 01:53:56 +05:30
import { FormattedMessage as Message } from 'react-intl';
import loader from 'services/loader';
2016-11-08 11:37:04 +05:30
import { skins, SKIN_DARK, COLOR_WHITE } from 'components/ui';
import { Button } from 'components/ui/form';
2016-11-06 01:53:56 +05:30
import styles from './accountSwitcher.scss';
2016-11-06 01:53:56 +05:30
import messages from './AccountSwitcher.intl.json';
export class AccountSwitcher extends Component {
2016-11-06 01:53:56 +05:30
static displayName = 'AccountSwitcher';
static propTypes = {
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),
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
};
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);
}
return (
2016-11-06 01:53:56 +05:30
<div className={classNames(
styles.accountSwitcher,
styles[`${skin}AccountSwitcher`],
)}>
{highlightActiveAccount ? (
<div className={styles.item}>
<div className={classNames(
styles.accountIcon,
styles.activeAccountIcon,
styles.accountIcon1
)} />
<div className={styles.activeAccountInfo}>
<div className={styles.activeAccountUsername}>
2016-11-06 01:53:56 +05:30
{accounts.active.username}
</div>
<div className={classNames(styles.accountEmail, styles.activeAccountEmail)}>
2016-11-06 01:53:56 +05:30
{accounts.active.email}
</div>
<div className={styles.links}>
<div className={styles.link}>
<a href="">
<Message {...messages.goToEly} />
</a>
</div>
<div className={styles.link}>
<a className={styles.link} onClick={this.onRemove(accounts.active)} href="#">
<Message {...messages.logout} />
</a>
</div>
</div>
</div>
</div>
2016-11-06 01:53:56 +05:30
) : null}
{available.map((account, id) => (
<div className={classNames(styles.item, styles.accountSwitchItem)}
key={account.id}
onClick={this.onSwitch(account)}
>
<div className={classNames(
styles.accountIcon,
styles[`accountIcon${id % 7 + (highlightActiveAccount ? 2 : 1)}`]
)} />
2016-11-06 01:53:56 +05:30
{allowLogout ? (
<div className={styles.logoutIcon} onClick={this.onRemove(account)} />
2016-11-06 01:53:56 +05:30
) : (
<div className={styles.nextIcon} />
2016-11-06 01:53:56 +05:30
)}
<div className={styles.accountInfo}>
<div className={styles.accountUsername}>
{account.username}
</div>
<div className={styles.accountEmail}>
{account.email}
</div>
</div>
</div>
))}
2016-11-06 01:53:56 +05:30
{allowAdd ? (
<Link to="/login" onClick={this.props.onAfterAction}>
<Button
2016-11-08 11:37:04 +05:30
color={COLOR_WHITE}
block
small
className={styles.addAccount}
label={
<Message {...messages.addAccount}>
{(message) =>
<span>
<div className={styles.addIcon} />
{message}
</span>
}
</Message>
}
/>
</Link>
2016-11-06 01:53:56 +05:30
) : null}
</div>
);
}
onSwitch = (account) => (event) => {
event.preventDefault();
loader.show();
this.props.switchAccount(account)
2016-11-13 20:17:56 +05:30
.then(() => this.props.onAfterAction())
.then(() => this.props.onSwitch(account))
.finally(() => loader.hide());
};
onRemove = (account) => (event) => {
event.preventDefault();
event.stopPropagation();
this.props.removeAccount(account)
.then(() => this.props.onAfterAction());
};
}
import { connect } from 'react-redux';
import { authenticate, revoke } from 'components/accounts/actions';
export default connect(({accounts}) => ({
accounts
}), {
switchAccount: authenticate,
removeAccount: revoke
})(AccountSwitcher);