add currently signed in email to sign out button

This commit is contained in:
Sean Yesmunt 2020-01-03 14:34:17 -05:00
parent e991e48314
commit 11dcd4c3d5
3 changed files with 18 additions and 8 deletions

View file

@ -2,7 +2,7 @@ import * as SETTINGS from 'constants/settings';
import * as MODALS from 'constants/modal_types';
import { connect } from 'react-redux';
import { selectBalance, formatCredits } from 'lbry-redux';
import { selectUserVerifiedEmail, selectGetSyncErrorMessage } from 'lbryinc';
import { selectUserVerifiedEmail, selectGetSyncErrorMessage, selectUserEmail } from 'lbryinc';
import { doSetClientSetting } from 'redux/actions/settings';
import { doSignOut, doOpenModal } from 'redux/actions/app';
import { makeSelectClientSetting } from 'redux/selectors/settings';
@ -15,7 +15,8 @@ const select = state => ({
currentTheme: makeSelectClientSetting(SETTINGS.THEME)(state),
automaticDarkModeEnabled: makeSelectClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED)(state),
hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
email: selectUserVerifiedEmail(state),
authenticated: selectUserVerifiedEmail(state),
email: selectUserEmail(state),
syncError: selectGetSyncErrorMessage(state),
});

View file

@ -24,6 +24,7 @@ type Props = {
setClientSetting: (string, boolean | string) => void,
hideBalance: boolean,
email: ?string,
authenticated: boolean,
authHeader: boolean,
syncError: ?string,
signOut: () => void,
@ -40,13 +41,13 @@ const Header = (props: Props) => {
automaticDarkModeEnabled,
hideBalance,
email,
authenticated,
authHeader,
signOut,
syncError,
openMobileNavigation,
openChannelCreate,
} = props;
const authenticated = Boolean(email);
// on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
@ -188,9 +189,12 @@ const Header = (props: Props) => {
</MenuItem> */}
{authenticated ? (
<MenuItem className="menu__link" onSelect={signOut}>
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
<MenuItem onSelect={signOut}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</MenuItem>
) : (
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>

View file

@ -62,15 +62,20 @@
align-items: center;
padding: var(--spacing-medium);
padding-right: var(--spacing-large);
}
.menu__link {
.icon {
stroke: var(--color-menu-icon);
margin-right: var(--spacing-small);
}
}
.menu__link-help {
@extend .menu__link;
color: var(--color-text-help);
font-size: var(--font-small);
padding-top: 0;
}
.menu__title {
span {
margin-left: var(--spacing-miniscule);