format code

This commit is contained in:
Sean Yesmunt 2019-11-14 09:34:55 -05:00
parent 7ae4c3301d
commit 1b62fe8a5a
2 changed files with 56 additions and 48 deletions

View file

@ -18,7 +18,7 @@ import { IS_MAC } from 'component/app/view';
type Props = { type Props = {
balance: string, balance: string,
roundedBalance: number, roundedBalance: number,
history: { push: string => void, goBack: () => void, goForward: () => void }, history: { push: string => void, goBack: () => void, goForward: () => void, location: { pathname: string } },
currentTheme: string, currentTheme: string,
automaticDarkModeEnabled: boolean, automaticDarkModeEnabled: boolean,
setClientSetting: (string, boolean | string) => void, setClientSetting: (string, boolean | string) => void,
@ -49,9 +49,7 @@ const Header = (props: Props) => {
// Sign out if they click the "x" when they are on the password prompt // Sign out if they click the "x" when they are on the password prompt
const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' }; const authHeaderAction = syncError ? { onClick: signOut } : { navigate: '/' };
const homeButtonNavigationProps = isVerifyPage ? const homeButtonNavigationProps = isVerifyPage ? {} : authHeader ? authHeaderAction : { navigate: '/' };
{ } :
authHeader ? authHeaderAction : { navigate: '/' };
const closeButtonNavigationProps = authHeader ? authHeaderAction : { onClick: () => history.goBack() }; const closeButtonNavigationProps = authHeader ? authHeaderAction : { onClick: () => history.goBack() };
function handleThemeToggle() { function handleThemeToggle() {
@ -116,7 +114,7 @@ const Header = (props: Props) => {
)} )}
{/* @endif */} {/* @endif */}
{!authHeader && <WunderBar/>} {!authHeader && <WunderBar />}
</div> </div>
{!authHeader ? ( {!authHeader ? (
@ -127,37 +125,37 @@ const Header = (props: Props) => {
<MenuButton className="header__navigation-item menu__title">{getWalletTitle()}</MenuButton> <MenuButton className="header__navigation-item menu__title">{getWalletTitle()}</MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.WALLET}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.WALLET}`)}>
<Icon aria-hidden icon={ICONS.WALLET}/> <Icon aria-hidden icon={ICONS.WALLET} />
{__('Wallet')} {__('Wallet')}
</MenuItem> </MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
<Icon aria-hidden icon={ICONS.FEATURED}/> <Icon aria-hidden icon={ICONS.FEATURED} />
{__('Rewards')} {__('Rewards')}
</MenuItem> </MenuItem>
</MenuList> </MenuList>
</Menu> </Menu>
<Menu> <Menu>
<MenuButton className="header__navigation-item menu__title"> <MenuButton className="header__navigation-item menu__title">
<Icon size={18} icon={ICONS.ACCOUNT}/> <Icon size={18} icon={ICONS.ACCOUNT} />
</MenuButton> </MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.ACCOUNT}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.ACCOUNT}`)}>
<Icon aria-hidden icon={ICONS.OVERVIEW}/> <Icon aria-hidden icon={ICONS.OVERVIEW} />
{__('Overview')} {__('Overview')}
</MenuItem> </MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH}/> <Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Publish')} {__('Publish')}
</MenuItem> </MenuItem>
{authenticated ? ( {authenticated ? (
<MenuItem className="menu__link" onSelect={signOut}> <MenuItem className="menu__link" onSelect={signOut}>
<Icon aria-hidden icon={ICONS.SIGN_OUT}/> <Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')} {__('Sign Out')}
</MenuItem> </MenuItem>
) : ( ) : (
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
<Icon aria-hidden icon={ICONS.SIGN_IN}/> <Icon aria-hidden icon={ICONS.SIGN_IN} />
{__('Sign In')} {__('Sign In')}
</MenuItem> </MenuItem>
)} )}
@ -166,37 +164,39 @@ const Header = (props: Props) => {
<Menu> <Menu>
<MenuButton className="header__navigation-item menu__title"> <MenuButton className="header__navigation-item menu__title">
<Icon size={18} icon={ICONS.SETTINGS}/> <Icon size={18} icon={ICONS.SETTINGS} />
</MenuButton> </MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
<Icon aria-hidden tootlip icon={ICONS.SETTINGS}/> <Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
{__('Settings')} {__('Settings')}
</MenuItem> </MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
<Icon aria-hidden icon={ICONS.HELP}/> <Icon aria-hidden icon={ICONS.HELP} />
{__('Help')} {__('Help')}
</MenuItem> </MenuItem>
<MenuItem className="menu__link" onSelect={handleThemeToggle}> <MenuItem className="menu__link" onSelect={handleThemeToggle}>
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT}/> <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
{currentTheme === 'light' ? __('Dark') : __('Light')} {currentTheme === 'light' ? __('Dark') : __('Light')}
</MenuItem> </MenuItem>
</MenuList> </MenuList>
</Menu> </Menu>
</Fragment> </Fragment>
) : ( ) : (
<Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign In')}/> <Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Sign In')} />
)} )}
</div> </div>
) : (!isVerifyPage && ) : (
<div className="header__menu"> !isVerifyPage && (
{/* Add an empty span here so we can use the same style as above */} <div className="header__menu">
{/* This pushes the close button to the right side */} {/* Add an empty span here so we can use the same style as above */}
<span/> {/* This pushes the close button to the right side */}
<Tooltip label={__('Go Back')}> <span />
<Button icon={ICONS.REMOVE} {...closeButtonNavigationProps} /> <Tooltip label={__('Go Back')}>
</Tooltip> <Button icon={ICONS.REMOVE} {...closeButtonNavigationProps} />
</div> </Tooltip>
</div>
)
)} )}
</div> </div>
</header> </header>

