Changes that you asked for. #1

Merged
GlobalGamer2015 merged 1 commit from main into main 2021-10-24 19:34:46 +02:00
11 changed files with 244 additions and 127 deletions
ui
component
common
router
sideNavigation
userEmailNew
userEmailReturning
constants
page
scss/component

View file

@ -30,7 +30,9 @@ export default function Nag(props: Props) {
'nag--relative': relative, 'nag--relative': relative,
})} })}
> >
<div className="nag__message">{message}</div> <div className="nag__message">
This instance is using P2P network so content without seed won't load. Get The App to help seed content.
</div>
{(href || onClick) && ( {(href || onClick) && (
<Button <Button
className={classnames('nag__button', { className={classnames('nag__button', {
@ -42,16 +44,6 @@ export default function Nag(props: Props) {
{actionText} {actionText}
</Button> </Button>
)} )}
{onClose && (
<Button
className={classnames('nag__button nag__close', {
'nag__button--helpful': type === 'helpful',
'nag__button--error': type === 'error',
})}
icon={ICONS.REMOVE}
onClick={onClose}
/>
)}
</div> </div>
); );
} }

View file

@ -57,6 +57,7 @@ import NotificationsPage from 'page/notifications';
import SignInWalletPasswordPage from 'page/signInWalletPassword'; import SignInWalletPasswordPage from 'page/signInWalletPassword';
import YoutubeSyncPage from 'page/youtubeSync'; import YoutubeSyncPage from 'page/youtubeSync';
import CollectionPage from 'page/collection'; import CollectionPage from 'page/collection';
import DonationPage from 'page/donation';
import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment'; import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
import { parseURI, isURIValid } from 'lbry-redux'; import { parseURI, isURIValid } from 'lbry-redux';
@ -259,6 +260,7 @@ function AppRouter(props: Props) {
<Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} /> <Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
<Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} /> <Route path={`/$/${PAGES.REPORT_CONTENT}`} exact component={ReportContentPage} />
<Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} /> <Route {...props} path={`/$/${PAGES.LIST}/:collectionId`} component={CollectionPage} />
<Route {...props} path={`/$/${PAGES.DONATION}`} component={DonationPage} />
<PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} /> <PrivateRoute {...props} exact path={`/$/${PAGES.YOUTUBE_SYNC}`} component={YoutubeSyncPage} />
<PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} /> <PrivateRoute {...props} exact path={`/$/${PAGES.TAGS_FOLLOWING}`} component={TagsFollowingPage} />

View file

