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

84 lines
2.5 KiB
React
Raw Normal View History

2018-03-30 02:43:47 +02:00
// @flow
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';
2019-03-13 20:17:17 +01:00
import { Lbryio } from 'lbryinc';
import analytics from 'analytics';
import { EMAIL_REGEX } from 'constants/email';
2018-03-30 02:43:47 +02:00
type Props = {
errorMessage: ?string,
isPending: boolean,
addUserEmail: string => void,
syncEnabled: boolean,
setSync: boolean => void,
balance: number,
2018-03-30 02:43:47 +02:00
};
2019-08-27 16:43:42 +02:00
function UserEmailNew(props: Props) {
const { errorMessage, isPending, addUserEmail, syncEnabled, setSync, balance } = props;
2019-08-27 16:43:42 +02:00
const [newEmail, setEmail] = useState('');
2019-09-26 18:07:11 +02:00
const valid = newEmail.match(EMAIL_REGEX);
2019-08-27 16:43:42 +02:00
function handleSubmit() {
addUserEmail(newEmail);
analytics.emailProvidedEvent();
2019-03-13 20:17:17 +01:00
// @if TARGET='web'
Lbryio.call('user_tag', 'edit', { add: 'lbrytv' });
// @endif
}
React.useEffect(() => {
2019-09-27 20:56:15 +02:00
// Sync currently doesn't work for wallets with balances
if (syncEnabled && balance) {
setSync(false);
}
}, [balance, syncEnabled, setSync]);
2019-08-27 16:43:42 +02:00
return (
2019-09-26 18:07:11 +02:00
<div>
<h1 className="section__title--large">{__('Welcome To LBRY')}</h1>
<p className="section__subtitle">{__('Create a new account or sign in.')}</p>
<Form onSubmit={handleSubmit} className="section__body">
<FormField
autoFocus
className="form-field--short"
placeholder={__('hotstuff_96@hotmail.com')}
type="email"
name="sign_up_email"
2019-09-26 18:07:11 +02:00
label={__('Email')}
value={newEmail}
error={errorMessage}
onChange={e => setEmail(e.target.value)}
/>
{!IS_WEB && (
2019-09-30 21:52:53 +02:00
<FormField
type="checkbox"
name="sync_checkbox"
label={__('Sync balance and preferences across devices')}
helper={
balance > 0 ? (
__('This feature is not yet available for wallets with balances, but the gerbils are working on it.')
) : (
<React.Fragment>
{__('Blockchain expert?')}{' '}
<Button button="link" href="https://lbry.com/faq/account-sync" label={__('Learn More')} />
</React.Fragment>
)
2019-09-30 21:52:53 +02:00
}
checked={syncEnabled}
onChange={() => setSync(!syncEnabled)}
disabled={balance > 0}
2019-09-30 21:52:53 +02:00
/>
)}
<div className="card__actions">
<Button button="primary" type="submit" label={__('Continue')} disabled={!newEmail || !valid || isPending} />
2019-09-26 18:07:11 +02:00
</div>
</Form>
</div>
2019-08-27 16:43:42 +02:00
);
}
2017-06-08 23:15:34 +02:00
export default UserEmailNew;