LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

add currently signed in email to sign out button

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/component/header/index.js
View file

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

12
ui/component/header/view.jsx
View file

@ -24,6 +24,7 @@ type Props = {
setClientSetting: (string, boolean | string) => void, setClientSetting: (string, boolean | string) => void,
hideBalance: boolean, hideBalance: boolean,
email: ?string, email: ?string,
authenticated: boolean,
authHeader: boolean, authHeader: boolean,
syncError: ?string, syncError: ?string,
signOut: () => void, signOut: () => void,
@ -40,13 +41,13 @@ const Header = (props: Props) => {
automaticDarkModeEnabled, automaticDarkModeEnabled,
hideBalance, hideBalance,
email, email,
authenticated,
authHeader, authHeader,
signOut, signOut,
syncError, syncError,
openMobileNavigation, openMobileNavigation,
openChannelCreate, openChannelCreate,
} = props; } = 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 // 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); const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
@ -188,9 +189,12 @@ const Header = (props: Props) => {
</MenuItem> */} </MenuItem> */}
{authenticated ? ( {authenticated ? (
<MenuItem className="menu__link" onSelect={signOut}> <MenuItem onSelect={signOut}>
<Icon aria-hidden icon={ICONS.SIGN_OUT} /> <div className="menu__link">
{__('Sign Out')} <Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</MenuItem> </MenuItem>
) : ( ) : (
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>

9
ui/scss/component/menu-button.scss
View file

@ -62,15 +62,20 @@
align-items: center; align-items: center;
padding: var(--spacing-medium); padding: var(--spacing-medium);
padding-right: var(--spacing-large); padding-right: var(--spacing-large);
}
.menu__link {
.icon { .icon {
stroke: var(--color-menu-icon); stroke: var(--color-menu-icon);
margin-right: var(--spacing-small); 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 { .menu__title {
span { span {
margin-left: var(--spacing-miniscule); margin-left: var(--spacing-miniscule);