View file

@ -2,18 +2,21 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import Page from 'component/page'; import Page from 'component/page';
import ReCAPTCHA from "react-google-recaptcha"; import ReCAPTCHA from 'react-google-recaptcha';
import Button from 'component/button'; import Button from 'component/button';
import { Lbryio } from 'lbryinc'; import { Lbryio } from 'lbryinc';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
type Props = { type Props = {
history: { push: string => void }, history: { push: string => void, location: { search: string } },
doToast: ({}) => void doToast: ({}) => void,
}; };
function SignInVerifyPage(props: Props) { function SignInVerifyPage(props: Props) {
const { history: { push }, doToast } = props; const {
history: { push, location },
doToast,
} = props;
const urlParams = new URLSearchParams(location.search); const urlParams = new URLSearchParams(location.search);
const authToken = urlParams.get('auth_token'); const authToken = urlParams.get('auth_token');
const userSubmittedEmail = urlParams.get('email'); const userSubmittedEmail = urlParams.get('email');
@ -42,31 +45,36 @@ function SignInVerifyPage(props: Props) {
verification_token: verificationToken, verification_token: verificationToken,
recaptcha: value, recaptcha: value,
}) })
.then(() => { .then(() => {
setIsAuthenticationSuccess(true); setIsAuthenticationSuccess(true);
}) })
.catch(() => { .catch(() => {
onAuthError(__('Invalid captcha response or other authentication error.')); onAuthError(__('Invalid captcha response or other authentication error.'));
}); });
} }
return ( return (
<Page authPage className="main--auth-page"> <Page authPage className="main--auth-page">
<section className="main--contained"> <section className="main--contained">
<h1 className="section__title--large">{isAuthenticationSuccess ? __('Sign In Success!') : __('Sign In to lbry.tv') }</h1> <h1 className="section__title--large">
<p className="section__subtitle">{ isAuthenticationSuccess ? __('You can now close this tab.') : __('Click below to sign in to lbry.tv') }</p> {isAuthenticationSuccess ? __('Sign In Success!') : __('Sign In to lbry.tv')}
{ !isAuthenticationSuccess && </h1>
<div className="section__actions"> <p className="section__subtitle">
<ReCAPTCHA {isAuthenticationSuccess ? __('You can now close this tab.') : __('Click below to sign in to lbry.tv')}
sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG" </p>
onChange={onCaptchaChange} {!isAuthenticationSuccess && (
onExpired={onAuthError} <div className="section__actions">
onErrored={onAuthError} <ReCAPTCHA
/> sitekey="6LePsJgUAAAAAFTuWOKRLnyoNKhm0HA4C3elrFMG"
</div>} onChange={onCaptchaChange}
onExpired={onAuthError}
onErrored={onAuthError}
/>
</div>
)}
</section> </section>
</Page> </Page>
); );
}; }
export default withRouter(SignInVerifyPage); export default withRouter(SignInVerifyPage);