mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-11-16 21:22:59 +05:30
Split the AccountSwitcher component on 2 independent implementations
Improve auth's ChooseAccount visual behavior Rework the ComponentLoader component. Make it more stylable
This commit is contained in:
ErickSkrauch
parent
c58816212d
commit
8075192472
@ -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);
|
||||
10
packages/app/components/accounts/accountSwitcher.intl.ts
Normal file
10
packages/app/components/accounts/accountSwitcher.intl.ts
Normal file
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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', () => {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>({
|
||||
|
||||
@ -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;
|
||||
@ -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));
|
||||
};
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
15
packages/app/components/ui/PseudoAvatar.tsx
Normal file
15
packages/app/components/ui/PseudoAvatar.tsx
Normal file
@ -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;
|
||||
@ -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();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
33
packages/app/components/ui/pseudoAvatar.scss
Normal file
33
packages/app/components/ui/pseudoAvatar.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
106
packages/app/components/userbar/AccountSwitcher.tsx
Normal file
106
packages/app/components/userbar/AccountSwitcher.tsx
Normal file
@ -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;
|
||||
35
packages/app/components/userbar/LoggedInPanel.story.tsx
Normal file
35
packages/app/components/userbar/LoggedInPanel.story.tsx
Normal file
@ -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)}
|
||||
/>
|
||||
));
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
126
packages/app/components/userbar/accountSwitcher.scss
Normal file
126
packages/app/components/userbar/accountSwitcher.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.userbar {
|
||||
text-align: right;
|
||||
}
|
||||
@ -18,6 +18,7 @@
|
||||
"raf": "^3.4.1",
|
||||
"raven-js": "^3.27.0",
|
||||
"react": "^16.13.1",
|
||||
"react-click-away-listener": "^1.4.3",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-helmet-async": "^1.0.6",
|
||||
"react-intl": "^4.5.7",
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import React from 'react';
|
||||
import { withRouter } from 'react-router-dom';
|
||||
import { FormattedMessage as Message } from 'react-intl';
|
||||
import { Route, Link, Switch } from 'react-router-dom';
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import { Helmet } from 'react-helmet-async';
|
||||
import clsx from 'clsx';
|
||||
|
||||
@ -10,16 +8,15 @@ import { resetAuth } from 'app/components/auth/actions';
|
||||
import { ScrollIntoView } from 'app/components/ui/scroll';
|
||||
import PrivateRoute from 'app/containers/PrivateRoute';
|
||||
import AuthFlowRoute from 'app/containers/AuthFlowRoute';
|
||||
import Userbar from 'app/components/userbar/Userbar';
|
||||
import { PopupStack } from 'app/components/ui/popup';
|
||||
import * as loader from 'app/services/loader';
|
||||
import { getActiveAccount } from 'app/components/accounts/reducer';
|
||||
import { User } from 'app/components/user';
|
||||
import { Account } from 'app/components/accounts/reducer';
|
||||
import { ComponentLoader } from 'app/components/ui/loader';
|
||||
import Toolbar from './Toolbar';
|
||||
|
||||
import styles from './root.scss';
|
||||
import siteName from './siteName.intl';
|
||||
|
||||
import PageNotFound from 'app/pages/404/PageNotFound';
|
||||
|
||||
@ -35,9 +32,6 @@ class RootPage extends React.PureComponent<{
|
||||
user: User;
|
||||
isPopupActive: boolean;
|
||||
onLogoClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
||||
location: {
|
||||
pathname: string;
|
||||
};
|
||||
}> {
|
||||
componentDidMount() {
|
||||
this.onPageUpdate();
|
||||
@ -52,9 +46,7 @@ class RootPage extends React.PureComponent<{
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props } = this;
|
||||
const { user, account, isPopupActive, onLogoClick } = this.props;
|
||||
const isRegisterPage = props.location.pathname === '/register';
|
||||
|
||||
if (document && document.body) {
|
||||
document.body.style.overflow = isPopupActive ? 'hidden' : '';
|
||||
@ -74,16 +66,7 @@ class RootPage extends React.PureComponent<{
|
||||
[styles.isPopupActive]: isPopupActive,
|
||||
})}
|
||||
>
|
||||
<div className={styles.header} data-testid="toolbar">
|
||||
<div className={styles.headerContent}>
|
||||
<Link to="/" className={styles.logo} onClick={onLogoClick} data-testid="home-page">
|
||||
<Message {...siteName} />
|
||||
</Link>
|
||||
<div className={styles.userbar}>
|
||||
<Userbar account={account} guestAction={isRegisterPage ? 'login' : 'register'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Toolbar account={account} onLogoClick={onLogoClick} />
|
||||
<div className={styles.body}>
|
||||
<React.Suspense fallback={<ComponentLoader />}>
|
||||
<Switch>
|
||||
@ -111,15 +94,13 @@ class RootPage extends React.PureComponent<{
|
||||
}
|
||||
}
|
||||
|
||||
export default withRouter(
|
||||
connect(
|
||||
(state) => ({
|
||||
user: state.user,
|
||||
account: getActiveAccount(state),
|
||||
isPopupActive: state.popup.popups.length > 0,
|
||||
}),
|
||||
{
|
||||
onLogoClick: resetAuth,
|
||||
},
|
||||
)(RootPage),
|
||||
);
|
||||
export default connect(
|
||||
(state) => ({
|
||||
user: state.user,
|
||||
account: getActiveAccount(state),
|
||||
isPopupActive: state.popup.popups.length > 0,
|
||||
}),
|
||||
{
|
||||
onLogoClick: resetAuth,
|
||||
},
|
||||
)(RootPage);
|
||||
|
||||
68
packages/app/pages/root/Toolbar.tsx
Normal file
68
packages/app/pages/root/Toolbar.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import React, { ComponentType, MouseEventHandler, ReactElement, useCallback } from 'react';
|
||||
import { FormattedMessage as Message } from 'react-intl';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
|
||||
import { useReduxDispatch, useReduxSelector } from 'app/functions';
|
||||
import { authenticate, revoke } from 'app/components/accounts/actions';
|
||||
import { Account } from 'app/components/accounts/reducer';
|
||||
import buttons from 'app/components/ui/buttons.scss';
|
||||
import LoggedInPanel from 'app/components/userbar/LoggedInPanel';
|
||||
import * as loader from 'app/services/loader';
|
||||
|
||||
import siteName from './siteName.intl';
|
||||
import styles from './root.scss';
|
||||
|
||||
interface Props {
|
||||
account: Account | null;
|
||||
onLogoClick?: MouseEventHandler<HTMLAnchorElement>;
|
||||
}
|
||||
|
||||
const Toolbar: ComponentType<Props> = ({ onLogoClick, account }) => {
|
||||
const dispatch = useReduxDispatch();
|
||||
const location = useLocation();
|
||||
const availableAccounts = useReduxSelector((state) => state.accounts.available);
|
||||
const switchAccount = useCallback((account: Account) => {
|
||||
loader.show();
|
||||
|
||||
return dispatch(authenticate(account)).finally(loader.hide);
|
||||
}, []);
|
||||
const removeAccount = useCallback((account: Account) => dispatch(revoke(account)), []);
|
||||
|
||||
let userBar: ReactElement;
|
||||
|
||||
if (account) {
|
||||
userBar = (
|
||||
<LoggedInPanel
|
||||
activeAccount={account}
|
||||
accounts={availableAccounts}
|
||||
onSwitchAccount={switchAccount}
|
||||
onRemoveAccount={removeAccount}
|
||||
/>
|
||||
);
|
||||
} else if (location.pathname === '/register') {
|
||||
userBar = (
|
||||
<Link to="/login" className={buttons.blue}>
|
||||
<Message key="login" defaultMessage="Sign in" />
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
userBar = (
|
||||
<Link to="/register" className={buttons.blue}>
|
||||
<Message key="register" defaultMessage="Join" />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.toolbar} data-testid="toolbar">
|
||||
<div className={styles.toolbarContent}>
|
||||
<Link to="/" className={styles.siteName} onClick={onLogoClick} data-testid="home-page">
|
||||
<Message {...siteName} />
|
||||
</Link>
|
||||
<div className={styles.userBar}>{userBar}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Toolbar;
|
||||
@ -1,7 +1,7 @@
|
||||
@import '~app/components/ui/colors.scss';
|
||||
@import '~app/components/ui/fonts.scss';
|
||||
|
||||
$userBarHeight: 50px;
|
||||
$toolbarHeight: 50px;
|
||||
|
||||
.root {
|
||||
height: 100%;
|
||||
@ -9,11 +9,11 @@ $userBarHeight: 50px;
|
||||
|
||||
.viewPort {
|
||||
height: 100%;
|
||||
transition: filter 0.4s 0.1s ease;
|
||||
}
|
||||
|
||||
.isPopupActive {
|
||||
filter: blur(5px);
|
||||
transition: filter 0.4s 0.1s ease;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@ -21,21 +21,21 @@ $userBarHeight: 50px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
.toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
height: $userBarHeight;
|
||||
height: $toolbarHeight;
|
||||
width: 100%;
|
||||
background: $green;
|
||||
}
|
||||
|
||||
.headerContent {
|
||||
.toolbarContent {
|
||||
composes: wrapper;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo {
|
||||
.siteName {
|
||||
line-height: 50px;
|
||||
padding: 0 20px;
|
||||
display: inline-block;
|
||||
@ -44,7 +44,15 @@ $userBarHeight: 50px;
|
||||
|
||||
font-family: $font-family-title;
|
||||
font-size: 33px;
|
||||
color: #fff !important;
|
||||
color: #fff!important; // TODO: why?
|
||||
}
|
||||
|
||||
.userBar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 115px;
|
||||
top: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.body {
|
||||
@ -55,12 +63,5 @@ $userBarHeight: 50px;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding-top: $userBarHeight; // place for header
|
||||
}
|
||||
|
||||
.userbar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 115px;
|
||||
top: 0;
|
||||
padding-top: $toolbarHeight; // space for the toolbar
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import expect from 'app/test/unexpected';
|
||||
import sinon, { SinonMock } from 'sinon';
|
||||
|
||||
import ChooseAccountState from 'app/services/authFlow/ChooseAccountState';
|
||||
import CompleteState from 'app/services/authFlow/CompleteState';
|
||||
import LoginState from 'app/services/authFlow/LoginState';
|
||||
import { SinonMock } from 'sinon';
|
||||
|
||||
import { bootstrap, expectState, expectNavigate, expectRun, MockedAuthContext } from './helpers';
|
||||
|
||||
@ -49,10 +51,18 @@ describe('ChooseAccountState', () => {
|
||||
});
|
||||
|
||||
describe('#resolve', () => {
|
||||
it('should transition to complete if existed account was choosen', () => {
|
||||
it('should transition to complete if an existing account was chosen', () => {
|
||||
expectRun(
|
||||
mock,
|
||||
'authenticate',
|
||||
sinon.match({
|
||||
id: 123,
|
||||
}),
|
||||
).returns(Promise.resolve());
|
||||
expectRun(mock, 'setAccountSwitcher', false);
|
||||
expectState(mock, CompleteState);
|
||||
|
||||
state.resolve(context, { id: 123 });
|
||||
return expect(state.resolve(context, { id: 123 }), 'to be fulfilled');
|
||||
});
|
||||
|
||||
it('should transition to login if user wants to add new account', () => {
|
||||
@ -60,7 +70,8 @@ describe('ChooseAccountState', () => {
|
||||
expectRun(mock, 'setLogin', null);
|
||||
expectState(mock, LoginState);
|
||||
|
||||
state.resolve(context, {});
|
||||
// Assert nothing returned
|
||||
return expect(state.resolve(context, {}), 'to be undefined');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -19,13 +19,16 @@ export default class ChooseAccountState extends AbstractState {
|
||||
resolve(context: AuthContext, payload: Account | Record<string, any>): Promise<void> | void {
|
||||
if (payload.id) {
|
||||
// payload is Account
|
||||
context.setState(new CompleteState());
|
||||
} else {
|
||||
// log in to another account
|
||||
context.navigate('/login');
|
||||
context.run('setLogin', null);
|
||||
context.setState(new LoginState());
|
||||
return context
|
||||
.run('authenticate', payload)
|
||||
.then(() => context.run('setAccountSwitcher', false))
|
||||
.then(() => context.setState(new CompleteState()));
|
||||
}
|
||||
|
||||
// log in to another account
|
||||
context.navigate('/login');
|
||||
context.run('setLogin', null);
|
||||
context.setState(new LoginState());
|
||||
}
|
||||
|
||||
reject(context: AuthContext): void {
|
||||
|
||||
@ -74,6 +74,7 @@ describe('MfaState', () => {
|
||||
},
|
||||
});
|
||||
|
||||
expectRun(mock, 'setAccountSwitcher', false);
|
||||
expectRun(
|
||||
mock,
|
||||
'login',
|
||||
|
||||
@ -19,15 +19,16 @@ export default class MfaState extends AbstractState {
|
||||
}
|
||||
|
||||
resolve(context: AuthContext, { totp }: { totp: string }): Promise<void> | void {
|
||||
const { login, password, rememberMe } = getCredentials(context.getState());
|
||||
const { login, password, rememberMe, isRelogin } = getCredentials(context.getState());
|
||||
|
||||
return context
|
||||
.run('login', {
|
||||
totp,
|
||||
password,
|
||||
rememberMe,
|
||||
login,
|
||||
password,
|
||||
totp,
|
||||
rememberMe,
|
||||
})
|
||||
.then(() => !isRelogin && context.run('setAccountSwitcher', false))
|
||||
.then(() => context.setState(new CompleteState()))
|
||||
.catch((err = {}) => err.errors || logger.warn('Error logging in', err));
|
||||
}
|
||||
|
||||
@ -69,6 +69,7 @@ describe('PasswordState', () => {
|
||||
},
|
||||
});
|
||||
|
||||
expectRun(mock, 'setAccountSwitcher', false);
|
||||
expectRun(
|
||||
mock,
|
||||
'login',
|
||||
@ -102,6 +103,8 @@ describe('PasswordState', () => {
|
||||
},
|
||||
});
|
||||
|
||||
// Should not run "setAccountSwitcher"
|
||||
|
||||
expectRun(
|
||||
mock,
|
||||
'login',
|
||||
@ -136,6 +139,7 @@ describe('PasswordState', () => {
|
||||
},
|
||||
});
|
||||
|
||||
expectRun(mock, 'setAccountSwitcher', false);
|
||||
expectRun(
|
||||
mock,
|
||||
'login',
|
||||
@ -194,6 +198,7 @@ describe('PasswordState', () => {
|
||||
},
|
||||
});
|
||||
|
||||
// Should not run "setAccountSwitcher"
|
||||
expectRun(mock, 'activateAccount', { id: 2 });
|
||||
expectRun(mock, 'removeAccount', { id: 1 });
|
||||
expectState(mock, ChooseAccountState);
|
||||
|
||||
@ -33,7 +33,7 @@ export default class PasswordState extends AbstractState {
|
||||
rememberMe: boolean;
|
||||
},
|
||||
): Promise<void> | void {
|
||||
const { login, returnUrl } = getCredentials(context.getState());
|
||||
const { login, returnUrl, isRelogin } = getCredentials(context.getState());
|
||||
|
||||
return context
|
||||
.run('login', {
|
||||
@ -48,6 +48,10 @@ export default class PasswordState extends AbstractState {
|
||||
return context.setState(new MfaState());
|
||||
}
|
||||
|
||||
if (!isRelogin) {
|
||||
context.run('setAccountSwitcher', false);
|
||||
}
|
||||
|
||||
if (returnUrl) {
|
||||
context.navigate(returnUrl);
|
||||
|
||||
|
||||
@ -13317,6 +13317,11 @@ raw-loader@^4.0.1:
|
||||
loader-utils "^2.0.0"
|
||||
schema-utils "^2.6.5"
|
||||
|
||||
react-click-away-listener@^1.4.3:
|
||||
version "1.4.3"
|
||||
resolved "https://registry.yarnpkg.com/react-click-away-listener/-/react-click-away-listener-1.4.3.tgz#a323c9f37784e133b31b2a242367be5675267186"
|
||||
integrity sha512-c7d6mfZuHu/rIdnEHnovX/QsScQXlqtdAynSnZUyyH+6kPOAyB40k2c5br56c/qp4KBkHD0JQV4C7rVuAmroMw==
|
||||
|
||||
react-clientside-effect@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user