lbry-desktop/ui/component/userEmailNew/view.jsx

190 lines
6.2 KiB
React
Raw Normal View History

2018-03-30 02:43:47 +02:00
// @flow
import * as PAGES from 'constants/pages';
2020-08-21 17:18:47 +02:00
import { SITE_NAME } from 'config';
2019-08-27 16:43:42 +02:00
import React, { useState } from 'react';
import { FormField, Form } from 'component/common/form';
import Button from 'component/button';
import analytics from 'analytics';
import { EMAIL_REGEX } from 'constants/email';
2020-02-24 21:54:40 +01:00
import I18nMessage from 'component/i18nMessage';
import { useHistory } from 'react-router-dom';
import Card from 'component/common/card';
import ErrorText from 'component/common/error-text';
import Nag from 'component/common/nag';
2018-03-30 02:43:47 +02:00
type Props = {
errorMessage: ?string,
emailExists: boolean,
2018-03-30 02:43:47 +02:00
isPending: boolean,
syncEnabled: boolean,
setSync: boolean => void,
balance: number,
daemonSettings: { share_usage_data: boolean },
setShareDiagnosticData: boolean => void,
doSignUp: (string, ?string) => Promise<any>,
clearEmailEntry: () => void,
interestedInYoutubSync: boolean,
doToggleInterestedInYoutubeSync: () => void,
2018-03-30 02:43:47 +02:00
};
2019-08-27 16:43:42 +02:00
function UserEmailNew(props: Props) {
const {
errorMessage,
isPending,
doSignUp,
setSync,
daemonSettings,
setShareDiagnosticData,
clearEmailEntry,
emailExists,
interestedInYoutubSync,
doToggleInterestedInYoutubeSync,
} = props;
const { share_usage_data: shareUsageData } = daemonSettings;
const { push, location } = useHistory();
const urlParams = new URLSearchParams(location.search);
const emailFromUrl = urlParams.get('email');
const defaultEmail = emailFromUrl ? decodeURIComponent(emailFromUrl) : '';
const [email, setEmail] = useState(defaultEmail);
const [password, setPassword] = useState('');
const [localShareUsageData, setLocalShareUsageData] = React.useState(false);
2019-10-15 23:23:51 +02:00
const [formSyncEnabled, setFormSyncEnabled] = useState(true);
const valid = email.match(EMAIL_REGEX);
function handleUsageDataChange() {
2020-02-25 16:16:33 +01:00
setLocalShareUsageData(!localShareUsageData);
}
2019-08-27 16:43:42 +02:00
function handleSubmit() {
2019-10-15 23:23:51 +02:00
setSync(formSyncEnabled);
2020-02-24 21:47:27 +01:00
// @if TARGET='app'
setShareDiagnosticData(true);
2020-02-24 21:47:27 +01:00
// @endif
doSignUp(email, password === '' ? undefined : password).then(() => {
analytics.emailProvidedEvent();
});
}
function handleChangeToSignIn(additionalParams) {
clearEmailEntry();
let url = `/$/${PAGES.AUTH_SIGNIN}`;
const urlParams = new URLSearchParams(location.search);
urlParams.delete('email');
if (email) {
urlParams.set('email', encodeURIComponent(email));
}
urlParams.delete('email_exists');
if (emailExists) {
urlParams.set('email_exists', '1');
}
push(`${url}?${urlParams.toString()}`);
}
React.useEffect(() => {
if (emailExists) {
handleChangeToSignIn();
}
}, [emailExists]);
2019-08-27 16:43:42 +02:00
return (
<div className="main__sign-up">
<Card
2020-08-21 17:18:47 +02:00
title={__('Join %SITE_NAME%', { SITE_NAME })}
// @if TARGET='app'
subtitle={__('An account with lbry.tv allows you to earn rewards and backup your data.')}
// @endif
actions={
<div>
<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)}
/>
2019-10-15 23:23:51 +02:00
2020-10-09 18:15:59 +02:00
{/* @if TARGET='web' */}
<FormField
type="checkbox"
name="youtube_sync_checkbox"
label={__('Sync my YouTube channel')}
checked={interestedInYoutubSync}
onChange={() => doToggleInterestedInYoutubeSync()}
/>
2020-10-09 18:15:59 +02:00
{/* @endif */}
2020-10-09 18:15:59 +02:00
{/* @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">
2020-02-24 21:54:40 +01:00
<Button
button="primary"
type="submit"
2020-08-21 06:24:02 +02:00
label={__('Sign Up')}
disabled={
!email || !password || !valid || (!IS_WEB && !localShareUsageData && !shareUsageData) || isPending
}
2020-02-24 21:54:40 +01:00
/>
2020-08-24 19:59:37 +02:00
<Button button="link" onClick={handleChangeToSignIn} label={__('Log In')} />
</div>
2020-08-21 17:18:47 +02:00
<p className="help--card-actions">
<I18nMessage
tokens={{
2020-08-21 17:18:47 +02:00
terms: <Button button="link" href="https://www.lbry.com/termsofservice" label={__('terms')} />,
}}
>
2020-08-21 17:18:47 +02:00
By creating an account, you agree to our %terms% and confirm you're over the age of 13.
</I18nMessage>
</p>
</Form>
</div>
}
nag={errorMessage && <Nag type="error" relative message={<ErrorText>{errorMessage}</ErrorText>} />}
/>
</div>
2019-08-27 16:43:42 +02:00
);
}
2017-06-08 23:15:34 +02:00
export default UserEmailNew;