@ -31,6 +31,12 @@ const RECENT_FROM_FOLLOWING = {
icon: ICONS.SUBSCRIBE, icon: ICONS.SUBSCRIBE,
}; };
const DONATE = {
title: 'Donate',
link: `/$/${PAGES.DONATION}`,
icon: ICONS.LBC,
};
type Props = { type Props = {
subscriptions: Array<Subscription>, subscriptions: Array<Subscription>,
followedTags: Array<Tag>, followedTags: Array<Tag>,
@ -215,7 +221,7 @@ function SideNavigation(props: Props) {
let SIDE_LINKS: Array<SideNavLink> = []; let SIDE_LINKS: Array<SideNavLink> = [];
SIDE_LINKS.push(HOME); SIDE_LINKS.push(HOME);
SIDE_LINKS.push(RECENT_FROM_FOLLOWING); SIDE_LINKS.push(DONATE);
if (!SIMPLE_SITE && hasExperimentalUi) { if (!SIMPLE_SITE && hasExperimentalUi) {
FULL_LINKS.push({ FULL_LINKS.push({
title: 'Lists', title: 'Lists',

View file

@ -103,89 +103,14 @@ function UserEmailNew(props: Props) {
})} })}
> >
<Card <Card
title={__('Join')}
// @if TARGET='app' // @if TARGET='app'
subtitle={__('An account allows you to earn rewards and backup your data.')} subtitle={__('An account allows you to earn rewards and backup your data.')}
// @endif // @endif
actions={ actions={
<div className={classnames({ 'card--disabled': DOMAIN === 'lbry.tv' })}> <div className={classnames({ 'card--disabled': DOMAIN === 'lbry.tv' })}>
<Form onSubmit={handleSubmit} className="section"> <Form onSubmit={handleSubmit} className="section">
<FormField
autoFocus
placeholder={__('yourstruly@example.com')}
type="email"
name="sign_up_email"
label={__('Email')}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<FormField
type="password"
name="sign_in_password"
label={__('Password')}
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
{/* @if TARGET='web' */}
<FormField
type="checkbox"
name="youtube_sync_checkbox"
label={__('Sync my YouTube channel')}
checked={interestedInYoutubSync}
onChange={() => doToggleInterestedInYoutubeSync()}
/>
{/* @endif */}
{/* @if TARGET='app' */}
<FormField
type="checkbox"
name="sync_checkbox"
label={
<React.Fragment>
{__('Backup your account and wallet data.')}{' '}
<Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
</React.Fragment>
}
checked={formSyncEnabled}
onChange={() => setFormSyncEnabled(!formSyncEnabled)}
/>
{/* @endif */}
{!shareUsageData && !IS_WEB && (
<FormField
type="checkbox"
name="share_data_checkbox"
checked={localShareUsageData}
onChange={handleUsageDataChange}
label={
<React.Fragment>
{__('Share usage data with LBRY inc.')}{' '}
<Button button="link" href="https://lbry.com/faq/privacy-and-data" label={__('Learn More')} />
{!localShareUsageData && <span className="error__text"> ({__('Required')})</span>}
</React.Fragment>
}
/>
)}
<div className="section__actions">
<Button
button="primary"
type="submit"
label={__('Sign Up')}
disabled={
!email || !password || !valid || (!IS_WEB && !localShareUsageData && !shareUsageData) || isPending
}
/>
<Button button="link" onClick={handleChangeToSignIn} label={__('Log In')} />
</div>
<p className="help--card-actions"> <p className="help--card-actions">
<I18nMessage <I18nMessage>If you want to upload content to LBRY Network download Desktop App</I18nMessage>
tokens={{
terms: <Button button="link" href="https://www.lbry.com/termsofservice" label={__('terms')} />,
}}
>
By creating an account, you agree to our %terms% and confirm you're over the age of 13.
</I18nMessage>
</p> </p>
</Form> </Form>
</div> </div>

View file

@ -11,6 +11,7 @@ import Card from 'component/common/card';
import Nag from 'component/common/nag'; import Nag from 'component/common/nag';
import classnames from 'classnames'; import classnames from 'classnames';
import LoginGraphic from 'component/loginGraphic'; import LoginGraphic from 'component/loginGraphic';
import I18nMessage from 'component/i18nMessage';
type Props = { type Props = {
user: ?User, user: ?User,
@ -80,47 +81,12 @@ function UserEmailReturning(props: Props) {
<UserEmailVerify /> <UserEmailVerify />
) : ( ) : (
<Card <Card
title={__('Log in to %SITE_NAME%', { SITE_NAME })}
actions={ actions={
<div> <div>
<Form onSubmit={handleSubmit} className="section"> <Form onSubmit={handleSubmit} className="section">
<FormField <p className="help--card-actions">
autoFocus={!emailExistsFromUrl} <I18nMessage>If you want to upload content to LBRY Network download Desktop App</I18nMessage>
placeholder={__('yourstruly@example.com')} </p>
type="email"
id="username"
autoComplete="on"
name="sign_in_email"
label={__('Email')}
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
{/* @if TARGET='app' */}
<FormField
type="checkbox"
name="sync_checkbox"
label={
<React.Fragment>
{__('Backup your account and wallet data.')}{' '}
<Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
</React.Fragment>
}
checked={syncEnabled}
onChange={() => setSyncEnabled(!syncEnabled)}
/>
{/* @endif */}
<div className="section__actions">
<Button
autoFocus={emailExistsFromUrl}
button="primary"
type="submit"
label={__('Log In')}
disabled={!email || !valid || isPending}
/>
<Button button="link" onClick={handleChangeToSignIn} label={__('Sign Up')} />
</div>
</Form> </Form>
</div> </div>
} }

View file

@ -72,3 +72,4 @@ exports.LIVESTREAM = 'livestream';
exports.LIVESTREAM_CURRENT = 'live'; exports.LIVESTREAM_CURRENT = 'live';
exports.GENERAL = 'general'; exports.GENERAL = 'general';
exports.LIST = 'list'; exports.LIST = 'list';
exports.DONATION = 'donation';

19
ui/page/donation/index.js Normal file
View file

@ -0,0 +1,19 @@
import * as PAGES from 'constants/pages';
import { connect } from 'react-redux';
import { doFetchAccessToken } from 'redux/actions/user';
import { selectAccessToken, selectUser } from 'redux/selectors/user';
import { selectDaemonSettings } from 'redux/selectors/settings';
import HelpPage from './view';
const select = (state) => ({
user: selectUser(state),
accessToken: selectAccessToken(state),
deamonSettings: selectDaemonSettings(state),
});
const perform = (dispatch, ownProps) => ({
doAuth: () => ownProps.history.push(`/$/${PAGES.AUTH}?redirect=/$/${PAGES.HELP}`),
fetchAccessToken: () => dispatch(doFetchAccessToken()),
});
export default connect(select, perform)(HelpPage);

183
ui/page/donation/view.jsx Normal file
View file

@ -0,0 +1,183 @@
// @flow
import * as React from 'react';
// @if TARGET='app'
import { shell } from 'electron';
// @endif
import { Lbry } from 'lbry-redux';
import Native from 'native';
import Button from 'component/button';
import Page from 'component/page';
import 'scss/component/_donation';
type DeamonSettings = {
data_dir: string | any,
};
type Props = {
deamonSettings: DeamonSettings,
accessToken: string,
fetchAccessToken: () => void,
doAuth: () => void,
user: any,
};
type VersionInfo = {
os_system: string,
os_release: string,
platform: string,
lbrynet_version: string,
};
type State = {
versionInfo: VersionInfo | any,
lbryId: String | any,
uiVersion: ?string,
upgradeAvailable: ?boolean,
accessTokenHidden: ?boolean,
};
class HelpPage extends React.PureComponent<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
versionInfo: null,
lbryId: null,
uiVersion: null,
upgradeAvailable: null,
accessTokenHidden: true,
};
(this: any).showAccessToken = this.showAccessToken.bind(this);
(this: any).openLogFile = this.openLogFile.bind(this);
}
componentDidMount() {
// @if TARGET='app'
Native.getAppVersionInfo().then(({ localVersion, upgradeAvailable }) => {
this.setState({
uiVersion: localVersion,
upgradeAvailable,
});
});
if (!this.props.accessToken) this.props.fetchAccessToken();
// @endif
Lbry.version().then((info) => {
this.setState({
versionInfo: info,
});
});
Lbry.status().then((info) => {
this.setState({
lbryId: info.installation_id,
});
});
}
showAccessToken() {
this.setState({
accessTokenHidden: false,
});
}
openLogFile(userHomeDirectory: string) {
const logFileName = 'lbrynet.log';
const os = this.state.versionInfo.os_system;
if (os === 'Darwin' || os === 'Linux') {
shell.openPath(`${userHomeDirectory}/${logFileName}`);
} else {
shell.openPath(`${userHomeDirectory}\\${logFileName}`);
}
}
render() {
let ver;
let osName;
let platform;
let newVerLink;
if (this.state.versionInfo) {
ver = this.state.versionInfo;
if (ver.os_system === 'Darwin') {
osName = parseInt(ver.os_release.match(/^\d+/), 10) < 16 ? 'Mac OS X' : 'Mac OS';
platform = `${osName} ${ver.os_release}`;
newVerLink = 'https://lbry.com/get/lbry.dmg';
} else if (process.env.APPIMAGE !== undefined) {
platform = `Linux (AppImage)`;
newVerLink = 'https://lbry.com/get/lbry.AppImage';
} else if (ver.os_system === 'Linux') {
platform = `Linux (${ver.platform})`;
newVerLink = 'https://lbry.com/get/lbry.deb';
} else {
platform = `Windows (${ver.platform})`;
newVerLink = 'https://lbry.com/get/lbry.msi';
}
} else {
ver = null;
}
return (
<Page className="card-stack">
<h1 className="donation-h1">Donations</h1>
<div className="notice-message">
<h1 className="section__title">{__('Help LBRY Save Crypto')}</h1>
<p className="section__subtitle">
{__('The US government is attempting to destroy the cryptocurrency industry. Can you help?')}{' '}
<Button label={__('Learn more and sign petition')} button="link" href="https://helplbrysavecrypto.com" />
</p>
</div>
<p className="donation-p">
<span className="donation-span">
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/4027.png" className="donation-icon" />
DeVault: qrup4teghgza9ylxqd2cdawmdwyyhwd5vv4s00rn5c
</span>
<span className="donation-span">
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1298.png" className="donation-icon" />
LBRY Credits: bXeBKSjPygVbvkBH79Bp6CxiyeRC2hpVQ3
</span>
<span className="donation-span">
<img src="https://cointr.ee/static/media/btc.ea6d0c84.png" className="donation-icon" />
Bitcoin:
</span>
<span className="donation-span">
<img src="https://cointr.ee/static/media/eth.6d288663.png" className="donation-icon" />
Ethereum:
</span>
<span className="donation-span">
<img src="https://cointr.ee/static/media/ltc.14cfbc4c.png" className="donation-icon" />
Litecoin:
</span>
<span className="donation-span">
<img src="https://cointr.ee/static/media/dash.59d339da.png" className="donation-icon" />
Dash:
</span>
<span className="donation-span">
<img src="https://cointr.ee/static/media/doge.fb74d36c.png" className="donation-icon" />
Dogecoin:
</span>
<span className="donation-span">
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/4030.png" className="donation-icon" />
Algorand: LJF6DQHBA475GUANNWK4JPSK22MWYXX2YY7M7IT3Q43CDVYXKXGE3TYVQA
</span>
<span className="donation-span">
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1521.png" className="donation-icon" />
Komodo: RLZWLmLQGYA29gMLYkxJ1A2MM21ALfSa88
</span>
{/*
<span className="donation-span">
<img src="Image URL" className="donation-icon" />
Crypto Name: Crypto Address
</span>
*/}
</p>
</Page>
);
}
}
export default HelpPage;

View file

@ -38,7 +38,7 @@ function HomePage(props: Props) {
); );
return ( return (
<Page fullWidthPage> <Page fullWidthPage noFooter>
{IS_WEB && DOMAIN === 'lbry.tv' && ( {IS_WEB && DOMAIN === 'lbry.tv' && (
<div className="notice-message--loud"> <div className="notice-message--loud">
<h1 className="section__title"> <h1 className="section__title">

View file

@ -0,0 +1,21 @@
.donation-h1 {
text-align: center;
font-size: 50px;
margin-bottom: 20px;
}
.donation-p {
margin-top: 20px;
}
.donation-span {
display: block;
font-size: 25px;
padding: 5px 5px 5px 5px;
}
.donation-icon {
height: 30px;
width: 30px;
padding-right: 5px;
}

View file

@ -13,6 +13,7 @@ $nag-error-z-index: 999;
color: var(--color-white); color: var(--color-white);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
text-align: center; text-align: center;
background-color: #3e675d;
.button--link { .button--link {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
@ -50,6 +51,7 @@ $nag-error-z-index: 999;
.nag__message { .nag__message {
display: inline; display: inline;
background-color: #3e675d;
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
&::after { &::after {