Split the AccountSwitcher component on 2 independent implementations

Improve auth's ChooseAccount visual behavior
Rework the ComponentLoader component. Make it more stylable

packages/app/components/accounts/AccountSwitcher.tsx

@@ -1,166 +0,0 @@
-import React from 'react';
-import clsx from 'clsx';
-import { Link } from 'react-router-dom';
-import { FormattedMessage as Message } from 'react-intl';
-
-import { connect } from 'app/functions';
-import * as loader from 'app/services/loader';
-import { SKIN_DARK, COLOR_WHITE, Skin } from 'app/components/ui';
-import { Button } from 'app/components/ui/form';
-import { authenticate, revoke } from 'app/components/accounts/actions';
-import { getActiveAccount, Account } from 'app/components/accounts/reducer';
-import { State as AccountState } from 'app/components/accounts/reducer';
-
-import styles from './accountSwitcher.scss';
-
-interface Props {
-    switchAccount: (account: Account) => Promise<Account>;
-    removeAccount: (account: Account) => Promise<void>;
-    // called after each action performed
-    onAfterAction: () => void;
-    // called after switching an account. The active account will be passed as arg
-    onSwitch: (account: Account) => void;
-    accounts: AccountState;
-    skin: Skin;
-    // whether active account should be expanded and shown on the top
-    highlightActiveAccount: boolean;
-    // whether to show logout icon near each account
-    allowLogout: boolean;
-    // whether to show add account button
-    allowAdd: boolean;
-}
-
-export class AccountSwitcher extends React.Component<Props> {
-    static defaultProps: Partial<Props> = {
-        skin: SKIN_DARK,
-        highlightActiveAccount: true,
-        allowLogout: true,
-        allowAdd: true,
-        onAfterAction() {},
-        onSwitch() {},
-    };
-
-    render() {
-        const { accounts, skin, allowAdd, allowLogout, highlightActiveAccount } = this.props;
-        const activeAccount = getActiveAccount({ accounts });
-
-        if (!activeAccount) {
-            return null;
-        }
-
-        let { available } = accounts;
-
-        if (highlightActiveAccount) {
-            available = available.filter((account) => account.id !== activeAccount.id);
-        }
-
-        return (
-            <div
-                className={clsx(styles.accountSwitcher, styles[`${skin}AccountSwitcher`])}
-                data-testid="account-switcher"
-            >
-                {highlightActiveAccount && (
-                    <div className={styles.item} data-testid="active-account">
-                        <div className={clsx(styles.accountIcon, styles.activeAccountIcon, styles.accountIcon1)} />
-                        <div className={styles.activeAccountInfo}>
-                            <div className={styles.activeAccountUsername}>{activeAccount.username}</div>
-                            <div className={clsx(styles.accountEmail, styles.activeAccountEmail)}>
-                                {activeAccount.email}
-                            </div>
-                            <div className={styles.links}>
-                                <div className={styles.link}>
-                                    <a href={`http://ely.by/u${activeAccount.id}`} target="_blank">
-                                        <Message key="goToEly" defaultMessage="Go to Ely.by profile" />
-                                    </a>
-                                </div>
-                                <div className={styles.link}>
-                                    <a
-                                        className={styles.link}
-                                        data-testid="logout-account"
-                                        onClick={this.onRemove(activeAccount)}
-                                        href="#"
-                                    >
-                                        <Message key="logout" defaultMessage="Log out" />
-                                    </a>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-
-                {available.map((account, index) => (
-                    <div
-                        className={clsx(styles.item, styles.accountSwitchItem)}
-                        key={account.id}
-                        data-e2e-account-id={account.id}
-                        onClick={this.onSwitch(account)}
-                    >
-                        <div
-                            className={clsx(
-                                styles.accountIcon,
-                                styles[`accountIcon${(index % 7) + (highlightActiveAccount ? 2 : 1)}`],
-                            )}
-                        />
-
-                        {allowLogout ? (
-                            <div
-                                className={styles.logoutIcon}
-                                data-testid="logout-account"
-                                onClick={this.onRemove(account)}
-                            />
-                        ) : (
-                            <div className={styles.nextIcon} />
-                        )}
-
-                        <div className={styles.accountInfo}>
-                            <div className={styles.accountUsername}>{account.username}</div>
-                            <div className={styles.accountEmail}>{account.email}</div>
-                        </div>
-                    </div>
-                ))}
-                {allowAdd ? (
-                    <Link to="/login" onClick={this.props.onAfterAction}>
-                        <Button color={COLOR_WHITE} data-testid="add-account" block small className={styles.addAccount}>
-                            <span>
-                                <div className={styles.addIcon} />
-                                <Message key="addAccount" defaultMessage="Add account" />
-                            </span>
-                        </Button>
-                    </Link>
-                ) : null}
-            </div>
-        );
-    }
-
-    onSwitch = (account: Account) => (event: React.MouseEvent<any>) => {
-        event.preventDefault();
-
-        loader.show();
-
-        this.props
-            .switchAccount(account)
-            .finally(() => this.props.onAfterAction())
-            .then(() => this.props.onSwitch(account))
-            // we won't sent any logs to sentry, because an error should be already
-            // handled by external logic
-            .catch((error) => console.warn('Error switching account', { error }))
-            .finally(() => loader.hide());
-    };
-
-    onRemove = (account: Account) => (event: React.MouseEvent<any>) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        this.props.removeAccount(account).then(() => this.props.onAfterAction());
-    };
-}
-
-export default connect(
-    ({ accounts }) => ({
-        accounts,
-    }),
-    {
-        switchAccount: authenticate,
-        removeAccount: revoke,
-    },
-)(AccountSwitcher);

packages/app/components/accounts/accountSwitcher.intl.ts

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+
+// Extract this messages to this file to keep the messages prefix
+const messages = defineMessages({
+    goToEly: 'Go to Ely.by profile',
+    logout: 'Log out',
+    addAccount: 'Add account',
+});
+
+export default messages;

packages/app/components/accounts/accountSwitcher.scss

@@ -1,225 +0,0 @@
-@import '~app/components/ui/colors.scss';
-@import '~app/components/ui/fonts.scss';
-
-// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам
-//@import '~app/components/ui/panel.scss';
-$bodyLeftRightPadding: 20px;
-
-$lightBorderColor: #eee;
-
-.accountSwitcher {
-    text-align: left;
-}
-
-.accountInfo {
-}
-
-.accountUsername,
-.accountEmail {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.lightAccountSwitcher {
-    background: #fff;
-    color: #444;
-    min-width: 205px;
-
-    $border: 1px solid $lightBorderColor;
-    border-left: $border;
-    border-right: $border;
-    border-bottom: 7px solid darker($green);
-
-    .item {
-        padding: 15px;
-        border-bottom: 1px solid $lightBorderColor;
-    }
-
-    .accountSwitchItem {
-        cursor: pointer;
-        transition: 0.25s;
-
-        &:hover {
-            background-color: $whiteButtonLight;
-        }
-
-        &:active {
-            background-color: $whiteButtonDark;
-        }
-    }
-
-    .accountIcon {
-        font-size: 27px;
-        width: 20px;
-        text-align: center;
-    }
-
-    .activeAccountIcon {
-        font-size: 40px;
-    }
-
-    .activeAccountInfo {
-        margin-left: 29px;
-    }
-
-    .activeAccountUsername {
-        font-family: $font-family-title;
-        font-size: 20px;
-        color: $green;
-    }
-
-    .activeAccountEmail {
-    }
-
-    .links {
-        margin-top: 6px;
-    }
-
-    .link {
-        font-size: 12px;
-        margin-bottom: 3px;
-        white-space: nowrap;
-
-        &:last-of-type {
-            margin-bottom: 0;
-        }
-    }
-
-    .accountInfo {
-        margin-left: 29px;
-        margin-right: 25px;
-    }
-
-    .accountUsername {
-        font-family: $font-family-title;
-        font-size: 14px;
-        color: #666;
-    }
-
-    .accountEmail {
-        font-size: 10px;
-        color: #999;
-    }
-
-    .addAccount {
-    }
-}
-
-.darkAccountSwitcher {
-    background: $black;
-
-    $border: 1px solid lighter($black);
-
-    .item {
-        padding: 15px 20px;
-        border-top: 1px solid lighter($black);
-        transition: 0.25s;
-        cursor: pointer;
-
-        &:hover {
-            background-color: lighter($black);
-        }
-
-        &:active {
-            background-color: darker($black);
-        }
-
-        &:last-of-type {
-            border-bottom: $border;
-        }
-    }
-
-    .accountIcon {
-        font-size: 35px;
-    }
-
-    .accountInfo {
-        margin-left: 30px;
-        margin-right: 26px;
-    }
-
-    .accountUsername {
-        font-family: $font-family-title;
-        color: #fff;
-    }
-
-    .accountEmail {
-        color: #666;
-        font-size: 12px;
-    }
-}
-
-.accountIcon {
-    composes: minecraft-character from '~app/components/ui/icons.scss';
-
-    float: left;
-
-    &1 {
-        color: $green;
-    }
-
-    &2 {
-        color: $blue;
-    }
-
-    &3 {
-        color: $violet;
-    }
-
-    &4 {
-        color: $orange;
-    }
-
-    &5 {
-        color: $dark_blue;
-    }
-
-    &6 {
-        color: $light_violet;
-    }
-
-    &7 {
-        color: $red;
-    }
-}
-
-.addIcon {
-    composes: plus from '~app/components/ui/icons.scss';
-
-    color: $green;
-    position: relative;
-    bottom: 1px;
-    margin-right: 3px;
-}
-
-.nextIcon {
-    composes: arrowRight from '~app/components/ui/icons.scss';
-
-    position: relative;
-    float: right;
-
-    font-size: 24px;
-    color: #4e4e4e;
-    line-height: 35px;
-    left: 0;
-
-    transition: color 0.25s, left 0.5s;
-
-    .item:hover & {
-        color: #aaa;
-        left: 5px;
-    }
-}
-
-.logoutIcon {
-    composes: exit from '~app/components/ui/icons.scss';
-
-    color: #cdcdcd;
-    float: right;
-    line-height: 27px;
-    transition: 0.25s;
-
-    &:hover {
-        color: #777;
-    }
-}

packages/app/components/accounts/actions.test.ts

@@ -7,7 +7,7 @@ import * as authentication from 'app/services/api/authentication';
 import { authenticate, revoke, logoutAll, logoutStrangers } from 'app/components/accounts/actions';
 import { add, activate, remove, reset } from 'app/components/accounts/actions/pure-actions';
 import { updateUser, setUser } from 'app/components/user/actions';
-import { setLogin, setAccountSwitcher } from 'app/components/auth/actions';
+import { setLogin } from 'app/components/auth/actions';
 import { Dispatch, State as RootState } from 'app/types';
 
 import { Account } from './reducer';
@@ -182,11 +182,6 @@ describe('components/accounts/actions', () => {
                     },
                 });
             });
-
-            it('should dispatch setAccountSwitcher', () =>
-                authenticate(account)(dispatch, getState, undefined).then(() =>
-                    expect(dispatch, 'to have a call satisfying', [setAccountSwitcher(false)]),
-                ));
         });
 
         describe('when one account available', () => {

packages/app/components/accounts/actions.ts

@@ -1,7 +1,7 @@
 import { getJwtPayloads } from 'app/functions';
 import { sessionStorage } from 'app/services/localStorage';
 import { validateToken, requestToken, logout } from 'app/services/api/authentication';
-import { relogin as navigateToLogin, setAccountSwitcher } from 'app/components/auth/actions';
+import { relogin as navigateToLogin } from 'app/components/auth/actions';
 import { updateUser, setGuest } from 'app/components/user/actions';
 import { setLocale } from 'app/components/i18n/actions';
 import logger from 'app/services/logger';
@@ -53,7 +53,6 @@ export function authenticate(
                 token,
                 refreshToken,
             );
-            const { auth } = getState();
             const newAccount: Account = {
                 id: user.id,
                 username: user.username,
@@ -78,14 +77,6 @@ export function authenticate(
                 sessionStorage.setItem(`stranger${newAccount.id}`, '1');
             }
 
-            if (auth?.oauth?.clientId) {
-                // if we authenticating during oauth, we disable account chooser
-                // because user probably has made his choise now
-                // this may happen, when user registers, logs in or uses account
-                // chooser panel during oauth
-                dispatch(setAccountSwitcher(false));
-            }
-
             await dispatch(setLocale(user.lang));
 
             return newAccount;

packages/app/components/accounts/index.ts

@@ -1,5 +1,4 @@
 import { State, Account as AccountType } from './reducer';
 
-export { default as AccountSwitcher } from './AccountSwitcher';
 export type AccountsState = State;
 export type Account = AccountType;

packages/app/components/auth/Context.tsx

@@ -8,8 +8,8 @@ export interface AuthContext {
     user: User;
     requestRedraw: () => Promise<void>;
     clearErrors: () => void;
-    resolve: (payload: { [key: string]: any } | undefined) => void;
-    reject: (payload: { [key: string]: any } | undefined) => void;
+    resolve: (payload: Record<string, any> | undefined) => Promise<any> | void;
+    reject: (payload: Record<string, any> | undefined) => Promise<any> | void;
 }
 
 const Context = React.createContext<AuthContext>({

packages/app/components/auth/chooseAccount/AccountSwitcher.tsx

@@ -0,0 +1,60 @@
+import React, { ComponentType, MouseEventHandler, useCallback, useState } from 'react';
+import clsx from 'clsx';
+
+import { PseudoAvatar } from 'app/components/ui';
+import { ComponentLoader } from 'app/components/ui/loader';
+import { Account } from 'app/components/accounts/reducer';
+
+import styles from './accountSwitcher.scss';
+
+interface Props {
+    accounts: ReadonlyArray<Account>;
+    onAccountClick?: (account: Account) => Promise<void>;
+}
+
+const AccountSwitcher: ComponentType<Props> = ({ accounts, onAccountClick }) => {
+    const [selectedAccount, setSelectedAccount] = useState<number>();
+    const onAccountClickCallback = useCallback(
+        (account: Account): MouseEventHandler => async (event) => {
+            event.stopPropagation();
+
+            setSelectedAccount(account.id);
+            try {
+                if (onAccountClick) {
+                    await onAccountClick(account);
+                }
+            } finally {
+                setSelectedAccount(undefined);
+            }
+        },
+        [onAccountClick],
+    );
+
+    return (
+        <div className={styles.accountSwitcher} data-testid="account-switcher">
+            {accounts.map((account, index) => (
+                <div
+                    className={clsx(styles.item, {
+                        [styles.inactiveItem]: selectedAccount && selectedAccount !== account.id,
+                    })}
+                    key={account.id}
+                    data-e2e-account-id={account.id}
+                    onClick={onAccountClickCallback(account)}
+                >
+                    <PseudoAvatar index={index} className={styles.accountIcon} />
+                    <div className={styles.accountInfo}>
+                        <div className={styles.accountUsername}>{account.username}</div>
+                        <div className={styles.accountEmail}>{account.email}</div>
+                    </div>
+                    {selectedAccount === account.id ? (
+                        <ComponentLoader skin="light" className={styles.accountLoader} />
+                    ) : (
+                        <div className={styles.nextIcon} />
+                    )}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default AccountSwitcher;

packages/app/components/auth/chooseAccount/ChooseAccountBody.tsx

@@ -2,12 +2,22 @@ import React from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
 
+import { connect } from 'app/functions';
 import BaseAuthBody from 'app/components/auth/BaseAuthBody';
-import { AccountSwitcher } from 'app/components/accounts';
-import { Account } from 'app/components/accounts/reducer';
+import type { Account } from 'app/components/accounts';
 
+import AccountSwitcher from './AccountSwitcher';
 import styles from './chooseAccount.scss';
 
+// I can't connect the ChooseAccountBody component with redux's "connect" function
+// to get accounts list because it will break the TransitionMotion animation implementation.
+//
+// So to provide accounts list to the component, I'll create connected version of
+// the composes with already provided accounts list
+const ConnectedAccountSwitcher = connect((state) => ({
+    accounts: state.accounts.available,
+}))(AccountSwitcher);
+
 export default class ChooseAccountBody extends BaseAuthBody {
     static displayName = 'ChooseAccountBody';
     static panelId = 'chooseAccount';
@@ -29,28 +39,21 @@ export default class ChooseAccountBody extends BaseAuthBody {
                             }}
                         />
                     ) : (
-                        <div className={styles.description}>
-                            <Message
-                                key="pleaseChooseAccount"
-                                defaultMessage="Please select an account you're willing to use"
-                            />
-                        </div>
+                        <Message
+                            key="pleaseChooseAccount"
+                            defaultMessage="Please select an account you're willing to use"
+                        />
                     )}
                 </div>
 
                 <div className={styles.accountSwitcherContainer}>
-                    <AccountSwitcher
-                        allowAdd={false}
-                        allowLogout={false}
-                        highlightActiveAccount={false}
-                        onSwitch={this.onSwitch}
-                    />
+                    <ConnectedAccountSwitcher onAccountClick={this.onSwitch} />
                 </div>
             </div>
         );
     }
 
-    onSwitch = (account: Account): void => {
-        this.context.resolve(account);
+    onSwitch = (account: Account): Promise<void> => {
+        return Promise.resolve(this.context.resolve(account));
     };
 }

packages/app/components/auth/chooseAccount/accountSwitcher.scss

@@ -0,0 +1,87 @@
+@import '~app/components/ui/colors.scss';
+@import '~app/components/ui/fonts.scss';
+
+.accountSwitcher {
+    background: $black;
+    text-align: left;
+}
+
+$border: 1px solid lighter($black);
+
+.item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 15px 20px;
+    border-top: 1px solid lighter($black);
+    transition: background-color 0.25s, filter 0.5s cubic-bezier(0, 0.55, 0.45, 1);
+    cursor: pointer;
+
+    &:hover {
+        background-color: lighter($black);
+    }
+
+    &:active {
+        background-color: darker($black);
+    }
+
+    &:last-of-type {
+        border-bottom: $border;
+    }
+}
+
+.inactiveItem {
+    filter: grayscale(100%);
+    pointer-events: none;
+}
+
+.accountIcon {
+    font-size: 35px;
+    margin-right: 15px;
+}
+
+.accountInfo {
+    flex-grow: 1;
+    margin-right: 15px;
+    min-width: 0; // Fix for text-overflow. See https://stackoverflow.com/a/40612184
+}
+
+%overflowText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.accountUsername {
+    @extend %overflowText;
+    font-family: $font-family-title;
+    color: #fff;
+}
+
+.accountEmail {
+    @extend %overflowText;
+    color: #666;
+    font-size: 12px;
+}
+
+.nextIcon {
+    composes: arrowRight from '~app/components/ui/icons.scss';
+
+    position: relative;
+    left: 0;
+
+    font-size: 24px;
+    color: #4e4e4e;
+    line-height: 35px;
+
+    transition: color 0.25s, left 0.5s;
+
+    .item:hover & {
+        color: #aaa;
+        left: 5px;
+    }
+}
+
+.accountLoader {
+    font-size: 10px;
+}

packages/app/components/ui/PseudoAvatar.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentType } from 'react';
+import clsx from 'clsx';
+
+import styles from './pseudoAvatar.scss';
+
+interface Props {
+    index?: number;
+    className?: string;
+}
+
+const PseudoAvatar: ComponentType<Props> = ({ index = 0, className }) => (
+    <div className={clsx(styles.pseudoAvatar, styles[`pseudoAvatar${index % 7}`], className)} />
+);
+
+export default PseudoAvatar;

packages/app/components/ui/form/Dropdown.tsx

@@ -1,7 +1,8 @@
 import React, { InputHTMLAttributes, MouseEventHandler } from 'react';
-import ReactDOM from 'react-dom';
 import { MessageDescriptor } from 'react-intl';
+import ClickAwayListener from 'react-click-away-listener';
 import clsx from 'clsx';
+
 import { COLOR_GREEN, Color } from 'app/components/ui';
 
 import styles from './dropdown.scss';
@@ -12,7 +13,7 @@ type ItemLabel = I18nString | React.ReactElement;
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
     label: I18nString;
-    items: { [value: string]: ItemLabel };
+    items: Record<string, ItemLabel>;
     block?: boolean;
     color: Color;
 }
@@ -37,18 +38,6 @@ export default class Dropdown extends FormInputComponent<Props, State> {
         activeItem: null,
     };
 
-    componentDidMount() {
-        // listen to capturing phase to ensure, that our event handler will be
-        // called before all other
-        // @ts-ignore
-        document.addEventListener('click', this.onBodyClick, true);
-    }
-
-    componentWillUnmount() {
-        // @ts-ignore
-        document.removeEventListener('click', this.onBodyClick);
-    }
-
     render() {
         const { color, block, items, ...restProps } = this.props;
         const { isActive } = this.state;
@@ -59,7 +48,7 @@ export default class Dropdown extends FormInputComponent<Props, State> {
         const label = React.isValidElement(activeItem.label) ? activeItem.label : this.formatMessage(activeItem.label);
 
         return (
-            <div>
+            <ClickAwayListener onClickAway={this.onCloseClick}>
                 <div
                     className={clsx(styles[color], {
                         [styles.block]: block,
@@ -84,7 +73,7 @@ export default class Dropdown extends FormInputComponent<Props, State> {
                 </div>
 
                 {this.renderError()}
-            </div>
+            </ClickAwayListener>
         );
     }
 
@@ -137,17 +126,9 @@ export default class Dropdown extends FormInputComponent<Props, State> {
         this.toggle();
     };
 
-    onBodyClick: MouseEventHandler = (event) => {
+    onCloseClick = () => {
         if (this.state.isActive) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const el = ReactDOM.findDOMNode(this)!;
-
-            if (!el.contains(event.target as HTMLElement) && el !== event.target) {
-                event.preventDefault();
-                event.stopPropagation();
-
-                this.toggle();
-            }
+            this.toggle();
         }
     };
 }

packages/app/components/ui/index.ts

@@ -30,3 +30,4 @@ export const SKIN_LIGHT: Skin = 'light';
 export const skins: Array<Skin> = [SKIN_DARK, SKIN_LIGHT];
 
 export { default as RelativeTime } from './RelativeTime';
+export { default as PseudoAvatar } from './PseudoAvatar';

packages/app/components/ui/loader/ComponentLoader.tsx

@@ -9,10 +9,11 @@ import styles from './componentLoader.scss';
 
 interface Props {
     skin?: Skin;
+    className?: string;
 }
 
-const ComponentLoader: ComponentType<Props> = ({ skin = 'dark' }) => (
-    <div className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`])}>
+const ComponentLoader: ComponentType<Props> = ({ skin = 'dark', className }) => (
+    <div className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`], className)}>
         <div className={styles.spins}>
             {new Array(5).fill(0).map((_, index) => (
                 <div className={clsx(styles.spin, styles[`spin${index}`])} key={index} />

packages/app/components/ui/loader/componentLoader.scss

@@ -1,41 +1,31 @@
 @import '~app/components/ui/colors.scss';
 
 .componentLoader {
-    width: 100%;
     text-align: center;
+    font-size: 20px;
 }
 
 .spins {
-    height: 40px;
+    height: 2em;
+    display: flex;
+    flex-shrink: 1;
+    flex-basis: 0;
+    flex-direction: row;
 }
 
 .spin {
-    height: 20px;
-    width: 20px;
+    height: 1em;
+    width: 1em;
     display: inline-block;
-    margin: 10px 2px;
+    margin: 0.5em 0.1em;
     opacity: 0;
     animation: loaderAnimation 1s infinite;
 }
 
-.spin1 {
-    animation-delay: 0s;
-}
-
-.spin2 {
-    animation-delay: 0.1s;
-}
-
-.spin3 {
-    animation-delay: 0.2s;
-}
-
-.spin4 {
-    animation-delay: 0.3s;
-}
-
-.spin5 {
-    animation-delay: 0.4s;
+@for $i from 0 to 5 {
+    .spin#{$i} {
+        animation-delay: 0.1s * $i;
+    }
 }
 
 /**

packages/app/components/ui/pseudoAvatar.scss

@@ -0,0 +1,33 @@
+@import '~app/components/ui/colors.scss';
+
+.pseudoAvatar {
+    composes: minecraft-character from '~app/components/ui/icons.scss';
+
+    &0 {
+        color: $green;
+    }
+
+    &1 {
+        color: $blue;
+    }
+
+    &2 {
+        color: $violet;
+    }
+
+    &3 {
+        color: $orange;
+    }
+
+    &4 {
+        color: $dark_blue;
+    }
+
+    &5 {
+        color: $light_violet;
+    }
+
+    &6 {
+        color: $red;
+    }
+}

packages/app/components/userbar/AccountSwitcher.tsx

@@ -0,0 +1,106 @@
+import React, { ComponentType, MouseEventHandler, useCallback } from 'react';
+import clsx from 'clsx';
+import { Link } from 'react-router-dom';
+import { FormattedMessage as Message } from 'react-intl';
+
+import { PseudoAvatar } from 'app/components/ui';
+import { Button } from 'app/components/ui/form';
+import { Account } from 'app/components/accounts/reducer';
+import messages from 'app/components/accounts/accountSwitcher.intl';
+
+import styles from './accountSwitcher.scss';
+
+interface Props {
+    activeAccount: Account;
+    accounts: ReadonlyArray<Account>;
+    onAccountClick?: (account: Account) => void;
+    onRemoveClick?: (account: Account) => void;
+    onLoginClick?: MouseEventHandler<HTMLAnchorElement>;
+}
+
+const AccountSwitcher: ComponentType<Props> = ({
+    activeAccount,
+    accounts,
+    onAccountClick = () => {},
+    onRemoveClick = () => {},
+    onLoginClick,
+}) => {
+    const available = accounts.filter((account) => account.id !== activeAccount.id);
+    const onAccountClickCallback = useCallback(
+        (account: Account): MouseEventHandler => (event) => {
+            event.preventDefault();
+            onAccountClick(account);
+        },
+        [onAccountClick],
+    );
+    const onAccountRemoveCallback = useCallback(
+        (account: Account): MouseEventHandler => (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+
+            onRemoveClick(account);
+        },
+        [onRemoveClick],
+    );
+
+    return (
+        <div className={clsx(styles.accountSwitcher)} data-testid="account-switcher">
+            <div className={styles.item} data-testid="active-account">
+                <PseudoAvatar className={styles.activeAccountIcon} />
+                <div className={styles.activeAccountInfo}>
+                    <div className={styles.activeAccountUsername}>{activeAccount.username}</div>
+                    <div className={clsx(styles.accountEmail, styles.activeAccountEmail)}>{activeAccount.email}</div>
+                    <div className={styles.links}>
+                        <div className={styles.link}>
+                            <a href={`//ely.by/u${activeAccount.id}`} target="_blank">
+                                <Message {...messages.goToEly} />
+                            </a>
+                        </div>
+                        <div className={styles.link}>
+                            <a
+                                className={styles.link}
+                                data-testid="logout-account"
+                                onClick={onAccountRemoveCallback(activeAccount)}
+                                href="#"
+                            >
+                                <Message {...messages.logout} />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {available.map((account, index) => (
+                <div
+                    className={clsx(styles.item, styles.accountSwitchItem)}
+                    key={account.id}
+                    data-e2e-account-id={account.id}
+                    onClick={onAccountClickCallback(account)}
+                >
+                    <PseudoAvatar index={index + 1} className={styles.accountIcon} />
+
+                    <div
+                        className={styles.logoutIcon}
+                        data-testid="logout-account"
+                        onClick={onAccountRemoveCallback(account)}
+                    />
+
+                    <div className={styles.accountInfo}>
+                        <div className={styles.accountUsername}>{account.username}</div>
+                        <div className={styles.accountEmail}>{account.email}</div>
+                    </div>
+                </div>
+            ))}
+            <Link to="/login" onClick={onLoginClick}>
+                <Button color="white" data-testid="add-account" block small>
+                    <span>
+                        <div className={styles.addIcon} />
+                        <Message {...messages.addAccount} />
+                    </span>
+                </Button>
+            </Link>
+        </div>
+    );
+};
+
+export default AccountSwitcher;

packages/app/components/userbar/LoggedInPanel.story.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import LoggedInPanel from './LoggedInPanel';
+
+const activeAccount = {
+    id: 1,
+    username: 'MockUser',
+    email: 'mock@ely.by',
+    refreshToken: '',
+    token: '',
+};
+
+storiesOf('Components/Userbar', module)
+    .addDecorator((storyFn) => (
+        <div style={{ background: '#207e5c', paddingRight: '10px', textAlign: 'right' }}>{storyFn()}</div>
+    ))
+    .add('LoggedInPanel', () => (
+        <LoggedInPanel
+            activeAccount={activeAccount}
+            accounts={[
+                activeAccount,
+                {
+                    id: 2,
+                    username: 'AnotherMockUser',
+                    email: 'mock-user2@ely.by',
+                    token: '',
+                    refreshToken: '',
+                },
+            ]}
+            onSwitchAccount={async (account) => action('onSwitchAccount')(account)}
+            onRemoveAccount={async (account) => action('onRemoveAccount')(account)}
+        />
+    ));

packages/app/components/userbar/LoggedInPanel.tsx

@@ -1,120 +1,64 @@
-import React, { MouseEventHandler } from 'react';
+import React, { ComponentType, useCallback, useState } from 'react';
 import clsx from 'clsx';
-import { AccountSwitcher } from 'app/components/accounts';
+import ClickAwayListener from 'react-click-away-listener';
+
+import { Account } from 'app/components/accounts';
+
+import AccountSwitcher from './AccountSwitcher';
 
 import styles from './loggedInPanel.scss';
 
-export default class LoggedInPanel extends React.Component<
-    {
-        username: string;
-    },
-    {
-        isAccountSwitcherActive: boolean;
-    }
-> {
-    state = {
-        isAccountSwitcherActive: false,
-    };
+interface Props {
+    activeAccount: Account;
+    accounts: ReadonlyArray<Account>;
+    onSwitchAccount?: (account: Account) => Promise<any>;
+    onRemoveAccount?: (account: Account) => Promise<any>;
+}
 
-    _isMounted: boolean = false;
-    el: HTMLElement | null;
+const LoggedInPanel: ComponentType<Props> = ({ activeAccount, accounts, onSwitchAccount, onRemoveAccount }) => {
+    const [isAccountSwitcherActive, setAccountSwitcherState] = useState(false);
+    const hideAccountSwitcher = useCallback(() => setAccountSwitcherState(false), []);
+    const onAccountClick = useCallback(
+        async (account: Account) => {
+            if (onSwitchAccount) {
+                await onSwitchAccount(account);
+            }
 
-    componentDidMount() {
-        if (window.document) {
-            // @ts-ignore
-            window.document.addEventListener('click', this.onBodyClick);
-        }
+            setAccountSwitcherState(false);
+        },
+        [onSwitchAccount],
+    );
 
-        this._isMounted = true;
-    }
-
-    componentWillUnmount() {
-        if (window.document) {
-            // @ts-ignore
-            window.document.removeEventListener('click', this.onBodyClick);
-        }
-
-        this._isMounted = false;
-    }
-
-    render() {
-        const { username } = this.props;
-        const { isAccountSwitcherActive } = this.state;
-
-        return (
-            <div ref={(el) => (this.el = el)} className={clsx(styles.loggedInPanel)}>
-                <div
-                    className={clsx(styles.activeAccount, {
-                        [styles.activeAccountExpanded]: isAccountSwitcherActive,
-                    })}
-                >
-                    <button className={styles.activeAccountButton} onClick={this.onExpandAccountSwitcher}>
+    return (
+        <div className={styles.loggedInPanel}>
+            <div
+                className={clsx(styles.activeAccount, {
+                    [styles.activeAccountExpanded]: isAccountSwitcherActive,
+                })}
+            >
+                <ClickAwayListener onClickAway={hideAccountSwitcher}>
+                    <button
+                        className={styles.activeAccountButton}
+                        onClick={setAccountSwitcherState.bind(null, !isAccountSwitcherActive)}
+                    >
                         <span className={styles.userIcon} />
-                        <span className={styles.userName}>{username}</span>
+                        <span className={styles.userName}>{activeAccount.username}</span>
                         <span className={styles.expandIcon} />
                     </button>
 
-                    <div className={clsx(styles.accountSwitcherContainer)}>
-                        <AccountSwitcher skin="light" onAfterAction={this.onToggleAccountSwitcher} />
+                    <div className={styles.accountSwitcherContainer}>
+                        <AccountSwitcher
+                            activeAccount={activeAccount}
+                            accounts={accounts}
+                            onAccountClick={onAccountClick}
+                            onRemoveClick={onRemoveAccount}
+                            onLoginClick={hideAccountSwitcher}
+                        />
                     </div>
-                </div>
+                </ClickAwayListener>
             </div>
-        );
-    }
-
-    toggleAccountSwitcher = () =>
-        this._isMounted &&
-        this.setState({
-            isAccountSwitcherActive: !this.state.isAccountSwitcherActive,
-        });
-
-    onToggleAccountSwitcher = () => {
-        this.toggleAccountSwitcher();
-    };
-
-    onExpandAccountSwitcher = (event: React.MouseEvent<HTMLButtonElement>) => {
-        event.preventDefault();
-
-        this.toggleAccountSwitcher();
-    };
-
-    onBodyClick = createOnOutsideComponentClickHandler(
-        () => this.el,
-        () => this.state.isAccountSwitcherActive && this._isMounted,
-        () => this.toggleAccountSwitcher(),
+        </div>
     );
-}
+};
 
-/**
- * Creates an event handling function to handle clicks outside the component
- *
- * The handler will check if current click was outside container el and if so
- * and component isActive, it will call the callback
- *
- * @param  {Function} getEl - the function, that returns reference to container el
- * @param  {Function} isActive - whether the component is active and callback may be called
- * @param  {Function} callback - the callback to call, when there was a click outside el
- *
- * @returns {Function}
- */
-function createOnOutsideComponentClickHandler(
-    getEl: () => HTMLElement | null,
-    isActive: () => boolean,
-    callback: () => void,
-): MouseEventHandler {
-    // TODO: we have the same logic in LangMenu
-    // Probably we should decouple this into some helper function
-    // TODO: the name of function may be better...
-    return (event) => {
-        const el = getEl();
-
-        if (isActive() && el) {
-            if (!el.contains(event.target as HTMLElement) && el !== event.target) {
-                event.preventDefault();
-
-                // add a small delay for the case someone have alredy called toggle
-                setTimeout(() => isActive() && callback(), 0);
-            }
-        }
-    };
-}
+export default LoggedInPanel;

packages/app/components/userbar/Userbar.tsx

@@ -1,49 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
-import { FormattedMessage as Message } from 'react-intl';
-import { Account } from 'app/components/accounts/reducer';
-import buttons from 'app/components/ui/buttons.scss';
-
-import styles from './userbar.scss';
-import LoggedInPanel from './LoggedInPanel';
-
-export default class Userbar extends Component<{
-    account: Account | null;
-    guestAction: 'register' | 'login';
-}> {
-    static displayName = 'Userbar';
-
-    static defaultProps = {
-        guestAction: 'register',
-    };
-
-    render() {
-        const { account, guestAction: actionType } = this.props;
-
-        let guestAction: React.ReactElement;
-
-        switch (actionType) {
-            case 'login':
-                guestAction = (
-                    <Link to="/login" className={buttons.blue}>
-                        <Message key="login" defaultMessage="Sign in" />
-                    </Link>
-                );
-                break;
-            case 'register':
-            default:
-                guestAction = (
-                    <Link to="/register" className={buttons.blue}>
-                        <Message key="register" defaultMessage="Join" />
-                    </Link>
-                );
-                break;
-        }
-
-        return (
-            <div className={styles.userbar}>
-                {account ? <LoggedInPanel username={account.username} /> : guestAction}
-            </div>
-        );
-    }
-}

packages/app/components/userbar/accountSwitcher.scss

@@ -0,0 +1,126 @@
+@import '~app/components/ui/colors.scss';
+@import '~app/components/ui/fonts.scss';
+
+// TODO: эту константу можно заимпортить из panel.scss, но это приводит к странным ошибкам
+//@import '~app/components/ui/panel.scss';
+$bodyLeftRightPadding: 20px;
+
+$lightBorderColor: #eee;
+
+.accountSwitcher {
+    text-align: left;
+
+    background: #fff;
+    color: #444;
+    min-width: 205px;
+
+    $border: 1px solid $lightBorderColor;
+    border-left: $border;
+    border-right: $border;
+    border-bottom: 7px solid darker($green);
+}
+
+.accountInfo {
+}
+
+.accountUsername,
+.accountEmail {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.item {
+    padding: 15px;
+    border-bottom: 1px solid $lightBorderColor;
+}
+
+.accountSwitchItem {
+    cursor: pointer;
+    transition: 0.25s;
+
+    &:hover {
+        background-color: $whiteButtonLight;
+    }
+
+    &:active {
+        background-color: $whiteButtonDark;
+    }
+}
+
+.accountIcon {
+    font-size: 27px;
+    width: 20px;
+    text-align: center;
+    float: left;
+}
+
+.activeAccountIcon {
+    composes: accountIcon;
+
+    font-size: 40px;
+}
+
+.activeAccountInfo {
+    margin-left: 29px;
+}
+
+.activeAccountUsername {
+    font-family: $font-family-title;
+    font-size: 20px;
+    color: $green;
+}
+
+.activeAccountEmail {
+}
+
+.links {
+    margin-top: 6px;
+}
+
+.link {
+    font-size: 12px;
+    margin-bottom: 3px;
+    white-space: nowrap;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+.accountInfo {
+    margin-left: 29px;
+    margin-right: 25px;
+}
+
+.accountUsername {
+    font-family: $font-family-title;
+    font-size: 14px;
+    color: #666;
+}
+
+.accountEmail {
+    font-size: 10px;
+    color: #999;
+}
+
+.addIcon {
+    composes: plus from '~app/components/ui/icons.scss';
+
+    color: $green;
+    position: relative;
+    bottom: 1px;
+    margin-right: 3px;
+}
+
+.logoutIcon {
+    composes: exit from '~app/components/ui/icons.scss';
+
+    color: #cdcdcd;
+    float: right;
+    line-height: 27px;
+    transition: 0.25s;
+
+    &:hover {
+        color: #777;
+    }
+}

packages/app/components/userbar/userbar.scss

@@ -1,3 +0,0 @@
-.userbar {
-    text-align: right;
-}